/* ================================================================ شَهمات — سیستمِ طراحی (نسخه‌ی «باشگاهِ شطرنجِ پرمیوم / عاجی-سبز») ---------------------------------------------------------------- پس‌زمینه‌ی گرمِ عاجی/کِرِم، لهجه‌ی سبزِ کدر/جنگلی به‌جای کهربایی، تخته‌ی سبز/کِرِم، شعاعِ گردیِ متعادل، و سایه‌های بسیار سبک. نام‌های متغیر عمداً دست‌نخورده مانده‌اند (--ink، --panel، --firuzeh، --r-sm و…) — چیزی که عوض شده فقط مقدارهاست، نه معماری. این یعنی هر قاعده‌ی دیگری در این فایل (و هر var() در app.js/board.js) بدونِ نیاز به تغییر خودش را با پوسته‌ی جدید هماهنگ می‌کند. حالتِ روشن اکنون طرحِ اصلی/پیش‌فرض است (تصویرِ مرجع روشن است)؛ حالتِ تیره همچنان از طریقِ سوییچِ تنظیمات در دسترس است، با همان زبانِ بصری. به‌روزرسانیِ بعدی: پالتِ حالتِ تیره (بلوکِ پایه‌ی :root، خط ۲۸ به بعد) با یک طرحِ «پرمیوم/مینیمال» جدید جایگزین شد — پس‌زمینه‌ی تقریباً مشکی (#0D0F12/#191D22)، لهجه‌ی کهربایی/طلاییِ کدر (#D6A85F) به‌جای طلاییِ روشنِ قبلی. حالتِ روشن و تمِ تخته دست‌نخورده ماندند. یک توکنِ تازه هم اضافه شد: --bg-secondary، مخصوصِ پس‌زمینه‌ی نوار/سایدبارِ ناوبری (یک پله تیره‌تر از --panel)؛ در حالتِ روشن برابرِ --panel تعریف شده تا ظاهرِ روشن هیچ تغییری نکند. ۱. توکن‌ها (روشن/تیره + تمِ تخته) ۶. صفحه‌ی بازی ۲. پایه و ریست ۷. پازل/درس/آموزش/مختصات ۳. پوسته: سربرگ، مقصدها، ناوبری ۸. تحلیل ۴. المان‌های پایه ۹. پروفایل ۵. تخته ۱۰. فهرست‌ها، شیت‌ها، گفت‌وگو ۱۱. سه اندازه‌ی صفحه توکن‌ها قانون‌اند، نه پیشنهاد: گردی فقط --r-* (شش پله + نقش‌های --r-btn/--r-card)، اندازه‌ی نوشته فقط --t-10 … --t-48 (سیزده پله)، رنگ از توکن‌های همین بخش. tools/check_tokens.py عددِ خام را رد می‌کند. (CHANGELOG-DESIGN-TOKENS.md) سه اندازه، نه بیشتر: گوشی <768 · تبلت 768–1099 · دسکتاپ ≥1100 هیچ منبعِ خارجی‌ای لود نمی‌شود: نه فونت، نه آیکون، نه تصویر. ================================================================ */ /* ================================================================ ۱. توکن‌ها ================================================================ */ :root { /* --- سطوح و متن (تیره — پالتِ پرمیوم/مینیمالِ جدید + لهجه‌ی کهربایی) --- */ --ink: #0D0F12; /* پس‌زمینه‌ی صفحه — تقریباً مشکی (primary) */ --panel: #191D22; /* کارت (surface) */ --raised: #20252B; /* ورودی، دکمه‌ی خنثی، سطحِ داخلِ کارت (elevated/hover) */ --line: #292F36; --text: #E8EAED; --muted: #9AA2AD; --faint: #68717C; /* --- ناحیه‌ی ثانویه: نوارِ ناوبری/سایدبار — یک پله تیره‌تر از --panel --- */ --bg-secondary: #13161A; /* --- رنگِ برند: کهربایی/طلاییِ کدر — لهجه، نه رنگِ غالب --- */ --firuzeh: #D6A85F; --firuzeh-dim: #E2B970; /* حالتِ hover — کهربایی روشن‌تر */ --on-accent: #0D0F12; /* متنِ روی رنگِ برند — تیره، چون کهربایی اینجا روشن است */ --accent-soft: rgba(214, 168, 95, 0.10); --saffron: #D98F4E; /* کهربایی/نارنجیِ ثانویه — برای تاکتیک/هشدار، عمداً از طلاییِ اصلی جداست (دست‌نخورده) */ --danger: #D66B6B; /* قرمزِ کدر */ --good: #65B889; /* برد — سبزِ کدر */ --live: #6E9FD1; /* وضعیتِ «زنده/آنلاین/اطلاع‌رسانی» — جدا از --good */ --live-soft: rgba(110, 159, 209, 0.14); /* نمودارِ روندِ ریتینگ (app.js این دو را درون‌خط صدا می‌زند) */ --violet: var(--firuzeh); --pf-bullet: #E0875A; --pf-blitz: #D6A85F; --pf-rapid: #65B889; --pf-classical: #7FA6E0; --pf-corr: #B297DB; --champagne: var(--saffron); /* رنگ‌های ثابت (مستقل از تم) که قبلاً چند بار به‌صورتِ hex خام تکرار شده بودند */ --on-photo: #fffdf9; /* متنِ روی عکس */ --on-photo-muted: #eae6d8; --eval-white: #ececec; /* نوار/نمودارِ ارزیابی: برتریِ سفید */ --eval-black: #2b2b2b; /* نوار/نمودارِ ارزیابی: برتریِ سیاه */ --pv2: #3b82c4; --pv3: #8e5bc4; --pv4: #1f9e8f; --pv5: #d9822b; /* خط‌های دوم تا پنجمِ موتور */ /* --- کیفیتِ حرکت: یک‌جا تعریف می‌شود تا نمودار، فهرست و نشان یکی بمانند --- شش‌تای brilliant/great/best/mistake/miss/blunder عمداً *مستقل از تمِ روشن/تیره* و یکسان در هر سه بلوکِ این فایل نگه داشته شده‌اند — درست مثلِ --sq-light/--sq-dark تخته: کاربر صریح خواسته دقیقاً همان رنگ‌های صفحه‌ی Game Review باشند، نه یک نسخه‌ی کم‌رنگ‌ترِ سازگار با تم. */ --c-blunder: #FA412D; --c-mistake: #FFA459; --c-miss: #FF7769; --c-inaccuracy: #D9C15A; --c-good: #7FB06F; --c-best: #81B64C; --c-great: #749AC1; --c-brilliant: #27C2A3; --c-book: #68717C; /* --- هاله‌ی دو خانه‌ی حرکت در تحلیل (board.js: _paintMarks) --- هم‌رنگِ نشانِ کیفیتِ حرکت، ولی توکنِ جدا و مستقل از تمِ روشن/تیره: تخته همیشه یک رنگ دارد، پس هاله هم باید روی آن یکسان بماند. اینجا رنگِ «کامل» است؛ شفافیتش را خودِ .mk.toned می‌دهد (مبدأ کم‌رنگ، مقصد پررنگ). */ --hl-brilliant: #27C2A3; --hl-great: #5F93C9; --hl-best: #81B64C; --hl-good: #8FB887; --hl-book: #B08D5E; --hl-inaccuracy: #E6B93A; --hl-mistake: #FF9A45; --hl-miss: #FF6A5A; --hl-blunder: #F5322A; /* --- دسته‌های صفحه‌ی یادگیری: هر دسته یک رنگِ تعریف‌شده، تا آیکون/کارت/نوارِ پیشرفتش همیشه هماهنگ بمانند --- */ --cat-checkmates: var(--danger); --cat-checkmates-soft: rgba(214, 107, 107, 0.16); --cat-tactics: var(--saffron); --cat-tactics-soft: rgba(217, 143, 78, 0.16); --cat-endgames: var(--good); --cat-endgames-soft: rgba(101, 184, 137, 0.16); --cat-openings: var(--firuzeh); --cat-openings-soft: var(--accent-soft); /* --- شکل و فاصله — شعاعِ متعادل، نه کپسولیِ اغراق‌شده --- */ /* گردیِ گوشه: شش پله، نه بیشتر. هر عدد px دیگری در این فایل به نزدیک‌ترینِ این‌ها گرد شده (tools/check_tokens.py جلوی برگشتنِ عددِ خام را می‌گیرد). */ --r-xs: 4px; /* نوار/برچسبِ خیلی کوچک، خانه‌ی رنگ */ --r-sm: 8px; /* دکمه‌ی کوچک، آیتمِ داخلِ کارت، تصویرِ بندانگشتی */ --r: 12px; /* دکمه، ورودی، سگمنت، ردیف */ --r-md: 16px; /* کارت */ --r-lg: 20px; /* کارتِ بزرگ/عکس‌دار، شیت */ --r-xl: 28px; /* هیرو */ --r-pill: 999px; /* فقط چیپ، نشان، نوارِ پیشرفت، سوییچ — نه دکمه */ /* نقش‌ها — برای عوض کردنِ شکلِ کلِ سایت فقط همین‌ها را دست بزن */ --r-btn: var(--r); --r-btn-sm: var(--r-sm); --r-card: var(--r-md); /* اندازه‌ی نوشته: فقط همین سیزده پله (قبلاً ۴۴ عددِ مختلف، بیشترشان نیم‌پیکسلی). همه ضربدر --fs (تنظیمِ اندازه‌ی نوشته). نقشِ معمولِ هر پله: 10 برچسبِ ریز/شمارنده · 11 متا، تاریخ · 12 متنِ ثانویه، دکمه‌ی کوچک · 13 متنِ کمکی، عنوانِ بخش 14 متنِ دکمه و ردیف · 15 بدنه، عنوانِ کارت · 16 عنوانِ صفحه · 18 و 20 عنوانِ بزرگ 24 و 30 عددِ برجسته (ریتینگ) · 40 و 48 ساعت/عددِ تمام‌صفحه */ --t-10: calc(10px * var(--fs, 1)); --t-11: calc(11px * var(--fs, 1)); --t-12: calc(12px * var(--fs, 1)); --t-13: calc(13px * var(--fs, 1)); --t-14: calc(14px * var(--fs, 1)); --t-15: calc(15px * var(--fs, 1)); --t-16: calc(16px * var(--fs, 1)); --t-18: calc(18px * var(--fs, 1)); --t-20: calc(20px * var(--fs, 1)); --t-24: calc(24px * var(--fs, 1)); --t-30: calc(30px * var(--fs, 1)); --t-40: calc(40px * var(--fs, 1)); --t-48: calc(48px * var(--fs, 1)); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --gutter: 16px; --content-w: 640px; /* --- سایه‌ها: مقدارِ sm/md عمداً دست‌نخورده مانده — همین دو روی تخته هم صدا زده می‌شوند (.board { box-shadow: var(--shadow-md) }) و کاربر صریح خواسته سایه/حاشیه‌ی تخته حتی یک پیکسل عوض نشود. --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(238, 241, 239, 0.03); --shadow-md: 0 8px 22px -6px rgba(0, 0, 0, 0.45), 0 2px 5px -1px rgba(0, 0, 0, 0.3); --shadow-glow-accent: 0 0 16px -3px rgba(214, 168, 95, 0.22); --fa: "Vazirmatn", "Shabnam", "IRANSansX", "IRANSans", system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif; /* فونتِ نمایشی — فقط برای واژه‌نگاشتِ لاتینِ برند (نسخه‌ی انگلیسی)، نه برای متنِ فارسی: حروفِ فارسی در این فونت‌ها موجود نیستند و اگر روی متنِ فارسی اعمال شود، مرورگر به یک سریفِ پیش‌فرضِ ناهماهنگ برمی‌گردد. استیچ برای فارسی «Dana»/«Newsreader» پیشنهاد داده، ولی چون این فونت‌ها این‌جا self-host نشده‌اند (و پروژه هیچ منبعِ خارجی لود نمی‌کند)، حسِ «سرلوحِ ادیتوریال» با وزنِ سنگین‌ترِ همان Vazirmatn شبیه‌سازی می‌شود — نه یک فونتِ متفاوت. نگاه کن به headline-fa زیر. */ --font-display: "Newsreader", "Bodoni Moda", Georgia, serif; --font-headline-fa: "Vazirmatn", "Shabnam", system-ui, sans-serif; /* همان --fa، برای تأکید صریح */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* مقدارِ پیش‌فرض/آبشاری: تا وقتی app.js اجرا نشده همین 100dvh مرورگر استفاده می‌شود. به‌محضِ اجرا، app.js این متغیر را با اندازه‌ی واقعیِ visualViewport (به پیکسل) بازنویسی می‌کند — چون خودِ 100dvh مرورگر دقیقاً همان لحظه‌ای که صفحه غیرقابل‌اسکرول می‌شود (صفحاتِ immersive) می‌تواند در حالتِ گذرای نوار آدرس قفل بماند. */ --app-100dvh: 100dvh; /* --- تخته: رنگِ ثابت، مستقل از روشن/تیره‌بودنِ ظاهرِ برنامه --- قبلاً با تغییرِ appearance بین این پالت و پالتِ روشن سوییچ می‌کرد؛ کاربر صریح خواست تخته ربطی به تمِ سایت نداشته باشد — پس همین یک پالت (هم‌رنگ با پیش‌نمایشِ «firuzeh» در سوییچرِ تمِ تخته) همیشه است، چه appearance روشن باشد چه تیره چه خودکار. تم‌های اختیاریِ تخته (.theme-wood/-blue/-night پایین‌تر) همچنان جدا و روی خودشان کار می‌کنند. */ --sq-light: #eee9da; --sq-dark: #7c9473; /* حرکت آخر: زردِ گرمِ کم‌رنگ. قبلاً سبزِ کم‌رنگ بود روی خانه‌ی تیره‌ی سبز (#7c9473) — اختلافِ رنگِ ادراکی (ΔE2000) فقط ≈۳٫۷ بود، یعنی روی خانه‌ی تیره عملاً دیده نمی‌شد. حالا روی هر دو خانه ≈۱۳–۱۵ است: واضح، نه تند. انتخاب (--hl-sel) سبز می‌ماند تا با حرکت آخر قاطی نشود (قبلاً هر دو سبز بودند). */ --hl-last: rgba(250, 212, 84, 0.40); --hl-sel: rgba(75, 124, 89, 0.38); --hint-ink: rgba(36, 39, 31, 0.28); --hint-ink-d: rgba(36, 39, 31, 0.44); --coord-l: var(--sq-dark); --coord-d: var(--sq-light); /* سبک کلاسیک: پرکنندگی تخت، خط دور تیره، جزئیات داخلی به رنگ مخالف — این‌ها رنگِ خودِ مهره‌اند، بخشی از هویتِ برند نیستند، دست‌نخورده می‌مانند */ --pw-fill: #ffffff; --pw-stroke: #16171a; --pw-detail: #16171a; --pb-fill: #1d1e20; --pb-stroke: #000000; /* خط دورِ مهره‌های سیاهِ خورده‌شده (زیرِ تخته) — فقط در حالتِ تیره سفید است تا روی پس‌زمینه‌ی تیره گم نشوند؛ در حالتِ روشن شفاف است (ظاهرِ قبلی). */ --taken-b-halo: #ffffff; --pb-detail: #ffffff; color-scheme: dark; } /* ---------------------------------------------------------------- روشن فقط توکن‌ها عوض می‌شوند، نه هیچ قاعده‌ی چیدمانی. هر رنگی که در ادامه‌ی فایل نوشته می‌شود باید از همین توکن‌ها بیاید — وگرنه حالتِ روشن جا می‌ماند. */ :root[data-appearance="light"] { --ink: #EEF1EF; --panel: #FFFFFF; --raised: #E7E9E9; --line: #E0E1E1; --text: #1A2126; --muted: #5D6F6E; --faint: #96A6A5; --bg-secondary: var(--panel); /* حالتِ روشن تغییری نکرده — سایدبار همان رنگِ کارت می‌ماند */ --firuzeh: #8D5F0C; --pf-bullet: #B8522A; --pf-blitz: #8D5F0C; --pf-rapid: #3E8A62; --pf-classical: #3B6FB8; --pf-corr: #7A55B0; --firuzeh-dim: #764F07; --on-accent: #ffffff; --accent-soft: rgba(141, 95, 12, 0.12); --saffron: #B06726; --danger: #AE3629; --good: #4C8A66; --live: #41968B; --live-soft: rgba(65, 150, 139, 0.12); /* c-blunder/mistake/miss/best/great/brilliant عمداً اینجا بازتعریف نمی‌شوند — مستقلِ از تم‌اند، نگاه کن به توضیحِ کنارِ تعریفِ اصلی‌شان در :root. */ --c-inaccuracy: #AE9528; --c-good: #5B8A4C; --c-book: #96A6A5; --cat-checkmates-soft: rgba(174, 54, 41, 0.13); --cat-tactics-soft: rgba(176, 103, 38, 0.14); --cat-endgames-soft: rgba(76, 138, 102, 0.14); --shadow-sm: 0 1px 2px rgba(26, 33, 38, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); --shadow-md: 0 10px 24px -8px rgba(26, 33, 38, 0.12), 0 2px 5px -1px rgba(26, 33, 38, 0.06); --shadow-glow-accent: 0 0 16px -4px rgba(141, 95, 12, 0.18); --taken-b-halo: transparent; color-scheme: light; } /* «خودکار» = هیچ data-appearance ای روی نیست، پس تصمیم با دستگاه است. همان توکن‌های روشنِ بالا، فقط با شرطِ رسانه. */ @media (prefers-color-scheme: light) { :root:not([data-appearance="dark"]):not([data-appearance="light"]) { --ink: #EEF1EF; --panel: #FFFFFF; --raised: #E7E9E9; --line: #E0E1E1; --text: #1A2126; --muted: #5D6F6E; --faint: #96A6A5; --bg-secondary: var(--panel); --firuzeh: #8D5F0C; --pf-bullet: #B8522A; --pf-blitz: #8D5F0C; --pf-rapid: #3E8A62; --pf-classical: #3B6FB8; --pf-corr: #7A55B0; --firuzeh-dim: #764F07; --on-accent: #ffffff; --accent-soft: rgba(141, 95, 12, 0.12); --saffron: #B06726; --danger: #AE3629; --good: #4C8A66; --live: #41968B; --live-soft: rgba(65, 150, 139, 0.12); /* c-blunder/mistake/miss/best/great/brilliant عمداً اینجا بازتعریف نمی‌شوند — مستقلِ از تم‌اند، نگاه کن به :root. */ --c-inaccuracy: #AE9528; --c-good: #5B8A4C; --c-book: #96A6A5; --cat-checkmates-soft: rgba(174, 54, 41, 0.13); --cat-tactics-soft: rgba(176, 103, 38, 0.14); --cat-endgames-soft: rgba(76, 138, 102, 0.14); --shadow-sm: 0 1px 2px rgba(26, 33, 38, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); --shadow-md: 0 10px 24px -8px rgba(26, 33, 38, 0.12), 0 2px 5px -1px rgba(26, 33, 38, 0.06); --shadow-glow-accent: 0 0 16px -4px rgba(141, 95, 12, 0.18); --taken-b-halo: transparent; color-scheme: light; } } /* ---------------------------------------------------------- تمِ تخته کلاسِ تکی روی body (نگاه کن به applySettings در app.js). فقط رنگِ خانه‌ها را عوض می‌کند، نه ظاهرِ برنامه را. این سه تمِ اختیاری همان‌طور که بودند می‌مانند — تمِ پیش‌فرضِ جدید (دودی/زغالی) در بالا تعریف شد. */ .theme-wood { --sq-light: #f0d9b5; --sq-dark: #b58863; --hint-ink: rgba(60, 34, 18, 0.30); --hint-ink-d: rgba(52, 26, 10, 0.46); } .theme-blue { --sq-light: #e9eef7; --sq-dark: #b3c3da; --hint-ink: rgba(30, 48, 78, 0.28); --hint-ink-d: rgba(30, 48, 78, 0.34); --hl-last: rgba(246, 212, 84, 0.55); --hl-sel: rgba(112, 196, 132, 0.5); --coord-l: #93a7c6; --coord-d: #f2f6fc; } .theme-night { --sq-light: #b7c1d1; --sq-dark: #3d4a63; --hint-ink: rgba(14, 18, 30, 0.32); --hint-ink-d: rgba(226, 236, 255, 0.32); } .theme-gray { --sq-light: #ffffff; --sq-dark: #7c7c7c; --hl-last: rgba(250, 212, 84, 0.30); --coord-l: #7c7c7c; --coord-d: #ffffff; } /* طلایی: خانه‌ی روشن #C6A15B، خانه‌ی تیره #55504A (خاکستریِ گرم) */ .theme-gold { --sq-light: #c6a15b; --sq-dark: #55504a; /* خانه‌ی روشنِ این تم خودش طلایی است و زرد رویش گم می‌شد (ΔE≈۶). آبیِ خاکستریِ خنک هم دیده می‌شود هم با سبزِ انتخاب (--hl-sel) قاطی نمی‌شود. */ --hl-last: rgba(150, 205, 240, 0.36); --hl-sel: rgba(112, 190, 140, 0.50); --hint-ink: rgba(40, 32, 18, 0.30); --hint-ink-d: rgba(240, 226, 190, 0.36); --coord-l: #55504a; --coord-d: #c6a15b; } /* ================================================================ ۲. پایه ================================================================ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } /* فوترِ سایت همیشه ته‌ی صفحه بماند، حتی وقتی محتوا کم است: بدنه ستونِ flex است، محتوای اصلی همه‌ی فضای خالی را می‌گیرد و فوتر به لبه‌ی پایین می‌چسبد (روی هر صفحه‌ای؛ صفحه‌های immersive فوتر ندارند). */ body { display: flex; flex-direction: column; } body > #appShell { flex: 1 0 auto; width: 100%; } body > .site-footer { flex: 0 0 auto; margin-top: auto; width: 100%; } body { background: var(--ink); color: var(--text); font-family: var(--fa); font-size: var(--t-15); line-height: 1.7; overflow-x: hidden; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } input, select, textarea { font: inherit; } h1, h2, h3 { line-height: 1.35; } .hidden { display: none !important; } /* حلقه‌ی فوکوس فقط برای کیبورد — لمس نباید حلقه بگذارد. */ :focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 2px; } /* ================================================================ ۳. پوسته ================================================================ */ .wrap { max-width: var(--content-w); margin: 0 auto; /* سربرگ حالا روی موبایل/تبلت position:fixed است (نگاه کن به قانونِ header پایین‌تر) و دیگر جایی در جریانِ عادی نمی‌گیرد، پس این پدینگِ بالا جایش را جبران می‌کند. روی دسکتاپ که سربرگ sticky است (خودش جا می‌گیرد) این مقدار در رسانه‌ی دسکتاپ به حالتِ قبل برمی‌گردد. */ padding: calc(52px + env(safe-area-inset-top, 0px) + var(--s3)) var(--gutter) var(--s5); } /* وقتی نوار پایین باز است، محتوا نباید زیرش پنهان شود */ body.has-bottom-nav .wrap { padding-bottom: var(--s4); } /* اگر فوتر پنهان است (اطلاعاتِ سایت نیامده) خودِ محتوا باید جای نوار را کنار بگذارد */ body.has-bottom-nav:has(#siteFooter.hidden) .wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* وقتی دکمه‌ی شناورِ «بازی» هم روی صفحه است (فقط صفحه‌ی خانه)، محتوا باید جای بیشتری برای آن هم کنار بگذارد — وگرنه ته‌ِ کارتِ گفت‌وگوی عمومی درست زیرِ این دکمه‌ی شناور گیر می‌افتد. ارتفاعِ دکمه (~44px) + فاصله‌اش تا نوار (var(--s3)) + یک نفسِ کوچک اضافه (var(--s4)). */ body.has-play-fab .wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 44px + var(--s3) + var(--s4)); } /* ---------------------------------------------------------------- سربرگ */ /* بالاتر از پنلِ چت (z-index:45) می‌ماند — وگرنه بک‌دراپِ تمام‌صفحه‌ی چت جلوی فلش بازگشت و تنظیمات را می‌گرفت و راهی برای خروج از بازی، حین باز بودنِ چت، نمی‌ماند. روی موبایل/تبلت واقعاً position:fixed است (نه صرفاً «ثابت‌مانده چون صفحه اسکرول نمی‌شود») — قبلاً روی صفحه‌های غوطه‌ور (بازی/پازل/درس) به قفل‌شدنِ overflow روی body تکیه می‌کرد تا خودش جابه‌جا نشود، ولی این قفل همه‌جا/همیشه قابل‌اعتماد نیست (وب‌ویوهای مختلف/مرورگرهای داخلِ اپ) و سربرگ همراهِ محتوا پایین می‌رفت. فیکس‌بودنِ واقعی این وابستگی را کاملاً حذف می‌کند. */ header { position: fixed; top: 0; inset-inline: 0; z-index: 46; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: calc(52px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-inline: var(--gutter); background: var(--panel); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-16); } /* لوگوی تصویری: یک نشانِ واحد (شاه + اسب) برای هر دو زبان — دیگر نسخه‌ی جدا برای فارسی/انگلیسی نداریم. پس‌زمینه‌اش شفاف است، پس روی تمِ روشن و تیره کار می‌کند. خودش کلیک‌پذیر است (میان‌برِ صفحه‌ی اصلی، نگاه کن به listenerِ brandText در app.js). */ .brand-logo-wrap { display: inline-flex; align-items: center; cursor: pointer; } .brand-logo { display: block; height: 36px; width: auto; } /* دو نسخه‌ی لوگو: تیره (نقره‌ای) و روشن (اسبِ مشکی). همان منطقِ تم‌ها که بالاتر در :root آمده — data-appearance="light"، یا «خودکار» + prefers-color-scheme: light. */ .brand-logo-light { display: none; } :root[data-appearance="light"] .brand-logo-dark { display: none; } :root[data-appearance="light"] .brand-logo-light { display: block; } @media (prefers-color-scheme: light) { :root:not([data-appearance="dark"]):not([data-appearance="light"]) .brand-logo-dark { display: none; } :root:not([data-appearance="dark"]):not([data-appearance="light"]) .brand-logo-light { display: block; } } /* لوگو همیشه سمتِ راستِ سربرگ، آیکون‌ها سمتِ چپ — در فارسی و انگلیسی یکسان. در انگلیسی (ltr) ترتیبِ دو بلوکِ سربرگ برعکس می‌شود. */ html[dir="ltr"] header { flex-direction: row-reverse; } /* الان لوگو کنارِ دکمه‌ی برگشت هم می‌ماند (نه فقط جایگزینش) — این position:relative برای همان جهشِ عرضِ قدیمی لازم بود که دیگر وجود ندارد، ولی برای موقعیت‌دهیِ باقیِ محتوای سربرگ همچنان نگه داشته شده. */ #brandBox { position: relative; } #btnBack svg { transform: scaleX(-1); } /* در نوشتار راست‌به‌چپ، «عقب» یعنی راست */ /* فارسی و انگلیسی یکسان: از چپ به راست «تنظیمات، پروفایل+استریک، پاکت، زنگوله» (لوگو سمتِ راست است). direction:ltr ثابت است تا ترتیبِ دیداری همان ترتیبِ DOM باشد. */ .hdr-right { display: flex; align-items: center; gap: var(--s1); direction: ltr; } .who { font-size: var(--t-12); color: var(--muted); text-align: start; line-height: 1.3; unicode-bidi: plaintext; } /* direction:ltr → ترتیبِ فیزیکیِ «آواتار، استریک، نام» از چپ به راست در هر دو زبان (در فارسی بدونِ این، استریک چپِ آواتار می‌افتاد). نامِ کاربر با unicode-bidi:plaintext جهتِ خودش را دارد. */ .who-btn { display: flex; align-items: center; gap: var(--s2); padding: 3px; border-radius: var(--r-pill); direction: ltr; } .who-btn:hover { background: var(--panel); } .who b { display: block; color: var(--text); font-variant-numeric: tabular-nums; font-size: var(--t-14); font-weight: 700; } .ava.sm { width: 26px; height: 26px; border-radius: var(--r-sm); font-size: calc(11px * var(--fs, 1)); } /* آواتارِ سربرگ: بزرگ‌تر از .ava.sm معمولی. اندازه‌اش با ارتفاعِ سربرگ (۵۲/۶۰/۷۲) جور است: دور تا دورش حدودِ ۸px جا می‌ماند، پس به لبه‌ی سربرگ نمی‌چسبد و هم‌قدِ دکمه‌های ۳۶pxی است. */ .who-btn .ava.sm { width: 36px; height: 36px; border-radius: 28%; font-size: calc(14px * var(--fs, 1)); } .icon-btn { /* flex-shrink صفر: بدون این، وقتی سربرگ روی گوشیِ باریک شلوغ می‌شود مرورگر دکمه‌ها را تا زیرِ ۳۰ پیکسل جمع می‌کند — هم نامنظم می‌شوند هم از حداقلِ اندازه‌ی لمسی می‌افتند. */ flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; background: transparent; border: 1px solid transparent; font-size: calc(16px * var(--fs, 1)); color: var(--muted); position: relative; /* .badge-dot به همین تکیه می‌کند */ transition: background 0.12s, color 0.12s; } .icon-btn:hover { background: var(--panel); color: var(--text); } .icon-btn svg { width: 18px; height: 18px; } .badge-dot { position: absolute; inset-inline-end: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--ink); } .badge-count { position: absolute; inset-inline-end: 1px; top: 1px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--r-pill); background: var(--danger); border: 2px solid var(--ink); color: #fff; font-size: var(--t-10); font-weight: 700; line-height: 12px; display: flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------- نوارِ ناوبری */ #bottomNav { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; max-width: 560px; margin: 0 auto; background: var(--bg-secondary); border-top: 1px solid var(--line); padding: var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-md); } .bn-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: var(--r); color: var(--muted); min-width: 0; transition: color 0.12s; } .bn-tab .ic { width: auto; height: auto; background: none; border: 0; display: block; } .bn-tab .ic svg { width: 21px; height: 21px; display: block; } .bn-tab .lbl { font-size: var(--t-10); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-tab.active { color: var(--firuzeh); } .bn-tab:active { background: var(--raised); } .bn-tab-desktop { display: none; } /* فقط دسکتاپ — نگاه کن به CSS دسکتاپ */ .bn-tab-mobile-play { display: none; } /* فقط موبایل — نگاه کن به بخشِ ۱۱ (گوشیِ باریک) */ /* دکمه‌ی «منو» هنوز در یک div (.nav-menu-wrap) است تا روی دسکتاپ با margin-top:auto از بقیه‌ی ردیف‌ها جدا بماند؛ پس خودِ wrap باید مثلِ بقیه‌ی .bn-tabها flex:1 بگیرد، وگرنه ردیفِ نوار نامتقارن می‌شود. */ .nav-menu-wrap { display: flex; flex: 1; min-width: 0; } /* ------------------------------------------------------------- بخش‌بندی هر مقصد از چند «بخش» ساخته می‌شود: یک عنوانِ کوچکِ خارج از کارت، و بعد کارت‌ها یا ردیف‌های ناوبری. همین یک الگو جای بنتوی قبلی را می‌گیرد. */ .sec { margin-bottom: var(--s5); } .sec:last-child { margin-bottom: 0; } .sec-title { margin: 0 0 var(--s3); font-size: var(--t-13); font-weight: 700; color: var(--muted); letter-spacing: 0.02em; } .sec-sub { margin: -8px 0 var(--s3); font-size: var(--t-13); color: var(--muted); } /* ================================================================ ۴. المان‌های پایه ================================================================ */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow-sm); } .card:last-child { margin-bottom: 0; } .card h2 { margin: 0 0 var(--s3); font-size: var(--t-15); font-weight: 700; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); } .card-head h2 { margin: 0; } .hint-text { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-13); unicode-bidi: plaintext; } /* سرتیترِ روز در تقویمِ مهلت‌های مکاتبه‌ای */ .cal-day-head { font-size: var(--t-11); font-weight: 700; color: var(--muted); padding: var(--s2) 0 4px; unicode-bidi: plaintext; } .cal-day-head:not(:first-child) { border-top: 1px solid var(--line); margin-top: var(--s2); } .hint-text:last-child { margin-bottom: 0; } /* --------------------------------------------------------------- دکمه‌ها */ .btn { display: block; width: 100%; padding: 11px var(--s4); border-radius: var(--r-btn); background: var(--raised); border: 1px solid var(--line); font-weight: 700; font-size: var(--t-14); text-align: center; transition: background 0.12s, border-color 0.12s, transform 0.06s; } .btn + .btn, .btn + .row, .row + .btn { margin-top: var(--s2); } .btn:hover { border-color: var(--muted); } .btn:active { transform: scale(0.985); } .btn.primary { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; box-shadow: var(--shadow-sm); } .btn.primary:hover { background: var(--firuzeh-dim); border-color: transparent; color: var(--on-accent); } /* دکمه‌ی اصلیِ یک صفحه — بلندتر، تا در یک نگاه پیدا شود */ .btn.lg { padding: 14px var(--s4); font-size: var(--t-15); } .btn.sm { padding: 6px var(--s3); font-size: var(--t-12); border-radius: var(--r-btn-sm); width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn.warn { color: var(--danger); border-color: transparent; background: transparent; } .btn.warn:hover { background: var(--raised); border-color: var(--danger); } .btn.ghost { background: transparent; } .btn.ghost:hover { background: var(--raised); } .btn:disabled { opacity: 0.4; cursor: default; } .btn.sm svg { width: 13px; height: 13px; } .link-cta { color: var(--firuzeh); font-size: var(--t-13); font-weight: 600; padding: 6px var(--s1); white-space: nowrap; } .row { display: flex; gap: var(--s2); } .row > * { flex: 1; } .row.tight { margin-top: var(--s2); } /* دکمه‌های پخشِ تحلیل (اول/عقب/جلو/آخر) باید صرف‌نظر از زبانِ رابط همیشه با همان ترتیبِ استاندارد (⏮ ◀ ▶ ⏭) دیده شوند — مثل ساعت و نماد حرکت، جهتشان قراردادی است نه زبانی، پس LTR ثابت می‌مانند. */ .an-controls { direction: ltr; } /* ------------------------------------------------------ ردیفِ ناوبری الگویِ اصلیِ «لایه‌لایه بودن»: چیزی که یک قدم دورتر است، نه یک کارتِ باز روی همین صفحه، بلکه یک ردیفِ یک‌خطی است که به صفحه‌ی خودش می‌رود. */ .nav-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .nav-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); text-align: start; border-bottom: 1px solid var(--line); transition: background 0.12s; } .nav-row:last-child { border-bottom: 0; } /* ردیفِ غیرفعال برای مهمان — کلیک هنوز کار می‌کند (گیتِ «این برای اعضاست» را باز می‌کند)، فقط ظاهرش می‌گوید فعلاً در دسترس نیست. */ .nav-row.is-locked { opacity: .5; } .nav-row.is-locked:hover, .nav-row.is-locked:active { background: transparent; } .nav-row:hover { background: var(--raised); } .nav-row:active { background: var(--raised); } .nr-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); } .nr-ic svg { width: 17px; height: 17px; } .nr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .nr-title { font-weight: 600; font-size: var(--t-14); } .nr-sub { font-size: var(--t-12); color: var(--muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nr-chev { flex: 0 0 auto; color: var(--muted); display: grid; place-items: center; } .nr-chev svg { width: 15px; height: 15px; } /* در راست‌به‌چپ، «جلو» یعنی چپ — آیکونِ chevron رو به چپ رسم شده، پس در حالتِ چپ‌به‌راست باید آینه شود. */ :root[dir="ltr"] .nr-chev svg, html[dir="ltr"] .nr-chev svg { transform: scaleX(-1); } /* ================================================================ بازطراحیِ صفحه‌ی خانه — هیرو، اقدام‌های سریع، نوارِ دوستان، پوسترها، دکمه‌ی شناورِ بازی. همه بدونِ هیچ عکس یا فونتِ خارجی: گرادیان‌های CSS و همان آیکون‌های SVGِ درون‌خطِ پروژه. ================================================================ */ /* ---------------------------------------------------------- نوارِ دوستان */ #friendsList.friend-strip { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px 2px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #friendsList.friend-strip::-webkit-scrollbar { display: none; } #friendsList.friend-strip .friend-row { flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: var(--s2) 2px; border-radius: var(--r-sm); } #friendsList.friend-strip .friend-row:hover { background: var(--raised); } #friendsList.friend-strip .ava.sm { width: 42px; height: 42px; font-size: calc(15px * var(--fs, 1)); } #friendsList.friend-strip .fr-info { display: flex; flex-direction: column; align-items: center; gap: 1px; } #friendsList.friend-strip .fr-name { font-size: var(--t-12); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #friendsList.friend-strip .fr-meta { font-size: var(--t-10); } #friendsList.friend-strip .dot { margin-top: 1px; } /* ------------------------------------------------------------- هیرو */ /* هیروی عکسی: مثلِ بقیه‌ی کارت‌های عکسیِ سایت — بدونِ کراپِ CSS، بدونِ لایه‌ی تیره‌ی پشتِ نوشته (فقط سایه‌ی متن). نوشته+دکمه روی نیمه‌ی خالیِ خودِ عکس می‌نشینند؛ عمداً «راستِ فیزیکی» (نه inset-inline-*) چون آن نیمه‌ی خالی نقطه‌ای ثابت روی خودِ تصویر است، نه وابسته به جهتِ صفحه — همان دلیلِ card-title-chip بالاتر در همین فایل. */ .home-hero-photo { overflow: hidden; position: relative; } .home-hero-photo-body { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; display: flex; flex-direction: column; justify-content: center; gap: var(--s2); padding: var(--s4); } .home-hero-quote { margin: 0; width: 100%; box-sizing: border-box; font-size: var(--t-14); font-weight: 700; line-height: 1.5; text-align: start; color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } /* دکمه پایه‌اش width:100% است (.btn) — این‌جا باید عرضِ طبیعیِ خودش را بگیرد وگرنه کلِ نیمه‌ی عکس را می‌پوشاند (باگی که رویِ گوشی خیلی به‌چشم می‌آمد). align-self هم بی‌اثر بود چون width صریح روی .btn برنده می‌شد. */ .home-hero-photo-body .btn { width: auto; align-self: flex-start; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* روی موبایل عکس کوتاه‌تر می‌نشیند (عرضِ تمامِ صفحه، نسبتِ ابعادِ پهن)، پس نوشته/دکمه جمع‌وجورتر می‌شوند تا توی همون نیمه‌ی خالی جا شوند. */ @media (max-width: 767px) { .home-hero-quote { font-size: var(--t-12); line-height: 1.45; } .home-hero-photo-body { padding: var(--s3); gap: 6px; } .home-hero-photo-body .btn { padding: 7px var(--s3); font-size: var(--t-12); } } /* ------------------------------------------------ نوارِ افقیِ ریتینگ‌ها */ /* جایگزینِ کارتِ پروفایلِ برداشته‌شده: همان زبانِ بصریِ speed-card (پروفایل) را وام می‌گیرد، فقط توی یک ردیفِ اسکرول‌پذیرِ افقی به‌جای گریدِ ثابت — روی گوشی جا نمی‌شود همه‌شان کنار هم، پس با انگشت رد می‌شوند. */ .hss-row { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hss-row::-webkit-scrollbar { display: none; } .hss-card { flex: 0 0 92px; } .hss-card.skel { min-height: 84px; opacity: 0.5; } /* ------------------------------------------------------- اقدام‌های سریع */ .qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); } .qa-card { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 4px; width: 100%; min-height: 92px; } .qa-ic { width: 32px; height: 32px; border-radius: var(--r-sm); flex: 0 0 auto; display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); margin-bottom: 2px; } .qa-ic svg { width: 16px; height: 16px; } .qa-title { font-weight: 700; font-size: var(--t-13); } .qa-sub { font-size: var(--t-11); color: var(--muted); line-height: 1.5; } .qa-card-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: 2px; } .qa-card-head .qa-ic { margin-bottom: 0; } .qa-card-head .qa-title { font-size: var(--t-13); } .qa-list-card { min-height: auto; grid-column: 1 / -1; } .qa-list-card .grow, .qa-list-card .friend-row { font-size: var(--t-12); } .qa-list-card .grow { padding: var(--s2) 0; } /* ------------------------------------------------- بازی‌های اخیر + کناری */ .home-lower-grid { display: flex; flex-direction: column; gap: var(--s4); } .home-side { display: flex; flex-direction: column; gap: var(--s3); } /* کارتِ جمله‌ی قصار: یک دکمه است (لمس = جمله‌ی بعدی) ولی مثل کارتِ ساده دیده می‌شود. متن با محوشدن عوض می‌شود؛ ارتفاعِ کارت فقط بزرگ می‌شود (نه کوچک) تا صفحه‌ی زیرش با هر جمله بالا و پایین نپرد. */ .home-quote-card { display: block; width: 100%; text-align: start; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; } .home-quote-card:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 2px; } .home-quote-body { display: flex; flex-direction: column; gap: var(--s2); transition: opacity 0.22s ease, transform 0.22s ease; } .home-quote-body.is-out { opacity: 0; transform: translateY(4px); } .sec-title.sm { font-size: var(--t-13); margin: 0 0 2px; } /* بنرِ تورنمنت — همون زبانِ بصریِ هیروی خانه (بدونِ کراپِ CSS، بدونِ لایه‌ی تیره، فقط سایه‌ی متن)، این‌بار نوشته روی نیمه‌ی چپِ خودِ عکس می‌نشیند چون گوشه‌ی خالیِ همین عکس آن‌جاست (فیزیکی left، به همون دلیلِ قبلی — نه inset-inline-*). یک دکمه است، نه فقط کارت: کلیکش openTournaments را صدا می‌زند. */ .home-tour-banner { display: block; width: 100%; text-align: start; overflow: hidden; position: relative; } .home-tour-banner-body { position: absolute; top: 0; bottom: 0; left: 0; width: 56%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--s3); } .home-tour-banner-title { margin: 0; width: 100%; box-sizing: border-box; font-size: var(--t-13); font-weight: 800; line-height: 1.4; text-align: start; color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } .home-tour-banner-sub { margin: 0; width: 100%; box-sizing: border-box; font-size: var(--t-11); font-weight: 600; line-height: 1.4; text-align: start; color: rgba(255, 253, 249, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .home-ach-card { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; } .home-ach-card .qa-ic { margin-bottom: 0; } .ach-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ach-info b { font-size: var(--t-13); font-weight: 700; } .wl-bar.sm { height: 5px; } .wl-bar.sm .w { background: var(--firuzeh); } .home-quote { display: block; font-size: var(--t-13); line-height: 1.7; margin: 0; color: var(--text); font-style: italic; } .home-quote-by { display: block; font-size: var(--t-11); color: var(--muted); } @media (prefers-reduced-motion: reduce) { .home-quote-body { transition: none; } } /* ---------------------------------------------------------- سرِ دوستان */ .friends-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); } .friends-head .sec-title { margin-bottom: 0; } /* -------------------------------------------------------- شیتِ شروعِ بازی دقیقاً همان الگوی .chat-panel — بک‌دراپ + شیتِ پایین‌چسب با انیمیشنِ rise. */ .play-panel { position: fixed; inset: 0; z-index: 45; } .play-backdrop { position: absolute; inset: 0; background: rgba(18, 16, 14, 0.55); } .play-sheet { position: absolute; inset-inline: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 86vh; overflow-y: auto; background: var(--panel); border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid var(--line); border-bottom: 0; animation: rise 0.16s ease-out; padding: 0 var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); } .play-sheet-head { position: sticky; top: 0; background: var(--panel); display: flex; align-items: center; justify-content: space-between; padding: var(--s4) 0 var(--s3); font-weight: 700; font-size: var(--t-15); } /* --------------------------------------------------- دکمه‌ی شناورِ بازی */ /* مثلِ اپِ سایت‌های شطرنجِ مطرح: یک دکمه‌ی گوشه‌نشین (گوشه‌ی پایین‌سمتِ‌راستِ صفحه — inset-inline-start چون این اپ راست‌به‌چپ است) که رویِ صفحه‌ی خانه همیشه می‌ماند و با اسکرولِ معمولی محو نمی‌شود — فقط وقتی کاربر دقیقاً می‌رسد به کارتِ گفت‌وگوی عمومی محو می‌شود تا حینِ تایپ دستش اشتباهی بهش نخورد (نگاه کن به fabFadeObserver در app.js؛ کلاسِ .faded پایین‌تر). روی گوشی/تبلت بالایِ نوارِ پایین می‌نشیند (bottom بر همون ۷۲px حساب شده)؛ روی دسکتاپ (سایدبارِ عمودی) در رسانه‌ی ۱۱۰۰px+ پایین‌تر همین فایل بازتنظیم می‌شود تا زیرِ سایدبار نرود. */ .play-fab { position: fixed; z-index: 41; inset-inline-start: var(--s4); width: max-content; bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--s3)); display: flex; align-items: center; gap: var(--s2); padding: 12px 22px; border-radius: var(--r-pill); background: var(--firuzeh); color: var(--on-accent); font-weight: 700; font-size: var(--t-14); box-shadow: 0 6px 18px rgba(18, 16, 14, 0.32); transition: transform 0.15s ease, opacity 0.2s ease; } .play-fab:active { transform: scale(0.96); } .play-fab.faded { opacity: 0; pointer-events: none; } .play-fab svg { width: 17px; height: 17px; } /* ------------------------------------------------------------- ورودی‌ها */ label.field { display: block; margin-bottom: var(--s3); font-size: var(--t-13); color: var(--muted); } label.field .opt { color: var(--muted); font-weight: 400; } /* ردیفِ برچسب+کنترل — کنارِ هم به‌جای زیرِ هم، چون کنترل‌های کوچک (چک‌باکس، سگمنت) بلوکِ جداگانه فضایِ خالیِ اضافه می‌سازند. */ .field-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); font-size: var(--t-13); } .field-row input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; } .field-row > .lbl { flex: 0 0 auto; color: var(--muted); } .field-row > .seg { flex: 1; margin: 0; } select, input[type=text], input[type=password], input[type=number], textarea { width: 100%; margin-top: var(--s1); padding: 11px var(--s3); border-radius: var(--r-sm); background: var(--ink); color: var(--text); border: 1px solid var(--line); } select:focus, input:focus, textarea:focus { outline: none; border-color: var(--firuzeh); } /* توضیحاتِ کلاب فارسی است — برخلافِ pgnBox (تنها استفاده‌ی دیگرِ textarea) که notation لاتین/LTR است، پس این دو باید جهتِ raw textarea را override کنند. */ textarea { font-family: var(--fa); font-size: var(--t-13); resize: vertical; direction: ltr; text-align: left; } #ccDesc, #ecDesc { direction: rtl; text-align: right; } /* متنِ بازخورد: زبانِ کاربر (فارسی/انگلیسی/ترکیبی) — جهت از روی خودِ متن */ #fbText { direction: inherit; unicode-bidi: plaintext; text-align: start; } .fb-counter { font-size: var(--t-12); color: var(--muted); text-align: end; direction: ltr; margin: calc(var(--s2) * -1) 0 var(--s3); } .fb-counter.bad { color: var(--danger); } /* پرشدنِ خودکارِ مرورگر (autofill) رنگِ پس‌زمینه را با یک لایه‌ی داخلیِ خودش عوض می‌کند که هیچ background معمولی رویش اثر ندارد — فقط این ترفند جواب می‌دهد: یک سایه‌ی داخلیِ به‌اندازه‌ی کل فیلد، هم‌رنگِ خودِ فیلد. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--ink) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); } .otp-input { text-align: center; font-size: calc(22px * var(--fs, 1)); letter-spacing: 8px; font-variant-numeric: tabular-nums; margin-bottom: var(--s3); } /* دکمه‌ی گوگل عمداً رنگِ برندِ خودش را ندارد: صفحه یک دکمه‌ی اصلیِ فیروزه‌ای دارد و دو دکمه‌ی پررنگ کنارِ هم یعنی هیچ‌کدام اصلی نیست. لوگو کارِ شناسایی را می‌کند، رنگ لازم نیست. */ .btn-google { display: flex; align-items: center; justify-content: center; gap: var(--s2); } .btn-google svg { flex: none; } /* جداکننده‌ی «یا» — خطی در دو طرفِ کلمه */ .auth-or { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0; color: var(--muted); font-size: var(--t-12); } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ------------------------------------------------------------- سگمنت */ .seg { display: flex; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; margin: var(--s1) 0 var(--s3); } .seg button { flex: 1; padding: 8px 4px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: var(--t-13); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.12s, color 0.12s; } .seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); } /* دکمه‌های دارای آیکون/پرچم (زبان و ظاهر در تنظیمات، منو و پروفایلِ مهمان — نگاه کن به langOptionHtml / appearanceOptionHtml در icons.js) */ .seg button.opt-ic { display: flex; align-items: center; justify-content: center; gap: 6px; } .seg button.opt-ic > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .seg button .seg-ic { display: inline-flex; flex: 0 0 auto; } .seg button .seg-ic svg { display: block; width: 16px; height: 16px; } .seg button[aria-pressed="true"] .seg-ic-light { color: var(--saffron); } .seg button[aria-pressed="true"] .seg-ic-dark { color: var(--firuzeh); } .seg .flag { display: inline-flex; flex: 0 0 auto; border-radius: var(--r-xs); overflow: hidden; box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.35); transition: opacity 0.12s; } .seg .flag svg { display: block; width: 21px; height: 15px; } .seg button[aria-pressed="false"] .flag { opacity: 0.6; } /* ست‌های مهره ممکن است ۵ تا ۱۳ تا باشند (هر ستِ ساخته‌شده یک دکمه) — در یک ردیف اسم‌ها با «…» بریده می‌شدند. اینجا می‌شکنند و هر ردیف حدود سه‌تا جا می‌دهد. */ #pieceSetSeg { flex-wrap: wrap; gap: 3px; } #pieceSetSeg button { flex: 1 1 28%; } /* سگمنتِ انتخابِ حالتِ بازی — بزرگ‌تر، چون تصمیمِ اصلیِ صفحه‌ی خانه است */ .seg-lg button { padding: 11px 4px; font-size: var(--t-14); } .seg-lg button[aria-pressed="true"] { background: var(--firuzeh); color: var(--on-accent); } /* ست مهره چهار گزینه با نامِ بلند دارد («پیش‌فرض سرور»، «خانگی (Staunton)»)؛ در یک ردیف هیچ عرضی کافی نیست، پس این یکی به دو سطر می‌شکند. */ #pieceSetSeg { flex-wrap: wrap; } #pieceSetSeg button { flex: 1 1 auto; min-width: 104px; } /* ردیفِ انتخابِ گونه: با ۷ گزینه (استاندارد + ۶ واریانت) توی یک پیلِ segmented جا نمی‌شد و از کادر بیرون می‌زد (flex-wrap با min-width ثابت روی چندتا آیتم قابل‌اعتماد نبود) — یک گرید با تعداد ستونِ ثابت همیشه داخل عرضِ کارت می‌ماند، هرچقدر هم متنِ برچسب بلند باشد. هر دکمه حالا مرزِ خودش را دارد (نه یک پیلِ مشترک) چون هفت‌تایی دیگر واقعاً یک «سگمنتِ» دوتاسه‌گزینه‌ای نیست. */ .variant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: var(--s1) 0 var(--s3); } .variant-grid button { padding: 8px 4px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--ink); color: var(--muted); font-weight: 600; font-size: var(--t-12); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s; } .variant-grid button[aria-pressed="true"] { background: var(--panel); color: var(--text); border-color: var(--firuzeh); } /* ------------------------------------------------- برچسب و نشانه‌ها */ .tag { font-size: var(--t-12); color: var(--muted); } .tag.tour-status-running, .tag.cm-status-running { color: var(--firuzeh); } .tag.tour-status-scheduled,.tag.cm-status-pending { color: var(--saffron); } .tag.tour-status-finished, .tag.cm-status-finished { color: var(--muted); } .tag.tour-status-cancelled, .tag.cm-status-declined, .tag.cm-status-cancelled { color: var(--danger); } /* حرکتِ تأییدنشده‌ی بازیِ مکاتبه‌ای — نگاه کن به corrMineRowHtml در app.js */ .tag.corr-pending { color: var(--saffron); font-weight: 700; } .soon { display: inline-block; margin-top: var(--s1); font-size: var(--t-11); font-weight: 700; color: var(--saffron); background: var(--accent-soft); border: 1px solid var(--line); padding: 3px var(--s3); border-radius: var(--r-pill); } .premium-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: var(--s2); font-size: var(--t-11); font-weight: 700; vertical-align: middle; background: var(--saffron); color: var(--ink); padding: 2px 8px; border-radius: var(--r-pill); } .premium-badge svg { width: 12px; height: 12px; } /* ------------------------------------------------- «بیشتر»ِ بازشونده */ .more-toggle { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-bottom: var(--s3); color: var(--muted); font-size: var(--t-13); } .more-toggle .chev { width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; } .more-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); } /* -------------------------------------------------------- سطحِ بازی */ .levels { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); margin: var(--s2) 0; } .lv { padding: 10px 0; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-14); } .lv[aria-pressed="true"] { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } .lv-name { font-size: var(--t-13); color: var(--muted); } .lv-name b { color: var(--text); } /* ------------------------------------------------- شخصیتِ ربات */ .personas { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; margin-bottom: var(--s3); scrollbar-width: none; } .personas::-webkit-scrollbar { display: none; } .persona { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--r); background: var(--raised); border: 1px solid var(--line); color: var(--muted); min-width: 76px; } .persona .ic { font-size: calc(20px * var(--fs, 1)); line-height: 1; } .persona .nm { font-size: var(--t-12); font-weight: 600; white-space: nowrap; } .persona[aria-pressed="true"] { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } .persona[aria-pressed="true"] .nm { color: var(--on-accent); } /* --------------------------------------------------- کنترلِ زمان (شبکه) */ /* جایگزینِ قدیمی است (پس‌زمینه‌ی --ink) تا در جریانِ فرم گم نشود. */ .tc-current { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; margin-top: var(--s1); padding: 11px var(--s3); border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--line); color: var(--text); font-size: var(--t-14); } .tc-current-time { font-weight: 700; } .tc-current-cat { color: var(--muted); font-size: var(--t-12); margin-inline-start: 6px; } .tc-current .chev { flex: 0 0 auto; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; color: var(--muted); } .tc-current[aria-expanded="true"] .chev { transform: rotate(-135deg); } /* کاشیِ «دلخواه» — همان ظاهرِ بقیه، فقط یک نشانه‌ی ریزِ گوشه تا از پیش‌فرض‌ها جدا دیده شود وقتی هنوز چیزی انتخاب نشده. */ .tc-btn-custom { position: relative; } .tc-btn-custom::after { content: "⚙"; position: absolute; top: 4px; inset-inline-end: 6px; font-size: var(--t-10); color: var(--muted); opacity: 0.7; } .tc-btn-custom[aria-pressed="true"]::after { color: var(--on-accent); opacity: 0.9; } /* دیالوگِ کوچکِ زیرِ شبکه برای واردکردنِ دقیقه/افزایش — با کلیک روی کاشیِ دلخواه باز می‌شود، به‌جایِ این‌که خودِ کاشی بی‌واسطه انتخاب شود. */ .tc-custom-dialog { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); } .tc-custom-dialog label { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-13); color: var(--muted); gap: var(--s2); } .tc-custom-dialog input[type="number"] { width: 80px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--line); color: var(--text); font-size: var(--t-14); text-align: center; font-variant-numeric: tabular-nums; } /* دکمه‌ی آیکونی — نوارِ ابزارِ صفحه‌ی بازی و شیت‌ها */ .ic { position: relative; width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--raised); border: 1px solid var(--line); transition: transform 0.06s, background 0.12s; } .ic:hover { background: var(--panel); } .ic:active { transform: scale(0.92); } .ic svg { width: 19px; height: 19px; } .ic.warn { color: var(--danger); } .ic.active { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } .ic:disabled { opacity: 0.35; } .ic.sm { width: 34px; height: 34px; background: transparent; border-color: transparent; } .ic.sm:disabled { opacity: 0.25; } /* حالتِ «در حالِ فکر» برای دکمه‌های آیکونی (مثلاً هینتِ بازیِ با ربات) — خودِ آیکون می‌چرخد، نه جایگزینیِ innerHTML با متن. */ .ic.busy svg { animation: icBusySpin 0.8s linear infinite; } @keyframes icBusySpin { to { transform: rotate(360deg); } } /* ================================================================ ۵. تخته — هندسه‌ی این بخش کارکردی است، نه تزئینی: نسبت‌ها و درصدها دقیقاً همان‌اند که board.js موقعِ جای‌گذاریِ مهره‌ها حساب می‌کند. ================================================================ */ .board { position: relative; width: 100%; aspect-ratio: 1; direction: ltr; border-radius: var(--r-sm); overflow: hidden; touch-action: none; user-select: none; box-shadow: var(--shadow-md); } /* درگِ بومیِ مرورگر روی تخته باید کاملاً خاموش باشد. `touch-action` و `user-select` این کار را نمی‌کنند — آن‌ها اسکرول و انتخابِ متن را می‌گیرند، ولی drag-and-drop بومی مکانیزمِ جداگانه‌ای است. بدونِ این، نگه‌داشتنِ انگشت روی یک مهره در کرومِ اندروید یک درگِ بومی شروع می‌کند و مرورگر یک «کارتِ شبح» می‌کشد: یک مستطیلِ گردگوشه کمی بزرگ‌تر از خانه، با اسنپ‌شاتِ کوچک‌شده‌ی خودِ مهره داخلش، که پس‌زمینه‌اش را از رنگِ صفحه می‌گیرد (در تمِ تیره تیره، در تمِ روشن سفید). همان مربعی که موقعِ زدنِ مهره یک لحظه پیدا و محو می‌شد. درگِ خودِ مهره‌ها با pointer events پیاده شده و به این ربطی ندارد. */ .board, .board * { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } .board > div { position: absolute; inset: 0; } .arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; } .arrow { opacity: 0.86; } .arrow-shaft { stroke: var(--arrow-color); stroke-width: 0.09; stroke-linecap: round; stroke-linejoin: round; } .arrow-head { fill: var(--arrow-color); stroke: var(--arrow-color); stroke-width: 0.05; stroke-linejoin: round; } /* رنگِ هر فلش با کلاسِ خودش مشخص می‌شود (نه با data-tone روی svg)، چون حالا ممکن است چند فلش هم‌زمان با رنگ‌های متفاوت روی تخته باشند: فلشِ راهنما، فلش‌های دستیِ کاربر (کلیک راست)، و پیش‌نمایشِ فلشِ در حالِ کشیدن. */ .tone-hint { --arrow-color: var(--saffron); } /* فلشِ حرکتِ بازی‌شده در تحلیل: رنگش از خودِ تگ می‌آید (style درون‌خط)؛ باریک‌تر و کم‌رنگ‌تر از فلشِ سبزِ «حرکتِ بهتر» تا آن اصلی بماند. */ .tone-tag.arrow { opacity: 0.6; } .tone-tag .arrow-shaft { stroke-width: 0.07; } .tone-best { --arrow-color: var(--c-best); } .tone-user { --arrow-color: #15a12a; } .tone-draft { --arrow-color: #15a12a; } .tone-draft.arrow { opacity: 0.45; } /* خطِ دوم/سومِ multipv در حالتِ کاوش — کم‌رنگ‌تر از بهترین‌حرکت تا اولویت بصری همیشه روشن باشد: خطِ اول پررنگ، بقیه فقط برای مقایسه. */ .tone-pv2 { --arrow-color: var(--pv2); } .tone-pv2.arrow { opacity: 0.6; } /* فلشِ زردِ درس: هشدار/دقت (چهارمین معنا، کنار سبز/قرمز/آبی) */ .tone-warn { --arrow-color: #e0a409; } .tone-warn.arrow { opacity: 0.8; } /* خط‌های ۳ تا ۵ هر کدام رنگِ خودشان را دارند (قبلاً هر سه خاکستری بودند و روی تخته از هم تشخیص داده نمی‌شدند): بنفش، فیروزه‌ای، نارنجی — با شفافیتِ کم‌شونده تا ترتیبِ اهمیت هنوز پیدا باشد. */ .tone-pv3 { --arrow-color: var(--pv3); } .tone-pv3.arrow { opacity: 0.55; } .tone-pv4 { --arrow-color: var(--pv4); } .tone-pv4.arrow { opacity: 0.5; } .tone-pv5 { --arrow-color: var(--pv5); } .tone-pv5.arrow { opacity: 0.45; } .badges { z-index: 4; pointer-events: none; } /* نشانِ روی خانه — دقیقاً مثلِ .mk اندازه‌اش می‌شود (۱۲.۵٪ از تخته)، ولی خودِ دایره‌ی رنگی داخلش روی گوشه‌ی بالا-راستِ همان خانه می‌نشیند تا هم مهره را کامل نپوشاند هم از لبه‌ی تخته بیرون نزند. */ .sqbadge { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; } .sqbadge .dot { /* اندازه نسبت به خودِ خانه است (نه px ثابت): روی تخته‌ی کوچکِ گوشی نشان بزرگ‌تر از نیم‌خانه نمی‌شود و روی دسکتاپ هم متناسب بزرگ می‌شود. */ position: absolute; top: -10%; right: -10%; width: 36%; aspect-ratio: 1; min-width: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; /* حلقه‌ی بیرونی هم‌رنگِ خودِ دایره است (نه مشکی)، با درخششِ نرمِ همان رنگ */ box-shadow: 0 0 0 1px var(--bc, currentColor), 0 1px 5px color-mix(in srgb, var(--bc, #000) 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .22); } /* جلای شیشه‌ای: نورِ ملایم از بالا و سایه‌ی کم از پایین، روی هر رنگی کار می‌کند */ .sqbadge .dot::after, .mv-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(0,0,0,.16)); } .sqbadge .dot svg, .mv-badge svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .22)); } .sqbadge .dot svg { width: 74%; height: 74%; display: block; } /* تاجِ پایانِ بازی — روی گوشه‌ی بالا-راستِ خانه‌ی شاهِ برنده، تا با یک نگاه معلوم شود بازی تمام شده، نه اینکه صفحه هنگ کرده (مخصوصاً در تحلیلِ بازی‌های بزرگان که نتیجه فوری روی صفحه نوشته نمی‌شود). */ .crown { z-index: 5; pointer-events: none; } .king-crown { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; } /* تاج: سه لایه‌ی تو در تو تا انیمیشن‌ها به هم نخورند — .kc-drop فرود (یک‌بار) · .kc-bob شناوریِ ملایم (حلقه) · svg با برق و جرقه. */ .kc-drop { position: absolute; left: 12%; width: 76%; top: -24%; aspect-ratio: 64 / 46; transform-origin: 50% 100%; animation: kc-land .75s cubic-bezier(.22, .9, .3, 1.15) .42s both; } .king-crown.edge .kc-drop { left: 19%; width: 62%; top: 1%; } .kc-bob { position: relative; width: 100%; height: 100%; animation: kc-bob 3.2s ease-in-out 1.4s infinite; } .kc-bob .kc { position: relative; width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(-4deg); filter: drop-shadow(0 .05em .05em rgba(30, 16, 0, .55)) drop-shadow(0 0 .22em rgba(255, 200, 70, .55)); } .kc-glow { position: absolute; inset: -30% -25% -15%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 214, 90, .55), rgba(255, 190, 50, .18) 60%, transparent); animation: kc-glow 3.2s ease-in-out 1.2s infinite; } .kc-shine { transform: skewX(-22deg) translateX(-20px); animation: kc-shine 3.8s ease-in-out 1.3s infinite; } .kc-sp { fill: #fff; transform-box: fill-box; transform-origin: center; opacity: 0; filter: drop-shadow(0 0 1.5px #ffd75a); animation: kc-twinkle 3.2s ease-in-out infinite; } .kc-sp.sp1 { animation-delay: 1.5s; } .kc-sp.sp2 { animation-delay: 2.3s; } .kc-sp.sp3 { animation-delay: 3.0s; } @keyframes kc-land { 0% { opacity: 0; transform: translateY(-140%) rotate(-14deg) scale(.7); } 55% { opacity: 1; transform: translateY(6%) rotate(3deg) scale(1.04); } 78% { transform: translateY(-3%) rotate(-1deg) scale(1); } 100% { opacity: 1; transform: none; } } @keyframes kc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } } @keyframes kc-glow { 0%, 100% { opacity: .45; } 50% { opacity: .95; } } @keyframes kc-shine { 0%, 55% { transform: skewX(-22deg) translateX(-20px); } 100% { transform: skewX(-22deg) translateX(92px); } } @keyframes kc-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 12% { opacity: 1; transform: scale(1.15) rotate(35deg); } 28% { opacity: 0; transform: scale(.3) rotate(70deg); } } /* مساوی: مدالیونِ نقره‌ایِ «½» روی سرِ هر دو شاه و رقصِ کوچکِ شاه‌ها (board.js::showDraw). فرودِ مدالیون با همان kc-land تاج است؛ رقص بعد از فرود شروع می‌شود (۰٫۸ ثانیه) و مدالیون مثلِ یک تکه با سرِ شاه می‌چرخد — محورِ چرخشش پایه‌ی شاه است (۲۴۱٪ ارتفاعِ خودش پایین‌تر)، پس نمی‌لرزد و جدا نمی‌شود. */ .hd-drop { position: absolute; left: 16%; width: 68%; top: -70%; aspect-ratio: 1; transform-origin: 50% 100%; animation: kc-land .65s cubic-bezier(.22, .9, .3, 1.15) .12s both; } .king-crown.half.edge .hd-drop { left: 22%; width: 56%; top: 3%; } .hd-rock { --hd-x: 7.4%; position: relative; width: 100%; height: 100%; transform-origin: 50% 241%; animation: hd-rock 2.3s ease-in-out .8s both; } .king-crown.half.edge .hd-rock { --hd-x: 8.9%; transform-origin: 50% 164%; } .hd-rock .hd { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .05em .05em rgba(0, 0, 0, .55)) drop-shadow(0 0 .2em rgba(206, 224, 255, .38)); } .hd-glow { position: absolute; inset: -22%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(214, 228, 255, .42), rgba(190, 210, 245, .12) 62%, transparent); animation: kc-glow 3.4s ease-in-out 1.2s infinite; } .hd .kc-shine { animation-delay: 1.4s; animation-duration: 4.2s; } .pc.dance svg { transform-origin: 50% 94%; animation: king-dance 2.3s ease-in-out .8s both; } /* چپ، راست، چپ، راست — بینِ هر دو خم یک جهشِ خیلی کوچک */ @keyframes king-dance { 0% { transform: none; } 12% { transform: translateX(-5%) rotate(-9deg); } 23% { transform: translateY(-2.5%); } 34% { transform: translateX(5%) rotate(9deg); } 45% { transform: translateY(-2.5%); } 56% { transform: translateX(-5%) rotate(-9deg); } 67% { transform: translateY(-2.5%); } 78% { transform: translateX(5%) rotate(9deg); } 100% { transform: none; } } @keyframes hd-rock { 0% { transform: none; } 12% { transform: translateX(calc(var(--hd-x) * -1)) rotate(-9deg); } 23% { transform: translateY(-3.5%); } 34% { transform: translateX(var(--hd-x)) rotate(9deg); } 45% { transform: translateY(-3.5%); } 56% { transform: translateX(calc(var(--hd-x) * -1)) rotate(-9deg); } 67% { transform: translateY(-3.5%); } 78% { transform: translateX(var(--hd-x)) rotate(9deg); } 100% { transform: none; } } /* شاهِ بازنده: به پهلو می‌افتد. چرخش روی خودِ svg است چون خودِ .pc با transform جای‌گذاری می‌شود (board.js::_pos). محورِ چرخش پایه‌ی مهره در سمتِ افتادن است، یک جهشِ کوچک هم وقتِ برخورد با تخته دارد. */ .pc.fallen { z-index: 3; } .pc.fallen svg { filter: drop-shadow(0 .04em .05em rgba(0, 0, 0, .5)); } .pc.fallen.fall-r svg { transform-origin: 80% 92%; animation: king-fall-r 1s cubic-bezier(.5, 0, .75, 1) .05s both; } .pc.fallen.fall-l svg { transform-origin: 20% 92%; animation: king-fall-l 1s cubic-bezier(.5, 0, .75, 1) .05s both; } @keyframes king-fall-r { 0% { transform: rotate(0); } 8% { transform: rotate(-3deg); } 58% { transform: rotate(92deg); } 72% { transform: rotate(82deg); } 86% { transform: rotate(89deg); } 100% { transform: rotate(87deg); } } @keyframes king-fall-l { 0% { transform: rotate(0); } 8% { transform: rotate(3deg); } 58% { transform: rotate(-92deg); } 72% { transform: rotate(-82deg); } 86% { transform: rotate(-89deg); } 100% { transform: rotate(-87deg); } } @media (prefers-reduced-motion: reduce) { .kc-drop, .kc-bob, .kc-glow, .kc-shine, .kc-sp { animation: none; } .hd-drop, .hd-rock, .hd-glow, .hd .kc-shine, .pc.dance svg { animation: none; } .kc-sp { opacity: 0; } .pc.fallen.fall-r svg { animation: none; transform: rotate(87deg); } .pc.fallen.fall-l svg { animation: none; transform: rotate(-87deg); } } .sqs { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .sq { position: relative; } .sq.l { background: var(--sq-light); } .sq.d { background: var(--sq-dark); } .sq i { position: absolute; font-style: normal; font-weight: 700; font-size: var(--t-10); opacity: 0.75; line-height: 1; } .sq.l i { color: var(--coord-l); } .sq.d i { color: var(--coord-d); } .sq .cf { bottom: 2px; right: 3px; } .sq .cr { top: 2px; left: 3px; } /* با چرخاندن تخته (سیاه)، ردیفِ حروف و ستونِ اعدادِ عوض می‌شود (نگاه کن به fileLabelRow/rankLabelCol در board.js — طوری حساب می‌شوند که حروف/عدد همیشه از گوشه‌ی خانه‌ی a1 شروع شوند)، ولی این دو قانونِ بالا لنگرِ ثابت داشتند، پس برچسب‌ها به‌جای چسبیدن به لبه‌ی بیرونیِ تخته، سمتِ داخل می‌افتادند (حرف روی ردیفِ بالا ولی لنگرش «پایین»، عدد روی ستونِ راست ولی لنگرش «چپ»). این‌جا با چرخشِ ۱۸۰ درجه‌ی خودِ لنگر درست می‌شود. */ .board.flipped .sq .cf { bottom: auto; top: 2px; right: auto; left: 3px; } .board.flipped .sq .cr { top: auto; bottom: 2px; left: auto; right: 3px; } .marks, .hints { pointer-events: none; } .mk, .hint, .pc { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; } /* ستاره‌های تمرینِ حرکتِ مهره‌ها — زیرِ لایه‌ی مهره‌ها می‌نشینند (ترتیبِ لایه‌ها در _build در board.js) تا وقتی مهره روی ستاره می‌رود، خودِ مهره دیده شود نه ستاره. جمع‌شده حذف نمی‌شود، فقط کم‌رنگ و کوچک می‌ماند تا مسیرِ طی‌شده پیدا باشد. */ .stars { pointer-events: none; --star-hi: #ffeaa6; --star-mid: #f2bb3b; --star-lo: #d4821f; } .star { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; } .star > span { position: absolute; display: block; pointer-events: none; } /* ستاره‌ی «سیال»: هاله‌ای که شکلش مثلِ قطره‌ی مایع آرام عوض می‌شود، بدنه‌ای که روی آن شناور است، و دو جرقه. فاز هر ستاره با --d (تأخیرِ منفی) فرق می‌کند تا همه با هم نفس نکشند. همه‌ی حرکت‌ها فقط transform/opacity/border-radius. */ .star-halo { inset: 6%; border-radius: 50%; background: radial-gradient(circle at 38% 34%, rgba(255, 223, 128, 0.85), rgba(255, 176, 56, 0.34) 52%, rgba(255, 176, 56, 0) 72%); filter: blur(4px); will-change: transform, border-radius; animation: star-morph 7s ease-in-out infinite; animation-delay: var(--d, 0s); } .star-body { inset: 11%; display: grid; place-items: center; will-change: transform; animation: star-float 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 55%; } .star-body svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 1.5px 2px rgba(130, 70, 0, 0.42)); } .star-sheen { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.3; } .star-twinkle { width: 24%; height: 24%; background: #fffbe8; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; animation: star-twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * 0.7); } .star-twinkle.t1 { top: 4%; right: 8%; } .star-twinkle.t2 { bottom: 12%; left: 7%; width: 17%; height: 17%; animation-delay: calc(var(--d, 0s) * 0.7 - 1.5s); } .star-ring { inset: 18%; border-radius: 50%; border: 2px solid rgba(255, 205, 96, 0.95); opacity: 0; transform: scale(0.4); } .star-burst { inset: 0; } .star-burst i { position: absolute; left: 43%; top: 43%; width: 14%; height: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3bf, #f2bb3b); opacity: 0; } .star.collect .star-ring { animation: star-ring 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; } .star.collect .star-burst i { animation: star-burst 0.9s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; } .star.collect .star-body { animation: star-collect 0.95s cubic-bezier(0.3, 0.9, 0.35, 1) forwards; } .star.collect .star-halo { animation: star-flash 0.7s ease-out forwards; } .star.done .star-twinkle { display: none; } .star.done:not(.collect) .star-halo { display: none; } .star.done:not(.collect) .star-body { animation: none; transform: scale(0.55); opacity: 0.38; filter: saturate(0.35); } @keyframes star-float { 0%, 100% { transform: translateY(5%) rotate(-5deg) scale(0.97); } 50% { transform: translateY(-6%) rotate(5deg) scale(1.06); } } @keyframes star-morph { 0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate(0deg) scale(0.92); opacity: 0.8; } 25% { border-radius: 62% 38% 54% 46% / 46% 58% 42% 54%; transform: rotate(90deg) scale(1.1); opacity: 1; } 50% { border-radius: 42% 58% 40% 60% / 58% 42% 58% 42%; transform: rotate(180deg) scale(0.98); opacity: 0.85; } 75% { border-radius: 56% 44% 62% 38% / 40% 60% 40% 60%; transform: rotate(270deg) scale(1.14); opacity: 1; } } @keyframes star-twinkle { 0%, 55%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 72% { opacity: 1; transform: scale(1) rotate(45deg); } 88% { opacity: 0; transform: scale(0.2) rotate(90deg); } } @keyframes star-ring { 0% { opacity: 0.95; transform: scale(0.4); border-width: 3px; } 100% { opacity: 0; transform: scale(2.3); border-width: 1px; } } @keyframes star-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateX(60%) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(470%) scale(0.2); } } @keyframes star-collect { 0% { transform: scale(1) rotate(0deg); opacity: 1; filter: saturate(1); } 32% { transform: scale(1.6) rotate(24deg); opacity: 1; filter: saturate(1.2) brightness(1.15); } 100% { transform: scale(0.55) rotate(0deg); opacity: 0.38; filter: saturate(0.35); } } @keyframes star-flash { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } } .mk.last { background: var(--hl-last); } /* هاله‌ی رنگیِ حرکتِ آخر وقتی حرکت نشانِ کیفیت دارد (--tone از board.js می‌آید). مبدأ نرم‌تر، مقصد پررنگ‌تر با درخششِ داخلیِ ملایم؛ جلوتر از زردِ پیش‌فرض نمی‌رود (همان لایه‌ی .marks، زیرِ مهره‌ها). */ .mk.toned { background: color-mix(in srgb, var(--tone) var(--tone-a, 44%), transparent); } .mk.toned.from { --tone-a: 42%; } .mk.toned.to { --tone-a: 56%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 55%, transparent), inset 0 0 18px 1px color-mix(in srgb, var(--tone) 48%, transparent); } /* پایانِ بازی: هاله‌ی طلاییِ شاهِ برنده و قرمزِ شاهِ بازنده، نقره‌ایِ هر دو شاه در مساوی (board.js: showEndHalo/showDrawHalo). با یک fade می‌آید و بعد خیلی آرام نفس می‌کشد؛ هم‌خانواده‌ی هاله‌ی حرکت در تحلیل. */ .mk.endhalo { background: color-mix(in srgb, var(--eh) 54%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--eh) 62%, transparent), inset 0 0 20px 2px color-mix(in srgb, var(--eh) 55%, transparent); animation: eh-breathe 3.4s ease-in-out infinite; } .mk.endhalo.win { --eh: #F2A100; } .mk.endhalo.lose { --eh: #F2382C; } /* مساوی: نقره‌ای مایل به آبیِ خنک، کم‌رنگ‌تر و آرام‌تر از برد/باخت */ .mk.endhalo.draw { --eh: #9FB4C7; animation-duration: 4.6s; } .mk.endhalo.draw.fresh { animation: eh-in .9s ease-out both, eh-breathe 4.6s ease-in-out .9s infinite; } .mk.endhalo.fresh { animation: eh-in .7s ease-out both, eh-breathe 3.4s ease-in-out .7s infinite; } @keyframes eh-in { from { opacity: 0; } to { opacity: 1; } } @keyframes eh-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } } .mk.toned.fresh { animation: mk-tone-in .32s ease-out both; } /* حرکتِ درخشان/فوق‌العاده: یک درخششِ یک‌باره روی خانه‌ی مقصد و یک حلقه‌ی در حالِ پخش‌شدن دورِ نشان؛ بقیه‌ی تگ‌ها بدونِ افکت می‌مانند تا فقط لحظه‌ی خاص خاص بماند. */ .mk.toned.to.fresh.shine { animation: mk-tone-in .32s ease-out both, mk-shine 1.1s ease-out .12s both; } @keyframes mk-shine { 0% { filter: brightness(1.7) saturate(1.25); } 100% { filter: none; } } .sqbadge.fresh.shine .dot::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; border: 2px solid var(--bc); animation: badge-ring .95s ease-out .22s both; } @keyframes badge-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes mk-tone-in { from { opacity: 0; } to { opacity: 1; } } .sqbadge.fresh .dot { animation: sqbadge-pop .34s cubic-bezier(.2, .9, .3, 1.25) both; } @keyframes sqbadge-pop { 0% { transform: scale(.35); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mk.toned.fresh, .sqbadge.fresh .dot, .mk.endhalo, .mk.endhalo.fresh, .mk.toned.to.fresh.shine { animation: none; } .sqbadge.fresh.shine .dot::before { display: none; } } .mk.sel { background: var(--hl-sel); } .mk.hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); } .mk.check { background: radial-gradient(circle, rgba(239, 68, 68, 0.95) 8%, rgba(239, 68, 68, 0.45) 40%, transparent 72%); } /* پیش‌حرکت رنگ جدا دارد تا با حرکت آخر و انتخاب قاطی نشود */ .mk.pre { background: rgba(140, 120, 220, 0.55); } .hint.pre { background: radial-gradient(circle, rgba(140, 120, 220, 0.5) 0 15%, transparent 15.5%); } /* نقطه و حلقه با گرادیان ساخته می‌شوند تا با اندازه‌ی تخته مقیاس بخورند. خانه‌ی تیره جوهر پررنگ‌تری لازم دارد، وگرنه نقطه گم می‌شود. */ .hint { background: radial-gradient(circle, var(--hint-ink) 0 17%, transparent 17.5%); } .hint.on-d { --hint-ink: var(--hint-ink-d); } .hint.cap { background: radial-gradient(circle, transparent 0 60%, var(--hint-ink) 60.5% 76%, transparent 76.5%); } /* خانه‌های رنگیِ درس‌ها (لایه‌ی .lshapes، زیرِ مهره‌ها و زیرِ هایلایتِ کاربر). سه معنا: سبز = خوب، قرمز = بد/تهدید/بسته، آبی = توضیحی — همان سه رنگی که فلش‌های درس هم دارند (tone-best / tone-threat / tone-pv2). */ .lshapes { pointer-events: none; } .mk.lsq-good { background: rgba(21, 161, 42, 0.42); } .mk.lsq-bad { background: rgba(239, 68, 68, 0.42); } .mk.lsq-info { background: rgba(59, 130, 196, 0.40); } .mk.lsq-warn { background: rgba(234, 179, 8, 0.48); } /* هایلایتِ خانه با کلیک راستِ ساده — مثلِ فلش، رنگِ سبزِ نیمه‌شفاف. */ .userhi { pointer-events: none; } .mk.userhi { background: rgba(21, 161, 42, 0.55); } .mk.userhi-red { background: rgba(239, 68, 68, 0.6); } .pc { z-index: 2; cursor: grab; /* کِرو قبلی خیلی جلوبار بود (۲۵٪ زمان = ۷۵٪ مسافت)، یعنی مهره یهو می‌جهید و بعد آرام می‌خزید — با مدتِ طولانی‌تر این حس بدتر هم می‌شد. این کِرو (شبیهِ material standard easing) شتاب‌گیری و ترمزِ متعادل‌تری دارد، طبیعی‌تر می‌نشیند. */ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* عمداً `will-change: transform` اینجا نیست. قبلاً بود و یعنی هر ۳۲ مهره یک لایه‌ی GPUِ دائمی می‌گرفتند. روی گوشی، کروم گاهی لایه‌ای را که هنوز رستر نکرده به‌شکلِ یک مستطیلِ تخت می‌کشد — همان مربعِ تیره‌ای که موقعِ حرکت/ساخته‌شدنِ مهره‌ها دیده می‌شد. کروم برای خودِ ترنزیشن به‌هرحال لایه می‌سازد؛ نگه‌داشتنِ دائمی‌اش فقط حافظه‌ی GPU می‌خورد. */ } /* برگشتِ آرامِ مهره بعد از حرکتِ غلط در درس — فقط همان لحظه روی تخته‌ی درس فعال است (app.js: returnWrongMove). مدت باید با WRONG_MOVE_RETURN_MS یکی بماند. درگِ کاربر `transition: none` دارد و از این تأثیر نمی‌پذیرد. */ .lesson-return .pc:not(.dragging) { transition-duration: 1s; transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } .pc svg { width: 100%; height: 100%; display: block; transition: transform 0.14s; } .pc .body { stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; } .pc .ln { fill: none; stroke-linecap: round; } .pc .dt { stroke: none; } .pc.c-w .body { fill: var(--pw-fill); stroke: var(--pw-stroke); } .pc.c-w .ln { stroke: var(--pw-detail); } .pc.c-w .dt { fill: var(--pw-detail); } .pc.c-b .body { fill: var(--pb-fill); stroke: var(--pb-stroke); } /* بدون این، مهره‌ی سیاه روی خانه‌ی تیره سیلوئتش را از دست می‌دهد — خط دورش هم سیاه است. هاله بر حسب em است تا با اندازه‌ی خانه مقیاس بخورد. */ .pc.c-b svg { filter: drop-shadow(0 0 0.022em rgba(255, 255, 255, 0.55)); } .pc.c-b .ln { stroke: var(--pb-detail); } .pc.c-b .dt { fill: var(--pb-detail); } .pc.dragging { z-index: 9; transition: none; cursor: grabbing; } .pc.dragging svg { transform: scale(1.14); filter: drop-shadow(0 6px 8px rgba(18, 16, 14, 0.45)); } /* مهره‌ی خورده‌شده اصلاً محو نمی‌شود: دست‌نخورده سرِ جایش می‌ماند تا مهره‌ی زننده برسد، و همان لحظه — از زیرِ مهره‌ای که رویش نشسته — حذف می‌شود. همان کاری که اپ‌های بومی می‌کنند و تمیزترین حالت است. چرا فید حذف شد: قبلاً `transition: opacity .2s` بود و کروم روی اندروید وسطِ آن فید، به‌جای خودِ مهره یک مستطیلِ تیره‌ی تخت روی خانه می‌کشید — آرتیفکتِ رستر شدنِ لایه‌ی GPU، چون opacity روی المانی انیمیت می‌شد که هم `will-change: transform` داشت هم یک SVG با `filter` داخلش. بدونِ انیمیشنِ opacity اصلاً لایه‌ی جدایی ساخته نمی‌شود و آرتیفکت موضوعیت ندارد. z-index هم پایین‌تر از `.pc` است تا مهره‌ی رسیده رویش بیفتد، نه زیرش. */ .pc.gone { z-index: 1; transition: none; pointer-events: none; } .pc.appear { animation: pop 0.24s ease-out; } @keyframes pop { from { opacity: 0; } to { opacity: 1; } } /* ---------------------------------------------------------------- انفجارِ اتمی منطقش در board.js (_planBlast/_blast/_ash). همه‌ی حرکت‌ها فقط transform و opacity روی المان‌های ساده‌اند (بدونِ filter/blur)، و مهره‌ها هیچ‌وقت خودشان محو نمی‌شوند — نگاه کن به توضیحِ `.pc.gone` بالا. */ .pc.blast-src { z-index: 4; } .fx { z-index: 5; pointer-events: none; } .fx .blast, .fx .ash { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; } .fx .blast > span { position: absolute; display: block; border-radius: 50%; } /* گرمای خانه‌ی برخورد: مربعِ نرمِ کهربایی که آرام خاموش می‌شود */ .bl-heat { inset: 0; border-radius: 0 !important; background: radial-gradient(circle, rgba(255, 190, 96, 0.62), rgba(255, 150, 60, 0.26) 62%, rgba(255, 150, 60, 0.1)); animation: bl-heat 0.85s ease-out both; } /* درخشِ لحظه‌ی انفجار */ .bl-core { inset: -110%; background: radial-gradient(circle, rgba(255, 252, 238, 0.98) 0, rgba(255, 226, 150, 0.78) 22%, rgba(255, 176, 70, 0.3) 44%, rgba(255, 176, 70, 0) 66%); animation: bl-core 0.5s cubic-bezier(0.2, 0.7, 0.25, 1) both; } /* موجِ ضربه‌ای: حلقه‌ی نرمِ گرادیانی که با رشد نازک نمی‌شود، چون خودش مقیاس می‌خورد */ .bl-ring { inset: 0; background: radial-gradient(circle, transparent 54%, rgba(255, 238, 200, 0.9) 60%, rgba(255, 210, 140, 0.35) 67%, transparent 73%); animation: bl-ring 0.62s cubic-bezier(0.12, 0.7, 0.2, 1) both; } .bl-ring.r2 { background: radial-gradient(circle, transparent 58%, rgba(255, 238, 200, 0.5) 64%, transparent 71%); animation-name: bl-ring2; animation-duration: 0.74s; animation-delay: 0.07s; } @keyframes bl-heat { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } } @keyframes bl-core { 0% { transform: scale(0.15); opacity: 1; } 45% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(1.25); opacity: 0; } } @keyframes bl-ring { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(3.1); opacity: 0; } } @keyframes bl-ring2 { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.5); opacity: 0; } } /* خاکستر: هم‌رنگِ خودِ مهره (از همان متغیرهای مهره‌ها، پس با هر تمی می‌خواند). خطِ دورِ ظریف برای این است که ذره‌ی سفید روی خانه‌ی روشن گم نشود. */ .ash i { position: absolute; display: block; border-radius: 50%; opacity: 0; animation: ash-fly 0.8s cubic-bezier(0.18, 0.62, 0.3, 1) both; will-change: transform, opacity; } .ash i.sqr { border-radius: 14%; } .ash.c-w i { background: var(--pw-fill); box-shadow: 0 0 0 0.6px var(--pw-stroke); } .ash.c-w i.dk { background: #b9b4a6; } .ash.c-b i { background: var(--pb-fill); box-shadow: 0 0 0 0.6px rgba(255, 255, 255, 0.5); } .ash.c-b i.dk { background: #4b4c52; } .ash i.em { background: radial-gradient(circle, #fff4c4, #f2a93b 70%); box-shadow: none; animation-name: ember-fly; border-radius: 50%; } @keyframes ash-fly { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.25); opacity: 0; } } @keyframes ember-fly { 0% { transform: translate(0, 0) scale(1.2); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(0.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fx { display: none; } } /* ================================================================ ۶. صفحه‌ی بازی ================================================================ */ .pl { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 2px; } .ava { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; font-weight: 800; font-size: calc(15px * var(--fs, 1)); flex: 0 0 auto; background: var(--raised); color: var(--firuzeh); border: 1px solid var(--line); } .pl.bot .ava { color: var(--saffron); } .ava svg { width: 78%; height: 78%; } .ava img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .ava .body { fill: currentColor; stroke: none; } .ava .dt { fill: var(--panel); } .pl .info { flex: 1; min-width: 0; } .pl .nm { font-weight: 600; font-size: var(--t-14); white-space: nowrap; /* اسمِ کاربر همیشه باید کنار آواتار بماند، در هر دو زبان. با unicode-bidi: plaintext (که در جاهای دیگر برای اسم/متنِ آزادِ کاربر به‌کار می‌رود) ترازِ متن بر اساسِ اولین حرفِ *خودِ اسم* تعیین می‌شود، نه جهتِ صفحه — یعنی یک اسمِ لاتین (مثلاً Arian) روی سایتِ فارسی، چپ‌چین می‌شد، ولی چون این .nm همیشه توی یک باکسِ عریضِ flex:1 است (نه یک span با عرضِ هم‌اندازه‌ی متن)، همان چپ‌چین شدن باعث می‌شد متن از آواتار (که در چیدمانِ راست‌به‌چپ سمتِ راست است) فاصله بگیرد و برود ته‌ِ چپِ باکس، کنارِ ساعت. isolate برخلافِ plaintext، جهتِ متن را برای شکل‌گیریِ حروف از خودِ محتوا می‌گیرد ولی ترازش را از جهتِ صفحه — یعنی همیشه سمتِ آواتار می‌ماند، چه اسم فارسی باشد چه لاتین. */ overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; } .pl .nm span { color: var(--muted); font-weight: 400; font-size: var(--t-12); } .taken { display: flex; align-items: center; height: 17px; margin-top: 1px; direction: ltr; max-width: 100%; overflow: hidden; } .taken .pc-mini { position: static; width: 16px; height: 16px; margin-inline-start: -5px; flex: 0 0 auto; opacity: 0.8; } .taken .pc-mini:first-child { margin-inline-start: 0; } .taken .pc-mini svg { width: 100%; height: 100%; display: block; } .taken .pc.c-b svg { /* هاله‌ی پیش‌فرضِ مهره‌ی سیاه بر حسب em است و در این اندازه‌ی ۱۶پیکسلی تقریباً صفر می‌شود. چهار سایه‌ی تیز (بدونِ blur) یک خطِ دورِ ۰٫۶پیکسلی دورِ سیلوئت می‌کشد، بی‌نیاز به این‌که ستِ مهره‌ی فعال رنگ‌هایش را با کلاس بگیرد یا داخلِ خودِ SVG داشته باشد. */ filter: drop-shadow(0.6px 0 0 var(--taken-b-halo)) drop-shadow(-0.6px 0 0 var(--taken-b-halo)) drop-shadow(0 0.6px 0 var(--taken-b-halo)) drop-shadow(0 -0.6px 0 var(--taken-b-halo)); } .taken .adv { font-size: var(--t-12); font-weight: 700; color: var(--muted); margin-inline-start: 5px; } .pl .report-btn { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--muted); display: grid; place-items: center; opacity: 0.6; background: transparent; border: none; } .pl .report-btn svg { width: 14px; height: 14px; } .pl .report-btn:active { opacity: 1; background: var(--raised); } /* ساعت — یک جعبه‌ی کوچک؛ ساعتِ «نوبت‌دار» جعبه‌ی پُر و هم‌رنگِ متن می‌گیرد (روشن روی تیره، تیره روی روشن) تا از گوشه‌ی چشم هم معلوم باشد ساعتِ چه کسی می‌رود. کلاس‌های on/low را js/game.js روی خودِ .clk می‌گذارد (نه .pl) — قبلاً CSS دنبالِ «.pl.on» می‌گشت و برای همین ساعتِ فعال و ثانیه‌های آخر هیچ‌وقت رنگ نمی‌گرفتند. */ .clk { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 76px; direction: ltr; padding: 6px 10px 5px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); font-family: var(--font-mono); transition: background-color .2s ease, border-color .2s ease; } .clk .t { font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--t-18); line-height: 1; color: var(--muted); letter-spacing: -0.3px; text-align: end; } .clk .bar { width: 100%; height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; transform-origin: right center; } .clk.on { background: var(--text); border-color: var(--text); } .clk.on .t { color: var(--ink); } .clk.on .bar { background: var(--firuzeh); } .clk.low .t { color: var(--danger); } .clk.low .bar { background: var(--danger); } .clk.on.low { background: var(--danger); border-color: var(--danger); } .clk.on.low .t { color: #fff; } .clk.on.low .bar { background: rgba(255, 255, 255, .7); } /* مکاتبه‌ای: ساعتِ طرفِ بی‌نوبت متنی ندارد (js/corr.js) — جعبه‌ی خالی نماند */ .clk:not(.on):has(> .t:empty) { background: transparent; border-color: transparent; } @media (prefers-reduced-motion: reduce) { .clk { transition: none; } } /* نوار حرکت‌ها: فقط حرکت جاری؛ لمسِ متن، فهرست کامل را در یک شیت باز می‌کند. قبلاً این بخش سه ردیفِ کامل و نزدیک ۲۵۰ پیکسل بود. */ .move-strip { margin-top: var(--s2); direction: ltr; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-family: var(--font-mono); } .ms-label { flex: 1; min-width: 0; text-align: center; padding: 7px 4px; border-radius: var(--r-sm); font-size: var(--t-14); font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-label:active { background: var(--raised); } /* ICON_CHEVRON/ICON_CHEVRON_BAR رو به چپ رسم شده‌اند (برای اولین/قبلی)؛ بعدی/آخرین همان آیکون را آینه می‌کنند تا یک SVG کمتر لازم باشد. */ #revNext svg, #revLast svg, #btnPuzzleNext svg, #lsNext svg { transform: scaleX(-1); } #wMoveStrip { justify-content: center; } #wMsLabel { flex: none; } .toolbar { margin-top: var(--s2); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } #spectate .toolbar { justify-content: center; } /* نوارِ دکمه‌های پازل: جای دکمه‌ها با عوض‌شدنِ زبان (RTL/LTR) جابه‌جا نمی‌شود. */ .puzzle-toolbar { direction: ltr; } /* منوی باز شونده: به‌جای شیت مودال، همین‌جا زیر نوار ابزار باز می‌شود — چیزی که تازه گذاشته‌ای همان‌جا می‌ماند، نه اینکه پرده بیفتد رویش. */ .more-panel { margin-top: var(--s2); padding: var(--s3); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); } .more-panel > .row + .row, .more-panel > button + .row, .more-panel > .row + button, .more-panel > button + button { margin-top: var(--s2); } /* botSecondaryActions (بازی با ربات: چرخاندن/تسلیم منتقل‌شده به اینجا) هم همان .toolbar است، نه .row/button — پس قاعده‌ی فاصله‌ی بالا برایش صدق نمی‌کند و جدا لازم است. مثلِ نوارِ اصلی پخش نمی‌شود (space-between با دو آیکون بد به‌نظر می‌رسد)، کنارِ هم جمع می‌مانند. */ .more-panel > .toolbar + button, .more-panel > .toolbar + .row { margin-top: var(--s2); } #botSecondaryActions { justify-content: flex-start; margin-top: 0; } /* منوی «بیشتر»ِ صفحه‌ی بازی — برخلافِ .more-panel معمولی (که در جریانِ عادیِ صفحه باز می‌شود و ارتفاعِ کل را زیاد می‌کند)، این یکی مثلِ منوی همبرگریِ سربرگ (.nav-menu-panel قدیمی) شناور بود: روی خودِ تخته باز می‌شود، نه زیرِ نوار ابزار. چرا لازم شد — وقتی در جریانِ عادی بود، باز شدنش صفحه را درست به اندازه‌ای بلند می‌کرد که روی گوشی‌هایی با نوارِ آدرسِ مرورگر پایین (کرومِ موبایل)، نیمه‌ی پایینیِ منو زیرِ همان نوار گم می‌شد و کاربر حتی نمی‌فهمید باید اسکرول کند. .more-menu-anchor مرجعِ position است. */ .more-menu-anchor { position: relative; flex: 0 0 auto; display: flex; } .more-menu-anchor .more-panel.float-menu { position: absolute; z-index: 50; bottom: 100%; inset-inline-end: 0; margin-top: 0; margin-bottom: var(--s2); min-width: 220px; max-width: min(300px, 90vw); box-shadow: var(--shadow-md); } /* نوارِ ابزارِ بازی data-fixpos دارد (ترتیبِ دکمه‌ها در فارسی و انگلیسی یکی) و «بیشتر» همیشه آخرِ سمتِ راست است؛ پس منو به لبه‌ی راستش می‌چسبد و متنِ داخلش جهتِ زبان را برمی‌گرداند. */ .toolbar[data-fixpos] .more-menu-anchor .more-panel.float-menu { inset-inline: auto; right: 0; } html[dir="rtl"] .toolbar[data-fixpos] .more-panel { direction: rtl; } /* دکمه‌ی «منو» در نوار فقط یک تبِ معمولی است و صفحه‌ی #menu را باز می‌کند (قبلاً یک پنلِ شناور بود). */ /* نوار «حریف از بازی رفت» — عمداً بالای دکمه‌ها و زیر فهرست حرکت‌هاست تا وسط تخته را نگیرد ولی قابل چشم‌پوشی هم نباشد. اسمِ کلاس عمداً `gone-bar` است، نه `gone`. قبلاً `gone` بود و چون این رول هیچ محدودیتی نداشت، به *هر* المانی با آن کلاس می‌چسبید — از جمله مهره‌ی خورده‌شده (`.pc.gone` در board.js) و فلشِ Storm (`.storm-flash.gone`). نتیجه‌اش این بود که مهره‌ی خورده‌شده لحظه‌ای به یک کارتِ گردگوشه با پس‌زمینه‌ی --panel و لبه‌ی --saffron تبدیل می‌شد و padding/flex هم SVG‌اش را کوچک و وسط‌چین می‌کرد — همان «مربعی» که موقعِ زدنِ مهره پیدا می‌شد و رنگش با تم عوض می‌شد. */ .gone-bar { margin-top: var(--s3); padding: 11px var(--s3); border-radius: var(--r-sm); font-size: var(--t-14); background: var(--panel); border: 1px solid var(--saffron); display: flex; align-items: center; gap: var(--s3); } .gone-bar .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--saffron); animation: gone-pulse 1.4s ease-in-out infinite; } .gone-bar .cd { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--saffron); direction: ltr; } @keyframes gone-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .banner { margin-top: var(--s3); padding: 11px var(--s3); border-radius: var(--r-sm); font-size: var(--t-14); background: var(--panel); border: 1px solid var(--line); } .banner.good { border-color: var(--firuzeh); } .banner.bad { border-color: var(--danger); } .banner.warn { border-color: var(--saffron); } .banner .link { direction: ltr; display: inline-block; color: var(--firuzeh); word-break: break-all; } .invite-link-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; direction: ltr; } .icon-btn.tiny { width: 26px; height: 26px; } .icon-btn.tiny svg { width: 14px; height: 14px; } /* نوارِ «باز کردن در اپ» — فقط روی اندروید، وقتی با لینکِ دعوت وارد می‌شویم (نگاه کن به maybeShowOpenInAppBanner در app.js). ثابت و بالای همه‌چیز چون ممکن است در هر صفحه‌ای (حتی پیش از ورود) ظاهر شود. */ .applink-banner { position: fixed; inset-inline: 0; top: 0; z-index: 61; display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: 10px var(--s3); padding-top: calc(10px + env(safe-area-inset-top)); background: var(--firuzeh); color: var(--on-accent); font-size: var(--t-14); font-weight: 700; } .applink-banner a { color: var(--on-accent); text-decoration: underline; } .applink-banner .icon-btn { color: var(--on-accent); } /* نوار هشدار مرور — باید واضح باشد که تخته موقعیت زنده را نشان نمی‌دهد */ .reviewing { border-color: var(--saffron) !important; } .review-bar { margin-top: var(--s2); padding: 9px var(--s3); border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--saffron); font-size: var(--t-13); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .review-bar button { padding: 5px var(--s3); border-radius: var(--r-sm); background: var(--saffron); color: var(--ink); font-weight: 700; font-size: var(--t-12); } /* سربرگ صفحه‌ی مرور — جای نوار دقت که در حالت مرور هنوز محاسبه نشده */ .rp-head { display: flex; align-items: baseline; gap: var(--s2); padding: 10px var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: var(--s3); } .rp-head .who { font-weight: 700; } .rp-head .meta { color: var(--muted); font-size: var(--t-12); margin-inline-start: auto; } /* سربرگِ حریف در مرور/تحلیل: آواتار + نام + ریتینگِ موقعِ بازی. با داشتنِ data-uid (حریفِ واقعی) لمسِ آواتار/نام پروفایل را باز می‌کند. */ .rp-head { align-items: center; } .rp-head[data-uid] .opp, .rp-head[data-uid] .opp * { cursor: pointer; } .rp-head[data-uid] .opp { -webkit-tap-highlight-color: transparent; } .rp-head[data-uid] .rp-name.opp .nm:hover { text-decoration: underline; text-underline-offset: 3px; } .rp-head[data-uid] .ava.opp:active { transform: scale(.94); } /* دو بازیکن زیرِ هم در یک گریدِ سه‌ستونه: [آواتار] [نام (ریتینگ)] [تغییرِ ریتینگ]. حریف بالا (با آواتار)، خودِ کاربر پایین؛ ستونِ تغییرِ ریتینگ باعث می‌شود «+ سبز» و «− قرمز» دقیقاً زیرِ هم بیفتند. */ .rp-head .rp-players { display: grid; grid-template-columns: auto minmax(0, max-content) auto; align-items: center; column-gap: var(--s2); row-gap: 3px; min-width: 0; flex: 0 1 auto; justify-content: start; } .rp-head .rp-name { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-weight: 700; } .rp-head .rp-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-head .rp-name .rt { flex: 0 0 auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; } .rp-head .rp-name.me { font-size: var(--t-12); } .rp-head .rp-name.me .nm { font-weight: 600; color: var(--muted); } .rp-head .rp-chip { display: flex; } .rp-head .rd, .an-pl .rd { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font-size: var(--t-11); font-weight: 800; line-height: 1.5; letter-spacing: .01em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .rp-head .rd.up, .an-pl .rd.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); } .rp-head .rd.down, .an-pl .rd.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); } .rp-head .rd.zero, .an-pl .rd.zero { color: var(--muted); background: var(--raised); } /* بازیکن‌ها اولویت دارند؛ متنِ نتیجه فقط جای باقی‌مانده را می‌گیرد و لازم شد می‌شکند */ .rp-head .meta { flex: 1 1 0; min-width: 4.5em; text-align: end; line-height: 1.35; } /* آواتارِ حریف در ردیف‌های لیستِ بازی‌ها (خانه، لیستِ کامل، بازی‌های اخیرِ پروفایل) */ .grow .ava[data-uid], .grow .ava[data-uid] * { cursor: pointer; } .grow .ava[data-uid] { -webkit-tap-highlight-color: transparent; } .grow .ava[data-uid]:active { transform: scale(.94); } .promo { display: flex; gap: var(--s2); } .promo button { flex: 1; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); padding: 6px; } .promo button:active { background: var(--firuzeh); } .promo .pc { position: static; width: 100%; height: 100%; } /* ================================================================ ویرایشگرِ تخته ================================================================ */ /* مهره‌های یدک (الگوی سایت‌های شطرنجِ مطرح): یک ردیفِ ۸خانه‌ایِ هم‌عرضِ تخته برای هر رنگ — دست | شاه وزیر رخ فیل اسب پیاده | پاک‌کن. هر خانه دقیقاً هم‌اندازه‌ی یک خانه‌ی تخته است تا مهره‌ی یدک و مهره‌ی روی تخته یکی به نظر برسند. */ .editor-stage { display: flex; flex-direction: column; gap: 6px; } .editor-spare { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; background: var(--raised); border-radius: var(--r-sm); direction: ltr; } .editor-pc-btn { aspect-ratio: 1; border-radius: var(--r-sm); background: transparent; border: 0; padding: 6%; touch-action: none; position: relative; } .editor-pc-btn .pc { position: static; width: 100%; height: 100%; } .editor-pc-btn:hover { background: var(--accent-soft); } .editor-pc-btn[aria-pressed="true"] { background: var(--firuzeh); } .editor-pc-btn.editor-tool { display: flex; align-items: center; justify-content: center; } .editor-pc-btn.editor-tool svg { width: 42%; height: 42%; min-width: 18px; min-height: 18px; color: var(--muted); } .editor-pc-btn.editor-tool[aria-pressed="true"] svg { color: var(--on-accent); } .editor-side { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); } .editor-side .field, .editor-side .coord-field { margin: 0; } .editor-status { border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--t-13); background: var(--raised); border: 1px solid var(--line); } .editor-status:empty { display: none; } .editor-status.good { border-color: color-mix(in srgb, var(--c-best) 40%, var(--line)); } .editor-status.bad { border-color: var(--danger); color: var(--danger); } .editor-status.warn { border-color: var(--c-best); } .editor-status ul { margin: 4px 0 0; padding-inline-start: 18px; } .editor-status li { margin: 2px 0; } #editorPreset { width: 100%; padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; font-size: var(--t-14); } .editor-toolbar { margin: 0; } .editor-castle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); font-size: var(--t-13); } .editor-castle-col { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); } .editor-castle-h { width: 100%; font-weight: 700; color: var(--muted); font-size: var(--t-12); } .editor-castle label { display: flex; align-items: center; gap: 6px; direction: ltr; } .editor-castle input:disabled + span { opacity: 0.4; } .editor-continue-h { display: block; font-size: var(--t-12); font-weight: 700; color: var(--muted); margin-bottom: 6px; } .editor-continue-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .editor-continue-row .btn { margin: 0; padding: 10px 4px; font-size: var(--t-13); } .editor-continue-row .btn:disabled { opacity: 0.45; cursor: not-allowed; } .editor-fen-row { flex-wrap: wrap; } #abFenRow { flex-wrap: wrap; } /* دسکتاپ: تخته (با مهره‌های یدکِ بالا/پایین) چپ و هرچه بزرگ‌تر، پنلِ تنظیمات راست — مثلِ ویرایشگرِ سایت‌های شطرنجِ مطرح. قبلاً کارت تمام‌عرض بود و تخته ~۱۰۰۰px می‌شد و همه‌ی دکمه‌ها زیرِ صفحه می‌رفتند. */ @media (min-width: 1100px) { #screenLayer > #boardEditor { max-width: none; } #screenLayer > #boardEditor > .sec { --ed-side: clamp(300px, 26vw, 380px); /* تخته + دو ردیفِ یدک (هر کدام یک‌هشتمِ تخته) باید در ارتفاع جا شوند */ --ed-board: min( calc((var(--app-100dvh) - 240px) / 1.25), calc(100vw - var(--gutter) * 2 - var(--ed-side) - var(--s5) * 3), 760px ); max-width: none; width: calc(var(--ed-board) + var(--ed-side) + var(--s5) * 3); margin-inline: auto; } #boardEditor .editor-hint { margin-bottom: var(--s3); } .editor-card { display: grid; grid-template-columns: var(--ed-board) var(--ed-side); gap: var(--s5); align-items: start; direction: ltr; } .editor-card > * { direction: rtl; } html[dir="ltr"] .editor-card > * { direction: ltr; } .editor-stage { width: var(--ed-board); direction: ltr; } .editor-side { margin-top: 0; } } /* مهره‌ی شناور حینِ درگ — از پالت یا از خودِ تخته، با pointerهایِ سراسری دنبالِ نشانگر/انگشت می‌آید تا رهاشدن (نگاه کن به editorStartDrag در app.js). دو کلاس عمداً با هم — .pc برایِ رنگ/شکلِ SVG، این یکی فقط برایِ موقعیت‌دهیِ ثابت روی صفحه؛ دو کلاس هم مشخصیتش را از .pcِ تنها بالاتر می‌برد تا مطمئن باشیم بدونِ وابستگی به ترتیبِ فایل برنده می‌شود. */ .editor-drag-ghost.pc { position: fixed; z-index: 999; pointer-events: none; } /* ================================================================ ۷. پازل، تخته‌ی آزاد، درس، آموزشِ مهره‌ها، مختصات ================================================================ */ /* ------------------------------------------- کارت‌های تصویریِ حالت‌های پازل هر کارت یک عکسِ واقعی دارد که تمامِ کارت را پر می‌کند: عکس با width:100%;height:auto در جریانِ عادی می‌نشیند، پس اندازه‌ی کارت دقیقاً اندازه‌ی خودِ عکس است — نه کراپ می‌شود، نه فضای خالی می‌ماند. نوشته‌ها (تیتر/زیرتیتر/دکمه) با position:absolute روی پایینِ همان عکس می‌نشینند؛ به‌جای یک لایه‌ی تیره‌ی پشتِ نوشته فقط از سایه‌ی متنی برای خوانایی استفاده شده — بنا به خواسته‌ی صریح، عکس تیره نمی‌شود. */ /* ---------------------------------------------- داشبوردِ پازل کارتِ آمارِ بالای صفحه‌ی پازل — سه‌کاشیِ عملکرد/بازی‌شده/حل‌شده با همان .pf-mini-row/.pf-mini پروفایل (بدونِ تعریفِ دوباره)، رادارِ SVG دست‌ساز (radarChart در app.js)، و ردیفِ «X تا برای مرور» با همان .nav-row معمول، فقط با یک خطِ جداکننده‌ی بالا چون تنها ردیفِ داخلِ کارت است (نه داخلِ .nav-list). */ /* ---------------------------------------------- داشبوردِ پازل پیش‌فرض بسته: فقط ردیفِ عنوان+خلاصه (.puzzle-dash-toggle، با همان chev/aria-expanded ِ .more-toggle، فقط چیده‌شده کنارِهم به‌جایِ وسط‌چین). بدنه‌ی باز‌شونده (.more-panel معمول) سه‌کاشیِ عملکرد/ بازی‌شده/حل‌شده را با همان .pf-mini-row/.pf-mini پروفایل نشان می‌دهد (بدونِ تعریفِ دوباره)، رادارِ SVG دست‌ساز (radarChart در app.js)، و ردیفِ «X تا برای مرور» با همان .nav-row معمول، با یک خطِ جداکننده‌ی بالا چون تنها ردیفِ داخلِ این پنل است (نه داخلِ .nav-list). */ .puzzle-dash-card { padding-bottom: var(--s2); } .puzzle-dash-card .more-toggle.puzzle-dash-toggle { justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 0; background: none; border: none; padding: 0; text-align: start; } .puzzle-dash-toggle-title { flex: 0 0 auto; font-weight: 700; font-size: var(--t-14); color: var(--text); } .puzzle-dash-brief { flex: 1; min-width: 0; text-align: start; font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-radar { margin: var(--s3) auto 0; max-width: 300px; } .pd-radar svg { display: block; width: 100%; height: auto; } .puzzle-dash-replay { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); border-bottom: 0 !important; } .puzzle-banner { display: block; width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: var(--s4); } .mode-hero, .mode-card { overflow: hidden; display: flex; flex-direction: column; text-align: start; width: 100%; } /* حاشیه‌ی نازکِ کِرِم دورِ کارت‌ها از border و inset-shadowِ خودِ .card می‌آمد (نه از کراپِ عکس) — اینجا برای کارت‌های عکسی هر دو خاموش می‌شوند تا عکس درست تا لبه‌ی گردِ کارت برسد. */ .card.photo-card { padding: 0; border: none; box-shadow: none; } .photo-card { position: relative; } .photo-card-img { display: block; width: 100%; height: auto; } .photo-card-body { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--s3) var(--s4) var(--s4); } /* شبکه‌ی دوستونه: با stretch پیش‌فرضِ گرید، هر ردیف به‌اندازه‌ی بلندترین عکسِ همان ردیف کشیده می‌شد و زیرِ عکسِ کوتاه‌تر یک نوارِ نازک از پس‌زمینه‌ی کِرِمِ کارت دیده می‌شد — همان «حاشیه‌ی سفید» که کراپ به‌نظر می‌رسید. با start هر کارت دقیقاً هم‌اندازه‌ی عکسِ خودش می‌ماند. */ .mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); align-items: start; } .mode-card-title { font-weight: 700; font-size: var(--t-14); margin: 0 0 2px; } .mode-card-sub { font-size: var(--t-12); line-height: 1.5; margin: 0 0 var(--s2); } .mode-card-stat { font-size: var(--t-11); font-weight: 700; margin: -2px 0 var(--s2); } .mode-card .btn { margin-top: auto; align-self: flex-start; } .photo-card-body h2, .photo-card-body h3, .photo-card-body .hint-text, .photo-card-body .mode-card-title, .photo-card-body .mode-card-sub, .photo-card-body .mode-card-stat, .photo-card-body .streak .n, .photo-card-body .streak .lbl, .photo-card-body .tag { color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } .photo-card-body .mode-card-sub { color: var(--on-photo-muted); } .photo-card-body .btn { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* تیترِ هیرویِ پازلِ روزانه: به‌جای نشستن توی بلوکِ پایین، مثلِ یک چیپِ کوچیک روی گوشه‌ی خالیِ خودِ عکس می‌نشیند. عمداً از left/right فیزیکی استفاده شده نه inset-inline-*: گوشه‌ی خالیِ عکس یک نقطه‌ی ثابت روی خودِ تصویر است، ربطی به جهتِ فارسی/انگلیسیِ صفحه ندارد — با منطقی‌ها، عوضِ زبان جای چیپ را هم (غلط) عوض می‌کرد. فقط داخلِ photo-card اسکوپ شده، card-head جای دیگر دست‌نخورده می‌ماند. */ .photo-card > .card-head.pos-tl, .photo-card > .card-head.pos-tr { position: absolute; top: 0; margin: 0; padding: var(--s3) var(--s4) 0; gap: var(--s2); } .photo-card > .card-head.pos-tl { left: 0; } .photo-card > .card-head.pos-tr { right: 0; } .photo-card > .card-head.pos-tl h2, .photo-card > .card-head.pos-tl .tag, .photo-card > .card-head.pos-tr h2, .photo-card > .card-head.pos-tr .tag { color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } /* بلوکِ محتوای Battle: چون تقریباً تمامِ پایینِ این عکس را مهره‌ها گرفته‌اند (نه فقط یک گوشه)، بلوک را کلاً برد بالا — نوارِ بالای عکس، جایی که فقط قوسِ خالیِ پس‌زمینه‌ست. */ .photo-card-body.pos-top { inset-block-start: 0; inset-block-end: auto; padding: var(--s3) var(--s4) 0; } /* تیترِ کارت‌های کوچیک: یک چیپِ ثابت روی گوشه‌ی خالیِ همان عکس (هر کارت طبقِ خودِ عکسش — بعضی بالا-چپ، بعضی بالا-راست)، مستقل از زبان/جهتِ صفحه (همان دلیلِ بالا: left/right فیزیکی). در هر دو حالتِ جمع‌وباز سرِ جایش می‌ماند. */ .card-title-chip { position: absolute; top: 0; margin: 0; padding: var(--s2) var(--s3); color: var(--on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } .card-title-chip.pos-tl { left: 0; } .card-title-chip.pos-tr { right: 0; } /* بازوبسته‌شدنِ کارت: پیش‌فرض فقط تیتر دیده می‌شود؛ با لمسِ کارت (نه دکمه) card-more (توضیح+دکمه) روی پایینِ عکس ظاهر می‌شود و خودِ کارت یک‌کم روی بقیه بزرگ می‌شود — نگاه کن به wireExpandableModeCards در app.js. */ .expandable { transition: transform 0.22s ease, box-shadow 0.22s ease; } .expandable.is-expanded { transform: scale(1.045); z-index: 3; box-shadow: var(--shadow-md); } .card-more { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--s3) var(--s4) var(--s4); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .is-expanded .card-more { opacity: 1; transform: translateY(0); pointer-events: auto; } .card-more .mode-card-sub, .card-more .mode-card-stat { color: var(--on-photo-muted); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } .card-more .mode-card-stat { color: var(--on-photo); } .card-more .btn { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } @media (prefers-reduced-motion: reduce) { .expandable, .expandable.is-expanded, .card-more { transition: none; } .star-halo, .star-body, .star-twinkle { animation: none; } .star-twinkle { display: none; } .star.collect .star-ring, .star.collect .star-burst i, .star.collect .star-halo { animation: none; } } /* کارتِ عریضِ Battle — دیگر ردیفی نیست؛ مثلِ بقیه یک عکسِ تمام‌عرض با نوشته‌های رویش، فقط در شبکه دو ستون را با هم می‌گیرد. */ .mode-card.wide { grid-column: 1 / -1; } .puzzle-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 2px var(--s3); font-size: var(--t-14); color: var(--muted); } .puzzle-head b { color: var(--text); font-variant-numeric: tabular-nums; } /* زنجیره‌ی حل‌های پشت‌سرِ هم */ .streak { display: flex; align-items: center; gap: 6px; } .streak .n { font-weight: 800; font-size: var(--t-16); font-variant-numeric: tabular-nums; color: var(--text); transition: color 0.3s; } .streak .lbl { font-size: var(--t-12); color: var(--muted); } /* سه پله: عادی، طلایی، داغ */ .streak.warm .n { color: var(--saffron); } .streak.hot .n { color: #ff6a3d; } .streak .flame { width: 0; opacity: 0; transition: width 0.3s, opacity 0.3s; } .streak.hot .flame { width: 15px; opacity: 1; } .streak .flame svg { width: 100%; height: 21px; display: block; } .streak .f-out { fill: #ff6a3d; } .streak .f-in { fill: #ffd24a; } .streak.hot .flame svg { animation: flicker 1.1s ease-in-out infinite; transform-origin: 50% 90%; } @keyframes flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.1, 0.95) rotate(-3deg); } 60% { transform: scale(0.95, 1.08) rotate(2deg); } } /* پرش کوتاه موقع بالا رفتن عدد */ .streak.pop .n { animation: streakpop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); } @keyframes streakpop { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } } .daily-status-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } /* ------------------------------------------------------ Puzzle Rush */ .rush-head { gap: var(--s3); } .rush-timer, .storm-timer { font-weight: 800; font-size: var(--t-20); font-variant-numeric: tabular-nums; color: var(--text); transition: color 0.2s; } .rush-timer.low { color: var(--danger); } .rush-score, .storm-score { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: var(--t-16); color: var(--saffron); } .rush-score .ic, .storm-score .ic { width: 18px; height: 18px; display: flex; } .rush-score .ic svg { width: 100%; height: 100%; } .rush-score.pop { animation: streakpop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); } /* جان‌ها: سه قلبِ SVG. ترتیبشان در هر زبان یکسان است (چپ‌به‌راست) تا از راست هر بار یکی بشکند و جای دکمه‌ها با عوض شدنِ زبان تکان نخورد. */ .rush-lives { display: flex; gap: 3px; direction: ltr; } .rush-lives .life { display: inline-flex; width: 24px; height: 24px; } .rush-lives .life svg { width: 100%; height: 100%; overflow: visible; } .rush-lives .body { fill: var(--danger); } .rush-lives .shine { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; opacity: 0.45; } .rush-lives .broken { display: none; } .rush-lives .life.lost .whole { display: none; } .rush-lives .life.lost .broken { display: block; } /* قلبِ شکسته: خاموش، دو نیمه‌ی کمی از هم جدا و کج */ .rush-lives .half { fill: var(--line); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; stroke-opacity: 0.55; transform-origin: 12px 21px; } .rush-lives .half.l { transform: translate(-1px, 0.5px) rotate(-6deg); } .rush-lives .half.r { transform: translate(1px, 1px) rotate(7deg); } /* لحظه‌ی شکستن: قرمز می‌شود، نیمه‌ها از هم باز می‌شوند و خاموش می‌شوند */ .rush-lives .life.breaking { animation: heartshake 0.45s ease-out; } .rush-lives .life.breaking .half { animation: heartfade 0.7s ease-out both; } .rush-lives .life.breaking .half.l { animation-name: heartfade, heartsplitl; } .rush-lives .life.breaking .half.r { animation-name: heartfade, heartsplitr; } @keyframes heartfade { 0% { fill: var(--danger); stroke: var(--danger); stroke-opacity: 1; } 45% { fill: var(--danger); stroke: var(--danger); stroke-opacity: 1; } 100% { fill: var(--line); stroke: var(--muted); stroke-opacity: 0.55; } } @keyframes heartsplitl { 0% { transform: none; } 35% { transform: none; } 70% { transform: translate(-2.4px, 1px) rotate(-12deg); } 100% { transform: translate(-1px, 0.5px) rotate(-6deg); } } @keyframes heartsplitr { 0% { transform: none; } 35% { transform: none; } 70% { transform: translate(2.4px, 1.8px) rotate(14deg); } 100% { transform: translate(1px, 1px) rotate(7deg); } } @keyframes heartshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } } @media (prefers-reduced-motion: reduce) { .rush-lives .life.breaking, .rush-lives .life.breaking .half { animation: none; } } /* رنگِ مهره‌ی خودِ کاربر — ثابت و همیشه‌دیدنی، نه فقط یک پیامِ گذرا، چون هر پازلِ تازه‌ی Rush می‌تواند رنگِ کاربر را عوض کند. */ .rush-color { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 2px 0 var(--s2); font-size: var(--t-13); color: var(--muted); font-weight: 600; } .rush-color .dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; } .rush-color .dot.black { background: #1d1e20; } /* ------------------------------------------------------ Puzzle Storm */ .storm-head { gap: var(--s3); } .storm-score .ic svg { width: 100%; height: 100%; } .storm-score.pop { animation: streakpop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); } .storm-combo { display: flex; align-items: center; gap: 4px; font-size: var(--t-13); color: var(--muted); } .storm-combo .n { font-weight: 800; font-size: var(--t-15); color: var(--text); font-variant-numeric: tabular-nums; } /* پیامِ گذرا و بزرگِ «+۷» یا «−۱۰» بالای تخته — چند صدم‌ثانیه دیده می‌شود و محو می‌شود، جدا از banner معمولی چون باید فوری و چشمگیر باشد. */ .storm-flash { text-align: center; font-weight: 800; font-size: var(--t-20); font-variant-numeric: tabular-nums; padding: 2px 0; transition: opacity 0.4s; } .storm-flash.good { color: var(--good); } .storm-flash.bad { color: var(--danger); } .storm-flash.gone { opacity: 0; } .cheer { animation: cheerin 0.35s ease-out; } @keyframes cheerin { from { opacity: 0; transform: translateY(6px); } } /* ------------------------------------------------------ مرورِ تم‌های پازل (v0.400) خلاصه‌ی پیشرفت + پیشنهادِ تمرین + جست‌وجو + چیپِ گروه‌ها؛ هر گروه یک رنگ و آیکونِ خودش را دارد و کاشی‌ها تسلط را با حلقه نشان می‌دهند (قبلاً: یک شبکه‌ی بلندِ یک‌شکل با نوارِ باریک، بدونِ هیچ سرنخی از «کجا هستم»). */ .th-focus { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin: var(--s2) 0 var(--s4); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--firuzeh) 38%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--firuzeh) 16%, var(--panel)) 0%, var(--panel) 70%); box-shadow: var(--shadow-sm); } .th-focus.hidden { display: none; } .th-focus-ic { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--firuzeh); color: var(--on-accent); } .th-focus-ic svg { width: 22px; height: 22px; } .th-focus-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .th-focus-kicker { font-size: var(--t-11); font-weight: 700; color: var(--muted); letter-spacing: 0.02em; } .th-focus-name { font-size: var(--t-16); font-weight: 800; line-height: 1.4; } .th-focus-meta { font-size: var(--t-12); color: var(--muted); line-height: 1.5; } .th-search { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); height: 44px; margin-bottom: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); transition: border-color 0.15s, box-shadow 0.15s; } .th-search:focus-within { border-color: var(--firuzeh); box-shadow: 0 0 0 3px var(--accent-soft); } .th-search svg { flex: 0 0 auto; width: 18px; height: 18px; } .th-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--t-14); } .th-search input::placeholder { color: var(--faint); } .th-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s2); } .th-chip { padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: var(--t-13); font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .th-chip[aria-pressed="true"] { background: var(--firuzeh); border-color: var(--firuzeh); color: var(--on-accent); } @media (hover: hover) { .th-chip[aria-pressed="false"]:hover { color: var(--text); border-color: var(--muted); } } .th-group { --tg: var(--muted); margin-top: var(--s5); } .th-group[data-g="mate"] { --tg: #C65A46; } .th-group[data-g="tactic"] { --tg: var(--saffron); } .th-group[data-g="attack"] { --tg: var(--pf-classical); } .th-group[data-g="phase"] { --tg: var(--good); } .th-group[data-g="special"] { --tg: var(--pf-corr); } .th-group[data-g="length"] { --tg: var(--c-brilliant); } .th-ghead { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .th-gic { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); background: color-mix(in srgb, var(--tg) 16%, transparent); color: var(--tg); } .th-gic svg { width: 19px; height: 19px; } .th-gtitle { flex: 1; margin: 0; font-size: var(--t-16); font-weight: 800; } .th-gcount { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; } .th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--s3); } .th-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 72px; padding: 10px 12px 9px; text-align: start; font: inherit; color: inherit; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .th-tile.is-mastered { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 6%, var(--panel)); } .th-tile:active { transform: scale(0.985); border-color: var(--tg); } @media (hover: hover) { .th-tile:hover { transform: translateY(-2px); border-color: var(--tg); box-shadow: var(--shadow-md); } } .th-tile:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 2px; } .th-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .th-name { font-size: var(--t-14); font-weight: 700; line-height: 1.5; min-width: 0; padding-top: 3px; } .th-meta { font-size: var(--t-11); color: var(--muted); font-variant-numeric: tabular-nums; } .th-ring { --rc: var(--faint); position: relative; flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; } .th-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; } .th-ring circle { fill: none; stroke-width: 3.6; } .th-ring .trk { stroke: var(--line); } .th-ring .arc { stroke: var(--rc); stroke-linecap: round; } .th-ring b { position: relative; font-size: var(--t-10); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rc); } .th-ring[data-tone="hi"] { --rc: var(--good); } .th-ring[data-tone="mid"] { --rc: var(--saffron); } .th-ring[data-tone="lo"] { --rc: var(--danger); } .th-ring[data-tone="warm"] { --rc: var(--muted); } .th-ring[data-tone="none"] .trk { stroke-dasharray: 2.4 4.6; stroke: color-mix(in srgb, var(--tg) 42%, var(--line)); } .th-play { position: relative; width: 0; height: 0; margin-inline-start: -2px; border-block: 4.5px solid transparent; border-inline-start: 7px solid color-mix(in srgb, var(--tg) 55%, var(--faint)); } :root[dir="rtl"] .th-play, html[dir="rtl"] .th-play { border-inline-start: 0; border-inline-end: 7px solid color-mix(in srgb, var(--tg) 55%, var(--faint)); margin-inline-start: 0; margin-inline-end: -2px; } .th-empty { text-align: center; padding: var(--s6) 0; } @media (prefers-reduced-motion: reduce) { .th-tile { transition: none; } } /* ------------------------------------------------------ Puzzle Battle */ .battle-vs-bar { display: flex; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s2) 0 var(--s3); } .battle-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; } .battle-side .n { font-weight: 800; font-size: var(--t-24); font-variant-numeric: tabular-nums; color: var(--text); } .battle-side.opp .n { color: var(--muted); } .battle-side .mistakes { min-height: 14px; color: var(--danger); font-size: var(--t-12); letter-spacing: 2px; } .battle-vs-bar .vs { font-weight: 700; font-size: var(--t-12); color: var(--muted); } #battleResult { text-align: center; padding: var(--s4) var(--s3); margin-top: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); } #battleResult h2 { margin: 0 0 4px; font-size: var(--t-20); } #battleResult .btn { margin-top: var(--s2); width: 100%; } #battleLobby .card h3 { margin: 0 0 4px; font-size: var(--t-15); font-weight: 700; } #battleQueueStatus { text-align: center; } /* فهرستِ حرکت‌های تخته‌ی آزاد */ .moves { margin-top: var(--s3); padding: 9px var(--s3); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); max-height: 96px; overflow-y: auto; font-size: var(--t-13); color: var(--muted); direction: ltr; text-align: left; font-variant-numeric: tabular-nums; word-spacing: 3px; } .moves b { color: var(--text); font-weight: 600; } /* ---------------------------------------------------------- درس از خاصیت‌های منطقی (inline-start/end) استفاده می‌شود نه left/right، چون همین صفحه هم در فارسی راست‌به‌چپ است هم در انگلیسی چپ‌به‌راست. */ .lesson-head { padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s3); } .lesson-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .lesson-head-row h2 { margin: 0; font-size: var(--t-16); } .lesson-head .sum { color: var(--muted); font-size: var(--t-13); line-height: 1.6; margin-top: var(--s1); } .lesson-head .bar { height: 4px; border-radius: var(--r-xs); background: var(--line); margin-top: var(--s3); overflow: hidden; } .lesson-head .bar i { display: block; height: 100%; background: var(--firuzeh); transition: width .25s ease; } /* اندازه‌ی این ناحیه (نه هرکدام از سه بچه‌اش جدا) ثابت است — وگرنه رشد یا پنهان/آشکار شدنِ هرکدام، دکمه‌های زیرِ کل ناحیه را جابه‌جا می‌کرد. برای محتوای بلندتر از جا، خودِ همین ناحیه اسکرول می‌شود. */ .lesson-dynamic { height: 190px; overflow-y: auto; } /* تخته‌ی مربی: خط‌ها روی هم جمع می‌شوند و تا حرکت بعدیِ کاربر می‌مانند. قبلاً هر پیام پیام قبلی را پاک می‌کرد و توضیحِ حرکت، پیش از خوانده شدن، زیر جوابِ حریف و «نوبت توست» دفن می‌شد. */ .coach { margin-top: var(--s3); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); font-size: var(--t-14); line-height: 1.75; } .coach.empty { display: none; } .coach .line { padding: 11px var(--s4); border-inline-start: 3px solid var(--line); } .coach .line + .line { border-top: 1px solid var(--line); } .coach .line.bad { border-inline-start-color: var(--c-blunder); } .coach .line.good { border-inline-start-color: var(--firuzeh); } .coach .mv { font-weight: 800; direction: ltr; display: inline-block; } .turn-hint { margin-top: var(--s2); font-size: var(--t-14); color: var(--muted); } /* «به‌زودی» — برچسبِ ردیف‌های ساخته‌نشده (فقط برای کارکنان دیده می‌شود) */ .lesson-soon-pill { padding: 2px 8px; border-radius: var(--r-pill); background: var(--raised); font-weight: 700; color: var(--muted); } /* -------------------------------------------------- کاوشگر افتتاحیه */ .opening-book-moves { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s2); } .ob-row { display: grid; grid-template-columns: auto 1fr 112px; align-items: center; gap: var(--s3); padding: 6px var(--s3); border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); text-align: start; } .ob-row.is-best { border-color: color-mix(in srgb, var(--accent, #6fb36f) 70%, var(--line)); } .ob-name { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* نوار افقی: همیشه LTR، سفید از چپ؛ تیک = جایی که نوار پیش از این حرکت بود (تأثیرِ حرکت) */ .ob-bar, .ob-eval { position: relative; display: block; background: var(--eval-black); overflow: hidden; border-radius: var(--r-xs); direction: ltr; } .ob-bar { height: 18px; } .ob-bar i, .ob-eval i { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--eval-white); transition: width .45s cubic-bezier(.3, .7, .3, 1); } .ob-bar u { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-blunder, #d9534f); text-decoration: none; } .ob-bar b, .ob-eval .v { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 5px; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; } .ob-bar b.w, .ob-eval .v.w { left: 0; color: #1d1e20; } .ob-bar b.b, .ob-eval .v.b { right: 0; color: #f4f4f4; } .ob-bar.is-empty { opacity: .35; } .ob-stage { display: flex; flex-direction: column; gap: 4px; align-self: center; width: 100%; } .ob-eval { height: 18px; } .ob-eval.is-empty { opacity: .35; } .ob-eval.is-live { opacity: .7; } /* سربرگ: کدِ ECO + نامِ افتتاحیه‌ی موقعیت (یک خط، بریده با «…») */ .lesson-head-row h2.ob-title { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1; } .ob-title > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .ob-eco { flex: 0 0 auto; font-size: var(--t-11); font-weight: 800; color: var(--muted); padding: 2px 6px; border-radius: var(--r-xs); background: var(--raised); } .ob-eco:empty { display: none; } /* گوشی: بدنه‌ی کاوشگر قالب ندارد — تخته و پنل همان آیتم‌های ستونِ صفحه‌اند. پنل فضای باقی‌مانده را می‌گیرد (روی گوشیِ بلند ردیف‌های بیشتری دیده می‌شود)؛ کمینه‌اش همان ۱۹۰pxِ ناحیه‌ی ثابتِ قبلی است، پس اندازه‌ی تخته دست نخورد. */ #obBody { display: contents; } .ob-side { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 190px; margin-top: var(--s2); } #obDynamic.ob-dynamic { height: auto; flex: 1 1 0; min-height: 150px; overflow-y: auto; overscroll-behavior: contain; } /* تب‌های پایگاه — جهتِ ثابت (LTR) در هر زبان، تا جای دکمه‌ها با عوض‌شدنِ زبان جابه‌جا نشود */ .ob-tabs { display: flex; align-items: stretch; gap: 2px; direction: ltr; flex: 0 0 auto; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; } .ob-tabs button { flex: 1 1 0; min-width: 0; padding: 6px 4px; border-radius: var(--r-sm); color: var(--muted); font-weight: 700; font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .12s, color .12s; } .ob-tabs button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.18)); } .ob-tabs .ob-filter-btn { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; position: relative; } .ob-tabs .ob-filter-btn svg { width: 17px; height: 17px; } .ob-tabs .ob-filter-btn.is-on { color: var(--firuzeh); } .ob-tabs .ob-filter-btn.is-on::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--firuzeh); } .ob-empty { padding: var(--s3) var(--s1); } /* جدولِ آماری: حرکت · ٪ · تعداد · نوارِ برد/مساوی/باخت — جهتِ ثابت مثلِ نتِ شطرنج */ .ob-srow { display: grid; grid-template-columns: minmax(54px, auto) 46px 62px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; padding: 6px 8px; direction: ltr; text-align: left; border-bottom: 1px solid var(--line); background: none; color: inherit; font-size: var(--t-13); font-variant-numeric: tabular-nums; } button.ob-srow { cursor: pointer; } @media (hover: hover) { button.ob-srow:hover { background: var(--raised); } } button.ob-srow:active { background: var(--raised); } .ob-srow.ob-shead { padding-block: 2px 4px; color: var(--faint, var(--muted)); font-size: var(--t-10); font-weight: 700; } .ob-srow.ob-shead span:nth-child(3) { text-align: right; } .ob-srow .ob-pct { color: var(--muted); text-align: right; font-size: var(--t-12); } .ob-srow .ob-cnt { text-align: right; font-weight: 600; } .ob-srow.is-total { border-bottom: 0; font-weight: 800; } .ob-srow.is-total .ob-san { padding-left: 4px; color: var(--muted); } .ob-srow .ob-avg { font-weight: 600; font-size: var(--t-10); white-space: nowrap; } .ob-srow.is-total .ob-pct { overflow: visible; } .ob-wdl { display: flex; height: 18px; border-radius: var(--r-xs); overflow: hidden; direction: ltr; box-shadow: inset 0 0 0 1px var(--line); } .ob-wdl i { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .ob-wdl i.w { background: var(--eval-white); color: #1d1e20; } .ob-wdl i.d { background: #9a9da2; color: #17181a; } .ob-wdl i.b { background: var(--eval-black); color: #f4f4f4; } .ob-wdl.is-empty { opacity: .35; background: var(--raised); } /* بازی‌های برتر/اخیر زیرِ جدول */ .ob-games-h { margin: var(--s3) 0 2px; padding: 0 8px; font-size: var(--t-11); font-weight: 800; color: var(--muted); letter-spacing: .02em; } .ob-game { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 64px; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; direction: ltr; text-align: left; background: none; color: inherit; border-bottom: 1px solid var(--line); font-size: var(--t-12); cursor: pointer; } @media (hover: hover) { .ob-game:hover { background: var(--raised); } } .ob-game:active { background: var(--raised); } .ob-g-elo, .ob-g-names { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ob-g-elo i { font-style: normal; color: var(--muted); font-size: var(--t-11); font-variant-numeric: tabular-nums; min-height: 1.3em; } .ob-g-names b { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .ob-g-names b::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--line); } .ob-g-names b.w::before { background: var(--eval-white); } .ob-g-names b.b::before { background: var(--eval-black); } .ob-g-res { font-weight: 800; font-variant-numeric: tabular-nums; } .ob-g-meta { color: var(--muted); font-size: var(--t-11); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* تخته‌ی تحلیل: تراشه‌ی ادامه با تعدادِ بازی و نوارِ نازکِ برد/مساوی/باخت زیرش */ .ab-op-move.has-stats { position: relative; padding-bottom: 9px; font-variant-numeric: tabular-nums; } .ab-op-move.has-stats .ob-wdl { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: var(--r-xs); box-shadow: none; } .ab-op-move.has-stats .ob-wdl i { font-size: 0; } /* ------------------------------------------ آموزشِ حرکتِ مهره‌ها */ /* فهرستِ فصل‌ها: مسیرِ یادگیری، نه یک لیستِ خاکستری. هر فصل یک کارتِ مستقل با مهره‌ی درشت؛ یک خطِ باریک فصل‌ها را به هم وصل می‌کند و تا جایی که رفته‌ای فیروزه‌ای است. */ .tut-progress { margin: var(--s4) 0 var(--s4); } .tut-progress-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s2); } .tut-progress-row b { font-size: var(--t-14); } .tut-progress-row span { color: var(--muted); font-size: var(--t-13); font-variant-numeric: tabular-nums; } .tut-progress .pbar { height: 8px; } .tut-progress .pbar i { transition: width 0.6s cubic-bezier(0.3, 0.8, 0.3, 1); } .tut-path { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s5); } .tut-chapter-row { position: relative; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; animation: tut-in 0.42s cubic-bezier(0.25, 0.8, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 55ms); } .tut-chapter-row[data-chapter] { cursor: pointer; } .tut-chapter-row[data-chapter]:hover { box-shadow: var(--shadow-md); } .tut-chapter-row[data-chapter]:active { transform: scale(0.985); } .tut-chapter-row + .tut-chapter-row::before { content: ""; position: absolute; width: 2px; height: var(--s4); top: calc(var(--s4) * -1 - 1px); inset-inline-start: calc(var(--s4) + 31px); background: var(--line); border-radius: var(--r-xs); } .tut-chapter-row.done + .tut-chapter-row::before, .tut-chapter-row.done + .tut-chapter-row.current::before { background: var(--firuzeh); } .tut-chapter-row .ic { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--sq-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -6px 12px rgba(0, 0, 0, 0.12); } .tut-chapter-row .ic svg { width: 70%; height: 70%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); } .tut-chapter-row .ic .body { fill: var(--pw-fill); stroke: var(--pw-stroke); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; } .tut-chapter-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tut-chapter-row .nm { font-weight: 800; font-size: var(--t-16); line-height: 1.4; } .tut-chapter-row .bl { color: var(--muted); font-size: var(--t-12); line-height: 1.6; } .tut-chapter-row .meta { display: flex; align-items: center; gap: var(--s2); margin-top: 4px; font-size: var(--t-11); color: var(--muted); } .tut-chapter-row .segs { display: inline-flex; gap: 3px; } .tut-chapter-row .segs i { width: 9px; height: 4px; border-radius: var(--r-xs); background: var(--line); } .tut-chapter-row.done .segs i { background: var(--firuzeh); } .tut-chapter-row .status { flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); } .tut-badge { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--firuzeh); color: var(--on-accent); } .tut-badge svg { width: 16px; height: 16px; } .tut-lock svg { width: 18px; height: 18px; } .tut-go { padding: 7px 16px; border-radius: var(--r-pill); font-weight: 800; font-size: var(--t-13); background: var(--firuzeh); color: var(--on-accent); } .tut-chapter-row.current { border-color: var(--firuzeh); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); } .tut-chapter-row.locked { background: transparent; box-shadow: none; border-style: dashed; } .tut-chapter-row.locked .ic { background: var(--raised); box-shadow: none; } .tut-chapter-row.locked .ic svg, .tut-chapter-row.locked .info { opacity: 0.5; } @keyframes tut-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tut-chapter-row { animation: none; } } .tut-play-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s1); } .tut-play-head h2 { font-size: var(--t-16); margin: 0; } .tut-play-head span { font-size: var(--t-13); color: var(--muted); } .tphead-end { display: flex; align-items: center; gap: var(--s2); } /* همان تصمیمِ ارتفاعِ‌ثابتِ درس — توضیح یا بازخورد نباید دکمه‌ی زیرش را جابه‌جا کند. */ .tut-coach { margin-top: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); font-size: var(--t-14); line-height: 1.8; overflow-y: auto; box-sizing: border-box; flex: 1 1 auto; min-width: 0; } /* روی گوشی کادرِ توضیح کلِ فضای باقی‌مانده‌ی زیرِ تخته را می‌گیرد (قبلاً ۹۲px ثابت بود و کاربر مجبور به اسکرول می‌شد). ارتفاعش برای یک صفحه‌ی مشخص ثابت است، پس دکمه‌ها هنگامِ عوض شدنِ متن جابه‌جا نمی‌شوند. */ .tut-coach-wrap { position: relative; display: flex; margin-top: var(--s3); min-height: 120px; } /* بالاتر از «#screenLayer > main > * { flex: 0 0 auto }» تا واقعاً رشد کند */ #screenLayer > #tutorialPlay > .tut-coach-wrap { flex: 1 1 auto; } /* دکمه‌ی «از اول» رویِ کادر، گوشه‌ی پایین‑چپ. متن یک حاشیه‌ی پایین می‌گیرد تا زیرش نرود. */ .tut-retry { position: absolute; left: 8px; bottom: 8px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: var(--r); cursor: pointer; background: var(--panel); color: var(--muted); border: 1px solid var(--line); } .tut-retry svg { width: 19px; height: 19px; } .tut-retry:active { transform: scale(.94); } .tut-coach-wrap.has-retry > .tut-coach { padding-bottom: 54px; } @media (max-width: 767px) { #screenLayer > #tutorialPlay { justify-content: flex-start; } } @media (min-width: 768px) { /* روی تبلت/دسکتاپ صفحه بلند است؛ کادر نباید غول‌آسا شود */ #screenLayer > #tutorialPlay > .tut-coach-wrap { flex: 0 0 auto; height: 150px; } } .tut-coach .feedback { margin-top: var(--s2); font-weight: 700; } .tut-coach .feedback.bad { color: var(--c-blunder); } .tut-coach .feedback.good { color: var(--firuzeh); } /* شمارشگرِ تمرینِ ستاره‌ای — ستاره‌های جمع‌شده و تعدادِ حرکت، زیرِ متنِ مربی. تعدادِ حرکت عمداً سقف ندارد: هدفِ این تمرین یاد گرفتنِ خودِ حرکت است، نه بهینه‌بازی. */ .tut-stars { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--t-13); } .tut-stars-count { font-weight: 700; color: var(--saffron); } .tut-stars-moves { color: var(--muted); font-variant-numeric: tabular-nums; } /* ---- ویرایشِ مدیرِ آموزش (static/js/tutorial_edit.js؛ فقط وب، فقط کارکنان) ---- */ .tut-edit { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); } .tut-edit.hidden { display: none; } .te-nav { display: flex; align-items: center; gap: var(--s2); } .te-step { font-weight: 700; font-size: var(--t-13); color: var(--muted); } .te-nav .lesson-edited-pill { margin-inline-start: auto; } #teNavPrev svg { transform: scaleX(-1); } html[dir="ltr"] #teNavPrev svg { transform: none; } html[dir="ltr"] #teNavNext svg { transform: scaleX(-1); } .tut-edit .le-swatchrow, .tut-edit .le-toolrow { margin-top: 0; } .tut-edit .le-rt { margin-bottom: 0; flex-wrap: wrap; } .tut-edit .field { margin: 0; } .tut-edit textarea { width: 100%; box-sizing: border-box; } .te-hint, .te-note { margin: 0; font-size: var(--t-12); } #teMsg { min-height: 0; margin: 0; } #teMsg:empty { display: none; } #teMsg.bad { color: var(--c-blunder); } #teMsg.warn { color: var(--saffron); } .te-actions { display: flex; flex-wrap: wrap; gap: var(--s2); } .te-actions .btn { width: auto; flex: 1 1 auto; margin: 0; } .te-actions .btn.primary { flex: 2 1 100%; } /* ---------------------------------------------------- تمرینِ مختصات تخته‌ی خودش را دارد (نه S.board مشترک) چون هیچ منطقِ حرکتِ مهره‌ای لازم ندارد — فقط ۶۴ خانه‌ی کلیک‌پذیر. کلاسِ .board همان است که board.js هم استفاده می‌کند، پس رنگ و محدودیتِ اندازه رایگان به ارث می‌رسد. */ .coord-field { margin: var(--s3) 0; } .coord-field > span { display: block; font-size: var(--t-13); color: var(--muted); margin-bottom: 6px; } .coord-field .seg { margin: 0; } .coord-legend { margin: var(--s3) 0; padding: 10px var(--s3); border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); } .coord-legend b { display: block; font-size: var(--t-13); margin-bottom: 4px; color: var(--text); } .coord-legend p { margin: 0; font-size: var(--t-12); line-height: 1.7; color: var(--muted); } .coord-hud { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); } .coord-timer { font-size: var(--t-20); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); direction: ltr; } .coord-timer.low { color: var(--danger); } .coord-score-badge { padding: 6px var(--s3); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: var(--t-13); } .coord-score-badge b { color: var(--firuzeh); font-size: var(--t-15); font-variant-numeric: tabular-nums; margin-inline-end: 3px; } /* اسمِ خانه («e4») همیشه لاتین و چپ‌به‌راست می‌ماند — دقیقاً مثلِ SAN در فهرستِ حرکت‌ها، چون یک نمادِ بین‌المللی است نه متن. */ .coord-prompt { text-align: center; margin: var(--s1) 0 var(--s3); font-weight: 800; font-size: var(--t-40); letter-spacing: 0.02em; direction: ltr; color: var(--text); } .coord-prompt.name-mode { font-size: var(--t-15); font-weight: 600; direction: rtl; color: var(--muted); } .coord-board .sq { cursor: pointer; } .coord-board .sq.hl-target { box-shadow: inset 0 0 0 4px var(--saffron); } .coord-board .sq.flash-good { background: var(--good) !important; } .coord-board .sq.flash-bad { background: var(--danger) !important; } /* مهره‌ها فقط تزئینی‌اند (چیدمانِ ثابت، بدونِ حرکت) — pointer-events خاموش تا کلیک/لمس، حتی درست روی یک مهره، همیشه به خانه‌ی زیرش برسد. */ .coord-board .pcs, .coord-board .pc { pointer-events: none; } .coord-keypad { margin-top: var(--s3); } /* حرف/رقم همیشه چپ‌به‌راست می‌ماند (a→h و 1→8) — این هم نمادِ بین‌المللیِ شطرنج است نه متنِ فارسی؛ وگرنه در صفحه‌ی راست‌به‌چپ برعکس می‌نشستند. */ .coord-keyrow { display: flex; gap: var(--s1); margin-bottom: var(--s1); direction: ltr; } .coord-keyrow:last-child { margin-bottom: 0; } .key-btn { flex: 1; padding: 11px 0; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: var(--t-15); } .key-btn.sel { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } .coord-final-score { text-align: center; font-size: var(--t-48); font-weight: 800; color: var(--firuzeh); margin: 6px 0 2px; font-variant-numeric: tabular-nums; } .coord-new-best { text-align: center; color: var(--saffron); font-weight: 700; margin-top: var(--s1); } /* ================================================================ ۸. تحلیل بازی ================================================================ */ .opening { display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s3); margin-bottom: var(--s3); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-size: var(--t-13); } .opening .eco { flex: 0 0 auto; font-size: var(--t-11); font-weight: 800; padding: 2px 7px; border-radius: var(--r-sm); background: var(--raised); color: var(--saffron); direction: ltr; font-variant-numeric: tabular-nums; } .opening .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .pbar { height: 6px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; } .pbar i { display: block; height: 100%; width: 0; background: var(--firuzeh); transition: width 0.2s; } /* ---------------------------------------------------------------- انتظارِ تحلیل static/js/anloader.js. ترکیب: تخته‌ی کوچک (تم و ستِ مهره‌ی خودِ کاربر) که بازی را همزمان با موتور مرور می‌کند، و زیرش نمودارِ برتری که نقطه‌به‌نقطه شکل می‌گیرد. رنگ‌های نمودار عمداً همان var(--eval-black)/#eeeِ نمودارِ صفحه‌ی تحلیل‌اند (مستقل از تم) — این همان نمودار است در حالِ ساخته‌شدن. بقیه فقط توکن‌اند، پس روشن/تیره خودکار. فازها (data-phase): wait · scan (مرحله‌ی ۱، تند) · deep (مرحله‌ی ۲) · server · done */ .an-loader { --anl-w: min(100%, 300px, calc(var(--app-100dvh) - 330px)); --anl-ink: var(--eval-black); /* نمودار: برتریِ سیاه */ --anl-paper: #eeeeee; /* نمودار: برتریِ سفید */ --anl-gold: #E3B062; /* سرِ نمودار و لحظه‌های حساس — روی زمینه‌ی تیره‌ی نمودار */ display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 380px; margin: clamp(16px, 7vh, 72px) auto; padding: 0 var(--s2); text-align: center; } .an-loader.anl-enter { animation: anl-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both; } .an-loader.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 0.22s ease, transform 0.22s ease; } @keyframes anl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .anl-stage { width: var(--anl-w); min-width: 208px; } .anl-board { width: 100%; pointer-events: none; } /* آهنگِ سُرخوردنِ مهره با فاز: مرحله‌ی ۱ هر ~۱۵۰ms یک موقعیت است، پس سُرخوردنِ ۴۰۰msِ معمولی عقب می‌ماند و کش می‌آمد؛ در مرحله‌ی ۲ تخته بین لحظه‌ها می‌پرد. */ .an-loader[data-phase="scan"] .anl-board .pc { transition-duration: 0.13s; } .an-loader[data-phase="deep"] .anl-board .pc, .an-loader[data-phase="done"] .anl-board .pc { transition-duration: 0.34s; } .anl-board .arrow { animation: anl-fade 0.3s ease-out both; } @keyframes anl-fade { from { opacity: 0; } } /* نمودار — زمان از چپ به راست در هر دو زبان، مثلِ نمودارِ اصلی */ .anl-graph { position: relative; width: 100%; height: 40px; margin-top: 10px; direction: ltr; border-radius: var(--r-sm); overflow: hidden; background: var(--anl-ink); --p: 0%; --hx: 0%; --hy: 50%; } .anl-graph::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(150, 150, 150, 0.5); } .anl-fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); transition: clip-path 0.16s linear; } .anl-fill svg { display: block; width: 100%; height: 100%; } .anl-fill .area { fill: var(--anl-paper); } .anl-head { /* لبه‌ها چند پیکسل جا دارند تا نقطه در شروع/پایان نصفه بریده نشود */ position: absolute; top: 0; bottom: 0; left: clamp(5px, var(--hx), calc(100% - 5px)); width: 0; transition: left 0.16s linear; } .anl-head::before { /* خطِ عمودیِ کم‌رنگ */ content: ""; position: absolute; top: 0; bottom: 0; left: -0.75px; width: 1.5px; background: linear-gradient(to bottom, transparent, var(--anl-gold) 25%, var(--anl-gold) 75%, transparent); opacity: 0.85; } .anl-head::after { /* نقطه‌ی روی منحنی */ content: ""; position: absolute; left: 0; top: var(--hy); width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--anl-gold); box-shadow: 0 0 0 2px var(--anl-ink), 0 0 10px 1px rgba(227, 176, 98, 0.55); transition: top 0.16s linear; } /* پیش از اولین داده: سر آرام نفس می‌کشد تا صفحه مرده به نظر نرسد */ .an-loader[data-phase="wait"] .anl-head { animation: anl-breathe 1.6s ease-in-out infinite; } .an-loader[data-phase="deep"] .anl-head, .an-loader[data-phase="done"] .anl-head { transition-duration: 0.38s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .an-loader[data-phase="deep"] .anl-head::after, .an-loader[data-phase="done"] .anl-head::after { transition-duration: 0.38s; } .an-loader[data-phase="server"] .anl-head { transition: left 0.85s linear; } .an-loader[data-phase="server"] .anl-head::after { transition: none; } .anl-graph.is-rewind .anl-head { transition: none; } @keyframes anl-breathe { 50% { opacity: 0.35; } } /* لحظه‌های حساس: حلقه‌ی توخالی ← (در حالِ بررسی) نبض ← (بررسی شد) پُر */ .anl-marks { position: absolute; inset: 0; pointer-events: none; } .anl-mk { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--anl-ink); box-shadow: inset 0 0 0 1.5px var(--anl-gold), 0 0 0 1.5px var(--anl-ink); transform: translate(-50%, -50%) scale(0); transition: transform 0.38s cubic-bezier(0.3, 1.5, 0.5, 1), top 0.38s ease, background 0.25s; } .anl-mk.is-in { transform: translate(-50%, -50%) scale(1); } .anl-mk.is-done { background: var(--anl-gold); } .anl-mk.is-on { background: var(--anl-gold); transform: translate(-50%, -50%) scale(1.25); } .anl-mk.is-on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--anl-gold); animation: anl-ping 1.1s ease-out infinite; } @keyframes anl-ping { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: scale(1.3); } } /* حرکت و ارزیابیِ همان لحظه — نمادنویسیِ شطرنج، پس چپ‌به‌راست */ .anl-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 24px; margin-top: 8px; direction: ltr; font-size: var(--t-13); font-variant-numeric: tabular-nums; } .anl-move { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anl-eval { flex: 0 0 auto; min-width: 44px; padding: 1px 8px; border-radius: var(--r-sm); text-align: center; font-weight: 800; font-size: var(--t-12); line-height: 1.7; background: #ffffff; color: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: background 0.25s, color 0.25s; } .anl-eval.b { background: var(--anl-ink); color: var(--anl-paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .anl-eval:empty { visibility: hidden; } .anl-title { margin: var(--s4) 0 0; font-size: var(--t-16); font-weight: 800; color: var(--text); } .anl-text { margin: 2px 0 0; min-height: 1.7em; color: var(--muted); font-size: var(--t-13); font-variant-numeric: tabular-nums; } .an-loader.is-done .anl-title { color: var(--firuzeh); } /* دو مرحله — دو نقطه و یک خطِ مویی بینشان */ .anl-steps { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--s3) 0 0; padding: 0; color: var(--faint); font-size: var(--t-12); } .anl-steps li { display: flex; align-items: center; gap: 6px; transition: color 0.3s; } .anl-steps li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.3s, box-shadow 0.3s; } .anl-steps li:first-child::after { content: ""; width: 22px; height: 1px; margin-inline-start: 4px; background: var(--line); transition: background 0.3s; } .anl-steps li.is-on { color: var(--text); font-weight: 700; } .anl-steps li.is-on::before { background: var(--firuzeh); box-shadow: 0 0 0 3px var(--accent-soft); animation: anl-breathe 1.6s ease-in-out infinite; } .anl-steps li.is-done { color: var(--muted); } .anl-steps li.is-done::before { background: var(--firuzeh); } .anl-steps li.is-done:first-child::after { background: var(--firuzeh); opacity: 0.6; } /* عمقِ تحلیل — یک اسلایدرِ ساده؛ فقط برای همین تحلیل */ .anl-depth { width: min(100%, 300px); margin: var(--s4) auto 0; text-align: center; } .anl-depth[hidden] { display: none; } .anl-depth-label { display: block; font-size: var(--t-12); color: var(--muted); } .anl-depth-label b { color: var(--text); font-weight: 700; } .anl-depth input[type="range"] { display: block; width: 100%; height: 30px; margin: 2px 0 0; padding: 0; background: none; accent-color: var(--firuzeh); cursor: pointer; touch-action: pan-y; } .anl-depth-ticks { display: flex; justify-content: space-between; margin-top: -2px; padding: 0 2px; font-size: var(--t-11); color: var(--faint); } .anl-depth-hint { margin: 6px 0 0; font-size: var(--t-11); color: var(--faint); } .an-loader[data-mode="server"] .anl-depth, .an-loader[data-mode="brief"] .anl-depth, .an-loader.is-done .anl-depth { display: none; } /* سرور: مرحله‌ها را نمی‌دانیم، پس نشانشان نمی‌دهیم؛ ارزیابی هم نداریم */ .an-loader[data-mode="server"] .anl-steps, .an-loader[data-mode="server"] .anl-eval { display: none; } /* کوتاه (بازکردنِ مرور/بازیِ استاد): فقط تخته و یک خط */ .an-loader[data-mode="brief"] .anl-graph, .an-loader[data-mode="brief"] .anl-meta, .an-loader[data-mode="brief"] .anl-title, .an-loader[data-mode="brief"] .anl-steps { display: none; } .an-loader[data-mode="brief"] .anl-text { margin-top: var(--s3); } @media (min-width: 1100px) { .an-loader { --anl-w: min(100%, 340px, calc(var(--app-100dvh) - 360px)); } } @media (prefers-reduced-motion: reduce) { .an-loader, .an-loader *, .an-loader *::before, .an-loader *::after { animation: none !important; transition: none !important; } } .acc-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); } .acc { flex: 1; text-align: center; padding: 6px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); } .acc b { display: block; font-size: var(--t-16); font-variant-numeric: tabular-nums; } .acc span { font-size: var(--t-11); color: var(--muted); } .acc-mid { font-size: var(--t-12); color: var(--muted); direction: ltr; } .graph { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--s2); direction: ltr; } .graph svg { display: block; width: 100%; height: 52px; } .graph .area { fill: var(--text); } .graph .mid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; } .graph .cursor { stroke: var(--saffron); stroke-width: 1.5; } .graph .mk { r: 3; } /* اندازه‌ی ثابت — وگرنه با هر حرکت که طولِ توضیح عوض می‌شود، دکمه‌های زیرش (و کل ادامه‌ی صفحه) بالا/پایین می‌پرند. */ .an-move { margin-top: var(--s3); padding: 11px var(--s3); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-size: var(--t-14); height: 92px; overflow-y: auto; } .an-move .head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); } .an-move .mv { font-weight: 700; direction: ltr; } .an-move .tag, .crit-card .tag { font-size: var(--t-11); padding: 1px 8px 1px 5px; border-radius: var(--r-pill); font-weight: 700; color: #1c1a17; display: inline-flex; align-items: center; gap: 4px; line-height: 1.5; } .an-move .tag-ic, .crit-card .tag-ic { position: relative; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; } .an-move .tag-ic svg, .crit-card .tag-ic svg { width: 100%; height: 100%; display: block; } /* شش دسته‌ای که رنگِ پررنگِ Game Review را دارند (نگاه کن به moveTag در app.js) — پس‌زمینه‌شان تیره/اشباع‌تر از قبل است، برای همین آیکون+متن سفید می‌ماند، دقیقاً مثلِ خودِ نشانِ روی تخته (.sqbadge .dot). */ .an-move .tag.vivid, .crit-card .tag.vivid { color: #fff; } .an-move .why { color: var(--text); font-size: var(--t-14); line-height: 1.65; } /* خطِ دوره‌ی افتتاحیه روی همان حرکت (review.js: anCourseAt) — یک خطِ جدا با رنگِ نشانه‌ی دوره، بی‌تزئین */ .an-move .why.crs { margin-top: 4px; padding-inline-start: 8px; border-inline-start: 2px solid var(--saffron); color: var(--text); } .an-move .why.crs-why { color: var(--muted); font-size: var(--t-13); } .an-move .why bdi { direction: ltr; font-weight: 600; } /* توضیحِ حرکت مهم‌ترین چیزِ این کادر است، پس متنش پررنگ (var(--text)) و درشت‌تر است و بقیه عقب می‌نشینند. جایش بی آن‌که کادر بزرگ شود از دو جا درمی‌آید: ۱) «۷. Nb3 [بی‌دقتی]» دیگر یک سطرِ جدا نیست؛ توضیح در همان سطرِ اول پشتِ نشان ادامه می‌یابد (حرکت در نوارِ بالا هم پررنگ است، پس اینجا کم‌رنگ می‌ماند). «نشانم بده»/پرچم شناور ته‌ی همان سطرند — همان جایی که پیش‌تر بودند. ۲) روی گوشی، سوییچِ موتور گوشه‌ی پایینِ کادر است؛ به‌جای یک نوارِ خالیِ کامل زیرِ متن، فقط به‌اندازه‌ی خودِ سوییچ و عدد جا خالی می‌ماند (.an-sp/.an-notch، پایین‌تر) و متن کنارش می‌آید. */ #anMove .head { display: inline; margin: 0; } #anMove .head > .mv { display: inline-block; color: var(--muted); font-size: var(--t-13); unicode-bidi: isolate; } /* فاصله‌ها روی خودِ نشان (جهتِ صفحه)، نه روی .mv که همیشه LTR است */ #anMove .head > .tag { margin-inline-start: 6px; vertical-align: middle; position: relative; top: -1px; } #anMove .head > .head-acts { float: inline-end; margin: 0; margin-inline-start: var(--s2); line-height: 1.65; } #anMove .head + .why { display: inline; margin-inline-start: 6px; } .an-sp, .an-notch { display: none; } /* درسِ مرتبط زیرِ توضیحِ حرکت — یک پیوندِ آرام، نه دکمه‌ی پررنگ */ .an-move .why-learn { display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-12); cursor: pointer; } .an-move .why-learn b { color: var(--firuzeh); font-weight: 600; } .an-move .why-learn:hover b, .an-move .why-learn:focus-visible b { text-decoration: underline; } /* «نشانم بده» و درسِ مرتبط زیرِ توضیح: یک ردیفِ آرام از پیوند، بی‌قاب */ .an-move .why-acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); margin-top: 2px; } .an-move .why-acts .why-learn { margin-top: 0; } .an-move .head .head-acts { margin-inline-start: auto; margin-top: 0; align-items: center; } .an-move .why-btn { padding: 0; border: 0; background: none; color: var(--firuzeh); font: inherit; font-size: var(--t-12); font-weight: 600; cursor: pointer; } .an-move .why-btn:hover, .an-move .why-btn:focus-visible { text-decoration: underline; } /* «این توضیح غلط است؟» — پرچمِ کوچک و کم‌رنگ آخرِ ردیف؛ نباید با «نشانم بده» رقابت کند */ .an-move .why-flag { width: 24px; height: 20px; padding: 3px 5px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); opacity: .55; cursor: pointer; display: inline-flex; align-items: center; } .an-move .why-flag svg { width: 14px; height: 14px; display: block; } .an-move .why-flag:hover, .an-move .why-flag:focus-visible { opacity: 1; background: var(--raised); } /* خطِ در حالِ نمایش: حرکت‌ها به ترتیب، حرکتِ روی تخته پررنگ؛ تپ = پرش به همان حرکت */ .an-move .why-line { display: flex; flex-wrap: wrap; gap: 2px; margin-top: var(--s1); direction: ltr; font-size: var(--t-13); } .an-move .why-line .tok { padding: 2px 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; } .an-move .why-line .tok.on { background: var(--raised); color: var(--text); font-weight: 700; } .an-move .alt { color: var(--saffron); direction: ltr; display: inline-block; font-weight: 700; } .movelist { margin-top: var(--s3); padding: var(--s2); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); max-height: 150px; overflow-y: auto; display: grid; grid-template-columns: 34px 1fr 1fr; gap: 2px 4px; direction: ltr; font-size: var(--t-13); } .movelist .no { color: var(--muted); text-align: end; padding: 4px 2px; font-variant-numeric: tabular-nums; } .movelist .m { padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; gap: 5px; } .movelist .m.on { background: var(--raised); } .movelist .m .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .summary { margin-top: var(--s3); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .summary div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s1); text-align: center; font-size: var(--t-12); color: var(--muted); } .summary b { display: block; font-size: var(--t-16); font-variant-numeric: tabular-nums; } /* ردیفِ آیکون+عدد — همان دایره‌ی رنگیِ نشانِ روی تخته، برای اینکه خلاصه‌ی تحلیل هم دقیقاً همان نمادها را نشان بدهد، نه فقط رنگ. */ .summary .mv-row { display: flex; align-items: center; justify-content: center; gap: 5px; } .summary .mv-badge { position: relative; box-shadow: 0 0 0 1px var(--bc), inset 0 0 0 1px rgba(255,255,255,.2); width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; color: #fff; display: flex; align-items: center; justify-content: center; } .summary .mv-badge svg { width: 13px; height: 13px; display: block; } /* سوم‌شخص (هیچ طرفی «مالِ کاربر» نیست): شمارِ هر دو رنگ کنارِ هم، سفید چپ و سیاه راست — همان خانه‌ی روشن/تیره‌ی پاپ‌آپِ خلاصه (.rv-box)، فقط کوچک‌تر. */ #anSummary .sum-wb { display: flex; justify-content: center; gap: 4px; margin: 3px 0 2px; direction: ltr; } #anSummary .sum-wb b { display: inline-block; min-width: 1.9em; padding: 0 4px; border-radius: var(--r-sm); font-size: var(--t-13); line-height: 1.55; font-weight: 800; font-variant-numeric: tabular-nums; } #anSummary .sum-wb b.w { background: #f1f1ef; color: #1c1a17; box-shadow: inset 0 0 0 1px var(--line); } #anSummary .sum-wb b.b { background: #403d39; color: #f3f1ed; } #anSummary .sum-wb b.zero { opacity: .45; } /* ---- حالتِ کاوش در صفحه‌ی تحلیل (multipv + eval زنده) ---- */ .explore-panel { margin-top: var(--s2); } .evalbar { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); } .evalbar-track { flex: 1; height: 10px; border-radius: var(--r-xs); background: var(--eval-black); overflow: hidden; } .evalbar-track i { display: block; height: 100%; background: var(--eval-white); width: 50%; transition: width 0.25s ease; will-change: width; } .evalbar b { font-variant-numeric: tabular-nums; font-size: var(--t-13); min-width: 42px; text-align: center; direction: ltr; } .explore-sofar { color: var(--muted); font-size: var(--t-13); min-height: 18px; margin-bottom: var(--s2); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .explore-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s2); } .exline { display: flex; gap: var(--s2); align-items: baseline; padding: 6px 8px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-size: var(--t-13); } .exline b { min-width: 44px; font-variant-numeric: tabular-nums; direction: ltr; text-align: center; flex: 0 0 auto; } .exline span { color: var(--muted); direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; } .exline.muted { color: var(--muted); justify-content: center; } .exline.over { justify-content: center; font-weight: 700; } /* ردیفِ خطِ موتور با شمارِ ثابت: جاگیرها هم‌قدِ ردیفِ واقعی‌اند (همان کلاس و همان ساختار)، فقط دیده نمی‌شوند. وقتی موقعیت عوض می‌شود و موتور هنوز جواب نداده، به‌جای خالی‌کردنِ فهرست (که ارتفاع را از N ردیف به یک ردیف و دوباره برمی‌گرداند و هرچه زیرش بود — از جمله دکمه‌های جلو/عقب — بالا و پایین می‌پرید) همان خط‌های قبلی کم‌رنگ می‌مانند یا N ردیفِ اسکلت نشان داده می‌شود. */ .exline.ph { visibility: hidden; } .exline.ph.load { visibility: visible; opacity: 0.35; } .explore-lines.stale { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; } .exline.t1 b { color: var(--c-best); } .exline.t2 b { color: var(--pv2); } .exline.t3 b { color: var(--pv3); } .exline.t4 b { color: var(--pv4); } .exline.t5 b { color: var(--pv5); } /* ---- لحظاتِ حساس + Retry Mistake ---- */ .critical-panel { margin-top: var(--s3); } .an-tabs-mobile { margin-top: var(--s3); } /* فقط زیرِ ۱۱۰۰px: بالاتر از آن #anBody خودش هر دو گروه را کنارِ هم نشان می‌دهد (نگاه کن به چیدمانِ دسکتاپ)، پس سوییچ نه لازم است نه دیده می‌شود. عمداً max-width است، نه هم‌سویِ بقیه‌ی فایل که min-width‌محور است — چون summary از display:grid استفاده می‌کند و یک override با مقدارِ حدسی آن را خراب می‌کرد؛ این‌طور عنصر اصلاً دست‌نخورده می‌ماند، فقط این قانون بالاتر از ۱۱۰۰px وجود ندارد. */ @media (max-width: 1099.98px) { .an-tab-hide { display: none; } } @media (min-width: 1100px) { .an-tabs-mobile { display: none; } } .critical-panel h3 { font-size: var(--t-14); margin-bottom: var(--s2); color: var(--muted); } .critical-list { display: flex; flex-direction: column; gap: 8px; } .crit-card { display: flex; flex-direction: column; gap: 4px; padding: var(--s2); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); } .crit-card .head { display: flex; align-items: center; gap: var(--s2); } .crit-card .mv { font-weight: 700; direction: ltr; } .crit-card .why { color: var(--muted); font-size: var(--t-13); line-height: 1.7; } .crit-card .line { color: var(--muted); font-size: var(--t-12); direction: ltr; text-align: start; } .crit-card .retryBtn { align-self: flex-start; margin-top: 4px; } .retry-panel { margin-top: var(--s2); } .retry-msg { min-height: 40px; padding: var(--s2); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-size: var(--t-13); margin-bottom: var(--s2); } .retry-msg.good { border-color: var(--c-best); color: var(--c-best); } .retry-msg.bad { border-color: var(--c-blunder); color: var(--c-blunder); } /* ================================================================ ۹. پروفایل ================================================================ */ .pf-head { position: relative; text-align: center; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--s4) 0; margin-bottom: var(--s3); } .pf-cover { height: 84px; margin: 0 calc(-1 * var(--s4)); background: radial-gradient(120% 140% at 85% -20%, rgba(214, 168, 95, 0.38), transparent 60%), radial-gradient(90% 120% at 5% 120%, var(--accent-soft), transparent 70%), linear-gradient(135deg, var(--raised), var(--panel)); border-bottom: 1px solid var(--line); } .pf-ava-wrap { position: relative; width: 92px; margin: -46px auto var(--s3); } .ava.xl { width: 92px; height: 92px; border-radius: var(--r-xl); font-size: calc(34px * var(--fs, 1)); box-shadow: 0 0 0 4px var(--panel), 0 6px 18px rgba(0, 0, 0, 0.28); } .pf-ava-edit { position: absolute; inset-inline-end: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--firuzeh); color: var(--on-accent); border: 3px solid var(--panel); display: grid; place-items: center; } .pf-ava-edit svg { width: 15px; height: 15px; } .pf-name { font-size: var(--t-20); font-weight: 800; letter-spacing: -0.01em; } .pf-bio { color: var(--muted); font-size: var(--t-13); margin-top: var(--s1); line-height: 1.7; max-width: 320px; margin-inline: auto; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; } .pf-bio.empty { font-style: italic; opacity: 0.7; } .pf-socials { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s3); } .pf-social { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--line); color: var(--muted); } .pf-social:hover, .pf-social:focus-visible { color: var(--text); border-color: var(--firuzeh); } .pf-social svg { width: 17px; height: 17px; } .pf-edit-socials { margin-top: var(--s3); } .pf-edit-socials summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: var(--t-13); padding: 4px 0; } .pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); } .pf-actions > * { flex: 0 0 auto; } .wl-bar { height: 8px; border-radius: var(--r-pill); overflow: hidden; display: flex; background: var(--raised); } .wl-bar span { height: 100%; } .wl-bar .w { background: var(--good); } .wl-bar .d { background: var(--muted); opacity: 0.5; } .wl-bar .l { background: var(--danger); } .wl-legend { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: var(--t-12); color: var(--muted); } .wl-legend b { color: var(--text); font-variant-numeric: tabular-nums; } .wl-legend .w b { color: var(--good); } .wl-legend .l b { color: var(--danger); } /* ریتینگ به تفکیک سرعت */ .pf-speed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); } .speed-card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3); text-align: center; } .speed-card .ic { width: 30px; height: 30px; margin: 0 auto 6px; border-radius: var(--r-sm); background: var(--panel); color: var(--firuzeh); } .speed-card .ic svg { width: 16px; height: 16px; } .speed-card .r { font-size: var(--t-18); font-weight: 800; font-variant-numeric: tabular-nums; } .speed-card .g { font-size: var(--t-11); color: var(--muted); margin-top: 2px; } .speed-card.empty .r { color: var(--muted); font-size: var(--t-13); font-weight: 600; } /* پازل و تورنمنت، کنار هم */ .pf-mini-row { display: flex; gap: var(--s3); } .pf-mini { flex: 1; text-align: center; } .pf-mini .t { font-size: var(--t-12); color: var(--muted); margin-bottom: var(--s1); } .pf-mini .v { font-size: var(--t-16); font-weight: 800; } /* روندِ ریتینگ */ .trend { margin-top: var(--s2); } .spark { width: 100%; height: 140px; display: block; overflow: visible; } .spark-foot { display: flex; align-items: baseline; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; } .spark-now { font-size: var(--t-24); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .spark-delta { font-size: var(--t-13); font-weight: 700; } /* ------------------------------------------------------ Chess Insights */ .ins-grid, .ins-phase-row { display: flex; gap: var(--s3); margin-bottom: var(--s3); } .ins-stat { flex: 1; text-align: center; padding: var(--s2) 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); } .ins-stat .v { font-size: var(--t-18); font-weight: 800; font-variant-numeric: tabular-nums; } .ins-stat .l { font-size: var(--t-11); color: var(--muted); margin-top: 2px; } .ins-phase { flex: 1; text-align: center; } .ins-phase-bar { height: 6px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); overflow: hidden; margin-bottom: 4px; } .ins-phase-bar i { display: block; height: 100%; background: var(--firuzeh); border-radius: var(--r-pill); } .ins-phase-lbl { font-size: var(--t-11); color: var(--muted); } .ins-phase-val { font-size: var(--t-13); font-weight: 700; font-variant-numeric: tabular-nums; } .ins-op-group { margin-bottom: var(--s3); } .ins-op-title { font-size: var(--t-12); color: var(--muted); margin-bottom: var(--s2); font-weight: 600; } .ins-op-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; font-size: var(--t-13); } .ins-op-row .mv { width: 42px; flex-shrink: 0; font-weight: 700; direction: ltr; text-align: left; } .ins-op-row .bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); overflow: hidden; } .ins-op-row .bar i { display: block; height: 100%; background: var(--saffron); border-radius: var(--r-pill); } .ins-op-row .pct { width: 40px; flex-shrink: 0; text-align: end; font-variant-numeric: tabular-nums; color: var(--muted); } /* Insights: اشتباه‌های پرتکرار از Game Review */ .ins-review { margin-top: var(--s3); } .ins-rv-row { padding: 10px 0; border-top: 1px solid var(--line); } .ins-rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); } .ins-rv-head b { font-size: var(--t-14); } .ins-rv-head span { color: var(--muted); font-size: var(--t-12); white-space: nowrap; } .ins-rv-tip { margin: 4px 0 0; color: var(--muted); font-size: var(--t-12); line-height: 1.8; } .ins-rv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ins-rv-strong { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-12); } .ins-rv-strong em { font-style: normal; display: inline-block; margin: 3px 0 0 6px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--raised); color: var(--text); } .ins-weakness { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); margin-top: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); } .ins-weakness-text { font-size: var(--t-13); } .ins-weakness-text b { color: var(--saffron); } .spark-delta.up { color: var(--good); } .spark-delta.down { color: var(--danger); } .spark-range { font-size: var(--t-12); color: var(--faint); margin-inline-start: auto; } /* اتاق افتخارات */ .trophy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); } .trophy { aspect-ratio: 1; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); background: var(--raised); border: 1px solid var(--line); position: relative; } .trophy .badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; } .trophy .badge svg { width: 18px; height: 18px; } .trophy.locked .badge { background: var(--panel); color: var(--muted); opacity: 0.55; } .trophy.locked .nm { color: var(--muted); opacity: 0.55; } .trophy[data-tier="bronze"]:not(.locked) .badge { background: #b9743c; color: #2a1608; } .trophy[data-tier="silver"]:not(.locked) .badge { background: #b3bfc6; color: #1c2529; } .trophy[data-tier="gold"]:not(.locked) .badge { background: #dbaa46; color: #2c1c04; } .trophy .nm { font-size: var(--t-10); text-align: center; line-height: 1.3; padding: 0 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .trophy .pin { position: absolute; inset-inline-end: 6px; top: 6px; width: 14px; height: 14px; color: var(--muted); opacity: 0.6; } .trophy .pin svg { width: 100%; height: 100%; } /* شیتِ توضیح یک دستاورد */ .ach-sheet-badge { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto var(--s3); display: grid; place-items: center; } .ach-sheet-badge svg { width: 28px; height: 28px; } .ach-progress { height: 8px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; margin-top: var(--s3); } .ach-progress i { display: block; height: 100%; background: var(--firuzeh); } /* ================================================================ ۱۰. فهرست‌ها، شیت‌ها، گفت‌وگو ================================================================ */ /* ردیفِ بازی — تاریخچه و بازی‌های در جریان */ .grow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .grow:last-child { border-bottom: 0; } .grow .res { flex: 0 0 auto; display: inline-block; font-size: var(--t-15); font-weight: 800; line-height: 1; margin-inline-start: var(--s1); } .grow .res.win { color: var(--c-good); } .grow .res.loss { color: var(--c-blunder); } .grow .res.draw, .grow .res.unfinished { color: var(--saffron); } .grow .info { flex: 1; min-width: 0; } .grow .who { display: block; font-size: var(--t-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grow .meta { display: block; font-size: var(--t-12); color: var(--muted); } .grow button { padding: 6px var(--s3); border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); font-size: var(--t-13); font-weight: 600; flex: 0 0 auto; } .grow button.go { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } /* جای‌نگهدارِ نامرئیِ دکمه‌ی «تحلیل» در ردیفِ بازیِ کوتاه (نگاه کن به historyRowHtml در js/home.js) */ .grow button.ph { visibility: hidden; pointer-events: none; } .history-list-full { max-height: 60vh; overflow-y: auto; margin: var(--s1) 0; } .lobby-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); } .lobby-row:last-child { border-bottom: 0; } .lobby-row button, .watch-row button { padding: 7px var(--s4); border-radius: var(--r-sm); background: var(--firuzeh); color: var(--on-accent); font-weight: 700; flex: 0 0 auto; } .watch-row { display: flex; align-items: center; gap: var(--s3); padding: 11px 0; border-bottom: 1px solid var(--line); } .watch-row:last-child { border-bottom: 0; } .watch-row .live-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--danger); animation: gone-pulse 1.4s ease-in-out infinite; } .watch-row .vs { flex: 1; min-width: 0; font-size: var(--t-14); } .watch-row .vs b { font-weight: 700; } .watch-row .vs .meta { display: block; font-size: var(--t-12); color: var(--muted); margin-top: 2px; } /* ------------------------------------------------------------- دوستان */ .friend-search { margin-bottom: var(--s3); } .friend-search input { margin-top: 0; } .friend-row { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; } .friend-row + .friend-row { border-top: 1px solid var(--line); } .fr-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .fr-name { font-weight: 600; font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .fr-meta { font-size: var(--t-12); color: var(--muted); } .friend-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); } .friend-row .dot.on { background: var(--good); } /* .btn پایه display:block و width:100% است — ولی این دکمه‌ی کوچک باید کنارِ نام و ریتینگ در یک ردیفِ افقی بنشیند، نه کلِ عرض را بگیرد. */ .friend-row .btn.sm, .fr-status { display: inline-flex; width: auto; flex: 0 0 auto; } .fr-status { font-size: var(--t-12); color: var(--muted); white-space: nowrap; } /* ردیفِ خودم — همان حسِ رده‌ی خودم توی تورنمنت */ .friend-row.mine, .tour-standing-row.mine { background: var(--accent-soft); border-radius: var(--r-sm); padding-inline: var(--s2); margin-inline: calc(var(--s2) * -1); } /* ----------------------------------------------------------- تورنمنت */ .tour-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .tour-detail-head h2 { margin: 0; flex: 1; min-width: 0; } #cdAvatar.editable { cursor: pointer; } #cdAvatar.editable:active { opacity: 0.7; } .club-pinned { margin: var(--s2) 0 0; padding: var(--s2); border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); font-size: var(--t-14); } /* ------------------------------------------------- سربرگِ صفحه‌ی کلاب آواتارِ کمی بزرگ‌تر از حالتِ استاندارد + اسم/تعدادِ عضو زیرِ هم، و دکمه‌ی سه‌نقطه‌ی منو ته‌ِ ردیف — بجایِ اینکه «ترکِ کلاب»/«ویرایش» همیشه به شکلِ دکمه‌ی پهن روی کارت بمانند. */ .ava.lg { width: 56px; height: 56px; border-radius: var(--r-md); font-size: calc(21px * var(--fs, 1)); } .club-head-row { align-items: flex-start; } .club-head-titles { flex: 1; min-width: 0; } .club-head-titles h2 { margin: 0 0 3px; } .club-head-row .tag { margin-top: 4px; } .club-menu-btn { flex: 0 0 auto; } #cdJoinRow:empty { display: none; } /* ناوبریِ فرعیِ کلاب (مسابقات/تورنمنت‌ها/رده‌بندی): چیپ‌هایِ فشرده و اسکرول‌شونده‌ی افقی — دقیقاً همان قاعده‌ی .personas — تا هیچ‌وقت از عرضِ کارت بیرون نزنند، حتی روی باریک‌ترین گوشی. */ .club-nav { display: flex; gap: var(--s2); margin-top: var(--s3); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .club-nav::-webkit-scrollbar { display: none; } .club-nav-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--r-pill); white-space: nowrap; background: var(--raised); border: 1px solid var(--line); color: var(--text); font-size: var(--t-13); font-weight: 700; transition: background 0.12s, transform 0.06s; } .club-nav-btn:active { transform: scale(0.97); } .club-nav-btn .ic-wrap { width: 15px; height: 15px; display: flex; flex: 0 0 auto; color: var(--firuzeh); } .club-nav-btn .ic-wrap svg { width: 100%; height: 100%; display: block; } /* آمار و افتخاراتِ کلاب — همان کاشیِ .speed-card و همان .trophy-grid که پروفایل دارد، فقط با گرید و داده‌ی مخصوصِ کلاب. */ .club-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); } .club-badges { margin-top: var(--s3); } .club-badges.hidden { margin-top: 0; } .tour-countdown { display: inline-block; margin: 2px 0 var(--s3); padding: 6px var(--s4); border-radius: var(--r-pill); background: var(--accent-soft); border: 1px solid var(--firuzeh); color: var(--firuzeh); font-weight: 700; font-size: var(--t-13); direction: ltr; unicode-bidi: isolate; } .tour-standing-row { padding: var(--s2) 0; } .tour-rank { flex: 0 0 22px; text-align: center; font-size: var(--t-12); font-weight: 700; color: var(--muted); } .tour-standing-row:nth-child(1) .tour-rank, .tour-standing-row:nth-child(2) .tour-rank, .tour-standing-row:nth-child(3) .tour-rank { color: var(--saffron); } .tour-score { flex: 0 0 auto; font-weight: 800; font-size: var(--t-15); color: var(--text); } .tour-streak { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 5px; font-size: var(--t-11); font-weight: 700; color: var(--saffron); vertical-align: middle; } .tour-streak svg { width: 12px; height: 12px; } .tour-fmt-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--t-10); font-weight: 700; vertical-align: middle; background: var(--accent-soft); color: var(--firuzeh); } #tdRoundTabs { margin-bottom: var(--s3); flex-wrap: wrap; } .cmd-score { font-size: var(--t-20); font-weight: 800; letter-spacing: -0.01em; margin: var(--s1) 0 var(--s3); direction: ltr; unicode-bidi: isolate; } /* ---------------------------------------------------------------- شیت‌ها */ .sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--s5); background: rgba(18, 16, 14, 0.68); animation: fade 0.16s ease-out; } .sheet .card { max-width: 360px; width: 100%; margin: 0; max-height: 86vh; overflow-y: auto; animation: rise 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); } @keyframes fade { from { opacity: 0; } } @keyframes rise { from { transform: translateY(14px); opacity: 0; } } .result { text-align: center; } .result .big { font-size: var(--t-24); font-weight: 800; margin-bottom: 2px; } .result .big.win { color: var(--firuzeh); } .result .big.lose { color: var(--danger); } .result .big.draw { color: var(--saffron); } .result .why { color: var(--muted); font-size: var(--t-14); margin-bottom: var(--s1); } .result .record { color: var(--saffron); font-weight: 700; } .result .delta { font-size: var(--t-14); margin-bottom: var(--s3); font-variant-numeric: tabular-nums; } /* برگه‌ی پایانِ بازی: سفید — امتیاز — سیاه (js/sheets.js → resultFaceoff) */ .res-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); margin: var(--s3) 0; padding: var(--s3) var(--s2); border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--line); } .res-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } html[dir="rtl"] .res-side { direction: rtl; } .res-side .ava { width: 44px; height: 44px; } .res-side.won .ava { border-color: var(--firuzeh); box-shadow: 0 0 0 2px var(--accent-soft); } .res-nm { max-width: 100%; font-size: var(--t-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; } /* ریتینگِ تازه + تغییرش، هم‌اندازه: عدد اصلی، تغییر رنگی و پررنگ. ترتیب در هر دو زبان «۱۴۷۳ +۸» (direction: ltr) — مثلِ خودِ امتیازِ «۱–۰» بالای همین برگه. */ .res-r { display: flex; align-items: baseline; justify-content: center; gap: 6px; direction: ltr; color: var(--muted); font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .res-d { font-weight: 800; font-size: var(--t-13); unicode-bidi: isolate; } .res-d.up { color: var(--good); } .res-d.down { color: var(--danger); } .res-d.zero { color: var(--muted); } /* بعد از آمدنِ برگه، عددِ تغییر یک «پاپِ» کوتاه می‌کند — چشم را به عدد می‌برد */ .res-d { display: inline-block; animation: res-d-pop .45s cubic-bezier(.22, .9, .3, 1.25) .25s both; } @keyframes res-d-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .res-d { animation: none; } } .res-side.me .res-nm { color: var(--text); } .res-score { font-family: var(--font-mono); font-weight: 800; font-size: var(--t-24); font-variant-numeric: tabular-nums; letter-spacing: 1px; white-space: nowrap; } .res-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s2); } .res-pair .btn { margin: 0; } html[dir="rtl"] .res-pair .btn { direction: rtl; } .result .delta b.up { color: var(--firuzeh); } .result .delta b.down { color: var(--danger); } .stepper { display: flex; align-items: center; gap: var(--s3); } .stepper button { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); font-weight: 700; font-size: var(--t-16); } .stepper b { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; } .opt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); /* اجازه‌ی شکستن به خطِ بعد: ردیفِ «ست مهره» چهار گزینه دارد و در عرضِ شیت هر کدام به ~۷۰ پیکسل می‌رسید، یعنی «Cburnett» و «خانگی» با سه‌نقطه بریده می‌شدند. با min-width فقط همان ردیف پایین می‌رود، نه بقیه. */ flex-wrap: wrap; } .opt-row:last-of-type { border-bottom: 0; } .opt-row > .seg { flex: 1 1 auto; min-width: 220px; margin: 0; } .swatches { display: flex; gap: 6px; } /* ---- انتخابِ تخته و ست مهره در تنظیمات (پیش‌نمایشِ زنده — نگاه کن به boardPickerHtml در js/account.js) ---- */ .set-sec-title { color: var(--firuzeh); font-weight: 700; font-size: var(--t-13); margin: var(--s2) 0; } .sheet.set-sheet { padding: var(--s3); } .sheet.set-sheet .card { max-width: 420px; } .set-board-row { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: var(--s3); align-items: start; margin-bottom: var(--s3); } .set-preview .board { pointer-events: none; } .set-themes, .set-pieces { display: grid; gap: 4px; padding: 5px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); } .set-themes { grid-template-columns: 1fr 1fr; } .set-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bt, .ps { border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; min-width: 0; transition: background 0.12s, color 0.12s, border-color 0.12s; } .bt[aria-pressed="true"], .ps[aria-pressed="true"] { background: var(--panel); border-color: var(--line); color: var(--text); } .bt { display: flex; align-items: center; gap: 5px; padding: 8px 4px; font-size: var(--t-11); } .bt-sw { display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--r-xs); overflow: hidden; box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3); } .bt-sw i { display: block; } .bt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 3px 6px; font-size: var(--t-11); } .ps-ico { display: block; width: 34px; height: 34px; } .ps-ico .pc { position: static; width: 100%; height: 100%; transition: none; cursor: inherit; pointer-events: none; } .ps-name { max-width: 100%; text-align: center; line-height: 1.3; overflow-wrap: anywhere; } .ps.loading { opacity: 0.55; } .set-credit-line { color: var(--muted); font-size: var(--t-11); line-height: 1.7; margin: var(--s2) 0 var(--s3); } @media (max-width: 340px) { .set-board-row { grid-template-columns: 1fr; } .set-preview { max-width: 160px; } } .swatch { width: 34px; height: 26px; border-radius: var(--r-sm); border: 2px solid transparent; overflow: hidden; display: flex; } .swatch[aria-pressed="true"] { border-color: var(--firuzeh); } .swatch i { flex: 1; } .toggle { width: 46px; height: 27px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--line); position: relative; flex: 0 0 auto; } .toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--muted); transition: 0.16s; } .toggle[aria-pressed="true"] { background: var(--firuzeh); border-color: transparent; } .toggle[aria-pressed="true"]::after { right: calc(100% - 23px); background: var(--on-accent); } .toast { position: fixed; bottom: 18px; right: 50%; transform: translateX(50%); background: var(--panel); border: 1px solid var(--line); padding: 10px var(--s4); border-radius: var(--r-sm); font-size: var(--t-13); z-index: 60; max-width: 90vw; animation: rise 0.18s ease-out; unicode-bidi: plaintext; box-shadow: 0 6px 20px rgba(18, 16, 14, 0.25); } /* بنرِ موقتِ پیامِ حریف در بازی — بالای صفحه، زیرِ هدر */ .chat-banner { position: fixed; z-index: 58; top: calc(56px + env(safe-area-inset-top, 0px)); inset-inline: var(--s3); max-width: 480px; margin-inline: auto; display: flex; align-items: stretch; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 6px 20px rgba(18, 16, 14, 0.25); overflow: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; } .chat-banner.show { opacity: 1; transform: none; } .chat-banner .cb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px var(--s3); text-align: start; color: inherit; } .chat-banner .cb-name { font-size: var(--t-12); font-weight: 700; color: var(--firuzeh); unicode-bidi: plaintext; } .chat-banner .cb-txt { font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere; unicode-bidi: plaintext; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chat-banner .cb-mute { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 var(--s3); font-size: var(--t-12); color: var(--muted); border-inline-start: 1px solid var(--line); } .chat-banner .cb-mute svg { width: 15px; height: 15px; } .chat-banner .cb-close { flex: 0 0 auto; width: 34px; font-size: 20px; color: var(--muted); } /* پاپ‌آپِ دعوت به بازی — بالای صفحه، زیرِ هدر؛ بالاتر از بنرِ چت (58) و toast (60) نمی‌رود تا سنگین نشود، ولی روی بقیه‌ی صفحه می‌آید. ساده: کارتِ معمولی، بدونِ تزئین. */ .invite-pop { position: fixed; z-index: 59; top: calc(64px + env(safe-area-inset-top, 0px)); inset-inline: var(--s3); max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); padding-inline-end: 40px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 26px rgba(18, 16, 14, 0.28); opacity: 0; transform: translateY(-14px); transition: opacity 0.2s ease, transform 0.2s ease; } .invite-pop.show { opacity: 1; transform: none; } .invite-pop .ip-ava { flex: 0 0 auto; } .invite-pop .ip-body { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; } .invite-pop .ip-title { font-size: var(--t-14); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; unicode-bidi: plaintext; } .invite-pop .ip-meta { font-size: var(--t-12); color: var(--muted); } .invite-pop .ip-actions { flex: 0 0 auto; display: flex; gap: var(--s2); } .invite-pop .ip-actions .btn { margin: 0; } .invite-pop .ip-close { position: absolute; top: 4px; inset-inline-end: 4px; width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--muted); } @media (max-width: 520px) { .invite-pop .ip-actions { flex: 1 1 100%; } .invite-pop .ip-actions .btn { flex: 1; justify-content: center; padding-block: 9px; } } @media (prefers-reduced-motion: reduce) { .invite-pop { transition: opacity 0.2s ease; transform: none; } } /* ------------------------------------------------------------- گفت‌وگو */ .chat-panel { position: fixed; inset: 0; z-index: 45; } .chat-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 9, 0.55); } .chat-sheet { position: absolute; inset-inline: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 72vh; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid var(--line); border-bottom: 0; animation: rise 0.16s ease-out; padding-bottom: env(safe-area-inset-bottom, 0px); } .chat-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s4) 6px; font-weight: 700; } .chat-hint { padding: 0 var(--s4) var(--s3); font-size: var(--t-11); color: var(--muted); margin: 0; } .chat-list { flex: 1; overflow-y: auto; padding: var(--s1) var(--s4); min-height: 120px; } .chat-msg { display: flex; gap: var(--s2); padding: 7px 0; align-items: flex-start; } .chat-msg .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--t-12); font-weight: 700; white-space: nowrap; unicode-bidi: normal; } .chat-msg .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; } /* ساعتِ پیام کنارِ اسم — کوچک و کم‌رنگ تا اسم و متن جلوتر دیده شوند (CHANGELOG-CHAT-TIME.md) */ .chat-time { flex: 0 0 auto; font-size: var(--t-10); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* جداکننده‌ی روز: یک برچسبِ کوچک وسطِ دو خطِ نازک — تاریخ هر روز فقط یک بار */ .chat-day { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 2px; font-size: var(--t-11); font-weight: 600; color: var(--muted); white-space: nowrap; } .chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--line); } .chat-day:first-child { margin-top: 2px; } /* تاریخ و ساعتِ کامل زیرِ نامِ فرستنده در منوی فشارِ طولانی */ .chat-menu-stamp { display: flex; flex-wrap: wrap; gap: 4px var(--s2); margin: -6px 0 var(--s3); font-size: var(--t-12); color: var(--muted); } .chat-msg.mine .who { color: var(--firuzeh); } .chat-msg .who .tag { font-weight: 400; color: var(--muted); font-size: var(--t-11); } /* نشانِ پریمیوم کنارِ اسم */ .chat-msg .who .pro { flex: 0 0 auto; font-weight: 400; font-size: var(--t-10); color: var(--saffron); border: 1px solid currentColor; border-radius: var(--r-xs); padding: 0 3px; } .chat-msg .txt { font-size: var(--t-13); line-height: 1.6; overflow-wrap: anywhere; flex: 1; unicode-bidi: plaintext; } .chat-msg .report-btn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-sm); color: var(--muted); display: grid; place-items: center; opacity: 0.6; } .chat-msg .report-btn svg { width: 13px; height: 13px; } .chat-msg.muted { opacity: 0.4; } .chat-empty { text-align: center; color: var(--muted); font-size: var(--t-13); padding: var(--s5) 0; } /* ریپلای/ویرایش/ری‌اکشن — لابی و کلاب (نگاه کن به chatReplyHtml/ chatReactionsHtml در app.js). ظاهرِ «کادرِ ریپلای» عمداً شبیهِ تلگرام است: نوارِ رنگیِ ضخیم در کنار + پس‌زمینه‌ی کم‌رنگِ همان رنگ، تا چشم فوراً تشخیص بدهد این یک نقل‌قول است، نه ادامه‌ی همان پیام. */ .chat-edited-tag { font-size: var(--t-11); color: var(--muted); margin-inline-start: 4px; } .chat-reply-quote { display: flex; flex-direction: column; gap: 1px; border-inline-start: 3px solid var(--firuzeh); border-radius: var(--r-xs); padding: 3px 7px; margin: 2px 0 4px; background: color-mix(in srgb, var(--firuzeh) 10%, transparent); overflow: hidden; } .chat-reply-quote-name { font-size: var(--t-12); font-weight: 700; color: var(--firuzeh); unicode-bidi: plaintext; } .chat-reply-quote-text { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .chat-reaction-pill { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-12); padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--raised); color: var(--text); } .chat-reaction-pill span { font-size: var(--t-11); color: var(--muted); } .chat-reaction-pill.mine { border-color: var(--firuzeh); background: color-mix(in srgb, var(--firuzeh) 16%, transparent); } .chat-reaction-pill:active { opacity: 0.75; } /* ردیفِ ری‌اکشنِ پرتکرار — بالای منوی فشارِ طولانیِ پیام (chatMessageMenu)، مثلِ تلگرام: یک زدنِ ساده به‌جای باز کردنِ کلِ شیتِ ایموجی. آخرین دکمه («بیشتر») همان چرخِ کاملِ ایموجی را باز می‌کند. */ .quick-react-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: var(--s2) 0 var(--s3); } .quick-react-opt { flex: 1 1 0; display: grid; place-items: center; font-size: calc(24px * var(--fs, 1)); line-height: 1; padding: 6px 0; border-radius: var(--r-pill); } .quick-react-opt:active { background: var(--raised); transform: scale(0.92); } .quick-react-opt.more { color: var(--muted); } .quick-react-opt.more svg { width: 22px; height: 22px; } /* نوارِ «پاسخ به …» / «در حالِ ویرایش» بالای کادرِ نوشتن — همان کادرِ ریپلایِ بالا، فقط با پسِ‌زمینه‌ی کمی پررنگ‌تر چون این‌جا تنها المانِ بینِ فهرستِ پیام‌ها و ورودی است. */ .chat-compose-note { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); margin-top: var(--s2); border-radius: var(--r-sm); background: color-mix(in srgb, var(--firuzeh) 12%, var(--raised)); border-inline-start: 3px solid var(--firuzeh); } .chat-compose-note.hidden { display: none; } .ccn-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ccn-label { font-size: var(--t-11); font-weight: 700; color: var(--firuzeh); } .ccn-text { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .chat-input-row { display: flex; gap: var(--s2); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } .chat-input-row input { flex: 1; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px var(--s4); font-size: var(--t-14); color: var(--text); margin-top: 0; } .chat-input-row .ic { flex: 0 0 auto; } /* ---------------------------------------------------------- شیتِ ایموجی دقیقاً همان الگوی .chat-panel — بک‌دراپ + شیتِ پایین‌چسب — چون یک نمونه‌ی مشترک بینِ هر سه گفت‌وگو (بازی/عمومی/کلاب) است. */ .emoji-panel { position: fixed; inset: 0; z-index: 50; } .emoji-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 9, 0.55); } .emoji-sheet { position: absolute; inset-inline: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 50vh; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid var(--line); border-bottom: 0; animation: rise 0.16s ease-out; padding-bottom: env(safe-area-inset-bottom, 0px); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; overflow-y: auto; padding: var(--s2) var(--s3) var(--s4); } .emoji-opt { font-size: calc(22px * var(--fs, 1)); line-height: 1; padding: 8px 0; border-radius: var(--r-sm); display: grid; place-items: center; } .emoji-opt:active { background: var(--raised); } /* ------------------------------------------------ کیبورد و پنلِ ایموجی اندازه‌ها همه از static/js/kbdock.js می‌آیند (به پیکسل، برای همین گوشی): --kb-inset جای خالیِ پایینِ صفحه برای کیبورد/پنل --kb-vis ارتفاعِ دیدنیِ بالای آن --kb-shrink مقداری که خودِ صفحه برای کیبورد کوتاه شده --emoji-h ارتفاعِ پنل = کیبوردِ همین گوشی پنل جای کیبورد می‌نشیند و بک‌دراپ ندارد. وقتی کیبورد هنوز رویش است، پنل به‌اندازه‌ی --kb-shrink زیرِ لبه می‌رود تا همین که کیبورد کنار رفت، دقیقاً همان‌جا دیده شود. */ .emoji-panel.docked { inset: auto 0 calc(-1 * var(--kb-shrink, 0px)) 0; height: var(--emoji-h, 300px); z-index: 62; } .emoji-panel.docked .emoji-backdrop, .emoji-panel.docked .chat-head { display: none; } .emoji-panel.docked .emoji-sheet { position: relative; max-width: none; max-height: none; height: 100%; margin: 0; border-radius: 0; animation: none; border-inline: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .emoji-panel.docked .emoji-grid { flex: 1; min-height: 0; overscroll-behavior: contain; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); padding: var(--s3) var(--s3) 60px; } .emoji-panel.docked .emoji-opt { padding: 9px 0; font-size: calc(24px * var(--fs, 1)); } .emoji-bksp { display: none; } .emoji-panel.docked .emoji-bksp { display: grid; place-items: center; position: absolute; inset-inline-end: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); width: 54px; height: 40px; border-radius: var(--r); background: var(--raised); color: var(--text); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); -webkit-touch-callout: none; user-select: none; touch-action: manipulation; } .emoji-bksp svg { width: 22px; height: 22px; } .emoji-bksp:active { background: var(--panel); transform: scale(0.96); } /* جای خالیِ پایینِ صفحه تا کادرِ نوشتنِ گفت‌وگوهای داخلِ صفحه بتواند بالای پنل بنشیند. عمداً کلِ ارتفاعِ پنل، از همان لحظه‌ای که هنوز کیبورد باز است: وقتی کیبورد کنار می‌رود و صفحه بلند می‌شود، اگر این فضا از قبل نباشد مرورگر اسکرول را به پایین می‌کشد و کادر می‌پرد (body ستونِ flex با height:100% است، پس padding کار نمی‌کند — یک آیتمِ خالیِ ته‌ِ ستون) */ .kb-panel body::after { content: ""; flex: 0 0 var(--emoji-h, 300px); } /* پنلِ گفت‌وگوی بازی درست روی کیبورد/پنل؛ ارتفاعش به فضای دیدنیِ بالای آن محدود می‌شود */ .kb-chat .chat-sheet { bottom: var(--kb-inset, 0px); } .kb-open .chat-sheet { padding-bottom: 0; max-height: calc(var(--kb-vis, 72vh) - 60px - env(safe-area-inset-top, 0px)); } .kb-open .chat-input-row { padding-bottom: var(--s3); } /* حینِ نوشتن، فهرستِ پیام‌های گفت‌وگوی داخلِ صفحه همه‌ی فضای دیدنیِ بالای کادر را می‌گیرد (مثلِ پیام‌رسان) — با --kb-vis، نه vh، تا عوض‌شدنِ کیبورد ↔ پنل اندازه‌اش را تکان ندهد */ .kb-chat .lobby-chat-list { max-height: max(140px, calc(var(--kb-vis, 100vh) - 200px)); } /* نوارِ پایین و دکمه‌های شناور روی کیبورد نروند */ .kb-open #bottomNav, .kb-open .play-fab, .kb-open .tour-actionbar { display: none !important; } /* فقط وقتی پنل بی‌کیبورد باز/بسته می‌شود حرکت نرم است (kbdock.js: pulseAnim) */ .kb-anim .chat-sheet { transition: bottom 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } .kb-anim .emoji-panel.docked { animation: kb-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes kb-rise { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .kb-anim .chat-sheet { transition: none; } .kb-anim .emoji-panel.docked { animation: none; } } /* گفت‌وگوی عمومی — همان ظاهرِ پیام‌های بالا، ولی داخلِ یک کارت به‌جای شیتِ تمام‌صفحه. ارتفاع سقف دارد تا کارت صفحه را نبلعد. */ .lobby-chat-list { max-height: 240px; overflow-y: auto; margin-top: 6px; border-radius: var(--r-sm); background: var(--ink); padding: 2px var(--s3); } .lobby-chat-list .chat-msg { padding: 6px 0; } /* ردیف‌هایی که فشارِ طولانی رویشان منو باز می‌کند (پیامِ خودِ کاربر ندارد) */ .lobby-chat-list .chat-msg[data-idx] { cursor: pointer; } .lobby-chat-list .ava.sm { margin-inline-end: 2px; } .lobby-chat-list .chat-empty { padding: var(--s4) 0; } #lobbyChatCard .chat-input-row { border-top: 0; padding: var(--s3) 0 0; } /* ================================================================ ۱۱. سه اندازه‌ی صفحه ---------------------------------------------------------------- گوشی زیرِ ۷۶۸ (پیش‌فرضِ همه‌ی قواعدِ بالا) · تبلت ۷۶۸ تا ۱۰۹۹ · دسکتاپ از ۱۱۰۰. هیچ بریک‌پوینتِ دیگری در این فایل نیست. ================================================================ */ /* ---------------------------------------------------------- گوشیِ باریک */ /* بازطراحیِ موبایلِ صفحه‌ی خانه، طبقِ screenshot مرجع — فقط همین بریک‌پوینت (حداکثر ۷۶۷px، یعنی دقیقاً همان بازه‌ی «گوشی» که بالای همین بخش هم تعریف شده). هیچ‌کدام از این قاعده‌ها از این بریک‌پوینت بیرون نمی‌رود، پس تبلت (۷۶۸+) و دسکتاپ (۱۱۰۰+) دقیقاً همان‌طور که بودند می‌مانند — بلوک‌های تبلت/دسکتاپ پایین‌ترِ همین فایل دست‌نخورده‌اند. کلاس‌ها و idهای واقعی هم دست‌نخورده‌اند، فقط ابعاد/تراکم/چیدمانِ همین بریک‌پوینت عوض شده. */ @media (max-width: 767px) { /* اقدام‌های سریع: «تازه‌ها» حذف شد؛ فقط پازل روزانه و یادگیری مانده‌اند. دوستونه‌ی پیش‌فرضِ qa-grid (بالاتر در همین فایل) همین‌جا هم به‌خودیِ‌خود کافی است — دیگر override نمی‌خواهد، هرکدام نیمِ عرضِ ردیف را می‌گیرند و با هم تمامِ عرضِ صفحه را پر می‌کنند. فقط بزرگ‌تر شده‌اند نسبت به قبل: آیکونِ درشت‌تر، عنوانِ بزرگ‌تر، توضیحِ کامل (نه یک‌خطِ بریده‌ی قبلی). qa-list-card (بازی‌های در جریان) همچنان تمام‌عرض می‌ماند (grid-column:1/-1 از قبل تعریف شده). */ .qa-grid > .qa-card:not(.qa-list-card) { min-height: 128px; padding: var(--s4); } .qa-grid > .qa-card:not(.qa-list-card) .qa-ic { width: 40px; height: 40px; } .qa-grid > .qa-card:not(.qa-list-card) .qa-ic svg { width: 20px; height: 20px; } .qa-grid > .qa-card:not(.qa-list-card) .qa-title { font-size: var(--t-15); line-height: 1.3; } .qa-grid > .qa-card:not(.qa-list-card) .qa-sub { font-size: var(--t-12); } /* بازی‌های در جریان: روی موبایل باید کاملاً واضح باشد — دکمه‌ی «ادامه بازی» تمام‌عرض، زیرِ اطلاعاتِ بازی (نه کنارش، جا تنگ می‌شود). */ #ongoingCard .grow { flex-wrap: wrap; row-gap: var(--s2); } #ongoingCard .grow .res { display: none; } #ongoingCard .grow .info { flex: 1 1 100%; } #ongoingCard .grow button.go { flex: 1 1 100%; order: 3; padding: 11px; font-size: var(--t-14); text-align: center; } #ongoingCard .grow button:not(.go) { order: 2; } /* شیتِ «شروعِ بازی» روی موبایل فقط فضای «بینِ سربرگ و نوارِ پایین» را می‌گیرد: نه زیرِ نوار می‌رود و نه روی لوگو/آیتم‌های سربرگ می‌افتد. مقدارِ دقیقِ این دو فاصله را layoutPlaySheet در app.js از روی ارتفاعِ واقعیِ سربرگ و نوار می‌سنجد و روی #playSheet می‌گذارد (--play-top و --play-bottom)؛ مقدارِ پیش‌فرضِ زیر فقط تا لحظه‌ی اولِ سنجش است. اگر محتوا از این فضا بلندتر باشد، داخلِ خودِ شیت اسکرول می‌شود. */ .play-panel { --play-top: 64px; --play-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } .play-sheet { bottom: var(--play-bottom); max-height: calc(100% - var(--play-top) - var(--play-bottom)); border-bottom: 1px solid var(--line); padding-bottom: var(--s3); } .play-sheet-head { padding: var(--s3) 0 var(--s2); } /* نوارِ پایین: «بازی» (تبِ تازه، فقط بازکننده‌ی همان شیتِ شروعِ بازی — مسیر/صفحه‌ی تازه‌ای نیست) و «اجتماع» هم دیده می‌شوند؛ «تحلیل» و «پروفایل» فقط از نوار برداشته می‌شوند تا جا برای این دو باز شود — خودِ صفحه‌هایشان و مسیرشان دست‌نخورده‌اند: پروفایل از آواتارِ سربرگ در دسترس است (همان‌جا که همیشه بوده، نگاه کن به توضیحِ whoBtn چند خط پایین‌تر)، تحلیل هم از دکمه‌های «تحلیل» روی ردیف‌های تاریخچه. */ .bn-tab-mobile-play { display: flex; } .bn-tab-desktop { display: flex; } #navAnalysis, #navProfile { display: none; } } /* سربرگ روی گوشی جا برای نام و ریتینگ ندارد: پنج چیز کنارِ هم (اعلان، صندوق، کاربر، ورود، تنظیمات) بعلاوه‌ی لوگو از عرضِ ۳۹۰ بیشتر می‌شود. خودِ آواتار می‌ماند (درِ ورودِ پروفایل است) و متن از ۴۴۰ به بالا برمی‌گردد — همان اطلاعات یک تب آن‌طرف‌تر، در پروفایل، کامل هست. */ @media (max-width: 439px) { .who-btn .who { display: none; } } /* گوشیِ خیلی باریک (≤۳۵۹): کاربرِ مهمان کنارِ لوگو پنج چیز دارد (چرخ‌دنده، «ورود/ثبت‌نام»، آواتار+استریک، پاکت، زنگوله) که روی ۳۲۰px حدودِ ۱۲px بیرون می‌زد. دکمه‌ها کمی کوچک‌تر و بی‌فاصله می‌شوند (هنوز ≥۳۲px، یعنی لمس‌پذیر)؛ آواتار همان‌قدر بزرگ می‌ماند. */ @media (max-width: 359px) { .hdr-right { gap: 0; } .hdr-right .icon-btn { width: 32px; height: 32px; } .who-btn { gap: 4px; } } @media (max-width: 380px) { :root { --gutter: 12px; } .bn-tab .lbl { font-size: var(--t-10); } .trophy-grid { grid-template-columns: repeat(3, 1fr); } .levels { gap: 3px; } } /* ---------------------------------------------------------------- تبلت */ @media (min-width: 768px) { :root { --gutter: 24px; --content-w: 720px; } header { height: calc(60px + env(safe-area-inset-top, 0px)); } .wrap { padding-top: calc(60px + env(safe-area-inset-top, 0px) + var(--s3)); } .brand { font-size: var(--t-16); } .brand-logo { height: 40px; } .who-btn .ava.sm { width: 40px; height: 40px; font-size: calc(15px * var(--fs, 1)); } /* نوار پایین وسط‌چین و کوتاه‌تر می‌ماند — تبلت هنوز دستی است، پس ناوبری هم پایین می‌ماند، فقط کشیده نمی‌شود. */ #bottomNav { max-width: 560px; border-inline: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; } /* دو ستون آنجا که محتوا واقعاً دوتایی است */ .club-stats-grid { grid-template-columns: repeat(4, 1fr); } .trophy-grid { grid-template-columns: repeat(6, 1fr); } .summary { gap: var(--s2); } /* صفحه‌های تخته‌دار: تخته نباید روی تبلت غول‌آسا شود */ #play, #puzzle, #lesson, #coursePlay, #analysis, #explore, #anBoardTool, #spectate, #tutorialPlay, #coord { max-width: 520px; margin-inline: auto; } /* دکمه‌ی شناورِ بازی حالا تنها درِ ورود به شیتِ «شروعِ بازی» است — پس برخلافِ قبل، از تبلت به بالا هم باید بماند (بخشِ inline‌ای که با نوار/ریل جایگزین شود دیگر وجود ندارد). */ /* خانه از تبلت به بالا: اقدام‌های سریع سه‌ستونه (چهارمی وقتی بازی‌های در جریان هم هست می‌ریزد پایین)؛ نوارِ ریتینگ‌ها هم کمی جادارتر. */ .hss-card { flex-basis: 112px; } .qa-grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------- دسکتاپ */ @media (min-width: 1100px) { :root { --gutter: 32px; --content-w: 1000px; --sidebar-w: 232px; } /* سایدبارِ عمودیِ ثابت، چسبیده به لبه‌ی inline-start — که در این اپِ راست‌به‌چپ سمتِ راستِ صفحه است، هم‌جهت با «عقب» (نگاه کن به کامنتِ #btnBack بالاتر در همین فایل). قبلاً (طرحِ Stitch) نوارِ افقیِ بالای سربرگ بود؛ حالا طبقِ سند یک سایدبار است که هیچ‌وقت خودش تصمیم به پنهان‌شدن نمی‌گیرد — فقط حینِ صفحه‌های غوطه‌ور (بازی/پازل/درس/...) مخفی می‌شود (نگاه کن به showNav در app.js)، دقیقاً همان رفتارِ قبلی، فقط شکلش عوض شده. محتوای اصلی با padding-inline-start روی body کنارش جا می‌شود؛ صفحه‌های غوطه‌ور چون position:fixed با inset:0 دارند اصلاً به این padding کاری ندارند و تمام‌عرض می‌مانند — که چون سایدبار همان‌جا مخفی است، درست هم همین است. */ /* padding فقط وقتی اعمال می‌شود که سایدبار واقعاً دیده می‌شود. immersive-screen را خودِ show() در app.js از قبل روی body می‌گذارد (برای body.immersive-screen{overflow:hidden} که همین‌جا پایین‌تر هست) — همان کلاس اینجا هم استفاده می‌شود: بدونش، حینِ صفحه‌های غوطه‌ور که سایدبار مخفی است، این فاصله‌ی رزروشده خالی می‌ماند و سربرگ/محتوا یک شکافِ بی‌دلیل کنارشان می‌بینند. */ body:not(.immersive-screen) { padding-inline-start: var(--sidebar-w); } /* سربرگِ دسکتاپ sticky است، نه fixed — خودش در جریانِ عادی جا می‌گیرد، پس پدینگِ جبرانی‌ای که موبایل/تبلت برای سربرگِ fixed به .wrap اضافه کرده بود اینجا لازم نیست. */ .wrap { padding-top: var(--s3); } header { position: sticky; top: 0; z-index: 47; height: 72px; background: var(--panel); border-bottom: 1px solid var(--line); margin: 0 calc(var(--gutter) * -1) var(--s5); padding-inline: var(--gutter); } .brand { font-size: var(--t-16); } .brand-logo { height: 48px; } .who-btn .ava.sm { width: 44px; height: 44px; font-size: calc(16px * var(--fs, 1)); } #bottomNav { position: fixed; top: 72px; bottom: 0; inset-inline-start: 0; width: var(--sidebar-w); max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s3) var(--s2); overflow-y: auto; margin: 0; box-shadow: none; background: var(--panel); border-inline-end: 1px solid var(--line); z-index: 40; } .bn-tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: var(--s3); padding: 11px var(--s3); border-radius: var(--r); font-weight: 600; width: 100%; } .bn-tab .ic { display: flex; flex: 0 0 auto; } .bn-tab .lbl { font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-tab.active { background: var(--accent-soft); color: var(--firuzeh); } .bn-tab:hover:not(.active) { background: var(--raised); } /* پروفایل روی طرحِ افقیِ قبلی برای صرفه‌جوییِ جا حذف می‌شد (از آواتارِ whoBtn باز می‌شد)؛ روی سایدبار جا هست، پس مثلِ بقیه‌ی ردیف‌ها می‌ماند. */ .bn-tab-desktop { display: flex; } /* منوی همبرگری — ته‌ِ سایدبار (margin-top:auto در ستونِ فلکس، خودِ wrap را از بقیه‌ی ردیف‌ها جدا نگه می‌دارد). */ .nav-menu-wrap { flex: 0 0 auto; margin-top: auto; width: 100%; } body.has-bottom-nav .wrap, body.has-bottom-nav:has(#siteFooter.hidden) .wrap { padding-bottom: 0; } /* روی دسکتاپ نوارِ پایین وجود ندارد (سایدبار جایش را گرفته)، پس فاصله‌ی ۷۲px از bottom معنایی ندارد؛ همچنین دکمه نباید زیرِ سایدبارِ عمودی (که خودش inset-inline-start:0 با پهنایِ --sidebar-w است) گم شود، پس از همان لبه به‌اندازه‌ی عرضِ سایدبار + کمی فاصله عقب می‌نشیند. */ .play-fab { bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); inset-inline-start: calc(var(--sidebar-w) + var(--s4)); } .fab-add { bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); } body.has-play-fab .wrap { padding-bottom: 0; } /* مقصدهای فهرستی دو ستونه می‌شوند. ستون‌ها به‌جای grid استفاده می‌شوند چون کارت‌ها ارتفاعِ خیلی متفاوتی دارند و grid ردیف‌ها را هم‌ارتفاع می‌کند که فضای خالیِ زشت می‌سازد. */ #more .sec { break-inside: avoid; } #home > .sec:last-child, #more { column-gap: var(--s5); } #more { column-count: 2; } #more > .sec { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; } /* صفحه‌های تخته‌دار وسط‌چین و محدود می‌مانند */ #play, #puzzle, #lesson, #coursePlay, #explore, #spectate, #tutorialPlay, #coord { max-width: 560px; margin-inline: auto; } #watch, #profile, #auth, #tutorial, #train { max-width: 780px; margin-inline: auto; } /* تحلیل/مرورِ بازی: چیدمانِ دسکتاپش پایینِ فایل است (بلوکِ «مرورِ بازی — دسکتاپ»). #analysis صفحه‌ای «غوطه‌ور» است و سقفِ ۵۶۰پیکسلیِ #screenLayer > main > * (بعد از این‌جا تعریف می‌شود) شبکه‌ی دوستونه‌ی قبلی را به ~۱۵۰px باریک می‌کرد و تخته کوچک می‌ماند. */ /* تخته‌ی تحلیلِ مستقل (ابزار): چیدمانِ دسکتاپش پایینِ فایل است (بلوکِ «تخته‌ی تحلیل — دسکتاپ»)، چون باید سقفِ ۵۶۰پیکسلیِ #screenLayer > main > * را هم بشکند که بعد از این‌جا تعریف شده. */ /* صفحه‌ی خانه: روی دسکتاپ عریض‌تر می‌شود، ولی دیگر شبکه‌ی چندناحیه‌ای نیست — هر بخش (هیرو/نوارِ ریتینگ‌ها/اقدام‌های سریع/بازی‌های اخیر+آمار/ ادامه‌بده/اجتماع) تمام‌عرضِ همین ستون است؛ فقط بخشِ پایینی خودش داخلش دوستونه می‌شود (نگاه کن به .home-lower-grid پایین‌تر). ترتیبِ DOM همان ترتیبِ دیداری است، چیزی جابه‌جا نشده. */ #home { max-width: 900px; margin-inline: auto; } .qa-grid { grid-template-columns: repeat(4, 1fr); } .home-lower-grid { flex-direction: row; align-items: flex-start; } .home-lower-grid .home-history { flex: 1; min-width: 0; } .home-lower-grid .home-side { flex: 0 0 280px; } .sheet .card { max-width: 400px; } .chat-sheet { max-width: 420px; inset-inline-start: auto; inset-inline-end: var(--s5); border-radius: var(--r-lg) var(--r-lg) 0 0; } .trophy-grid { grid-template-columns: repeat(7, 1fr); } } /* ---------------------------------------------------------- مانیتورِ پهن */ @media (min-width: 1500px) { :root { --content-w: 1120px; } /* صفحه‌ی خانه روی مانیتورِ پهن — همان ترتیبِ دیداریِ قبلی (افتخارات، بنرِ تورنمنت، نقل‌قول، بعد بازی‌های اخیر)، ولی بدونِ آفستِ دستی: همه‌ی بخش‌ها یک ستونِ هم‌عرض‌اند و با #home هم‌لبه‌اند. */ #home { max-width: 900px; } .home-lower-grid { flex-direction: column-reverse; align-items: stretch; gap: var(--s4); } .home-lower-grid .home-history, .home-lower-grid .home-side { flex: 0 0 auto; width: 100%; } .home-side { display: flex; flex-direction: column; gap: var(--s3); } .home-side > #homeAchCard { order: 1; } .home-side > #homeTourBanner { order: 2; } .home-side > .home-quote-card { order: 3; } #homeAchCard, #homeTourBanner, .home-quote-card { width: 100%; max-width: none; margin: 0; } #homeTourBanner > .photo-card-img { width: 100%; height: 100%; object-fit: cover; } #btnHomeCommunityOpen { width: 100%; } .home-tour-banner-body { width: 40%; padding: var(--s5); } .home-tour-banner-title { font-size: var(--t-16); } .home-tour-banner-sub { font-size: var(--t-12); } body.has-bottom-nav { position: relative; left: 0; top: 0; } /* #more هم تک‌ستونی می‌شود، ولی برخلافِ #learn تا لبه کشیده نمی‌شود — محتوایش (چهار ردیفِ ناوبریِ ساده + یک دکمه‌ی «گزینه‌های پیشرفته») نیازی به عرضِ کاملِ appShell ندارد، پس فقط تا ۸۳۲px باز می‌شود. */ #more { max-width: 832px; margin-inline: auto; column-count: 1; } /* #tutorial یکی از صفحه‌های «غوطه‌ور» است (نگاه کن به immersiveScreens در app.js): با show() از appShell به #screenLayer منتقل می‌شود، پس سقفِ ۷۸۰pxِ خودِ #tutorial (بالاتر، بخشِ دسکتاپِ ≥1100px) روی آن اثر ندارد — در آن حالت، سقفِ عمومیِ همه‌ی صفحه‌های غوطه‌ور حاکم است (#screenLayer > main > *، پیش‌فرض ۵۶۰px). این‌جا فقط برایِ #tutorial (نه بقیه‌ی صفحه‌های غوطه‌ور مثلِ #puzzle/#lesson/#coord) به همان ۷۸۰pxِ آشنا باز شد؛ کارت/دکمه‌ی تویش چون عرض‌شان از پدر ارث می‌رسد (width:100%) خودشان همراهش پهن می‌شوند، بدونِ نیاز به تنظیمِ جداگانه. */ #tutorial > .sec { max-width: 780px; } #screenLayer > #tutorial { background: var(--accent-soft); } } /* ================================================================ صفحه‌های متمرکز (بازی/پازل/درس/…) ---------------------------------------------------------------- این صفحه‌ها از جریانِ خانه بیرون می‌آیند و به #screenLayer منتقل می‌شوند (نگاه کن به show() در app.js) تا کلِ ارتفاع را بگیرند. نکته‌ی مهم برای گوشی: تخته باید *بدونِ اسکرول* جا شود. ارتفاعِ در دسترس با --app-100dvh حساب می‌شود نه 100dvh مرورگر، چون دقیقاً همان لحظه‌ای که صفحه غیرقابل‌اسکرول می‌شود، مقدارِ 100dvh می‌تواند در حالتِ گذرای نوارِ آدرس قفل بماند و تخته کشیده/فشرده رندر شود (app.js آن را اندازه می‌گیرد). ================================================================ */ #screenLayer:empty { display: none; } #screenLayer > main { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--ink); padding: calc(62px + env(safe-area-inset-top, 0px)) var(--gutter) var(--s4); max-width: none; /* روی گوشیِ بلند، تخته عرض‌محدود است و زیرِ نوارِ ابزار فضای مرده می‌ماند؛ محتوا وسط‌چینِ عمودی می‌شود تا تخته به مرکزِ دید بیاید. کلیدواژه‌ی safe یعنی اگر محتوا از صفحه بلندتر شد، به‌جای بریدنِ بالا به شروع برگردد. */ display: flex; flex-direction: column; justify-content: safe center; } #screenLayer > main > * { flex: 0 0 auto; } body.immersive-screen { overflow: hidden; } /* سقفِ ارتفاعِ تخته: کلِ صفحه منهای سربرگ، دو ردیفِ بازیکن، نوارِ حرکت‌ها و نوارِ ابزار. عدد از جمعِ همان‌ها می‌آید، نه از حدس. عرض: تخته عمداً از حاشیه‌ی کناریِ صفحه (var(--gutter)) بیرون می‌زند و تا لبه‌ی واقعیِ صفحه می‌رود — دقیقاً مثلِ سایت‌های شطرنجِ مطرح، که رویش هیچ حاشیه‌ای نیست. بقیه‌ی محتوا (سربرگ، پیام‌ها، نوارِ ابزار) همان حاشیه‌ی معمولی را دارند، چون از این قاعده مستثنا نشده‌اند. وسط‌چینی عمداً با align-self: center است، نه margin-inline: auto: این عنصرها خودشان آیتمِ فلکسِ یک ستونِ عمودی‌اند (محورِ عرضی = محورِ عرَضی/cross)، و طبقِ خودِ اسپکِ فلکس‌باکس، وقتی حاشیه‌ی auto در محورِ عرَضی باید منفی شود (چون عرضِ آیتم از کانتینرش بیشتر است — دقیقاً حالتِ لبه‌به‌لبه‌شدن)، مرورگر آن را صفر می‌گیرد نه منفی، و آیتم بی‌قاعده به یکی از دو طرف (وابسته به جهتِ صفحه: راست در فارسی، چپ در انگلیسی) می‌چسبد و از طرفِ دیگر بیرون می‌زند — دقیقاً همان نامتقارنیِ دیده‌شده. align-self این محدودیت را ندارد و همیشه واقعاً وسط می‌چیند، even overflow را هم مساوی دو طرف پخش می‌کند. */ #screenLayer > #play .board { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 280px)); align-self: center; } /* پازل: بعد از فشرده‌شدنِ زیرِ تخته به یک نوارِ آیکونیِ تک‌ردیفه (به‌جای سه ردیفِ کاملِ قبلی)، فضای رزروشده هم متناسب کم شد؛ عرض هم مثلِ بازی تا لبه می‌رود. */ #screenLayer > #puzzle #boardHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 250px)); align-self: center; } /* تماشا: از قبل همین الگوی نوارِ ابزارِ فشرده را داشت — دست‌نخورده ماند (نه ارتفاع، نه عرض). عرضش هیچ‌وقت از کانتینر بیشتر نمی‌شود، پس margin-inline: auto برایش مشکلی نداشت و نیازی به تغییر نبود. */ #screenLayer > #spectate #watchBoardHost { width: 100%; max-width: min(100%, calc(var(--app-100dvh) - 330px)); margin-inline: auto; } #screenLayer > #openbook .ob-stage { max-width: min(100%, calc(var(--app-100dvh) - 330px)); } /* تخته‌ی آزاد: همان اصلاح، عدد جداگانه چون سربرگش (توضیحِ بلندتر) و دکمه‌های زیرش با پازل یکی نیستند. */ #screenLayer > #explore #exploreHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 215px)); align-self: center; } /* تمرینِ حرکتِ مهره‌ها: سربرگش هم مثلِ پازل جمع شد، ولی ناحیه‌ی مربیِ ثابت‌ارتفاعش (تعریف در .tut-coach) سرِ جایش ماند. */ #screenLayer > #tutorialPlay #tutBoardHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 245px)); align-self: center; } /* درس و کاوشگرِ افتتاحیه عمداً دست‌نخورده ماندند: هر دو یک ناحیه‌ی ثابت‌ارتفاعِ ۱۹۰px زیرِ تخته دارند (.lesson-dynamic) که با هدفِ جلوگیری از پرشِ دکمه‌ها ساخته شده — تغییرِ این عدد (یا حتی فقط عرض) یعنی ریسکِ همان مشکلِ قدیمی. فقط دکمه‌های زیرشان آیکونی شدند، ابعادِ تخته (هم ارتفاع هم عرض) همان قبلی است. */ #screenLayer > #lesson #lsBoardHost, #screenLayer > #openbook #obBoardHost { width: 100%; max-width: min(100%, calc(var(--app-100dvh) - 330px)); margin-inline: auto; } /* Rush/Storm قبلاً اصلاً سقفی نداشتند — یعنی روی گوشی‌های بلند تخته تا عرضِ کامل می‌رفت و صفحه (نه خودِ تخته) اسکرول می‌شد. حالا مثلِ بقیه با ارتفاعِ واقعیِ در دسترس محدود می‌شود، و عرض هم تا لبه می‌رود. */ #screenLayer > #rush #rushBoardHost, #screenLayer > #storm #stormBoardHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 210px)); align-self: center; } /* Puzzle Battle: تنها صفحه‌ی خانوادهٔ پازل که سقف و لبه‌به‌لبه نداشت — تخته ۳۲px باریک‌تر از بازی/پازل بود. حالا مثلِ Rush/Storm: تا لبه‌ی صفحه می‌رود و با ارتفاعِ در دسترس سقف می‌خورد (سربرگ + نوارِ امتیاز + پیام زیرش جا می‌گیرند). */ #screenLayer > #battle #battleLive:not(.hidden) { display: flex; flex-direction: column; } #screenLayer > #battle #battleLive > * { flex: 0 0 auto; } #screenLayer > #battle #battleBoardHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 270px)); align-self: center; } /* ستونِ فرعیِ صفحه‌ی بازی. روی گوشی هیچ اثری ندارد (display: contents)، پس چیدمانِ گوشی همان تک‌ستونیِ ساده می‌ماند. */ .play-rail { display: contents; } /* اجزای فقط‌دسکتاپِ ستون: سرِ ستون، فهرستِ کاملِ حرکت‌ها، جای گفت‌وگو */ .play-rail-head, .play-moves, .play-chat-dock { display: none; } @media (min-width: 1100px) { /* صفحه‌ی متمرکز زیرِ header استیکی جا می‌شود؛ دیگر ریلی نیست که کنارش بنشیند */ #screenLayer > main { padding-top: 96px; } #screenLayer > main > * { max-width: 560px; margin-inline: auto; } /* روی دسکتاپ wrapper واقعی می‌شود: تخته یک ستون، ابزارها ستونِ کناری — مستقل از اینکه تخته چقدر بلند است. */ /* اندازه‌ی تخته مثلِ سایت‌های شطرنجِ مطرح: هرچه ارتفاعِ صفحه اجازه بدهد (کلِ صفحه منهای سربرگ، دو ردیفِ بازیکن و حاشیه: ۹۲ بالا + ۵۸×۲ ردیف + ۸ پایین = ۲۱۶px، دقیقاً از اندازه‌گیریِ واقعی)، نه آن‌قدر که ریل از عرضِ صفحه بیرون بزند. قبلاً ستونِ تخته روی ۵۶۰px قفل بود و روی ۱۰۸۰p بیش از ۳۰۰px از ارتفاع خالی می‌ماند. عددِ ۲۱۶ باید با جمعِ واقعی یکی باشد: کمتر = فضای مرده، بیشتر = تخته از بالا فشرده (غیرمربع) می‌شود. سقفِ ۹۲۰px تا روی مانیتورِ خیلی بزرگ تخته غول نشود. */ #screenLayer > #play { --pl-rail: 320px; --pl-gap: var(--s5); padding-top: 92px; padding-bottom: 8px; --pl-board: clamp( 420px, min( calc(var(--app-100dvh) - 216px), calc(100vw - var(--gutter) * 2 - var(--pl-rail) - var(--pl-gap)), 920px ), 920px ); display: grid; align-content: start; justify-content: center; grid-template-columns: var(--pl-board) var(--pl-rail); grid-template-areas: "top rail" "board rail" "bottom rail"; column-gap: var(--pl-gap); } #screenLayer > #play > * { max-width: none; } #screenLayer > #play > #plTop { grid-area: top; } #screenLayer > #play > #board { grid-area: board; } #screenLayer > #play > #plBottom { grid-area: bottom; } /* ردیفِ بازیکن‌ها هم‌عرضِ تخته (اسم کنارِ لبه، ساعت در لبه‌ی دیگر — مثلِ سایت‌های شطرنجِ مطرح). margin-inline:auto ارثیِ بالا آن‌ها را به اندازه‌ی محتوا جمع و وسط‌چین می‌کرد؛ با تخته‌ی بزرگ‌تر این بی‌ترازی بیشتر به چشم می‌آمد. */ #screenLayer > #play > #plTop, #screenLayer > #play > #plBottom { margin-inline: 0; } /* ستونِ کناری = «میزِ بازی»: یک کارتِ هم‌قدِ تخته و دو ردیفِ بازیکن. بالا زمان‌بندی، بعد فهرستِ کاملِ حرکت‌ها، دکمه‌های مرور و ابزار، و پایین گفت‌وگو (اگر بازی گفت‌وگو دارد). contain: size یعنی محتوای ستون ارتفاعِ ردیف‌ها را بالا نمی‌برد — قدش را تخته تعیین می‌کند و فهرست/گفت‌وگو داخلِ خودشان اسکرول می‌شوند. */ #screenLayer > #play .play-rail { grid-area: rail; align-self: stretch; contain: size; /* margin-inline:auto ارثی (#screenLayer > main > *) کشیدنِ افقی را خاموش می‌کرد و با contain: size عرض صفر می‌شد */ margin-inline: 0; justify-self: stretch; display: flex; flex-direction: column; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm, none); } #screenLayer > #play .play-rail > * { flex: 0 0 auto; } #screenLayer > #play .move-strip, #screenLayer > #play .toolbar { margin-top: 0; } #screenLayer > #play .play-rail-head { order: -2; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px var(--s4); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--t-13); } #screenLayer > #play .play-rail-head:empty { display: none; } #screenLayer > #play .prh-tc { color: var(--text); font-family: var(--font-mono); font-weight: 800; font-size: var(--t-15); font-variant-numeric: tabular-nums; } #screenLayer > #play .prh-dot { color: var(--faint); } #screenLayer > #play .play-tour-chip { order: -1; margin: var(--s2) var(--s3) 0; } /* فهرستِ حرکت‌ها: ردیف‌های راه‌راهِ کم‌رنگ، حرکتِ جاری با پس‌زمینه‌ی برجسته */ #screenLayer > #play .play-moves { display: block; flex: 1.3 1 0; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 8px; } #screenLayer > #play .play-moves .movelist { margin: 0; padding: 0; border: 0; background: none; max-height: none; overflow: visible; grid-template-columns: 40px 1fr 1fr; gap: 0; font-size: var(--t-14); font-family: var(--font-mono); } #screenLayer > #play .play-moves .movelist > :nth-child(6n + 1), #screenLayer > #play .play-moves .movelist > :nth-child(6n + 2), #screenLayer > #play .play-moves .movelist > :nth-child(6n + 3) { background: var(--raised); } #screenLayer > #play .play-moves .movelist > :nth-child(6n + 1) { border-radius: var(--r-xs) 0 0 var(--r-xs); } #screenLayer > #play .play-moves .movelist > :nth-child(6n + 3) { border-radius: 0 var(--r-xs) var(--r-xs) 0; } #screenLayer > #play .play-moves .no { padding: 5px 8px 5px 2px; font-size: var(--t-12); align-self: stretch; display: flex; align-items: center; justify-content: flex-end; } #screenLayer > #play .play-moves .m { padding: 5px 8px; border-radius: var(--r-xs); font-weight: 600; color: var(--text); background: none; border: 0; text-align: start; width: 100%; } #screenLayer > #play .play-moves .m:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } #screenLayer > #play .play-moves .m.on { background: var(--firuzeh); color: var(--on-accent); font-weight: 800; } #screenLayer > #play .pm-empty { margin: var(--s4) 0; text-align: center; color: var(--faint); font-size: var(--t-13); } /* دکمه‌های مرور: زیرِ فهرست، بی‌قاب؛ برچسبِ «حرکتِ جاری» لازم نیست (فهرست خودش نشانش می‌دهد) */ #screenLayer > #play .move-strip { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 4px var(--s2); } #screenLayer > #play .move-strip .ms-label { visibility: hidden; } #screenLayer > #play #goneBar:not(:empty), #screenLayer > #play #playMsg:not(:empty) { margin: var(--s2) var(--s3) 0; } /* ابزارها هم‌عرض، کنارِ هم، کلِ عرضِ ستون (نه سه دکمه‌ی پراکنده با فاصله‌ی نابرابر) */ #screenLayer > #play .play-rail > .toolbar { padding: var(--s2) var(--s3); border-top: 1px solid var(--line); gap: var(--s2); } #screenLayer > #play .play-rail > .toolbar > .ic, #screenLayer > #play .play-rail > .toolbar > .more-menu-anchor { flex: 1 1 0; min-width: 0; } #screenLayer > #play .play-rail > .toolbar > .ic, #screenLayer > #play .play-rail > .toolbar > .more-menu-anchor > .ic { width: 100%; } /* «بیشتر» فقط بعد از پایانِ بازی (یا بازیِ ربات) دیده می‌شود؛ تا آن موقع جای خالی نگیرد */ #screenLayer > #play .play-rail > .toolbar > .more-menu-anchor:has(> #btnMore.hidden) { display: none; } /* گفت‌وگو در ستون: همان #chatPanel، بی‌بک‌دراپ و بی‌شیت؛ همیشه باز */ #screenLayer > #play .play-chat-dock { display: flex; flex: 1 1 0; min-height: 0; border-top: 1px solid var(--line); } #screenLayer > #play .play-chat-dock:empty { display: none; } .play-chat-dock .chat-panel.docked { position: static; inset: auto; z-index: auto; display: flex; flex: 1; min-width: 0; min-height: 0; } .play-chat-dock .chat-panel.docked .chat-backdrop { display: none; } .play-chat-dock .chat-panel.docked .chat-sheet { position: static; inset: auto; max-width: none; max-height: none; margin: 0; flex: 1; min-height: 0; min-width: 0; background: none; border: 0; border-radius: 0; animation: none; padding-bottom: 0; } .play-chat-dock .chat-panel.docked .chat-head { padding: var(--s3) var(--s4) 2px; font-size: var(--t-13); } .play-chat-dock .chat-panel.docked #btnChatClose { display: none; } .play-chat-dock .chat-panel.docked .chat-hint { padding-bottom: var(--s2); } .play-chat-dock .chat-panel.docked .chat-list { min-height: 0; } .play-chat-dock .chat-panel.docked .chat-input-row { padding: var(--s2) var(--s3); } .play-chat-dock .chat-panel.docked .chat-input-row input { flex: 1; min-width: 0; width: auto; } #screenLayer > #play .play-rail:has(.chat-panel.docked) #btnChatToggle { display: none !important; } #screenLayer > #play .board { width: 100%; max-width: none; align-self: stretch; } /* پازل: همان اندازه‌ی تخته‌ی بازیِ آنلاین. تخته چپ، و سربرگ/پیام/نوارِ ابزار در ریلِ کناری — پس مثلِ بازی، از ارتفاع فقط ۲۱۶px کم می‌شود (قبلاً زیرِ تخته جا می‌گرفتند و تخته ~۳۵px کوچک‌تر بود). فرمولِ --pl-board باید دقیقاً با #play یکی بماند. */ #screenLayer > #puzzle { --pl-rail: 300px; --pl-gap: var(--s5); padding-top: 92px; padding-bottom: 8px; --pl-board: clamp( 420px, min( calc(var(--app-100dvh) - 216px), calc(100vw - var(--gutter) * 2 - var(--pl-rail) - var(--pl-gap)), 920px ), 920px ); display: grid; align-content: start; justify-content: center; grid-template-columns: var(--pl-board) var(--pl-rail); grid-template-rows: auto auto auto 1fr; column-gap: var(--pl-gap); } #screenLayer > #puzzle > * { max-width: none; } #screenLayer > #puzzle > .puzzle-head, #screenLayer > #puzzle > #puzzleMsg, #screenLayer > #puzzle > .puzzle-toolbar { margin-inline: 0; width: auto; justify-self: stretch; } #screenLayer > #puzzle #boardHost { grid-column: 1; grid-row: 1 / span 4; max-width: none; align-self: start; } /* سربرگ در ریل: سطرِ اول عنوان + ✕، سطرِ دوم زنجیره‌ی پشت‌سرهم */ #screenLayer > #puzzle > .puzzle-head { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: var(--s2); padding-top: 0; } #screenLayer > #puzzle > .puzzle-head #puzzleMeta { grid-column: 1; grid-row: 1; } #screenLayer > #puzzle > .puzzle-head #btnPuzzleLeave { grid-column: 2; grid-row: 1; } #screenLayer > #puzzle > .puzzle-head .streak { grid-column: 1 / -1; grid-row: 2; justify-self: start; } #screenLayer > #puzzle > #puzzleMsg { grid-column: 2; grid-row: 2; } #screenLayer > #puzzle > .puzzle-toolbar { grid-column: 2; grid-row: 3; justify-content: flex-start; margin-top: var(--s2); } /* لبه‌به‌لبه‌شدنِ تخته (بالاتر) فقط برایِ صفحه‌ی گوشیِ تمام‌عرض معنی دارد؛ روی دسکتاپ تخته یک ستونِ عادی داخلِ گرید/کارت است، پس همان width:100% پیش‌فرض برمی‌گردد. */ #screenLayer > #puzzle #boardHost, #screenLayer > #explore #exploreHost, #screenLayer > #tutorialPlay #tutBoardHost, #screenLayer > #rush #rushBoardHost, #screenLayer > #storm #stormBoardHost { width: 100%; } } /* ================================================================ دسترس‌پذیری ================================================================ */ @media (prefers-reduced-motion: reduce) { *, .pc { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------ ناظرِ گفت‌وگو */ .chat-mod-bar { display: flex; justify-content: flex-end; margin-bottom: var(--s2); } .chat-mod-bar.hidden { display: none; } .chat-mod-quote { background: var(--bg-secondary); border-radius: var(--r-sm); padding: var(--s2) var(--s3); max-height: 96px; overflow: auto; word-break: break-word; } .mod-input { width: 100%; box-sizing: border-box; margin: 0 0 var(--s3); padding: 10px 12px; border-radius: var(--r); font: inherit; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--bg, transparent); color: inherit; } .mod-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-13); margin: 0 0 var(--s3); cursor: pointer; } .mod-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; } .mod-durations { display: flex; flex-wrap: wrap; gap: 8px; } .mod-durations .btn.sm { flex: 1 1 calc(33% - 8px); justify-content: center; } .mod-list { max-height: 55vh; overflow-y: auto; } .mod-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); } .mod-row:last-child { border-bottom: 0; } .mod-row-main { flex: 1; min-width: 0; } .mod-row-main .who { font-weight: 600; font-size: var(--t-13); unicode-bidi: plaintext; } .mod-row-meta { color: var(--muted); font-size: var(--t-12); unicode-bidi: plaintext; word-break: break-word; } .mod-row .btn.sm { flex: 0 0 auto; } .mod-subtitle { font-size: var(--t-13); font-weight: 700; margin: var(--s4, 16px) 0 var(--s2); } .chat-closed-note { margin: var(--s2) 0 0; font-size: var(--t-12); color: var(--warn, var(--muted)); } /* ---------------------------------------------------------- کانالِ کلاب نگاه کن به openClubChannel در app.js. چیپ باید position:relative باشد تا .badge-dot («پستِ تازه») رویش بنشیند. متنِ پست و پیش‌نویس با unicode-bidi: plaintext — هر پاراگراف جهتِ خودش را از اولین حرفش می‌گیرد، پس خطِ انگلیسی وسطِ متنِ فارسی به‌هم نمی‌ریزد. */ .club-nav-btn { position: relative; } .club-nav-btn .badge-dot { top: 3px; inset-inline-end: 3px; } #chBody, #chEditBody { direction: rtl; text-align: start; unicode-bidi: plaintext; font-size: var(--t-14); line-height: 1.7; min-height: 84px; } .ch-composer { margin-bottom: var(--s3); } .ch-composer-bar { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; } .ch-composer-bar .btn.sm { width: auto; margin: 0; } .ch-composer-bar #btnChAddImage { display: inline-flex; align-items: center; gap: 6px; } .ch-composer-bar #btnChAddImage .ic-wrap { width: 16px; height: 16px; display: flex; } .ch-composer-bar #btnChAddImage .ic-wrap svg { width: 100%; height: 100%; } .ch-composer-bar #btnChPublish { margin-inline-start: auto; } /* نوارِ قالب‌بندی: B / I / رنگ */ .ch-fmt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s2); } .ch-fmt-btn { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-15); font-family: Georgia, "Times New Roman", serif; transition: transform 0.12s, background 0.12s; } .ch-fmt-btn:active { transform: scale(0.94); } .ch-fmt-btn[aria-expanded="true"] { background: var(--panel); border-color: var(--firuzeh); } .ch-fmt-color .dot { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#E5484D, #F08A24, #D9A400, #2FA866, #1AA6A6, #3B82F6, #9B6BFF, #E5539E, #E5484D); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); } .ch-fmt-color .dot[class*="fc-bg-"] { background: var(--sw); } .ch-palette { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; padding: 6px 2px 2px; } .ch-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); transition: transform 0.12s; } .ch-swatch:active { transform: scale(0.9); } .ch-swatch.clear { background: var(--ink); position: relative; overflow: hidden; } .ch-swatch.clear::after { content: ""; position: absolute; inset: 0; margin: auto; width: 2px; height: 120%; background: var(--danger, #E5484D); transform: rotate(45deg); } .fc-bg-red { --sw: #E5484D; } .fc-bg-orange { --sw: #F08A24; } .fc-bg-gold { --sw: #D9A400; } .fc-bg-green { --sw: #2FA866; } .fc-bg-teal { --sw: #1AA6A6; } .fc-bg-blue { --sw: #3B82F6; } .fc-bg-purple { --sw: #9B6BFF; } .fc-bg-pink { --sw: #E5539E; } .fc-red { color: #E5484D; } .fc-orange { color: #F08A24; } .fc-gold { color: #D9A400; } .fc-green { color: #2FA866; } .fc-teal { color: #1AA6A6; } .fc-blue { color: #3B82F6; } .fc-purple { color: #9B6BFF; } .fc-pink { color: #E5539E; } .ch-post-body em { font-style: italic; } .ch-preview { margin-top: var(--s2); padding: 8px 12px; border-radius: var(--r-sm); background: var(--ink); border: 1px dashed var(--line); } .ch-preview .ch-post-body { margin-top: 2px; } .ch-preview-label { font-size: var(--t-11); color: var(--muted); font-weight: 600; } .ch-notify { margin: 0; font-size: var(--t-12); color: var(--muted); gap: 6px; } /* «چه کسی ببیند؟» — سگمنتِ دوحالته زیرِ متن، با یک خطِ توضیح که با انتخاب عوض می‌شود */ .ch-vis { margin-top: var(--s2); } .ch-vis .ch-vis-seg { margin: 0; } .ch-vis .ch-vis-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .ch-vis-hint { margin: 6px 2px 0; font-size: var(--t-12); color: var(--muted); line-height: 1.6; } /* نشانِ «فقط اعضا» روی پست (فقط برای مدیرها) */ .ch-vis-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink); color: var(--muted); font-size: var(--t-11); font-weight: 600; white-space: nowrap; } /* پستی که از اعلان به آن رسیده‌ایم: یک چشمک‌ِ ملایم که خودش محو می‌شود */ .ch-post.ch-flash { animation: chFlash 2.2s ease-out; } @keyframes chFlash { 0%, 35% { box-shadow: 0 0 0 2px var(--firuzeh); } 100% { box-shadow: 0 0 0 2px transparent; } } @media (prefers-reduced-motion: reduce) { .ch-post.ch-flash { animation: none; box-shadow: 0 0 0 2px var(--firuzeh); } } /* «+ کلابِ تازه»: قرصِ طلاییِ کوچک. sticky (نه fixed) تا همیشه *بالای* فوتر و نوارِ ناوبری بماند: وقتی صفحه کوتاه است ته‌ِ #clubs (درست بالای فوتر) می‌نشیند، وقتی فهرست بلند است به لبه‌ی پایینِ دید می‌چسبد و در انتها روی فوتر نمی‌افتد. */ #appShell:has(> #clubs:not(.hidden)) { display: flex; flex-direction: column; } #clubs:not(.hidden) { flex: 1 0 auto; display: flex; flex-direction: column; } #clubs > .sec { flex: 0 0 auto; } .fab-add { position: sticky; z-index: 41; margin-top: auto; align-self: flex-end; bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--s3)); display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 18px; border-radius: var(--r-pill); background: var(--firuzeh); color: var(--on-accent); font-weight: 800; font-size: var(--t-14); white-space: nowrap; box-shadow: 0 8px 22px rgba(18, 16, 14, 0.30), 0 1px 0 rgba(255, 255, 255, 0.25) inset; transition: transform 0.15s ease, background 0.12s; } .fab-add:hover { background: var(--firuzeh-dim); } .fab-add:active { transform: scale(0.96); } .fab-add svg { flex: 0 0 auto; } /* ردیفِ اینباکس که مقصد دارد */ .friend-row.inbox-link { cursor: pointer; border-radius: var(--r-sm); } .friend-row.inbox-link:hover, .friend-row.inbox-link:focus-visible { background: var(--ink); } .inbox-go { flex: 0 0 auto; align-self: center; padding: 5px 12px; border-radius: var(--r-btn-sm); background: var(--firuzeh); color: var(--on-accent); font-size: var(--t-12); font-weight: 700; } .ch-thumbs { display: flex; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; } .ch-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; background: var(--ink); border: 1px solid var(--line); } .ch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ch-thumb.busy img { opacity: 0.45; } .ch-thumb.failed { border-color: var(--danger); } .ch-thumb.failed img { opacity: 0.3; } .ch-thumb-spin { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.5); border-top-color: var(--firuzeh); animation: chSpin 0.8s linear infinite; } @keyframes chSpin { to { transform: rotate(360deg); } } .ch-thumb-x { position: absolute; top: 3px; inset-inline-end: 3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: rgba(0, 0, 0, 0.6); color: #fff; border: 0; } .ch-thumb-x svg { width: 12px; height: 12px; } .ch-post { margin-bottom: var(--s3); } .ch-post-head { display: flex; align-items: center; gap: var(--s2); } .ch-post-head .ava { cursor: pointer; } .ch-post-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ch-post-author { font-weight: 700; font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-post-time { font-size: var(--t-11); color: var(--muted); } .ch-post-menu { flex: 0 0 auto; } .ch-post-body { margin-top: var(--s2); font-size: var(--t-14); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; } .ch-post-body a { color: var(--firuzeh); text-decoration: underline; } .ch-imgs { display: grid; gap: 4px; margin-top: var(--s2); border-radius: var(--r-sm); overflow: hidden; } .ch-imgs.n2, .ch-imgs.n4 { grid-template-columns: 1fr 1fr; } .ch-imgs.n3 { grid-template-columns: 1fr 1fr; } .ch-imgs.n3 .ch-img:first-child { grid-column: 1 / -1; } .ch-img { display: block; padding: 0; border: 0; background: var(--ink); cursor: zoom-in; width: 100%; } .ch-img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* تک‌عکس: کامل دیده شود (پوستر/اعلامیه نباید بریده شود) */ .ch-imgs.n1 .ch-img img { height: auto; max-height: 520px; object-fit: contain; } .ch-imgs:not(.n1) .ch-img { aspect-ratio: 1 / 1; } .ch-imgs.n3 .ch-img:first-child { aspect-ratio: 16 / 9; } #btnChMore { width: 100%; } .ch-empty { text-align: center; margin: var(--s3) 0; } .ch-lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: env(safe-area-inset-top, 0px) var(--s3) env(safe-area-inset-bottom, 0px); background: rgba(0, 0, 0, 0.92); animation: fade 0.16s ease-out; cursor: zoom-out; } .ch-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; } .ch-lightbox-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); inset-inline-end: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; } .ch-lightbox-x svg { width: 18px; height: 18px; } /* پین، ری‌اکشن و بازدید — نگاه کن به channelPostHtml. */ .ch-pinned { border-color: var(--firuzeh); } .ch-pin-label { font-size: var(--t-12); font-weight: 700; color: var(--firuzeh); margin-bottom: var(--s2); } .ch-pin-mini { font-size: var(--t-13); flex: 0 0 auto; } .ch-post-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); } .ch-reacts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .ch-react { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink); color: var(--text); font-size: var(--t-12); line-height: 1.4; cursor: pointer; transition: transform 0.06s, background 0.12s; } .ch-react:active { transform: scale(0.94); } .ch-react .e { font-size: var(--t-15); } .ch-react .e.sm { font-size: var(--t-12); margin-inline-start: -3px; } .ch-react .n { font-weight: 700; } .ch-react.mine { border-color: var(--firuzeh); background: color-mix(in srgb, var(--firuzeh) 16%, transparent); } .ch-react.add { color: var(--muted); padding: 3px 8px; } .ch-react.add .e:first-child { font-size: var(--t-12); } .ch-views { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-11); color: var(--muted); padding-bottom: 4px; } .ch-views svg { width: 14px; height: 14px; } .ch-react-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s2); } .ch-react-opt { font-size: calc(26px * var(--fs, 1)); padding: 10px 0; border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--line); cursor: pointer; } .ch-react-opt.mine { border-color: var(--firuzeh); } /* بولد در پیش‌نویس؛ حالتِ انتخابِ پست برای حذف. */ .ch-bold-btn { min-width: 36px; justify-content: center; font-family: serif; } .ch-bold-btn b { font-size: var(--t-15); } #chEditBold { margin-bottom: var(--s1); } .ch-post-body b { font-weight: 800; } .ch-post.selecting { cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color 0.12s, background 0.12s; } .ch-post.selecting .ch-react, .ch-post.selecting .ch-img { pointer-events: none; } .ch-post.selected { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); } .ch-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; } .ch-check.on { background: var(--danger); border-color: var(--danger); } .ch-check svg { width: 14px; height: 14px; } .ch-post { -webkit-touch-callout: none; } .ch-selbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 48; margin: 0 auto; max-width: 560px; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); } .ch-selcount { flex: 1; font-weight: 700; font-size: var(--t-13); min-width: 0; } .ch-selbar .btn.sm { width: auto; margin: 0; } /* فضای خالیِ پایینِ فید تا آخرین پست زیرِ نوار نرود. */ body.ch-selecting #chFeed { padding-bottom: 72px; } /* عددِ پست‌های تازه روی چیپِ «کانال» — همان .badge-count زنگوله. */ .club-nav-btn .ch-unread { top: -2px; inset-inline-end: -2px; unicode-bidi: isolate; } .club-nav { padding-top: 4px; } /* مهرِ تاریخ/ساعتِ بالای پست — ریز و آرام: روز به رنگِ کم‌رنگ، ساعت کمی پررنگ‌تر با ارقامِ هم‌عرض، یک نقطه‌ی طلاییِ ظریف بینشان، و یک خطِ مویی که تا لبه‌ی کارت محو می‌شود. */ .ch-stamp { display: flex; align-items: center; gap: 8px; margin: -2px 0 var(--s2); font-size: var(--t-10); line-height: 1; color: var(--muted); letter-spacing: 0.15px; white-space: nowrap; } .ch-stamp time { display: inline-flex; align-items: center; gap: 6px; } .ch-stamp .d { font-weight: 500; } .ch-stamp .tm { font-weight: 700; color: var(--text); opacity: 0.72; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .ch-stamp .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--firuzeh); opacity: 0.85; flex: 0 0 auto; } .ch-stamp::after { content: ""; flex: 1; height: 1px; min-width: 16px; background: linear-gradient(to right, var(--line), transparent); } /* در RTL خط از سمتِ راست (کنارِ متن) شروع و به چپ محو می‌شود. */ [dir="rtl"] .ch-stamp::after { background: linear-gradient(to left, var(--line), transparent); } .ch-stamp .ed { font-size: var(--t-10); font-style: italic; opacity: 0.8; } .ch-stamp .ed::before { content: "·"; margin-inline-end: 6px; font-style: normal; } .ch-pinned .ch-stamp { margin-top: 0; } /* کارتِ «ادامه یا بازیِ جدید» بالای پنلِ ربات — فقط وقتی بازیِ ربات باز است */ .bot-resume { border: 1px solid var(--line); background: var(--accent-soft); border-radius: var(--r); padding: var(--s3); margin-bottom: var(--s3); } .bot-resume-title { font-weight: 700; margin-bottom: 4px; } .bot-resume-meta { color: var(--muted); font-size: var(--t-13); margin-bottom: var(--s3); unicode-bidi: plaintext; } .bot-resume .row { margin: 0; } /* ================================================================ تخته‌ی تحلیل (الگو: تخته‌ی تحلیلِ دیتابیس) ---------------------------------------------------------------- گوشی/تبلت: #abSide با display:contents باز می‌شود و همه‌چیز به ترتیبِ DOM زیرِ تخته می‌آید: نوار eval → نوارِ موتور → خط‌ها → ناوبری → ابزار → افتتاحیه → فهرستِ حرکت‌ها → ربات/بازگشت → FEN. دسکتاپ: [نوارِ eval عمودی] [تخته — به اندازه‌ی ارتفاعِ صفحه] [ستونِ کناریِ هم‌قد تخته]. قبلاً #abBody زیرِ سقفِ عمومیِ ۵۶۰px (#screenLayer > main > *) گیر می‌کرد و تخته ~۱۶۰px می‌ماند. ================================================================ */ .tone-threat { --arrow-color: var(--danger); } #abSide { display: contents; } #abKbdHint { display: none; } /* نوارِ موتور */ .ab-engine { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s2); direction: ltr; } .ab-engine-gap { flex: 1 1 0; } .ab-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .ab-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ab-switch-ui { width: 34px; height: 20px; border-radius: var(--r-sm); background: var(--line); position: relative; transition: background 0.15s; flex: 0 0 auto; } .ab-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform 0.15s; } .ab-switch input:checked + .ab-switch-ui { background: var(--accent, var(--c-best)); } .ab-switch input:checked + .ab-switch-ui::after { transform: translateX(14px); } .ab-switch input:focus-visible + .ab-switch-ui { outline: 2px solid var(--c-best); outline-offset: 2px; } .ab-switch-lbl { font-size: var(--t-13); font-weight: 700; } .ab-eval-big { display: none; font-variant-numeric: tabular-nums; } .ab-eval-big.threat { color: var(--danger); } .ab-depth { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; } .ab-mpv { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .ab-mpv button { min-width: 27px; height: 30px; font-size: var(--t-13); font-weight: 700; background: var(--panel); border-inline-start: 1px solid var(--line); color: var(--muted); } .ab-mpv button:first-child { border-inline-start: 0; } .ab-mpv button[aria-pressed="true"] { background: var(--accent-soft); color: inherit; } .ab-chip { height: 30px; min-width: 32px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--t-13); font-weight: 700; background: var(--panel); border: 1px solid var(--line); color: var(--muted); } .ab-chip[aria-pressed="true"] { background: var(--accent-soft); color: inherit; border-color: var(--c-best); } #abThreat[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); } .ab-mpv button:disabled, .ab-chip:disabled { opacity: 0.4; cursor: default; } #abArrows { display: inline-flex; align-items: center; justify-content: center; } #abArrows svg { width: 16px; height: 16px; } .ab-engine.off .ab-depth { visibility: hidden; } #abEvalBar.off { opacity: 0.35; } #abLines .exline { cursor: pointer; } #abLines .exline.muted, #abLines .exline.over, #abLines .exline.threat, #abLines .threat-head { cursor: default; } #abLines .exline.threat b { color: var(--danger); } #abLines .threat-head { justify-content: center; color: var(--danger); font-weight: 700; font-size: var(--t-12); } /* ابزارِ کنارِ تخته: چرخاندن، منوی حرکت، چیدمانِ آغاز */ #abBoardControls { display: flex; gap: 6px; align-items: center; } #abBoardControls .btn { margin: 0; flex: 1; } #abNodeMenu { font-size: calc(20px * var(--fs, 1)); font-weight: 800; line-height: 1; } #abNodeMenu:disabled { opacity: 0.4; } /* کاوشگرِ افتتاحیه */ .ab-opening { margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); overflow: hidden; } .ab-op-head { width: 100%; display: flex; align-items: center; gap: var(--s2); padding: 8px 10px; font-size: var(--t-13); text-align: start; background: none; } .ab-op-eco { font-weight: 800; font-size: var(--t-11); color: var(--muted); direction: ltr; padding: 2px 5px; border-radius: var(--r-xs); background: var(--raised); } .ab-op-eco:empty { display: none; } .ab-op-name { flex: 1; unicode-bidi: plaintext; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ab-op-head .chev { transition: transform 0.15s; } .ab-opening.collapsed .ab-op-moves { display: none; } .ab-opening.collapsed .ab-op-head .chev { transform: rotate(-90deg); } /* گوشی: ادامه‌ها یک ردیفِ افقیِ اسکرول‌خور — فهرستِ ۲۰تایی صفحه را هل ندهد */ .ab-op-moves { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .ab-op-move { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; max-width: 220px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--ink); font-size: var(--t-12); min-height: 36px; } .ab-op-move:hover { border-color: var(--muted); } .ab-op-move b { font-size: var(--t-14); } .ab-op-move span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ab-op-none { color: var(--muted); font-size: var(--t-12); padding: 2px 0; } /* درختِ حرکت: خطِ اصلی دوستونه، واریانت‌ها بلوکِ تمام‌عرض زیرِ همان حرکت */ .ab-tree .m.empty { color: var(--muted); cursor: default; } .ab-tree .m { -webkit-touch-callout: none; user-select: none; } .ab-vars { grid-column: 1 / -1; margin: 2px 0 4px; padding: 4px 8px; border-inline-start: 2px solid var(--line); background: var(--ink); border-radius: var(--r-xs); font-size: var(--t-12); line-height: 1.9; color: var(--muted); } .ab-var + .ab-var { border-top: 1px dashed var(--line); } .ab-var .vno { color: var(--muted); margin-inline-end: 2px; font-variant-numeric: tabular-nums; } .ab-var .vm { color: var(--text, inherit); cursor: pointer; padding: 2px 3px; border-radius: var(--r-xs); -webkit-touch-callout: none; user-select: none; } .ab-var .vm:hover { background: var(--raised); } .ab-var .vm.on { background: var(--raised); font-weight: 700; color: inherit; } .ab-sub { color: var(--muted); } .ab-empty { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-12); padding: 4px; } @media (max-width: 439px) { .ab-engine { gap: 4px; } .ab-mpv button { min-width: 25px; } .ab-chip { padding: 0 7px; min-width: 30px; } } /* روی گوشی جای فهرست کمی بیشتر از ۱۵۰px پیش‌فرض — واریانت‌ها جا می‌خواهند */ #abList { max-height: 220px; } @media (min-width: 1100px) { #screenLayer > #anBoardTool { max-width: none; --ab-side: clamp(320px, 27vw, 420px); --ab-gauge: 16px; --ab-gap: var(--s4); /* تخته: هرچه ارتفاعِ صفحه اجازه بدهد (منهای سربرگ و حاشیه‌ی پایین)، ولی نه آن‌قدر که ستونِ کناری از عرضِ صفحه بیرون بزند. */ --ab-board: min( calc(var(--app-100dvh) - 190px), calc(100vw - var(--gutter) * 2 - var(--ab-side) - var(--ab-gauge) - var(--ab-gap) * 2), 860px ); --ab-total: calc(var(--ab-gauge) + var(--ab-board) + var(--ab-side) + var(--ab-gap) * 2); } #screenLayer > #anBoardTool > .puzzle-head { max-width: var(--ab-total); width: 100%; margin-inline: auto; } #screenLayer > #anBoardTool > #abBody { max-width: none; width: var(--ab-total); margin-inline: auto; display: grid; grid-template-columns: var(--ab-gauge) var(--ab-board) var(--ab-side); grid-template-areas: "gauge board side" ". fen fen" ". fenrow fenrow"; column-gap: var(--ab-gap); align-items: start; direction: ltr; /* تخته چپ، پنل راست — مثلِ سایت‌های شطرنجِ مطرح، در هر دو زبان */ } #abBody > #abFenField, #abBody > #abFenRow, #abSide > * { direction: rtl; } html[dir="ltr"] #abBody > #abFenField, html[dir="ltr"] #abBody > #abFenRow, html[dir="ltr"] #abSide > * { direction: ltr; } #abSide > #abNav, #abSide > #abList, #abSide > #abLines, #abSide > #abEngineBar { direction: ltr; } #abBoardHost { grid-area: board; width: var(--ab-board); } #abBoardHost .board { width: 100%; } /* نوارِ eval عمودی کنارِ تخته؛ عددش در نوارِ موتورِ ستونِ کناری */ #abEvalBar { grid-area: gauge; display: block; margin: 0; } #abEvalBar .evalbar-track { width: var(--ab-gauge); height: var(--ab-board); border-radius: var(--r-xs); position: relative; box-shadow: var(--shadow-md); } #abEvalBar .evalbar-track i { position: absolute; inset-inline: 0; bottom: 0; width: 100% !important; height: var(--ab-eval, 50%); transition: height 0.25s ease; will-change: height; } #abEvalBar.flipped .evalbar-track i { bottom: auto; top: 0; } #abEvalNum { display: none; } .ab-eval-big { display: inline-block; font-size: var(--t-20); font-weight: 800; line-height: 1; min-width: 3.4em; } .ab-depth { min-width: 5.4em; } /* ستونِ کناری: فلکس ستونی، دقیقاً هم‌قدِ تخته؛ فقط فهرستِ حرکت‌ها کش می‌آید/اسکرول می‌خورد. اگر صفحه خیلی کوتاه بود کلِ ستون اسکرول می‌شود. */ #abSide { grid-area: side; display: flex; flex-direction: column; height: var(--ab-board); min-height: 0; overflow-y: auto; } #abSide > * { flex: 0 0 auto; } #abEngineBar { order: 1; padding-bottom: var(--s2); border-bottom: 1px solid var(--line); } #abLines { order: 2; margin-bottom: 0; } #abLines { display: flex; flex-direction: column; gap: 4px; } #abLines .exline { padding: 6px 10px; font-size: var(--t-14); } #abLines .exline span { color: inherit; opacity: 0.8; } #abOpening { order: 3; margin-top: var(--s2); } .ab-op-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; max-height: 132px; } .ab-op-move { max-width: none; min-height: 32px; } #abList { order: 4; flex: 1 1 0; min-height: 64px; max-height: none; margin-top: var(--s2); font-size: var(--t-14); align-content: start; grid-template-columns: 40px 1fr 1fr; } #abList .m:not(.empty):hover { background: var(--raised); } #abNotSaved { order: 5; margin: var(--s1) 0 0; font-size: var(--t-12); } #abKbdHint { order: 6; display: block; margin: 2px 0 0; font-size: var(--t-11); text-align: start; } #abNav { order: 7; margin-top: var(--s2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #abNav .btn { margin: 0; padding: 9px 0; border-radius: var(--r-sm); } #abNav .btn:disabled { opacity: 0.4; cursor: default; } #abBoardControls { order: 8; margin-top: 6px; } #abBoardControls .ic { width: 42px; height: 40px; } #abBoardControls .btn { padding: 9px var(--s2); border-radius: var(--r-sm); } #abActionRow { order: 9; margin-top: 6px; display: grid; grid-template-columns: 2fr 1fr; gap: 6px; } #abActionRow .btn { margin: 0; padding: 11px var(--s2); border-radius: var(--r-sm); } #abMsg { order: 10; } #abMsg:not(:empty) { margin-top: var(--s2); } #abFenField { grid-area: fen; margin: var(--s4) 0 0; } #abFenBox { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--t-13); min-height: 0; height: 40px; resize: none; } #abFenRow { grid-area: fenrow; margin-top: var(--s2); display: grid; grid-template-columns: repeat(4, max-content); gap: 6px; justify-content: start; } #abFenRow .btn { margin: 0; width: auto; padding: 8px var(--s4); border-radius: var(--r-sm); } } /* صفحه‌ی کوتاه (لپ‌تاپِ ۷۶۸): راهنمای کیبورد و متنِ «ذخیره نمی‌شود» جا را از فهرستِ حرکت‌ها نگیرند */ @media (min-width: 1100px) and (max-height: 820px) { #abKbdHint, #abNotSaved { display: none; } .ab-op-moves { max-height: 76px; } #abLines .exline { padding: 4px 10px; font-size: var(--t-13); } #abNav .btn, #abBoardControls .btn { padding: 7px 0; } #abBoardControls .ic { height: 36px; } #abActionRow .btn { padding: 9px var(--s2); } } /* دسکتاپ: وقتی ادامه‌ی کتابی نیست، فقط سرتیترِ نام می‌ماند */ @media (min-width: 1100px) { .ab-opening.no-book .ab-op-moves { display: none; } } /* ================================================================ مرورِ بازی — دسکتاپ (الگو: تخته‌ی تحلیل) ---------------------------------------------------------------- گوشی/تبلت: #anTop و #anMain با display:contents باز می‌شوند و نوارِ eval/موتور/ابزارها display:none‌اند — ترتیب و ظاهرِ قبلی دست‌نخورده. دسکتاپ: [نوارِ eval عمودی] [تخته — هرچه ارتفاعِ صفحه اجازه بدهد] [ستونِ کناری هم‌قدِ تخته: نتیجه/نمودار/توضیحِ حرکت/موتور/فهرست/ابزار]. ================================================================ */ #anTop, #anMain { display: contents; } .an-desk { display: none; } /* موتورِ زنده: ردیفِ اول [سوییچ · عدد · عمق]، ردیفِ دوم [تعدادِ خط · فلش · ∞ · تهدید]؛ وقتی خاموش است فقط ردیفِ اول می‌ماند. روی گوشی هم همین‌طور. */ #anLiveBar { margin-top: var(--s2); gap: 6px; } #anLiveBar .ab-engine-gap { flex: 0 0 100%; height: 0; } #anLiveBar.off .ab-mpv, #anLiveBar.off .ab-chip, #anLiveBar.off .ab-engine-gap { display: none; } #anLiveBar .ab-chip:last-child { margin-inline-start: auto; } #anLiveBar .ab-depth { min-width: 5.4em; } .an-live-eval { font-size: var(--t-18); font-weight: 800; line-height: 1; min-width: 3.4em; font-variant-numeric: tabular-nums; direction: ltr; } .an-live-eval.threat { color: var(--danger); } #anLiveBar.off .ab-depth { visibility: hidden; } #anLiveLines { margin-top: var(--s2); } #anLiveLines:empty { display: none; } #anLiveLines .exline { cursor: pointer; } #anLiveLines .exline.muted, #anLiveLines .exline.over, #anLiveLines .exline.threat, #anLiveLines .threat-head { cursor: default; } #anLiveLines .exline.threat b { color: var(--danger); } #anLiveLines .threat-head { justify-content: center; color: var(--danger); font-weight: 700; font-size: var(--t-12); } #anLiveArrows { display: inline-flex; align-items: center; justify-content: center; } #anLiveArrows svg { width: 16px; height: 16px; } #anLiveThreat[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); } /* در «امتحانِ دوباره» موتور جایی ندارد؛ در کاوش همین نوار کار می‌کند */ #anBody.an-retrying .an-live { display: none; } /* نمودارِ بازی: نشانگرها/راهنما/راهنمای شناور فقط روی دسکتاپ */ .graph .gmk, .graph .gguide, .graph .gtip, .graph .gcur { display: none; } #anGraph { touch-action: none; } /* افتتاحیه‌ی هنوز-ناشناخته: جایش رزرو می‌ماند (کم‌رنگ). قبلاً کلاً پنهان بود و با شناخته‌شدنِ افتتاحیه در حرکتِ دوم/سوم، تخته (روی گوشی) و کلِ ستونِ کناری (روی دسکتاپ) ~۴۰–۵۰px پایین می‌پرید. */ .opening.is-empty { opacity: 0.35; } @media (min-width: 1100px) { #screenLayer > #analysis { max-width: none; --an-side: clamp(350px, 28vw, 450px); --an-gauge: 16px; --an-gap: var(--s4); --an-board: min( calc(var(--app-100dvh) - 190px), calc(100vw - var(--gutter) * 2 - var(--an-side) - var(--an-gauge) - var(--an-gap) * 2), 860px ); --an-total: calc(var(--an-gauge) + var(--an-board) + var(--an-side) + var(--an-gap) * 2); } #screenLayer > #analysis > #anBody { max-width: none; width: var(--an-total); margin-inline: auto; height: var(--an-board); display: grid; grid-template-columns: var(--an-gauge) var(--an-board) var(--an-side); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--an-gap); align-items: start; direction: ltr; /* تخته چپ، پنل راست — مثلِ سایت‌های شطرنجِ مطرح، در هر دو زبان */ } /* کارت‌های «در حال تحلیل»/پیام/بازگشت زیرِ همان سقفِ عمومی می‌مانند؛ فقط بدنه عریض می‌شود. */ #anBoardHost { grid-column: 2; grid-row: 1 / span 2; width: var(--an-board); position: relative; } #anBoardHost .board { width: 100%; } /* نوارِ eval عمودی: سطحِ روشن = برتریِ سفید (پایین)، با چرخاندنِ تخته برعکس. عنصرش داخلِ #anBoardHost است؛ این‌جا دقیقاً در ستونِ اولِ شبکه (همان جای قبلی) می‌نشیند. */ .an-gauge { display: block; position: absolute; top: 0; left: calc(-1 * (var(--an-gauge) + var(--an-gap))); } .an-gauge-track { position: relative; width: var(--an-gauge); height: var(--an-board); border-radius: var(--r-xs); overflow: hidden; background: var(--eval-black); box-shadow: var(--shadow-md); } .an-gauge-track i { position: absolute; inset-inline: 0; bottom: 0; display: block; background: var(--eval-white); height: var(--an-eval, 50%); transition: height 0.25s ease; will-change: height; } .an-gauge.flipped .an-gauge-track i { bottom: auto; top: 0; } .an-gauge.off .an-gauge-track { opacity: 0.45; } .an-gauge { display: block; } .an-tools { display: flex; } #anTop { display: block; grid-column: 3; grid-row: 1; direction: rtl; } html[dir="ltr"] #anTop, html[dir="ltr"] #anMain { direction: ltr; } #anTop .acc-row { margin-bottom: var(--s2); } /* جای افتتاحیه همیشه رزرو است — وگرنه با شناخته‌شدنِ افتتاحیه (حرکتِ دوم/سوم) کلِ ستون ~۴۰px پایین می‌پرید. */ #anTop .opening { margin-bottom: var(--s2); padding: 7px var(--s3); } #anTop .rp-head { margin-bottom: var(--s2); } /* نمودارِ کلیِ بازی — همان معنای نوارِ eval، در طولِ زمان: سطحِ روشنِ پایین = برتریِ سفید، تیره = برتریِ سیاه. بلندتر از گوشی، با نشانگرِ اشتباه‌ها، خطِ حرکتِ جاری و راهنمای شناور (حرکت + ارزیابی)؛ کلیک = پرش به همان حرکت. */ #anGraph { position: relative; height: clamp(72px, 9.5vh, 118px); margin-bottom: var(--s2); background: var(--eval-black); border-color: var(--line); cursor: pointer; } #anGraph svg { height: 100%; } #anGraph .area { fill: var(--eval-white); } #anGraph .mid { stroke: rgba(150,150,150,.75); vector-effect: non-scaling-stroke; } #anGraph .cursor { stroke-width: 2; vector-effect: non-scaling-stroke; } #anGraph .mk { display: none; } #anGraph .gmk { display: block; position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--eval-black); pointer-events: none; } /* نقطه‌ی جاریِ نمودار: حلقه‌ی هم‌رنگِ تگِ همان حرکت */ #anGraph .gcur { display: block; position: absolute; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid var(--tc, #fff); pointer-events: none; background: color-mix(in srgb, var(--tc, #fff) 38%, transparent); box-shadow: 0 0 0 1.5px var(--eval-black), 0 0 9px color-mix(in srgb, var(--tc, #fff) 70%, transparent); } #anGraph .gguide { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.55); pointer-events: none; display: none; } #anGraph .gtip { position: absolute; top: 4px; padding: 2px 8px; border-radius: var(--r-sm); font-size: var(--t-12); background: rgba(20,20,20,.88); color: #fff; white-space: nowrap; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; pointer-events: none; display: none; } /* ستونِ کناری: فلکس ستونی هم‌قدِ تخته؛ فقط فهرستِ حرکت‌ها کش می‌آید. اگر محتوا بلندتر بود، کلِ ستون اسکرول می‌شود. */ #anMain { display: flex; flex-direction: column; grid-column: 3; grid-row: 2; min-height: 0; max-height: 100%; overflow-y: auto; direction: rtl; } #anMain > * { flex: 0 0 auto; } #anMove { order: 1; margin-top: var(--s1); height: 74px; padding: 8px var(--s3); } /* دو ردیفِ مرتب: [سوییچ · عدد · عمق] و [تعداد خط · فلش · ∞ · تهدید]. وقتی موتور خاموش است ردیفِ دوم پنهان می‌شود و نوار یک خط می‌ماند. */ #anLiveBar { order: 2; display: flex; gap: 6px; padding-bottom: var(--s2); border-bottom: 1px solid var(--line); margin-bottom: 0; } #anLiveBar .ab-engine-gap { flex: 0 0 100%; height: 0; } #anLiveBar.off .ab-mpv, #anLiveBar.off .ab-chip { display: none; } #anLiveBar.off .ab-engine-gap { display: none; } #anLiveBar .ab-chip:last-child { margin-inline-start: auto; } #anLiveLines { order: 3; display: flex; flex-direction: column; gap: 3px; margin: var(--s2) 0 0; } #anLiveLines:empty { display: none; } #anLiveLines .exline { padding: 4px 10px; font-size: var(--t-13); cursor: pointer; } #anLiveLines .exline:hover { background: var(--raised); } #anLiveLines .exline span { color: inherit; opacity: 0.8; } #anLiveLines .exline.muted, #anLiveLines .exline.over, #anLiveLines .exline.threat-head { cursor: default; } .an-live-eval { font-size: var(--t-20); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; direction: ltr; } .an-live-eval.threat { color: var(--danger); } #anLiveBar.off .ab-depth { visibility: hidden; } #anExplore { order: 4; margin-top: 6px; padding: 5px var(--s3); font-size: var(--t-13); } #anExplorePanel { order: 5; } #btnAnalyseNow { order: 6; margin-top: var(--s2); } #anList { order: 7; flex: 1 1 0; min-height: 84px; max-height: none; margin-top: var(--s2); font-size: var(--t-14); align-content: start; grid-template-columns: 40px 1fr 1fr; } #anList .m:hover { background: var(--raised); } /* دکمه‌های جلو/عقب همیشه دیده شوند: اگر ستونِ کناری (با موتورِ ۴–۵ خطی روی صفحه‌ی کوتاه) اسکرول بخورد، این ردیف ته‌ی ستون می‌چسبد. */ #anMain > .an-controls { order: 8; margin-top: var(--s2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: sticky; bottom: 0; z-index: 2; background: var(--ink); padding: 6px 0 2px; box-shadow: 0 -8px 8px -8px rgba(0,0,0,.18); } #anMain > .an-controls .btn { margin: 0; padding: 7px 0; border-radius: var(--r-sm); } .an-tools { order: 9; display: flex; margin-top: 6px; gap: 6px; flex-wrap: nowrap; } .an-tools .ic { width: 40px; height: 36px; flex: 0 0 40px; } .an-tools .btn { margin: 0; flex: 1 1 0; min-width: 0; width: auto; padding: 7px 4px; border-radius: var(--r-sm); font-size: var(--t-12); white-space: nowrap; } #anShareRow { order: 10; margin-top: 6px; } #anShareRow .btn { margin: 0; padding: 7px var(--s2); border-radius: var(--r-sm); font-size: var(--t-13); } /* خلاصه: شش خانه در یک ردیف (نماد + عدد + برچسبِ کوچک) به‌جای ۳×۲ */ #anSummary { order: 11; margin-top: 6px; grid-template-columns: repeat(6, 1fr); gap: 4px; } #anSummary > div { padding: 4px 2px; font-size: var(--t-10); line-height: 1.3; overflow-wrap: anywhere; } #anSummary b { display: inline; font-size: var(--t-14); } #anSummary .mv-row { gap: 3px; } #anSummary .mv-badge { width: 16px; height: 16px; } #anSummary .mv-badge svg { width: 10px; height: 10px; } #anCriticalPanel { order: 12; } #anRetryPanel { order: 13; } #anKbdHint { order: 14; display: block; margin: var(--s2) 0 0; font-size: var(--t-11); text-align: start; } #anExplorePanel .evalbar { direction: ltr; } } /* ================================================================ سربرگِ جمع‌شونده در تحلیل — گوشی/تبلت ---------------------------------------------------------------- سربرگ (لوگو، پروفایل، تنظیمات، پاکت، زنگوله) تا وقتی کاربر نکشیده بیرونِ صفحه است و بالای تخته فقط یک زبانه‌ی کوچک می‌ماند: خطِ نازکِ افقی + فلشِ رو‌به‌پایین. تپ یا کشیدن به پایین → سربرگ روی محتوا می‌لغزد (جا نمی‌گیرد، تخته نمی‌پرد). با top جابه‌جا می‌شود، نه transform: #bottomNav با position:fixed داخلِ همین header است و transform آن را به قابِ header می‌چسباند. (منطق: anHdrSet در app.js) ================================================================ */ #anHdrHandle { display: none; } @media (max-width: 1099.98px) { body.screen-analysis:has(#anBody:not(.hidden)) { --hh-hdr: calc(52px + env(safe-area-inset-top, 0px)); } body.screen-analysis:has(#anBody:not(.hidden)) header { top: calc(-1 * var(--hh-hdr) - 2px); visibility: hidden; box-shadow: none; transition: top .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s, box-shadow .28s; } body.screen-analysis.an-hdr-open:has(#anBody:not(.hidden)) header { top: 0; visibility: visible; transition-delay: 0s; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .38); } /* جای سربرگ (۵۶px) برای تخته: فقط به‌اندازه‌ی زبانه می‌ماند */ body.screen-analysis:has(#anBody:not(.hidden)) #screenLayer > #analysis { padding-top: calc(env(safe-area-inset-top, 0px) + 19px); } body.screen-analysis:has(#anBody:not(.hidden)) #anHdrHandle { display: block; position: fixed; z-index: 47; inset-inline: 0; top: env(safe-area-inset-top, 0px); height: 19px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: top .28s cubic-bezier(.2, .8, .2, 1); } /* خطِ نازکِ افقی که کناره‌ها کم‌رنگ می‌شود */ #anHdrHandle::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; opacity: 1; transition: opacity .2s; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted) 55%, transparent) 16%, color-mix(in srgb, var(--muted) 55%, transparent) 84%, transparent); } #anHdrHandle .hh-tab { position: absolute; top: 0; inset-inline-start: 50%; width: 38px; height: 15px; margin-inline-start: -19px; display: grid; place-items: center; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--panel); border: 1px solid var(--line); border-top: 0; color: var(--muted); opacity: .85; transition: opacity .15s, color .15s; } #anHdrHandle:hover .hh-tab, #anHdrHandle:focus-visible .hh-tab { opacity: 1; color: var(--text); } #anHdrHandle:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: -2px; } #anHdrHandle .hh-tab svg { width: 11px; height: 11px; display: block; transition: transform .28s cubic-bezier(.2, .8, .2, 1); } /* باز: زبانه به لبه‌ی پایینِ سربرگ می‌چسبد و فلش بالا می‌رود؛ فقط خودِ زبانه لمس‌پذیر است */ body.screen-analysis.an-hdr-open:has(#anBody:not(.hidden)) #anHdrHandle { top: var(--hh-hdr); inset-inline: auto; inset-inline-start: 50%; width: 60px; margin-inline-start: -30px; } body.an-hdr-open #anHdrHandle::before { opacity: 0; } /* حالا خطِ زیرِ سربرگ همین نقش را دارد */ body.an-hdr-open #anHdrHandle .hh-tab svg { transform: rotate(180deg); } } @media (min-width: 768px) and (max-width: 1099.98px) { body.screen-analysis:has(#anBody:not(.hidden)) { --hh-hdr: calc(60px + env(safe-area-inset-top, 0px)); } } @media (prefers-reduced-motion: reduce) { #anHdrHandle, #anHdrHandle .hh-tab svg, body.screen-analysis header { transition: none !important; } } /* صفحه‌ی کوتاه (لپ‌تاپِ ۷۶۸): راهنمای کیبورد و خلاصه جا را از فهرست نگیرند */ @media (min-width: 1100px) and (max-height: 820px) { #anKbdHint { display: none; } #anLiveLines .exline { padding: 4px 10px; font-size: var(--t-13); } #anMain > .an-controls .btn, .an-tools .btn, #anShareRow .btn { padding: 5px 0; } .an-tools .ic { height: 32px; } #anMove { height: 62px; padding: 5px var(--s3); } #anList { min-height: 120px; } #anTop .acc-row { margin-bottom: 4px; } #anTop .acc { padding: 3px; } } /* ================================================================ مرورِ بازی — گوشی/تبلت: یک صفحه، بدونِ اسکرول ---------------------------------------------------------------- مشکلِ قبلی: همه‌چیز زیرِ هم می‌آمد (دقت، افتتاحیه، نمودار، تخته، توضیح، موتور، دکمه‌ها، فهرست، خلاصه…) و با روشن‌کردنِ موتور دکمه‌های جلو/عقب و تخته هرگز با هم در یک صفحه نبودند. حالا (مثلِ اپِ سایت‌های شطرنجِ مطرح، ولی با ارتفاعِ حساب‌شده): [دقتِ سفید · افتتاحیه · دقتِ سیاه] ← تپ = خلاصه‌ی بازی (پاپ‌آپ) [نمودارِ برتری] ← فقط وقتی موتور خاموش است [نوارِ eval افقیِ نازک] [تخته — لبه‌به‌لبه] [نوارِ حرکت‌ها — یک ردیفِ افقی، حرکتِ جاری وسط می‌آید] [توضیحِ حرکت] [موتور + خط‌ها] ← اگر جا کم بود فقط همین ناحیه اسکرول می‌شود [چرخاندن ⏮ ◀ ▶ ⏭ خلاصه] ← همیشه ته‌ی صفحه، هیچ‌وقت اسکرول نمی‌شود اندازه‌ی تخته عددِ دستی نیست: تخته «باقی‌مانده‌ی ارتفاع» را می‌گیرد (flex + aspect-ratio)، پس با موتورِ ۱ تا ۵ خطی، گوشیِ کوتاه یا بلند، و نوارِ آدرسِ مرورگر خودش درست می‌شود؛ هیچ ردیفی هم با هر حرکت نمی‌پرد (ارتفاعِ همه‌ی ردیف‌ها ثابت است). ================================================================ */ .an-mob-only { display: none; } .an-act-row { display: contents; } @media (max-width: 1099.98px) { #screenLayer > #analysis { overflow: hidden; justify-content: flex-start; padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } #screenLayer > #analysis > #anBody:not(.hidden) { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; width: 100%; max-width: 640px; margin-inline: auto; } #screenLayer > #analysis > #anBody > * { flex: 0 0 auto; } /* «بازگشت»ِ ته‌ی صفحه جا می‌گرفت؛ فلشِ سربرگ و بکِ فیزیکی همین کار را می‌کنند */ #screenLayer > #analysis > #anClose { display: none; } #screenLayer > #analysis > #anMsg:empty { display: none; } /* انتظارِ تحلیل وسطِ فضای خالیِ صفحه (کمی بالاتر از مرکزِ هندسی) */ #screenLayer > #analysis > #anProgress:not(.hidden) { margin-top: auto; margin-bottom: auto; padding-bottom: 6vh; } /* ---- ردیفِ بالا: دقتِ دو طرف دو سرِ ردیف، افتتاحیه وسط ---- */ #anTop { order: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; } #anTop .acc-row { display: contents; } /* دقتِ دو طرف و افتتاحیه از بالا برداشته شدند: دقت در خلاصه‌ی بازی (پاپ‌آپ) است و نامِ افتتاحیه در کادرِ توضیحِ حرکت می‌آید. */ #anTop .acc-row, #anTop .opening { display: none !important; } #anTop #accWhite { grid-column: 1; grid-row: 1; } #anTop #accBlack { grid-column: 3; grid-row: 1; } #anTop #anResult { display: none; } #anTop .acc { flex: none; display: flex; align-items: baseline; gap: 5px; line-height: 1.25; padding: 4px 11px; border-radius: var(--r-pill); cursor: pointer; } #anTop .acc b { display: inline; font-size: var(--t-14); } #anTop .acc span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #anTop .opening { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; padding: 2px 4px; justify-content: center; font-size: var(--t-12); background: transparent; border-color: transparent; } #anTop .opening .eco { display: none; } #anTop .rp-head { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 7px 12px; } /* بعد از تحلیل سربرگِ حریف و نمودار هر دو هستند: نمودار یک ردیف پایین‌تر می‌رود و سربرگ کم‌ارتفاع‌تر می‌شود تا صفحه اسکرول نخورد. */ #anTop .rp-head:not(.hidden) ~ #anGraph { grid-row: 2; } #anTop:has(#anGraph:not(.hidden)) .rp-head { padding: 3px 10px; } /* نمودارِ برتری: همان معنای نوارِ eval — سطحِ روشنِ پایین = برتریِ سفید */ #anTop #anGraph { grid-column: 1 / -1; grid-row: 1; position: relative; height: 32px; margin: 0; background: var(--eval-black); cursor: pointer; } #anTop #anGraph svg { height: 100%; } #anTop #anGraph .area { fill: var(--eval-white); } #anTop #anGraph .mid { stroke: rgba(150,150,150,.75); vector-effect: non-scaling-stroke; } #anTop #anGraph .cursor { stroke-width: 2; vector-effect: non-scaling-stroke; } #anTop #anGraph .mk { display: none; } #anTop #anGraph .gmk { display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--eval-black); pointer-events: none; } #anTop #anGraph .gcur { display: block; position: absolute; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid var(--tc, #fff); pointer-events: none; background: color-mix(in srgb, var(--tc, #fff) 38%, transparent); box-shadow: 0 0 0 1.5px var(--eval-black), 0 0 8px color-mix(in srgb, var(--tc, #fff) 70%, transparent); } /* موتور روشن = جا کم است؛ نمودار کنار می‌رود (در خلاصه‌ی بازی هست) */ #anBody.an-eng-on #anTop #anGraph { display: none; } /* ---- تخته + نوارِ eval عمودی کنارش: هرچه از ارتفاع مانده؛ حداکثر تا لبه‌ی صفحه ---- میزبانِ تخته ظرفِ اندازه (container) است: ضلعِ تخته = min(عرضِ ظرف − نوار، ارتفاعِ ظرف − نوارهای بازیکن). نوارِ eval (۸px) با ۲px فاصله به لبه‌ی چپِ تخته می‌چسبد (چپ در هر دو زبان — مرجع انگلیسی) و «تخته + نوار» با هم وسط می‌نشینند؛ پس چه تخته عرض‌محدود باشد چه ارتفاع‌محدود، نوار هم‌قد و چسبیده است. در تحلیل سقفِ ارتفاعِ ظرف = بزرگ‌ترین تخته‌ای که عرض اجازه می‌دهد؛ فضای اضافه‌ی گوشیِ بلند به‌جای جای خالیِ زیرِ تخته به کادرِ توضیحِ حرکت می‌رسد (پایین‌تر: flex-grow روی #anMove). */ #screenLayer > #analysis > #anBody > #anBoardHost { --an-gw: 8px; --an-gg: 2px; /* پهنای نوار و فاصله‌اش تا تخته */ --an-hx: 0px; --an-ht: 0px; /* ارتفاعِ نوارهای بازیکن (مرور): کل و بالای تخته */ --an-bs: min(calc(100cqw - var(--an-gw) - var(--an-gg)), calc(100cqh - var(--an-hx))); order: 3; flex: 1000 1 0; min-height: 180px; margin-top: 5px; position: relative; container-type: size; width: calc(100% + var(--gutter) * 2); max-width: none; align-self: center; aspect-ratio: auto; max-height: calc(min(100vw, 640px + var(--gutter) * 2) - var(--an-gw) - var(--an-gg) + var(--an-hx)); display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 2px; } #anBoardHost > .board, #anBody #anBoardHost > .an-pl { width: var(--an-bs); flex: 0 0 auto; margin-left: calc(var(--an-gw) + var(--an-gg)); /* جای نوار؛ مجموعه وسط می‌ماند */ } #screenLayer > #analysis > #anBody > #anBoardHost > #anGauge { display: block; position: absolute; z-index: 1; left: calc(50% - (var(--an-bs) + var(--an-gw) + var(--an-gg)) / 2); top: calc((100% - var(--an-bs) - var(--an-hx)) / 2 + var(--an-ht)); width: var(--an-gw); height: var(--an-bs); } #anGauge .an-gauge-track { position: relative; width: 100%; height: 100%; border-radius: var(--r-xs); overflow: hidden; background: var(--eval-black); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); } #anGauge .an-gauge-track i { position: absolute; left: 0; right: 0; bottom: 0; display: block; background: var(--eval-white); height: var(--an-eval, 50%); transition: height 0.25s ease; will-change: height; } #anGauge.flipped .an-gauge-track i { bottom: auto; top: 0; } #anGauge.off { opacity: 0.45; } /* ---- ناحیه‌ی پایین: فقط اگر واقعاً جا کم باشد اسکرول می‌شود ---- */ #screenLayer > #analysis > #anBody > #anMain { order: 4; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } #anMain::-webkit-scrollbar { display: none; } #anMain > * { flex: 0 0 auto; } /* نوارِ حرکت‌ها: یک ردیفِ افقی (به‌جای جدولِ ۱۵۰pxی)؛ بالا می‌چسبد. جمع‌وجور: فقط فاصله‌ها کم شده (ارتفاعِ ۳۸ ← ۳۰، padding ِ هر حرکت ۵/۸ ← ۳/۷)؛ اندازه‌ی نوشته همان است. */ #anMain > #anList { order: 1; position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 1px; height: calc(30px * var(--fh, 1)); max-height: none; margin: 0; padding: 2px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } #anList::-webkit-scrollbar { display: none; } #anList.an-tab-hide { display: flex; } #anList > * { flex: 0 0 auto; } #anList > div:empty { display: none; } #anList .no { padding: 0 1px 0 6px; font-size: var(--t-11); } #anList .m { padding: 3px 7px; font-size: var(--t-13); line-height: 1.45; } /* توضیحِ حرکتِ جاری: ارتفاعِ ثابت تا هیچ‌چیز با هر حرکت نپرد */ /* ۳۰پیکسل (= فاصله‌ی خطِ سوم موتور) از کادرِ خطوط گرفته و به این کادر داده شده */ /* کمینه ۱۱۰px؛ روی گوشیِ بلند فضای اضافه‌ای که تخته (عرض‌محدود) نمی‌تواند بگیرد به همین کادر می‌رسد */ #anMain > #anMove { order: 2; margin: 5px 0 0; flex: 1 0 calc(110px * var(--fh, 1)); height: auto; padding: 5px 10px 4px; font-size: var(--t-13); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } #anMove::-webkit-scrollbar { display: none; } #anMove .why { font-size: var(--t-14); line-height: 1.6; } /* جای سوییچِ موتور (گوشه‌ی پایین‌چپ، چون نوارش همیشه LTR است): یک ستونِ شناورِ بی‌پهنا تا پایینِ کادر (.an-sp) و زیرش یک «بریدگی» هم‌اندازه‌ی سوییچ + عدد (.an-notch). متن فقط کنارِ همان بریدگی کوتاه می‌شود، نه در کلِ عرض. موتور روشن: نوار پای کامل است و padding کار می‌کند. */ #anMove .an-sp { display: block; float: left; width: 0; height: calc(100% - 28px * var(--fh, 1)); } #anMove .an-notch { display: block; float: left; clear: left; height: calc(28px * var(--fh, 1)); width: calc(34px + 5px + var(--t-16) * 2.8 + 4px); } #anBody.an-eng-on #anMove :is(.an-sp, .an-notch) { display: none; } #anMove .why.opn { color: var(--text); } #anMove .why.opn b { color: var(--saffron); direction: ltr; display: inline-block; margin-inline-end: 4px; } /* موتور + تعدادِ خط + فلش + ∞ + تهدید همه در یک سطر؛ عمق در گوشی دیده نمی‌شود */ /* سوییچِ موتور + عدد دیگر ردیفِ جدا نیست: روی گوشه‌ی پایینِ کادرِ توضیحِ حرکت می‌نشیند (margin منفی = روی کادر می‌افتد)، پس کادر همان فضا را می‌گیرد و بزرگ‌تر می‌شود. موتور خاموش: فقط سوییچ و عدد، گوشه‌ی پایین؛ بقیه‌ی کادر برای متن. موتور روشن: همان نوار (تعداد خط، فلش، ∞، تهدید) ته‌ی کادر یک «پا» می‌شود و کادر به‌اندازه‌ی آن بلندتر. در حالتِ کاوش (کادر پنهان) نوار مثلِ قبل در جریان است. */ #anMain > #anLiveBar { order: 3; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 2; height: calc(28px * var(--fh, 1)); box-sizing: border-box; margin: calc(-1 * (28px * var(--fh, 1) + 4px)) 0 5px; padding: 0 9px; pointer-events: none; /* جای خالیِ نوار: لمس به متنِ زیرش می‌رسد */ } #anLiveBar > * { pointer-events: auto; } #anBody.an-eng-on #anMain > #anMove { flex-basis: calc(118px * var(--fh, 1)); padding-bottom: calc(28px * var(--fh, 1) + 8px); } #anBody.an-eng-on #anMain > #anLiveBar { pointer-events: auto; margin-inline: 1px; padding-inline: 8px; background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px); } #anMain > #anMove.hidden + #anLiveBar { position: static; z-index: auto; height: auto; margin: 5px 0 0; padding: 0; pointer-events: auto; background: none; border: 0; border-radius: 0; } #anLiveBar::-webkit-scrollbar { display: none; } #anLiveBar > * { flex: 0 0 auto; } #anLiveBar .ab-engine-gap, #anLiveBar .ab-depth, #anLiveBar .ab-switch-lbl { display: none; } #anLiveBar .ab-mpv button { height: calc(28px * var(--fh, 1)); min-width: 24px; } #anLiveBar .ab-chip { height: calc(28px * var(--fh, 1)); min-width: 28px; padding: 0 7px; font-size: var(--t-12); } #anLiveBar .an-live-eval { font-size: var(--t-16); min-width: 2.8em; } #anLiveBar .ab-chip:last-child { margin-inline-start: 0; } /* حداکثر ۲ خط دیده می‌شود؛ خط ۳ تا ۵ با اسکرولِ همین کادر */ #anMain > #anLiveLines { order: 4; margin: 4px 0 0; gap: 3px; flex: 0 0 auto; max-height: calc((var(--an-lines, 2) * 27px + (var(--an-lines, 2) - 1) * 3px) * var(--fh, 1)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } #anLiveLines::-webkit-scrollbar { display: none; } #anLiveLines .exline { padding: 3px 8px; font-size: var(--t-12); min-height: calc(27px * var(--fh, 1)); box-sizing: border-box; flex: 0 0 auto; } #anMain > .an-act-row { order: 5; display: flex; gap: 6px; margin-top: 5px; } #anMain > .an-tour { order: 5; margin-top: 5px; } #anMain.an-touring > .an-act-row { display: none; } #anTour .btn { flex: 0 0 auto; width: 44px; margin: 0; padding: 0; height: calc(34px * var(--fh, 1)); border-radius: var(--r-sm); } #anActRow .btn { flex: 1 1 0; margin: 0; padding: 0; height: calc(34px * var(--fh, 1)); border-radius: var(--r-sm); font-size: var(--t-13); } #anActRow .an-mob-only { display: block; } #anMain > #anExplorePanel { order: 5; } /* در مرورِ گوشی همین کار را دکمه‌ی «خلاصه‌ی بازی/تحلیل بازی» می‌کند */ #anMain > #btnAnalyseNow { display: none !important; } #anMain > #anRetryPanel { order: 6; } /* ---- نوارِ پایین: همیشه دیده می‌شود، ته‌ی صفحه می‌نشیند ---- */ #anMain > .an-controls { order: 20; margin: auto 0 0; padding: 6px 0 2px; display: grid; grid-template-columns: 0.85fr repeat(4, 1fr) 0.85fr; gap: 5px; position: sticky; bottom: 0; z-index: 3; background: var(--ink); } #anMain > .an-controls .btn { margin: 0; padding: 0; height: 44px; border-radius: var(--r-sm); font-size: var(--t-16); display: flex; align-items: center; justify-content: center; } #anMain > .an-controls .an-mob-only { display: flex; } #anMain > .an-controls .an-mob-only svg { width: 20px; height: 20px; } #anMain > .an-controls #anPrev, #anMain > .an-controls #anNext { font-size: var(--t-18); background: var(--panel); } /* جایگزینِ این‌ها در گوشی: خلاصه‌ی بازی (پاپ‌آپ) */ #anTabsMobile, #anShareRow, #anSummary, #anCriticalPanel, #anKbdHint { display: none !important; } } /* گوشیِ خیلی کوتاه: توضیحِ حرکت کمی فشرده‌تر، تا تخته نفس بکشد */ @media (max-width: 1099.98px) and (max-height: 680px) { #anMain > #anMove { flex-basis: calc(76px * var(--fh, 1)); padding: 3px 10px 3px; } #anMove .why { font-size: var(--t-13); line-height: 1.5; } #anMain > .an-controls .btn { height: 40px; } #anMain > #anList { height: calc(28px * var(--fh, 1)); } } /* ================================================================ مرور/تحلیل گوشی — جایگاهِ بازیکن‌ها و کادرِ توضیح ---------------------------------------------------------------- مرور (بدونِ تحلیل): توضیحِ انسانی نداریم، پس کادرِ بزرگِ توضیحِ حرکت حذف می‌شود و فضایش به تخته می‌رسد. به‌جای سربرگِ بالا، هر بازیکن کنارِ تخته‌ی خودش می‌نشیند: پایین = طرفِ پایینِ تخته (خودِ کاربر، چون مهره‌هایش پایین است)، بالا = حریف؛ آواتار + نام + ریتینگِ موقعِ بازی + تغییرِ ریتینگ. جای نوارها در padding ِ میزبانِ تخته است (box-sizing: content-box ← aspect-ratio روی خودِ تخته می‌ماند)، پس تخته مربع و بی‌پرش است. تحلیل: فقط یک سطرِ کوچک بالا — نام و ریتینگِ حریف (بی آواتار، بی ردیفِ خودِ کاربر). دسکتاپ دست‌نخورده: .an-pl همان‌جا display:none است. ================================================================ */ .an-pl { display: none; } .rp-head .rp-duo { display: none; } @media (max-width: 1099.98px) { #anBody { --an-pl-h: calc(34px * var(--fh, 1)); } /* ---- مرور ---- */ #anBody.an-rp #anTop .rp-head { display: none; } #anBody.an-rp #anMain > #anMove { display: none; } /* بدونِ کادرِ توضیح، نوارِ موتور جایی برای چسبیدن ندارد: یک ردیفِ عادی می‌شود */ #anBody.an-rp #anMain > #anLiveBar, #anBody.an-rp.an-eng-on #anMain > #anLiveBar { position: static; z-index: auto; height: auto; margin: 5px 0 0; padding: 0; pointer-events: auto; background: none; border: 0; border-radius: 0; } #anBody.an-rp.an-eng-on #anMain > #anLiveBar { min-height: calc(32px * var(--fh, 1)); padding: 2px 8px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); } /* میزبانِ تخته (ظرفِ اندازه، همان قاعده‌ی بالا): تخته و دو نوار هم‌عرض‌اند و ضلعشان min(عرضِ ظرف − نوارِ eval، ارتفاعِ ظرف − دو نوار) است. پس چه تخته پهنا-محدود باشد (گوشیِ بلند) چه ارتفاع-محدود (گوشیِ کوتاه/نوارِ آدرس)، نوارها چسبیده به تخته‌اند و جای خالیِ اضافه دورِ مجموعه (بالا و پایین) تقسیم می‌شود، نه بینِ تخته و نوارِ پایین (کادرِ توضیحی نیست که بگیردش، پس سقفِ ارتفاع هم ندارد). */ #screenLayer > #analysis > #anBody.an-rp > #anBoardHost { --an-hx: calc(2 * (var(--an-pl-h) + 2px)); --an-ht: calc(var(--an-pl-h) + 2px); min-height: calc(180px + var(--an-hx)); max-height: none; } #anBody.an-rp .an-pl { display: flex; align-items: center; gap: 6px; min-width: 0; box-sizing: border-box; height: var(--an-pl-h); padding-inline: calc(var(--gutter) * 0.75); direction: ltr; /* آواتار همیشه چپ — مثلِ بقیه‌ی چیدمان‌ها، مرجع انگلیسی */ } #anBody.an-rp #anPlTop { order: -1; } #anBody.an-rp #anPlBot { order: 1; } .an-pl .ava { width: calc(26px * var(--fh, 1)); height: calc(26px * var(--fh, 1)); border-radius: var(--r-sm); font-size: calc(11px * var(--fs, 1)); } .an-pl .ava.bot { color: var(--saffron); } .an-pl .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--t-13); unicode-bidi: isolate; } .an-pl .rt { flex: 0 0 auto; color: var(--muted); font-size: var(--t-12); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .an-pl .rd { flex: 0 0 auto; } .an-pl .meta { flex: 1 1 0; min-width: 4.5em; margin-inline-start: auto; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; color: var(--muted); font-size: var(--t-11); } .an-pl[data-uid] .ava, .an-pl[data-uid] .nm { cursor: pointer; -webkit-tap-highlight-color: transparent; } .an-pl[data-uid] .ava:active { transform: scale(.94); } /* ---- تحلیل: یک سطرِ دوطرفه — حریف چپ (آواتار · نام · ریتینگ)، کاربر راست (نام · ریتینگ · آواتار). جهتِ ثابتِ LTR: با عوض‌شدنِ زبان جابه‌جا نمی‌شود. بی تغییرِ ریتینگ و بی متنِ نتیجه. ---- */ #anBody:not(.an-rp) #anTop .rp-head .rp-players, #anBody:not(.an-rp) #anTop .rp-head .meta { display: none; } #anBody:not(.an-rp) #anTop .rp-head { padding: 3px 10px; font-size: var(--t-13); } #anBody:not(.an-rp) #anTop .rp-head .rp-duo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 auto; min-width: 0; direction: ltr; } .rp-duo .duo-p { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; max-width: calc(50% - 4px); } .rp-duo .ava { width: calc(24px * var(--fh, 1)); height: calc(24px * var(--fh, 1)); border-radius: var(--r-sm); font-size: calc(10.5px * var(--fs, 1)); } .rp-duo .ava.bot { color: var(--saffron); } .rp-duo .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; unicode-bidi: isolate; } .rp-duo .duo-p.me .nm { font-weight: 600; } .rp-duo .rt { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .rp-head[data-uid] .duo-p.opp .ava, .rp-head[data-uid] .duo-p.opp .nm { cursor: pointer; } /* ---- تحلیل: سطرِ بازیکن‌ها هم‌ترازِ زبانه‌ی سربرگ ---- قبلاً زیرِ زبانه (۱۹px) یک کادرِ جدا بود. حالا خودِ سطر تا لبه‌ی بالا می‌آید: حریف گوشه‌ی چپ، کاربر گوشه‌ی راست، زبانه‌ی کوچکِ سربرگ وسطِ همان سطر — بی قاب و بی پس‌زمینه، پس سبک‌تر هم دیده می‌شود. خطِ نازکِ بالا می‌ماند، ولی فقط خودِ زبانه لمس‌پذیر است تا لمسِ آواتار/نام سربرگ را پایین نکشد. مرور (.an-rp)، کاوش و بازیِ بی‌سربرگ همان چیدمانِ قبلی را دارند. */ body.screen-analysis:has(#anBody:not(.hidden):not(.an-rp):not(.an-exploring) #anHead:not(.hidden)) #screenLayer > #analysis { padding-top: calc(env(safe-area-inset-top, 0px) + 1px); } body.screen-analysis:not(.an-hdr-open):has(#anBody:not(.hidden):not(.an-rp):not(.an-exploring) #anHead:not(.hidden)) #anHdrHandle { pointer-events: none; } body.screen-analysis:not(.an-hdr-open):has(#anBody:not(.hidden):not(.an-rp):not(.an-exploring) #anHead:not(.hidden)) #anHdrHandle .hh-tab { pointer-events: auto; } #anHdrHandle .hh-tab::after { content: ""; position: absolute; inset: -2px -14px -10px; } /* هدفِ لمسِ بزرگ‌تر از خودِ زبانه */ #anBody:not(.an-rp) #anTop .rp-head { min-height: calc(30px * var(--fh, 1)); box-sizing: border-box; padding: 0 2px; background: transparent; border-color: transparent; } #anBody:not(.an-rp) #anTop .rp-head .rp-duo .duo-p { max-width: calc(50% - 30px); } /* زبانه‌ی ۳۸px ِ وسط */ /* ---- کاوش (گوشی/تبلت): نامِ بازیکن‌ها، آواتار و ریتینگ حذف می‌شود تا تخته بزرگ‌تر شود ---- مرور: دو نوارِ کنارِ تخته (.an-pl) پنهان می‌شود و ضلعِ تخته دیگر ارتفاعِ آن‌ها را کم نمی‌کند. تحلیل: سطرِ بالا (#anTop ← سربرگِ دوطرفه) پنهان می‌شود و تخته همان ارتفاع را می‌گیرد. با خروج از کاوش (کلاسِ an-exploring از #anBody برداشته می‌شود) همه‌چیز سرِ جایش برمی‌گردد. */ #anBody.an-exploring #anTop { display: none; } #anBody.an-rp.an-exploring .an-pl { display: none; } #screenLayer > #analysis > #anBody.an-rp.an-exploring > #anBoardHost { min-height: 180px; row-gap: 0; --an-hx: 0px; --an-ht: 0px; } /* کاوش (هر دو حالت): کادرِ توضیح پنهان است، پس تخته سقف ندارد و وسطِ فضای آزاد می‌نشیند */ #screenLayer > #analysis > #anBody.an-exploring > #anBoardHost { max-height: none; } /* پایینِ تخته در کاوش فشرده می‌شود تا جایی که از نوارها آزاد شده واقعاً به تخته برسد، نه به پنلِ کاوش: دکمه‌ی «خلاصه‌ی بازی» (در کاوش لازم نیست) پنهان و دکمه‌های ↩ / «بازگشت به مرور» هم‌قدِ ردیف‌های دیگر (۳۴px). */ #anBody.an-exploring #anActRow { display: none; } #anBody.an-exploring #anMain > #anExplorePanel { margin-top: 5px; } #anExplorePanel .explore-sofar { min-height: calc(16px * var(--fh, 1)); margin-bottom: 4px; font-size: var(--t-12); } #anExplorePanel .row.tight { margin-top: 0; } #anExplorePanel .row.tight .btn { margin: 0; padding: 0; height: calc(34px * var(--fh, 1)); border-radius: var(--r-sm); font-size: var(--t-13); } } /* ================================================================ خلاصه‌ی بازی — پاپ‌آپ (مثلِ Game Review در سایت‌های شطرنجِ مطرح) ================================================================ */ .an-report { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(18, 16, 14, 0.68); animation: fade 0.16s ease-out; } .an-rp-card { width: 100%; max-width: 480px; max-height: min(92dvh, 780px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); animation: an-rp-up 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); } @keyframes an-rp-up { from { transform: translateY(48px); opacity: 0; } } .an-rp-grab { width: 38px; height: 4px; border-radius: var(--r-xs); background: var(--line); margin: 0 auto 8px; } .an-rp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .an-rp-head h2 { margin: 0; font-size: var(--t-16); } .an-rp-x { width: 34px; height: 34px; font-size: var(--t-16); } .an-rp-sub { color: var(--muted); font-size: var(--t-12); margin: 2px 0 10px; } .an-rp-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; direction: ltr; } .an-rp-p { border-radius: var(--r); padding: 10px 8px 12px; text-align: center; unicode-bidi: plaintext; min-width: 0; } .an-rp-p.w { background: #f1f1ef; color: #1c1a17; } .an-rp-p.b { background: #2b2926; color: #f3f1ed; border: 1px solid #3a3733; } .an-rp-p .nm { font-weight: 800; font-size: var(--t-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .an-rp-p .cur { font-size: var(--t-11); opacity: 0.65; min-height: 14px; } .an-rp-p .pct { margin-top: 6px; line-height: 1; direction: ltr; } .an-rp-p .pct b { font-size: var(--t-30); font-weight: 800; font-variant-numeric: tabular-nums; } .an-rp-p .pct small { font-size: var(--t-14); margin-inline-start: 1px; opacity: 0.7; } .an-rp-p .lbl { font-size: var(--t-11); opacity: 0.7; margin-top: 3px; } .an-rp-p .est { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(128, 128, 128, 0.3); } .an-rp-p .est b { display: block; font-size: var(--t-18); font-variant-numeric: tabular-nums; direction: ltr; } .an-rp-p .est small { font-size: var(--t-10); opacity: 0.7; } .an-rp-note { font-size: var(--t-10); color: var(--muted); margin: 6px 2px 10px; line-height: 1.6; } .an-rp-graph { position: relative; height: 54px; margin-bottom: 10px; overflow: hidden; cursor: pointer; border-radius: var(--r-sm); background: var(--eval-black); direction: ltr; } .an-rp-graph svg { display: block; width: 100%; height: 100%; } .an-rp-graph .area { fill: var(--eval-white); } .an-rp-graph .mid { stroke: rgba(150, 150, 150, 0.75); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .an-rp-graph .gmk { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--eval-black); pointer-events: none; } .an-rp-rows { display: flex; flex-direction: column; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); direction: ltr; } .an-rp-rows .r { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--line); } .an-rp-rows .r:first-child { border-top: 0; } .an-rp-rows .r.zero { opacity: 0.55; } .an-rp-rows .lb { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: var(--t-13); font-weight: 600; unicode-bidi: plaintext; } .an-rp-rows .c { font-size: var(--t-15); font-variant-numeric: tabular-nums; text-align: center; } .an-rp-rows .c.zero { color: var(--muted); font-weight: 600; } .an-rp-rows .mv-badge { position: relative; box-shadow: 0 0 0 1px var(--bc), inset 0 0 0 1px rgba(255,255,255,.2); width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .an-rp-rows .mv-badge svg { width: 14px; height: 14px; display: block; } .an-rp-crit { margin-bottom: 12px; } .an-rp-crit h3 { font-size: var(--t-14); margin: 2px 0 8px; color: var(--muted); } .an-rp-crit .crit-card { margin-bottom: 8px; } .an-rp-start { margin-top: 2px; } .an-rp-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .an-rp-actions .btn { margin: 0; padding: 9px 4px; font-size: var(--t-12); border-radius: var(--r-sm); } .an-rp-auto { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--t-12); color: var(--muted); } @media (min-width: 1100px) { .an-report { align-items: center; } .an-rp-card { border-radius: var(--r-lg); border-bottom: 1px solid var(--line); padding-bottom: var(--s4); } } /* حالتِ بی‌اینترنت (بازی روی گوشی): فقط تنظیمات می‌ماند؛ اعلان/صندوق/پروفایل/ «بیشتر» به سرور نیاز دارند و بی‌اینترنت فقط خطا می‌دادند. */ body.offline-mode #btnNotify, body.offline-mode #btnInbox, body.offline-mode #whoBtn, body.offline-mode #btnAuthOpen { display: none !important; } /* سابقه‌ی انضباطی در پروفایل — فقط برای ناظر/مدیر (static/js/profile.js::paintModeration) */ .pf-mod { border-color: rgba(217, 143, 78, 0.45); } .pf-mod-sum { font-weight: 700; font-size: var(--t-15); } .pf-mod-reports { color: var(--muted); font-size: var(--t-12); margin-top: 4px; } .pf-mod-active { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--t-12); } .pf-mod-pill { padding: 2px 8px; border-radius: var(--r-pill); background: var(--raised); font-size: var(--t-12); } .pf-mod-pill.on { background: rgba(214, 107, 107, 0.16); color: var(--danger); } .pf-mod-list { list-style: none; margin: 12px 0 0; padding: 0; } .pf-mod-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--t-13); } .pf-mod-list li .when { color: var(--faint); font-size: var(--t-12); min-width: 72px; } .pf-mod-list li .state { color: var(--muted); font-size: var(--t-12); } .pf-mod-list li.warn b { color: var(--saffron); } .pf-mod-list li.on b { color: var(--danger); } .pf-mod-list li .reason { flex: 1 1 100%; color: var(--muted); white-space: pre-wrap; } .pf-mod-link { display: inline-block; margin-top: 10px; font-size: var(--t-13); color: var(--firuzeh); } /* منوی صفحه‌ی تحلیل + قرمزیِ خط‌های تهدید */ #anLiveLines .exline.threat { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); } .an-menu-list { display: flex; flex-direction: column; margin: 8px 0 4px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .an-menu-item { padding: 14px var(--s4); text-align: start; font-size: var(--t-14); font-weight: 600; border-top: 1px solid var(--line); background: transparent; color: var(--text); } .an-menu-item:first-child { border-top: 0; } .an-menu-item:active { background: var(--raised); } /* کارت‌های دقت/عملکرد: پایینِ پاپ‌آپ، دقیقاً بالای «شروع مرور»؛ کوچک و جمع‌وجور */ .an-rp-players { gap: 8px; margin-top: 4px; } .an-rp-p { border-radius: var(--r); padding: 8px 8px 9px; } .an-rp-p .nm { font-size: var(--t-12); } .an-rp-p .cur { font-size: var(--t-10); min-height: 13px; } .an-rp-p .pct { margin-top: 3px; } .an-rp-p .pct b { font-size: var(--t-24); } .an-rp-p .pct small { font-size: var(--t-12); } .an-rp-p .lbl { font-size: var(--t-10); margin-top: 2px; } .an-rp-p .est { margin-top: 6px; padding-top: 6px; } .an-rp-p .est b { font-size: var(--t-15); display: inline; } .an-rp-p .est small { display: block; font-size: var(--t-10); margin-top: 1px; } .an-rp-note { margin: 5px 2px 10px; font-size: var(--t-10); } /* ================================================================ خلاصه‌ی بازی — چیدمانِ ردیفی مثلِ Game Review در سایت‌های شطرنجِ مطرح: [برچسب | سفید · نماد · سیاه]؛ بازیکنان و دقت بالا، ریتینگ پایین، «شروع مرور» چسبیده. ================================================================ */ .an-rp-card.rv { padding-bottom: 0; } .rv-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 0; } .rv-lb { font-size: var(--t-13); font-weight: 800; white-space: nowrap; } .rv-vals { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; text-align: center; direction: ltr; } .rv-vals > b { font-size: var(--t-24); font-weight: 800; font-variant-numeric: tabular-nums; } .rv-vals > b.zero { color: var(--muted); opacity: .6; } .rv-hit { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .12s, transform .12s; } .rv-vals > b.rv-hit { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .rv-hit:active { opacity: .6; transform: scale(.94); } /* نوارِ مرورِ دسته (بلاندرها، برلیانت‌ها…) زیرِ دکمه‌های ◀ ▶ */ .an-tour { display: flex; align-items: center; gap: 6px; direction: ltr; margin: 6px 0; } .an-tour.hidden { display: none; } .an-tour .btn { flex: 0 0 auto; width: 44px; margin: 0; } .an-tour-mid { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 8px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); font-size: var(--t-13); white-space: nowrap; overflow: hidden; } /* position:relative لازم است: جلای شیشه‌ای (.mv-badge::after با inset:0) به نزدیک‌ترین والدِ position‌دار می‌چسبد؛ بدونش مهِ نیم‌دایره‌ای روی کلِ صفحه می‌افتاد. */ .an-tour-mid .mv-badge { position: relative; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 1px var(--bc, currentColor), inset 0 0 0 1px rgba(255, 255, 255, .22); } .an-tour-mid .mv-badge svg { width: 14px; height: 14px; display: block; } .an-tour-lb { font-weight: 800; overflow: hidden; text-overflow: ellipsis; direction: rtl; unicode-bidi: plaintext; } .an-tour-n { font-variant-numeric: tabular-nums; font-weight: 800; } .an-tour-mv { color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .rv-mid { display: flex; justify-content: center; } .rv-mv { padding: 5px 0; } .rv-mv .mv-badge { position: relative; box-shadow: 0 0 0 1.5px var(--bc), 0 2px 6px color-mix(in srgb, var(--bc) 50%, transparent), inset 0 0 0 1px rgba(255,255,255,.2); width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .rv-mv .mv-badge svg { width: 19px; height: 19px; display: block; } /* نمره‌ی مرحله‌های بازی: نشانِ برچسب و زیرش دقتِ همان مرحله */ .rv-phase { padding: 5px 0; } .rv-ph { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 28px; justify-content: center; } .rv-ph .mv-badge { position: relative; box-shadow: 0 0 0 1.5px var(--bc), 0 2px 6px color-mix(in srgb, var(--bc) 50%, transparent), inset 0 0 0 1px rgba(255,255,255,.2); width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .rv-ph .mv-badge svg { width: 19px; height: 19px; display: block; } .rv-ph small { font-size: var(--t-10); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; } .rv-ph.na { font-size: var(--t-20); font-weight: 800; color: var(--muted); opacity: .6; } .rv-players .rv-vals { align-items: start; } .rv-p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .rv-ava { width: 62px; height: 62px; border-radius: var(--r-sm); overflow: hidden; background: #ddd; color: #9a9a9a; display: flex; align-items: center; justify-content: center; border: 3px solid transparent; box-sizing: border-box; } .rv-ava.me { border-color: var(--c-best); } .rv-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .rv-ava svg { width: 70%; height: 70%; } .rv-nm { font-size: var(--t-12); font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; unicode-bidi: plaintext; } .rv-boxes { gap: 0; } .rv-boxes .rv-box { margin: 0 6px; } .rv-box { display: block; padding: 3px 4px; line-height: 1.25; border-radius: var(--r-sm); font-size: var(--t-20); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; } .rv-box.w { background: #f1f1ef; color: #1c1a17; } .rv-box.b { background: #403d39; color: #f3f1ed; } .rv-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; } .rv-more { display: none; } .an-rp-card.open .rv-more { display: block; } .rv-chev { display: flex; justify-content: center; width: 100%; padding: 4px 0; color: var(--muted); background: transparent; } .rv-chev svg { width: 24px; height: 24px; transition: transform .2s; } .an-rp-card.open .rv-chev svg { transform: rotate(180deg); } /* جمع‌بندیِ مربی: یک کادرِ آرام بالای گزارش — متن، حرکت‌ها، پیشنهادِ تمرین */ .rv-coach { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); } .rv-coach h3 { margin: 0 0 4px; font-size: var(--t-13); font-weight: 700; color: var(--muted); } .rv-coach p { margin: 0; font-size: var(--t-13); line-height: 1.9; color: var(--text); } .rv-coach-moves, .rv-coach-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .rv-chip { padding: 3px 10px; border: 0; border-radius: var(--r-pill); background: var(--panel); color: var(--text); font: inherit; font-size: var(--t-12); direction: ltr; cursor: pointer; } .rv-chip:hover, .rv-chip:focus-visible { box-shadow: inset 0 0 0 1px var(--line); } /* پیوندِ متنیِ آرام (تمرین، درس، نمونه) — همان زبانِ «نشانم بده»ِ زیرِ توضیحِ حرکت */ .txt-link { padding: 2px 0; border: 0; background: none; color: var(--firuzeh); font: inherit; font-size: var(--t-12); font-weight: 600; cursor: pointer; } .txt-link:hover, .txt-link:focus-visible { text-decoration: underline; } .rv-coach-acts, .ins-rv-acts { column-gap: var(--s3); } .rv-crit { margin: 2px 0 8px; } .rv-crit summary { cursor: pointer; font-size: var(--t-13); font-weight: 700; color: var(--muted); padding: 6px 0; } .rv-crit summary em { font-style: normal; background: var(--raised); border-radius: var(--r-pill); padding: 0 7px; margin-inline-start: 4px; } .rv-crit .crit-card { margin: 6px 0; } .rv-foot { position: sticky; bottom: 0; z-index: 2; margin: 8px calc(var(--s4) * -1) 0; padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); } .rv-foot .btn { margin: 0; } /* اندازه‌ی نوشته در تنظیمات (برای کم‌بینا): نوار + گزینه‌های ثابت */ .fs-block { padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .fs-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .fs-cur { font-weight: 700; font-size: var(--t-13); color: var(--firuzeh); } .fs-ticks { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; direction: ltr; } .fs-tick { flex: 1 1 0; min-width: 0; padding: 7px 0; border-radius: var(--r-sm); font-weight: 700; background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: 12px; } .fs-tick[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); border-color: var(--firuzeh); } .set-about { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); } .set-about summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); cursor: pointer; padding: 6px 0; font-weight: 600; list-style: none; } .set-about summary::-webkit-details-marker { display: none; } .set-about summary::after { content: "▾"; color: var(--muted); } .set-about[open] summary::after { content: "▴"; } .set-ver { margin-inline-start: auto; color: var(--muted); font-size: var(--t-12); font-weight: 400; direction: ltr; } .set-credits { color: var(--muted); font-size: var(--t-11); line-height: 1.9; padding-top: 6px; } .fs-sample { margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--raised); line-height: 1.8; } /* ================================================================ کتابخانه‌ی استادان — فهرست و پروفایل (کلاس‌ها با پیشوندِ m-) ================================================================ */ .m-eras { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 var(--s3); scrollbar-width: none; } .m-eras::-webkit-scrollbar { display: none; } .m-era-btn { flex: 0 0 auto; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 600; font-size: var(--t-12); white-space: nowrap; } .m-era-btn[aria-pressed="true"] { background: var(--firuzeh); border-color: var(--firuzeh); color: var(--on-accent); } .m-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-bottom: var(--s3); } @media (min-width: 760px) { .m-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } .m-card, .m-game { cursor: pointer; transition: border-color 0.12s, transform 0.12s; } .m-card:hover, .m-game:hover, .m-card:focus-visible, .m-game:focus-visible { border-color: var(--firuzeh); } .m-card:active, .m-game:active { transform: scale(0.99); } .m-card { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: 0; } .m-card-body { flex: 1; min-width: 0; } .m-card h2, .m-hero h2 { margin: 0; font-size: var(--t-16); line-height: 1.35; } .m-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--t-12); unicode-bidi: plaintext; } .m-tag { margin: var(--s2) 0 0; color: var(--text); opacity: 0.86; font-size: var(--t-12); line-height: 1.7; } /* آواتار: عکس یا مونوگرامِ هم‌دوره (رنگ از --h که JS می‌دهد) */ .m-av { flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 2px solid var(--firuzeh); background: hsl(var(--h, 40) 32% 30%); color: #fff; font-weight: 800; letter-spacing: 0.02em; direction: ltr; } .m-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .m-av-md { width: 56px; height: 56px; font-size: calc(18px * var(--fs, 1)); } .m-av-lg { width: 92px; height: 92px; font-size: calc(30px * var(--fs, 1)); } .m-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s2); } .m-chip { padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--raised); color: var(--muted); font-size: var(--t-11); font-weight: 600; line-height: 1.5; } .m-chip.gold { background: var(--accent-soft); border-color: var(--firuzeh); color: var(--firuzeh); } .m-chip.soft { background: transparent; } .m-chip.warn { background: transparent; border-color: var(--danger); color: var(--danger); } .m-prog { height: 4px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; margin-top: 6px; } .m-prog i { display: block; height: 100%; background: var(--firuzeh); transition: width 0.4s; } .m-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; } .m-hero-body { min-width: 0; } .m-hero-tag, .m-stats { grid-column: 1 / -1; } .m-hero-tag { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--line); } .m-stats { display: flex; flex-wrap: wrap; gap: var(--s2); } .m-stat { flex: 1 1 64px; padding: var(--s2); border-radius: var(--r-sm); background: var(--raised); text-align: center; display: flex; flex-direction: column; gap: 2px; } .m-stat b { font-size: var(--t-16); } .m-stat span { font-size: var(--t-11); color: var(--muted); } .m-stat.good b { color: var(--good); } .m-stat.bad b { color: var(--danger); } .m-bio p { margin: 0 0 var(--s3); line-height: 2; font-size: var(--t-14); } .m-bio p:last-child { margin-bottom: 0; } .m-timeline { list-style: none; margin: 0; padding: 0; } .m-timeline li { display: flex; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); align-items: baseline; } .m-timeline li:last-child { border-bottom: 0; } .m-year { flex: 0 0 auto; min-width: 52px; color: var(--firuzeh); font-weight: 800; font-size: var(--t-13); } .m-honor { flex: 1; line-height: 1.8; font-size: var(--t-13); } .m-game-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .m-game h3 { margin: 0; font-size: var(--t-14); font-weight: 600; line-height: 1.5; min-width: 0; } .m-game h3 b { font-weight: 800; } .m-dash { color: var(--muted); } .m-res { flex: 0 0 auto; padding: 2px 9px; border-radius: var(--r-sm); font-size: var(--t-11); font-weight: 700; border: 1px solid currentColor; } .m-res.win { color: var(--good); } .m-res.loss { color: var(--danger); } .m-res.draw { color: var(--saffron); } .m-tabs { margin-top: var(--s3); } /* ویرایشِ درجای پروفایل (فقط کارکنان) — آیکونِ مداد و پنجره‌ی ویرایش */ .m-editable { position: relative; } .m-pen { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); color: var(--firuzeh); cursor: pointer; transition: border-color 0.12s, transform 0.12s; } .m-pen:hover, .m-pen:focus-visible { border-color: var(--firuzeh); } .m-pen:active { transform: scale(0.94); } .m-pen svg { width: 15px; height: 15px; } .m-pen-corner { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; } .m-av-wrap { position: relative; flex: 0 0 auto; } .m-pen-sm { position: absolute; bottom: -2px; inset-inline-end: -4px; width: 28px; height: 28px; } .m-hero.m-editable .m-hero-body { padding-inline-end: 30px; } .m-edit-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--s3); background: rgba(18, 16, 14, 0.72); animation: fade 0.16s ease-out; } .m-edit-card { width: 100%; max-width: 560px; max-height: 92dvh; margin: 0; display: flex; flex-direction: column; animation: rise 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); } .m-edit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .m-edit-head h2 { margin: 0; font-size: var(--t-16); } .m-edit-body { overflow-y: auto; padding: var(--s3) 0; flex: 1 1 auto; } .m-edit-body textarea.rtl { direction: rtl; text-align: right; } .m-edit-body textarea.ltr { direction: ltr; text-align: left; } .m-edit-body textarea.tall { min-height: 200px; line-height: 1.9; } .m-edit-honor { display: grid; gap: 6px; grid-template-columns: 90px 1fr auto; margin-bottom: var(--s2); align-items: start; } .m-edit-honor textarea[data-h="fa"] { grid-column: 2; } .m-edit-honor textarea[data-h="en"] { grid-column: 2; } .m-edit-honor input, .m-edit-honor textarea { margin-top: 0; } .m-edit-honor [data-honor-del] { grid-column: 3; grid-row: 1; } .m-edit-avatar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; } .m-edit-err { color: var(--danger); font-size: var(--t-13); margin: 0 0 var(--s2); } .m-edit-foot { display: flex; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); } .m-edit-foot .btn { flex: 1; } /* پرچمِ استادان */ .m-flags { display: inline-flex; gap: 4px; margin-inline-start: 8px; vertical-align: middle; font-size: 0.95em; } .m-flag { display: inline-flex; align-items: center; line-height: 1; } .m-flag-svg { width: 1.45em; height: 0.97em; border-radius: var(--r-xs); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); } /* بزرگ‌نمایی عکس (لایت‌باکس) */ .m-zoomable, .ava.zoomable { cursor: zoom-in; } .zoom-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--s3); background: rgba(12, 11, 10, 0.88); animation: fade 0.16s ease-out; } .zoom-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); max-width: 100%; } .zoom-img { max-width: min(92vw, 640px); max-height: 72dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--r); background: var(--panel); -webkit-touch-callout: none; user-select: none; } .zoom-fig figcaption { color: #fff; font-weight: 700; text-align: center; } .zoom-actions { display: flex; gap: var(--s2); } /* بازدارنده‌ی ملایم (نه تضمین): منوی نگه‌داشتنِ iOS و کشیدنِ عکسِ آواتارها */ .ava img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; } /* کارتِ شاخصِ کتابخانه‌ی بزرگان (خانه + یادگیری) */ .masters-hero { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; cursor: pointer; margin: 0 0 var(--s3); padding: var(--s3); background: linear-gradient(135deg, var(--panel), var(--raised)); border: 1px solid var(--firuzeh); transition: transform 0.12s, border-color 0.12s; } .masters-hero:active { transform: scale(0.99); } .mh-avatars { display: inline-flex; flex: 0 0 auto; padding-inline-start: 14px; min-height: 56px; min-width: 56px; } .mh-avatars .m-av { margin-inline-start: -14px; box-shadow: 0 0 0 2px var(--panel); } .mh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mh-title { font-weight: 800; font-size: var(--t-15); line-height: 1.4; } .mh-sub { color: var(--muted); font-size: var(--t-12); line-height: 1.7; } .home-masters-sec { margin-top: var(--s3); } /* کارتِ شاخص جای کارتِ میان‌برِ قدیمیِ دسکتاپ را می‌گیرد */ #qaMasters { display: none; } /* مونوگرامِ استادِ بدونِ عکس داخلِ دایره‌ی «خلاصه‌ی بازی» */ .rv-mono { display: grid; place-items: center; width: 100%; height: 100%; direction: ltr; font-weight: 800; color: #fff; background: hsl(var(--h, 40) 32% 30%); letter-spacing: 0.02em; } /* آیکونِ نوعِ بازی در ردیفِ بازی‌ها */ .grow .g-speed { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); } .grow .g-speed svg { width: 20px; height: 20px; } /* نمودارِ ریتینگ: تب‌های بازه + نمودارِ زمان‌محور */ .trend-tabs { margin: 0 0 var(--s2); display: flex; width: 100%; } .trend-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 4px; font-size: var(--t-12); } .trend-svg { width: 100%; height: auto; display: block; margin-top: var(--s2); direction: ltr; } /* ویدیو در شیتِ درس */ .vid-slot:not(:empty) { margin-top: var(--s2); } .lesson-vid-pill { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); } .lesson-vid-pill svg { width: 14px; height: 14px; } /* کتابخانه‌ی بزرگان: ردیفِ دکمه‌های ادمین */ .m-admin-row { margin: var(--s3) 0; flex-wrap: wrap; } .m-game .vid-ctl { margin-top: var(--s2); } /* فوتر سایت — مختصر: دو خطِ لینک + یک خطِ حق‌نشر. فاصله‌ی پایین فقط به‌اندازه‌ی نوارِ ناوبری (که روی موبایل ثابت و روی محتواست) تا آخرین خط زیرش نرود؛ بیش‌ازِ آن فضای مرده است. */ .site-footer { max-width: var(--content-w); margin: 0 auto; padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--muted); font-size: var(--t-12); line-height: 1.7; border-top: 1px solid var(--line); } body.has-bottom-nav .site-footer { padding-bottom: calc(62px + 8px * var(--fs, 1) + env(safe-area-inset-bottom, 0px)); } /* دسکتاپ: نوارِ پایین نیست (سایدبار است) */ @media (min-width: 1100px) { body.has-bottom-nav .site-footer { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); } } body.immersive-screen .site-footer { display: none; } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; } /* لینک‌ها در یک خط با نقطه‌ی جداکننده؛ اگر جا نبود می‌شکنند */ .sf-links, .sf-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--s3); } .sf-links > * + *, .sf-contact > * + * { position: relative; } .sf-links > * + *::before, .sf-contact > * + *::before { content: ""; position: absolute; inset-inline-start: calc(var(--s3) / -2 - 1.5px); top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--faint, var(--muted)); opacity: .7; } .sf-app { color: var(--firuzeh) !important; font-weight: 700; } .sf-contact { color: var(--muted); } .sf-copy { margin-top: 2px; font-size: var(--t-11); color: var(--faint, var(--muted)); } /* جست‌وجوی استادان */ .m-search { width: 100%; margin-bottom: var(--s3); padding: 11px 14px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: var(--t-14); font-family: inherit; } .m-search:focus { outline: none; border-color: var(--firuzeh); } /* صفحه‌ی تورنمنت: راهنما و فهرستِ بازی‌ها */ .tour-help { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); } .tour-help summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: var(--t-13); padding: 4px 0; } .tour-help-list { margin: var(--s2) 0 0; padding-inline-start: 1.3em; color: var(--muted); font-size: var(--t-13); line-height: 1.9; } .tour-game-row { cursor: pointer; } .tour-game-row small { color: var(--muted); font-weight: 400; } .tour-res { font-weight: 700; direction: ltr; } /* ================= ویدیوها — کارت‌های تصویری ================= */ .vid-filter { margin-bottom: var(--s3); } .vid-hero-label { margin: var(--s3) 0 var(--s2); font-weight: 700; color: var(--muted); font-size: var(--t-13); } .vid-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } @media (min-width: 720px) { .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vid-card { display: flex; flex-direction: column; gap: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; overflow: hidden; } .vid-card .vid-main { display: flex; flex-direction: column; width: 100%; gap: 0; text-align: start; background: none; border: 0; padding: 0; color: inherit; text-decoration: none; cursor: pointer; } .vid-card .vid-ctl { padding: 0 var(--s2) var(--s2); flex-wrap: wrap; } .vid-card.big { margin-bottom: var(--s3); } .vid-ctl { display: flex; gap: var(--s2); margin-top: var(--s2); } .vid-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--raised), var(--panel)); overflow: hidden; } .vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vt-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); opacity: .6; } .vt-ph svg { width: 36%; max-width: 54px; height: auto; } .vt-play { position: absolute; inset-inline-end: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; padding-inline-start: 2px; } .vt-yt { position: absolute; inset-inline-start: 8px; top: 8px; width: 28px; height: 28px; color: #e53935; background: rgba(255,255,255,.92); border-radius: var(--r-sm); display: grid; place-items: center; } .vt-yt svg { width: 20px; height: 20px; } .vt-dur { position: absolute; inset-inline-start: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; border-radius: var(--r-sm); padding: 1px 6px; font-size: var(--t-11); direction: ltr; } .vid-info { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3) var(--s3); min-width: 0; } .vid-info b { font-size: var(--t-13); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .vid-card.big .vid-info b { font-size: var(--t-16); -webkit-line-clamp: 3; } .vid-meta { font-size: var(--t-12); color: var(--muted); } .vid-desc { font-size: var(--t-12); color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; } /* حالتِ ردیفی (شیتِ ویدیوهای درس) */ .vid-card.row { flex-direction: column; margin-bottom: var(--s2); } .vid-card .vid-main.row { flex-direction: row; align-items: center; } .vid-card .vid-main.row .vid-thumb { width: 120px; flex: 0 0 120px; } /* پخش‌کننده */ .vp-wrap { border-radius: var(--r-sm); overflow: hidden; background: #000; } .vid-player { width: 100%; max-height: 62vh; display: block; background: #000; } .vp-title { margin: var(--s3) 0 var(--s1); font-size: var(--t-16); overflow-wrap: anywhere; } .vid-strip { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x proximity; } .vid-mini { flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 0; color: inherit; text-align: start; cursor: pointer; } .vid-mini .vid-thumb { border-radius: var(--r-sm); } .vid-mini b { font-size: var(--t-12); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* پیش‌نمایشِ تصویرِ شاخص در فرمِ آپلود */ .vu-cover { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s2); } .vu-cover img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--raised); } /* نوارِ ویدیوهای آموزشیِ درس (زیرِ توضیحات). صفحه‌ی درس ارتفاعِ ثابت دارد؛ فقط وقتی درس ویدیو دارد (کلاسِ has-videos) تخته کمی کوچک می‌شود تا نوار جا شود — درس‌های بی‌ویدیو دقیقاً مثلِ قبل‌اند. */ .lesson-videos { margin-top: var(--s2); } .ls-vid-label { font-size: var(--t-12); color: var(--muted); margin-bottom: 4px; font-weight: 700; } .lesson-videos .vid-strip { padding-bottom: 0; } .lesson-videos .vid-mini { flex: 0 0 118px; text-decoration: none; } .lesson-videos .vid-mini b { -webkit-line-clamp: 1; font-size: var(--t-11); } #screenLayer > #lesson.has-videos #lsBoardHost { max-width: min(100%, calc(var(--app-100dvh) - 440px)); } /* ================= تورنمنت — ظاهرِ سایت‌های شطرنجِ مطرح ================= */ .tour-ic { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--raised, var(--panel)); } .tour-ic svg { width: 26px; height: 26px; } .tk-bullet { color: var(--pf-bullet); } .tk-blitz { color: var(--pf-blitz); } .tk-rapid { color: var(--pf-rapid); } .tk-classic { color: var(--pf-classical); } /* فهرست */ .tour-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s1); border-bottom: 1px solid var(--line); cursor: pointer; } .tour-row:last-child { border-bottom: 0; } .tour-row:active { background: var(--accent-soft); } .tour-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tour-row-main b { font-size: var(--t-15); line-height: 1.5; overflow-wrap: anywhere; } .tour-row-sub { font-size: var(--t-12); color: var(--muted); } .tour-row-right { flex: 0 0 auto; max-width: 38%; text-align: end; font-size: var(--t-12); color: var(--muted); } .tour-row-right.live { color: var(--firuzeh); font-weight: 700; } /* تب‌ها و کارت‌ها */ .tour-tabs { display: flex; width: 100%; margin-bottom: var(--s2); } .tour-tabs button { flex: 1 1 0; min-width: 0; padding-block: 11px; } .tour-card { padding-block: 0; } .tour-card .tour-standing-row { padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .tour-card .tour-standing-row:last-child { border-bottom: 0; } .tour-rank { flex: 0 0 34px; text-align: start; font-size: var(--t-14); } .tour-score { font-size: var(--t-18); font-variant-numeric: tabular-nums; } .tour-rt { color: var(--muted); font-weight: 400; } /* بازی‌های تورنمنت: دو خطِ بازیکن + امتیازِ تورنمنتیِ هرکدام */ .tour-game { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); cursor: pointer; } .tour-game:last-child { border-bottom: 0; } .tour-game.live { border-inline-start: 3px solid var(--firuzeh); padding-inline-start: var(--s3); } .tour-game:active { background: var(--accent-soft); } .tg-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: var(--t-15); } .tg-names > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-names small { color: var(--muted); font-weight: 400; } .tg-mid { flex: 0 0 auto; } .tg-scores { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; text-align: end; font-size: var(--t-15); font-variant-numeric: tabular-nums; } /* دکمه‌ی اصلیِ ثابتِ پایین (مثلِ «Join») — بالای نوارِ ناوبری */ #tourDetail { padding-bottom: 104px; } .tour-actionbar { position: fixed; z-index: 35; inset-inline: var(--gutter); margin-inline: auto; max-width: calc(560px - var(--gutter) * 2); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s2); } .tour-actionbar .btn { width: 100%; padding: 15px; font-size: var(--t-16); font-weight: 800; border-radius: var(--r); box-shadow: var(--shadow-md); } .tour-actionbar .btn.ghost { background: var(--panel); border: 1px solid var(--line); } .tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: var(--r-pill); background: var(--firuzeh); color: var(--on-accent); font-size: var(--t-11); line-height: 18px; font-weight: 700; } /* ================= تورنمنت: کارتِ بالا (hero) ================= */ .tour-ic { background: color-mix(in srgb, currentColor 14%, var(--raised, var(--panel))); } .tour-ic.big { width: 54px; height: 54px; border-radius: var(--r-md); } .tour-ic.big svg { width: 30px; height: 30px; } .tour-hero { padding: var(--s4); margin-bottom: var(--s3); border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--firuzeh) 10%, var(--raised, var(--panel))) 0%, var(--raised, var(--panel)) 58%); } .tour-hero-top { display: flex; align-items: center; gap: var(--s3); } .tour-hero-top h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--t-18); line-height: 1.5; overflow-wrap: anywhere; } .tour-q { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--muted); background: none; color: var(--text); font-weight: 800; font-size: 15px; cursor: pointer; } .tour-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); } .tchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--ink, rgba(0,0,0,.25)); border: 1px solid var(--line); font-size: var(--t-12); color: var(--text); } .tchip.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .tchip.status.running { color: var(--firuzeh); border-color: color-mix(in srgb, var(--firuzeh) 45%, var(--line)); } .tchip.status.running i { background: var(--firuzeh); animation: tourPulse 1.6s infinite; } .tchip.status.scheduled { color: var(--saffron); } .tchip.status.scheduled i { background: var(--saffron); } .tchip.status.cancelled i { background: var(--c-blunder, #d9534f); } @keyframes tourPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--firuzeh) 65%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .tour-clock { margin-top: var(--s4); text-align: center; padding: 12px var(--s4) 14px; border-radius: var(--r-md); background: var(--ink, #0d0f12); border: 1px solid var(--line); } .tour-clock small { display: block; color: var(--muted); font-size: var(--t-12); } .tour-clock b { display: block; margin-top: 2px; font-size: var(--t-40); font-weight: 800; line-height: 1.15; letter-spacing: .04em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .tour-clock-bar { display: block; height: 5px; margin-top: 10px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .tour-clock-bar.hidden { display: none; } .tour-clock-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--firuzeh), color-mix(in srgb, var(--firuzeh) 55%, #fff)); transition: width 1s linear; } .tour-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); } .tbtn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; width: auto; padding: 8px 14px; border-radius: var(--r-btn-sm); border: 1px solid var(--line); background: transparent; color: var(--text); font-size: var(--t-13); font-weight: 600; cursor: pointer; } .tbtn.hidden { display: none; } .tbtn-ic svg { width: 16px; height: 16px; display: block; } .tbtn.warn { color: var(--c-blunder, #e5675f); border-color: color-mix(in srgb, var(--c-blunder, #e5675f) 45%, var(--line)); } /* ================= چتِ تورنمنت (هم‌زبانِ چتِ عمومی) ================= */ .tour-chat { padding: var(--s3); } .tc-list { max-height: 52vh; min-height: 180px; margin-top: 0; } .tc-composer { display: flex; align-items: flex-end; gap: 6px; margin-top: var(--s2); padding: 8px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); } .tc-composer.hidden { display: none; } .tc-composer:focus-within { border-color: var(--firuzeh); } .tc-composer textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: var(--t-15); line-height: 1.6; padding: 9px 4px; max-height: 132px; unicode-bidi: plaintext; } .tc-composer .icon-btn { flex: 0 0 auto; width: 42px; height: 42px; } .tc-composer .tc-send { background: var(--firuzeh); color: var(--on-accent); border-radius: 50%; } /* ---------------------------------------------------------------- v0.370 تورنمنت در صفحه‌ی بازی و خانه */ .play-tour-chip { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: var(--s2) auto 0; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--firuzeh); border: 1px solid color-mix(in srgb, var(--firuzeh) 30%, transparent); font-size: 12.5px; font-weight: 600; line-height: 1.3; } .play-tour-chip.hidden { display: none; } .play-tour-chip .ic { display: inline-flex; width: 15px; height: 15px; flex: none; } .play-tour-chip .ic svg { width: 100%; height: 100%; } .play-tour-chip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1100px) { #screenLayer > #play .play-tour-chip { margin: 0; align-self: flex-start; } } .ongoing-tour { display: inline-flex; align-items: center; gap: 6px; color: var(--firuzeh); font-weight: 600; } .ongoing-tour svg { width: 14px; height: 14px; flex: none; } .tour-waiting { align-self: center; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 14px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--muted); font-size: var(--t-12); font-weight: 600; line-height: 1.4; text-align: center; } .tour-waiting.hidden { display: none; } .tour-waiting i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--firuzeh); animation: tourPulse 1.6s infinite; } #tourDetail:has(#tdWaiting:not(.hidden)) { padding-bottom: 148px; } .tour-waiting.paused { color: var(--saffron); border-color: color-mix(in srgb, var(--saffron) 40%, var(--line)); } .tour-waiting.paused i { background: var(--saffron); animation: none; } /* ---------------------------------------------------------------- v0.372 قهرمانِ تورنمنت + برگشتِ خودکار */ .tour-winner { display: flex; align-items: center; gap: 12px; margin: var(--s3) 0 var(--s2); padding: 12px 14px; border-radius: var(--r-md); background: linear-gradient(135deg, color-mix(in srgb, var(--firuzeh) 22%, var(--panel)) 0%, var(--panel) 75%); border: 1px solid color-mix(in srgb, var(--firuzeh) 45%, var(--line)); box-shadow: 0 6px 22px -12px color-mix(in srgb, var(--firuzeh) 70%, transparent); } .tour-winner.hidden { display: none; } .tour-winner .tw-ic { width: 26px; height: 26px; color: var(--firuzeh); flex: none; display: inline-flex; } .tour-winner .tw-ic svg { width: 100%; height: 100%; } .tour-winner .ava { width: 42px; height: 42px; flex: none; box-shadow: 0 0 0 2px var(--firuzeh); border-radius: 50%; } .tour-winner .tw-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .tour-winner .tw-txt small { color: var(--firuzeh); font-weight: 700; font-size: var(--t-11); } .tour-winner .tw-txt b { font-size: var(--t-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tour-winner .tw-txt span { color: var(--muted); font-size: var(--t-12); } .tour-back-btn .cd { font-variant-numeric: tabular-nums; opacity: .75; font-weight: 600; } /* ================================================================ ویرایشگرِ درس (کارکنان) — #lessonEdit، و دکمه‌های مدیریت در هابِ یادگیری ================================================================ */ #lessonEdit .le-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } #lessonEdit .le-head .sec-title { margin: 0; } #lessonEdit .le-lang { margin: 0; min-width: 150px; } #lessonEdit .le-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } /* متنِ درس فارسی یا انگلیسی است: جهت از خودِ متن (مثل متنِ بازخورد) */ #lessonEdit textarea, #lessonEdit input[type=text] { direction: inherit; unicode-bidi: plaintext; text-align: start; } #lessonEdit #leFen, #lessonEdit .m-edit-body textarea { direction: ltr; unicode-bidi: normal; text-align: left; } .le-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 var(--s3); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .le-tabs::-webkit-scrollbar { display: none; } .le-tab { flex: 0 0 auto; padding: 7px 14px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--line); font-weight: 700; color: var(--muted); font-size: var(--t-12); transition: background 0.12s, color 0.12s; } .le-tab[aria-selected="true"] { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } .le-tab.add { border-style: dashed; background: transparent; color: var(--firuzeh); } .le-fenrow { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); } .le-fenrow input { margin-top: 0; flex: 1; min-width: 0; } .le-fenrow .btn { flex: 0 0 auto; } .le-poscard .row.tight { flex-wrap: wrap; } .le-stage { margin-bottom: var(--s3); } .le-nav { display: flex; align-items: center; gap: 4px; margin-top: var(--s2); } .le-nav .sp { flex: 1; } .le-nav .icon-btn { width: 40px; height: 40px; } .le-nav .icon-btn:disabled { opacity: 0.3; cursor: default; } .le-nav #leNavNext svg, .le-nav #leNavLast svg { transform: scaleX(-1); } /* ابزارِ تخته: یک ردیفِ فشرده */ .le-tools { padding: var(--s3); } .le-toolrow { display: flex; align-items: center; gap: var(--s2); } .le-toolgrid { flex: 1; display: flex; gap: 6px; } .le-toolgrid button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--raised); color: var(--muted); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; } .le-toolgrid button svg { width: 18px; height: 18px; flex: 0 0 auto; } .le-toolgrid button[aria-pressed="true"] { background: var(--firuzeh); border-color: var(--firuzeh); color: var(--on-accent); } .le-toolgrid button { padding: 4px 4px; gap: 4px; font-size: var(--t-13); min-width: 0; } .le-toolgrid .le-setup { border-style: dashed; } .le-shapeacts { display: flex; gap: 2px; } .le-shapeacts .icon-btn { width: 36px; height: 36px; } .le-shapeacts .icon-btn:disabled { opacity: 0.3; } .le-swatchrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); } .le-swatches { display: flex; gap: var(--s2); } .le-swatch { --sw: #3b82c4; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--raised); border: 2px solid transparent; cursor: pointer; } .le-swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); } .le-swatch[data-tone="good"] { --sw: #15a12a; } .le-swatch[data-tone="bad"] { --sw: #ef4444; } .le-swatch[data-tone="info"] { --sw: #3b82c4; } .le-swatch[data-tone="warn"] { --sw: #e0a409; } .le-swatch[aria-pressed="true"] { border-color: var(--sw); } .le-shapes-row { display: flex; align-items: center; gap: var(--s2); min-height: 36px; } .le-shapes-status { flex: 1; font-size: var(--t-12); color: var(--muted); } .le-movescard { padding-block: var(--s3); } .le-line { display: flex; flex-wrap: wrap; gap: 6px; } .le-chip { position: relative; padding: 6px 10px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); font-weight: 700; direction: ltr; font-size: var(--t-13); font-variant-numeric: tabular-nums; } .le-chip.main { border-color: var(--firuzeh); } .le-chip.cur { background: var(--firuzeh); color: var(--on-accent); border-color: transparent; } .le-chip.ahead { opacity: 0.7; } .le-chip .d { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; } .le-chip .d.note { background: var(--firuzeh); } .le-chip.cur .d.note { background: var(--on-accent); } .le-chip .d.shape { background: #e0a409; right: 10px; } .le-branch { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s2); } .le-branch > span { flex: 0 0 auto; padding-top: 7px; font-size: var(--t-12); color: var(--muted); } .le-branch > div { display: flex; flex-wrap: wrap; gap: 6px; } .le-endwarn { margin: var(--s2) 0 0; font-size: var(--t-12); color: var(--danger); } .le-movescard .row.tight { margin-top: var(--s3); flex-wrap: wrap; } .le-notefor { direction: ltr; unicode-bidi: isolate; color: var(--text); } .le-actions { margin-top: var(--s4); } .le-actions .row { margin-top: var(--s2); } .le-actions .row .btn { flex: 1; margin-top: 0; } /* هابِ یادگیری: دکمه‌های مدیریتِ درس (فقط کارکنان) */ .le-hub { display: flex; gap: var(--s2); margin-bottom: var(--s3); } .lesson-card-wrap { position: relative; } .lesson-card-wrap .ln-lesson { padding-inline-end: 52px; } .lesson-card-edit { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--muted); border: 1px solid var(--line); } .lesson-card-edit:hover { color: var(--text); border-color: var(--muted); } .lesson-card-edit svg { width: 16px; height: 16px; } .lesson-edited-pill { padding: 2px 8px; border-radius: var(--r-pill); background: var(--raised); font-weight: 700; color: var(--muted); } .lesson-draft-pill { padding: 2px 8px; border-radius: var(--r-pill); background: var(--raised); font-weight: 700; color: var(--saffron); } /* بخش‌های تاشوی ویرایشگر درس — تخته همیشه بالاست، تنظیمات زیرش */ .le-fold { padding: 0; overflow: hidden; } .le-fold > summary { list-style: none; cursor: pointer; padding: var(--s3) var(--s4); font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; min-height: 48px; -webkit-tap-highlight-color: transparent; } .le-fold > summary::-webkit-details-marker { display: none; } .le-fold > summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .5; transition: transform .2s; margin-inline-start: var(--s3); } .le-fold[open] > summary::after { transform: rotate(-135deg); } .le-fold[open] > summary { border-bottom: 1px solid var(--line, rgba(128,128,128,.2)); } .le-fold > div { padding: var(--s4); } @media (prefers-reduced-motion: reduce) { .le-fold > summary::after { transition: none; } } .le-titlefield { margin-bottom: var(--s3); } /* اسم/آواتارِ بازیکن در بازی و تماشا قابلِ‌لمس است (پروفایل) */ .pl[data-uid] .ava, .pl[data-uid] .nm { cursor: pointer; -webkit-tap-highlight-color: transparent; } .pl[data-uid] .nm:hover { text-decoration: underline; text-underline-offset: 3px; } .pl[data-uid] .ava:active { transform: scale(.94); } /* نوارِ «ساختِ درس» برای کارکنان — بالای هابِ یادگیری، با لبه‌ی طلاییِ نرم تا از ردیف‌های عادی جدا دیده شود */ .le-staffbar { margin-bottom: var(--s3); } .le-staffbar .nav-row { border: 1px dashed var(--accent, var(--saffron)); background: var(--accent-soft, transparent); } /* ویرایشِ درسِ فایلی/«به‌زودی»: پیامِ منبع و کارتِ «چرا؟»/اشتباه‌های رایج */ .le-srcnote { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--raised); border-inline-start: 3px solid var(--saffron); line-height: 1.7; } .le-extra { margin-top: var(--s3); } .le-extra-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); } .le-extra-field { margin-top: var(--s2); } /* قالب‌بندیِ متنِ توضیح (rich_text.py): هم در درسِ شاگرد، هم در پیش‌نمایشِ ویرایشگر. رنگ‌ها از متغیرهای تم می‌آیند تا در حالتِ روشن/تیره خوانا بمانند. */ .tx-good { color: var(--good); } .tx-bad { color: var(--danger); } .tx-info { color: var(--live); } .tx-warn { color: var(--saffron); } .tx { font-weight: 700; } mark.tx-hl { background: rgba(224, 164, 9, 0.30); color: inherit; border-radius: var(--r-xs); padding: 1px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* نوارِ قالب‌بندی: یک ردیفِ فشرده از دکمه‌های دم‌دست */ .le-rt { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s3); } .le-rt-btn { flex: 1 1 0; max-width: 46px; min-width: 0; height: 42px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--raised); color: var(--text); font: inherit; font-size: var(--t-16); cursor: pointer; } .le-rt-btn:active:not(:disabled) { transform: translateY(1px); } .le-rt-btn:disabled { opacity: 0.4; cursor: default; } .le-rt-btn[aria-pressed="true"] { border-color: var(--firuzeh); background: color-mix(in srgb, var(--firuzeh) 22%, var(--raised)); } .le-rt-i i { font-style: italic; font-family: serif; font-weight: 600; } .le-rt-hl mark { font-weight: 700; } .le-rt-color i { width: 18px; height: 18px; border-radius: 50%; display: block; } .le-rt-color.tx-good i { background: var(--good); } .le-rt-color.tx-bad i { background: var(--danger); } .le-rt-color.tx-info i { background: var(--live); } .le-rt-color.tx-warn i { background: var(--saffron); } .le-rt-clear { font-size: var(--t-14); color: var(--muted); } .le-rt-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 2px; background: var(--line); } .le-preview { margin-top: var(--s3); } .le-preview-cap { padding: 6px var(--s4) 0; font-size: var(--t-11); color: var(--muted); } .le-extra-dev { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--line); } .le-ok { color: var(--good); font-style: normal; font-weight: 800; } #leCategory:disabled, #leLevel:disabled { opacity: .6; } /* ================= نظرسنجیِ کانال ================= */ /* فرمِ ساخت */ .ch-composer-bar #btnChPoll { display: inline-flex; align-items: center; gap: 6px; } .ch-composer-bar #btnChPoll[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--firuzeh); color: var(--firuzeh); } .ch-pollbox { margin-top: var(--s2); padding: var(--s3); border-radius: var(--r-sm); background: var(--ink); border: 1px solid var(--line); } .ch-poll-hint { margin: 0 0 var(--s2); font-size: var(--t-12); color: var(--muted); line-height: 1.6; } .ch-poll-rows { display: flex; flex-direction: column; gap: 6px; } .ch-poll-row { display: flex; align-items: center; gap: 6px; } .ch-poll-row input[type="text"] { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: var(--t-13); unicode-bidi: plaintext; text-align: start; } .ch-poll-row input[type="text"]:focus { outline: none; border-color: var(--firuzeh); } .ch-poll-row .icon-btn { flex: 0 0 auto; width: 32px; height: 32px; opacity: 0.7; } .ch-poll-row .icon-btn svg { width: 14px; height: 14px; } .ch-poll-row .icon-btn:disabled { visibility: hidden; } .ch-poll-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; } .ch-poll-tools .btn.sm { width: auto; margin: 0; } .ch-poll-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); cursor: pointer; } /* نمایش در پست: هر گزینه یک دکمه‌ی تمام‌عرض با نوارِ درصدِ پشتش */ .ch-poll { margin-top: var(--s3); display: flex; flex-direction: column; gap: 6px; } .ch-poll-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm); overflow: hidden; text-align: start; background: var(--ink); border: 1px solid var(--line); color: var(--text); font-size: var(--t-13); line-height: 1.5; transition: border-color 0.12s, transform 0.06s; } .ch-poll-opt:not(:disabled):active { transform: scale(0.99); } .ch-poll-opt:disabled { cursor: default; } .ch-poll-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--pct, 0%); background: var(--accent-soft); transition: width 0.35s ease; pointer-events: none; } .ch-poll-opt.mine { border-color: var(--firuzeh); } .ch-poll-opt.mine .ch-poll-fill { background: color-mix(in srgb, var(--firuzeh) 22%, transparent); } .ch-poll-mark { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--faint); border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); } .ch-poll.multi .ch-poll-mark { border-radius: var(--r-xs); } .ch-poll-opt.mine .ch-poll-mark { background: var(--firuzeh); border-color: var(--firuzeh); } .ch-poll-mark svg { width: 11px; height: 11px; } .ch-poll-txt { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; } .ch-poll-pct { position: relative; flex: 0 0 auto; font-weight: 700; font-size: var(--t-12); color: var(--muted); unicode-bidi: isolate; } .ch-poll-opt.mine .ch-poll-pct { color: var(--firuzeh); } .ch-poll-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: var(--t-11); color: var(--muted); } .ch-poll-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); } .ch-poll-closed { color: var(--saffron); font-weight: 700; } .ch-post.selecting .ch-poll { pointer-events: none; } .ch-post-body.ch-q { font-weight: 700; font-size: var(--t-14); } /* «خبر دادن به اعضا» در خطِ خودش، تا «انتشار» کنارِ عکس/نظرسنجی بماند و شکسته نشود */ .ch-composer-bar .ch-notify { order: 5; flex: 1 0 100%; margin: 0; } /* ================= بازطراحیِ صفحه‌ی کلاب (v0.396) ================= هدف: کم‌شلوغ و خوانا — یک سربرگِ وسط‌چین، چهار کاشیِ همیشه‌دیدنی، یک نوارِ آمارِ فشرده، و گفت‌وگو/فعالیت/اعضا پشتِ تب (هر بار یکی). */ .club-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s5) var(--s4) var(--s4); } .club-hero .ava.lg { width: 84px; height: 84px; border-radius: var(--r-xl); font-size: calc(32px * var(--fs, 1)); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--line); } .club-hero h2 { margin: var(--s3) 0 4px; font-size: var(--t-20); line-height: 1.35; overflow-wrap: anywhere; } .club-hero-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: var(--t-13); color: var(--muted); } .club-hero-meta .tag { margin: 0; color: var(--muted); } .club-hero-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); } .club-desc { margin: var(--s3) 0 0; max-width: 44ch; font-size: var(--t-14); line-height: 1.85; color: var(--muted); overflow-wrap: anywhere; } .club-hero .club-pinned { align-self: stretch; position: relative; margin: var(--s4) 0 0; text-align: start; padding: 10px 12px; padding-inline-start: 36px; border: 0; border-inline-start: 3px solid var(--firuzeh); border-radius: var(--r-sm); background: var(--accent-soft); line-height: 1.8; overflow-wrap: anywhere; } .club-hero .club-pinned::before { content: "📌"; position: absolute; inset-inline-start: 11px; top: 10px; font-size: 14px; } .club-hero #cdJoinRow { align-self: stretch; margin-top: var(--s4); } .club-hero .more-panel { align-self: stretch; width: 100%; margin-top: var(--s3); } .club-hero .club-menu-btn { position: absolute; top: var(--s2); inset-inline-end: var(--s2); } .club-hero #cdMsg { align-self: stretch; } /* چهار مقصد */ .club-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin: 0; padding: 0; overflow: visible; } .club-nav-btn { flex: initial; position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--r); white-space: normal; text-align: start; background: var(--panel); border: 1px solid var(--line); font-size: var(--t-14); font-weight: 700; } .club-nav-btn .ic-wrap { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r); display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); } .club-nav-btn .ic-wrap svg { width: 19px; height: 19px; } .club-nav-btn .lbl { min-width: 0; overflow-wrap: anywhere; } .club-nav-btn .ch-unread { top: 8px; inset-inline-end: 8px; } /* نوارِ آمار */ .club-stats-card { padding: var(--s3) var(--s4); } /* آمار و افتخارات: پیش‌فرض بسته — عنوان + خلاصه‌ی یک‌خطی + فلش؛ باز می‌شود با لمس. بازشدن نرم است: پنل کمی می‌لغزد و بالا و کاشی‌ها یکی‌یکی پدیدار می‌شوند. */ .club-stats-toggle { justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 0; background: none; border: none; padding: 0; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; } .club-stats-title { flex: 0 0 auto; font-weight: 700; font-size: var(--t-14); color: var(--text); } .club-stats-brief { flex: 1; min-width: 0; text-align: start; font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .club-stats-panel { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); } .club-stats-panel:not(.hidden) { animation: clubStatsIn .3s cubic-bezier(.2, .8, .2, 1) both; } .club-stats-panel:not(.hidden) .club-stat, .club-stats-panel:not(.hidden) .club-badges .trophy { animation: clubStatsPop .36s cubic-bezier(.2, .8, .2, 1) both; } .club-stats-panel:not(.hidden) .club-stat:nth-child(1) { animation-delay: 40ms; } .club-stats-panel:not(.hidden) .club-stat:nth-child(2) { animation-delay: 90ms; } .club-stats-panel:not(.hidden) .club-stat:nth-child(3) { animation-delay: 140ms; } .club-stats-panel:not(.hidden) .club-stat:nth-child(4) { animation-delay: 190ms; } .club-stats-panel:not(.hidden) .club-badges .trophy { animation-delay: calc(220ms + var(--i, 0) * 40ms); } @keyframes clubStatsIn { from { opacity: 0; transform: translateY(-8px); } } @keyframes clubStatsPop { from { opacity: 0; transform: translateY(6px) scale(.96); } } @media (prefers-reduced-motion: reduce) { .club-stats-panel:not(.hidden), .club-stats-panel:not(.hidden) .club-stat, .club-stats-panel:not(.hidden) .club-badges .trophy { animation: none; } } /* اعضای کلاب: ردیفِ لمس‌پذیر با فلشِ کوچک → منوی «پروفایل / دعوت به بازی» */ .member-row { cursor: pointer; border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent; padding-inline: var(--s2); margin-inline: calc(var(--s2) * -1); transition: background .12s; } /* آواتارِ اعضا بزرگ‌تر از ردیف‌های معمولی (۲۶px): ۴۸px با گوشه‌ی گرد، تا عکس‌ها خوانا و چشم‌نواز باشند */ .member-row { gap: var(--s3); padding-block: 10px; } .member-row .ava.md { width: calc(48px * var(--fh, 1)); height: calc(48px * var(--fh, 1)); border-radius: var(--r); font-size: calc(19px * var(--fs, 1)); box-shadow: 0 0 0 1px var(--line); } .member-row .fr-name { font-size: var(--t-15); unicode-bidi: isolate; text-align: start; } /* اسمِ لاتین هم کنارِ آواتار بماند */ .member-row .fr-meta { font-size: var(--t-12); font-variant-numeric: tabular-nums; margin-top: 1px; } .member-row:hover, .member-row:focus-visible { background: var(--ink); outline: none; } .member-row:active { background: var(--raised); } .member-row .mr-chev { flex: 0 0 auto; width: 7px; height: 7px; margin-inline-start: -2px; border-inline-end: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); } html[dir="rtl"] .member-row .mr-chev { transform: rotate(45deg); } /* نشانه‌ی «›» رو به انتها (چپ در RTL) */ .mem-sheet-head { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; margin-bottom: var(--s4); } .mem-sheet-head h2 { margin: 0; max-width: 100%; font-size: var(--t-18); overflow-wrap: anywhere; unicode-bidi: plaintext; } .mem-sheet-sub { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--t-13); font-variant-numeric: tabular-nums; } .mem-sheet-actions, .mem-sheet-manage { display: grid; gap: var(--s2); } .mem-sheet-actions .btn, .mem-sheet-manage .btn { margin: 0; } .mem-sheet-manage { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); } .mem-sheet-lbl { text-align: center; font-size: var(--t-11); color: var(--muted); } .club-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); } .club-stats-strip > .hint-text { grid-column: 1 / -1; text-align: center; margin: 0; } .club-stat { position: relative; text-align: center; padding: 2px 4px; min-width: 0; } .club-stat + .club-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 14%; bottom: 14%; width: 1px; background: var(--line); } .club-stat .v { font-size: var(--t-18); font-weight: 800; line-height: 1.5; } .club-stat .l { font-size: var(--t-11); color: var(--muted); line-height: 1.5; margin-top: 2px; } /* تب‌های گفت‌وگو/فعالیت/اعضا */ .club-panes { margin: 0 0 var(--s2); } /* فهرستِ کلاب‌ها: آرام‌تر */ .club-row { cursor: pointer; } .club-lock { margin-inline-start: 6px; font-size: var(--t-11); opacity: 0.7; } .club-role { flex: 0 0 auto; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-11); font-weight: 700; color: var(--firuzeh); background: var(--accent-soft); } .club-role.pending { color: var(--saffron); background: color-mix(in srgb, var(--saffron) 14%, transparent); } .club-role.plain { color: var(--muted); background: var(--ink); font-weight: 600; } .club-chev { flex: 0 0 auto; width: 14px; text-align: center; color: var(--faint); font-size: 18px; line-height: 1; } .club-chev::before { content: "‹"; } html[dir="ltr"] .club-chev::before { content: "›"; } /* میان‌بُرِ کانال: آخرِ ردیف (inline-end)؛ فارسی ← چپ، انگلیسی ← راست */ .club-ch-btn { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0; margin-inline-start: var(--s1); border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--firuzeh); cursor: pointer; } .club-ch-btn svg { width: 18px; height: 18px; } .club-ch-btn:active { transform: scale(0.94); } /* ================= صفحه‌ی «اجتماع»: کارت‌های اصلی ================= تورنمنت و کلاب پیش‌تر دو ردیفِ هم‌وزنِ یک فهرستِ ساده بودند (و زیرنویس‌شان بریده می‌شد). حالا دو کارتِ طلایی‌لهجه با وضعیتِ زنده‌اند؛ تماشا و فعالیتِ دوستان ردیفِ ثانویه. */ .hub-cards { display: grid; gap: var(--s3); margin-bottom: var(--s4); } .hub-card { position: relative; display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s4); text-align: start; overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--firuzeh) 16%, transparent), transparent 58%), var(--panel); border: 1px solid color-mix(in srgb, var(--firuzeh) 30%, var(--line)); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06)); transition: transform 0.08s ease, border-color 0.15s, box-shadow 0.15s; } .hub-card:hover { border-color: var(--firuzeh); box-shadow: var(--shadow-md); } .hub-card:active { transform: scale(0.985); } .hub-ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(145deg, var(--firuzeh-dim), var(--firuzeh)); color: var(--on-accent); box-shadow: 0 6px 14px color-mix(in srgb, var(--firuzeh) 32%, transparent), 0 1px 0 rgba(255, 255, 255, 0.35) inset; } .hub-ic svg { width: 26px; height: 26px; } .hub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .hub-title { font-size: var(--t-16); font-weight: 800; line-height: 1.4; } .hub-status { display: flex; align-items: center; gap: 7px; font-size: var(--t-13); color: var(--muted); line-height: 1.6; } .hub-status.is-live { color: var(--text); font-weight: 600; } .hub-extra { font-size: var(--t-12); color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); animation: hubPulse 1.8s ease-out infinite; } @keyframes hubPulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .hub-dot { animation: none; } } .hub-go { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--muted); border: 1px solid var(--line); } .hub-card:hover .hub-go { color: var(--firuzeh); border-color: var(--firuzeh); } .hub-avas { display: flex; align-items: center; margin-top: 4px; } .hub-avas .ava.xs { width: 24px; height: 24px; border-radius: var(--r-sm); font-size: 11px; box-shadow: 0 0 0 2px var(--panel); } .hub-avas .ava.xs + .ava.xs { margin-inline-start: -6px; } .hub-more-n { margin-inline-start: 6px; font-size: var(--t-11); color: var(--muted); font-weight: 700; } .hub-live-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 700; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); } .hub-live-pill.hidden { display: none; } .hub-more .nr-sub { white-space: normal; } /* ================================================================ صفحه‌ی پازل — سلسله‌مراتبِ حالت‌ها (v0.399) قبلاً چهار کارتِ هم‌اندازه + یک کارتِ غول‌آسا بود و توضیحِ هر حالت فقط با لمس باز می‌شد. حالا وزنِ بصری با اهمیتِ حالت‌ها می‌خواند: پازلِ روزانه (هیرو) > تاکتیک (کارتِ شاخص) > Battle (کارتِ تیره‌ی کوتاه) > Rush/Storm (کاشیِ کوچک) > مرورِ تم‌ها (ردیفِ سبک). ================================================================ */ .pz-eyebrow { display: flex; align-items: center; gap: 10px; margin: 26px 2px 10px; font-size: var(--t-12); font-weight: 700; letter-spacing: 0.02em; color: var(--muted); } .pz-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); } .pz-stack { display: grid; gap: var(--s3); } .pz-stack > .card, .pz-pair > .card, .pz-feature.card { margin: 0; } /* کارتِ شاخص: متن + عکس، کنارِ هم؛ عکس بدونِ کراپِ سنگین (نسبتِ ستون ≈ نسبتِ خودِ عکس). */ .pz-feature.card { display: flex; align-items: stretch; padding: 0; overflow: hidden; min-height: 176px; } .pz-feature-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--s4); } .pz-feature-media { flex: 0 0 46%; position: relative; overflow: hidden; } #tacticsCard .pz-feature-media img { object-position: 72% 50%; } /* اسب و پیاده هر دو توی کادر بمانند */ #battleCard .pz-feature-media img { object-position: 58% 50%; } .pz-feature-media img, .pz-tile-media img, .pz-row-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pz-title { margin: 0; font-size: var(--t-16); font-weight: 800; line-height: 1.4; } .pz-sub { margin: 3px 0 0; font-size: var(--t-12); line-height: 1.7; color: var(--muted); } .pz-feature-foot { margin-top: auto; padding-top: var(--s3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .pz-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--t-11); font-weight: 700; line-height: 1.4; background: var(--accent-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--firuzeh) 28%, transparent); } .pz-chip.hidden { display: none; } /* Battle: رقابت — سطحِ تیره‌ی سبزِ برند (در هر دو تم یکی)، تا از بقیه جدا خوانده شود. */ .pz-versus.card { background: linear-gradient(140deg, #1d3b2d 0%, #11241a 100%); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(214, 168, 95, 0.28), var(--shadow-sm); min-height: 150px; } .pz-versus .pz-title { color: var(--on-photo); } .pz-versus .pz-sub { color: #c9d4c9; } .pz-versus .pz-chip { background: rgba(255, 255, 255, 0.1); color: #f3e6c4; border-color: rgba(214, 168, 95, 0.35); } .pz-versus .pz-feature-media { flex-basis: 42%; } /* ردیفِ سبک: مرورِ تم‌ها */ .card.pz-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 10px var(--s3); text-align: start; cursor: pointer; font: inherit; color: inherit; } .pz-row-thumb { position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line); } .pz-row-thumb img { object-position: 36% 40%; } .pz-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pz-row-title { font-size: var(--t-14); font-weight: 800; } .pz-row-sub { font-size: var(--t-12); color: var(--muted); line-height: 1.6; } /* کاشیِ سرعت: کلِ کارت دکمه است؛ تایمر روی عکس، بهترین امتیاز زیرِ اسم. */ .pz-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .card.pz-tile { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; width: 100%; text-align: start; cursor: pointer; font: inherit; color: inherit; } .pz-tile-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; } .pz-timer { position: absolute; top: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px; border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--on-photo); background: rgba(14, 22, 17, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pz-timer::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--firuzeh); } .pz-tile-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; } .pz-tile-title { font-size: var(--t-14); font-weight: 800; } .pz-tile-meta { font-size: var(--t-12); color: var(--muted); line-height: 1.6; } .pz-best { margin-top: auto; align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-11); font-weight: 700; background: var(--accent-soft); color: var(--text); } .pz-best.hidden { display: none; } .pz-tile-body > .pz-tile-meta + .pz-best { margin-top: 7px; } .card.pz-tile, .card.pz-row { transition: transform 0.18s ease, box-shadow 0.18s ease; } .card.pz-tile:active, .card.pz-row:active { transform: scale(0.985); } @media (hover: hover) { .card.pz-tile:hover, .card.pz-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } } .card.pz-tile:focus-visible, .card.pz-row:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .card.pz-tile, .card.pz-row { transition: none; } } /* تبلت/دسکتاپ: ستونِ متن کمی بازتر، عکس همان نسبت. */ @media (min-width: 768px) { .pz-feature.card { min-height: 196px; } .pz-title { font-size: var(--t-18); } } /* ================================================================ بازی‌های باز (لابی) — صفحه‌ی مستقل + شمارنده روی ردیفِ اجتماع (v0.399) ================================================================ */ .hub-open-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 800; font-variant-numeric: tabular-nums; background: var(--firuzeh); color: var(--on-accent); } .hub-open-pill.hidden { display: none; } .og-list { display: grid; gap: var(--s3); margin-bottom: var(--s3); } .og-row { --sp: var(--muted); position: relative; display: flex; align-items: center; gap: var(--s3); overflow: hidden; padding: 12px var(--s3) 12px var(--s3); padding-inline-start: calc(var(--s3) + 4px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .og-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--sp); } .og-row[data-speed="bullet"] { --sp: var(--pf-bullet); } .og-row[data-speed="blitz"] { --sp: var(--pf-blitz); } .og-row[data-speed="rapid"] { --sp: var(--pf-rapid); } .og-row[data-speed="classical"] { --sp: var(--pf-classical); } .og-row.is-mine { border-style: dashed; background: var(--accent-soft); } .og-clock { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; padding: 7px 8px; border-radius: var(--r); background: color-mix(in srgb, var(--sp) 14%, transparent); } .og-clock b { font-size: var(--t-18); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; } .og-clock small { font-size: var(--t-10); color: var(--muted); } .og-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .og-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .og-speed { font-size: var(--t-14); font-weight: 800; } .og-sub { font-size: var(--t-12); color: var(--muted); line-height: 1.5; } .og-row .btn { flex: 0 0 auto; margin: 0; } .og-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; padding: var(--s6, 32px) var(--s4); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); } .og-empty p { margin: 0; color: var(--muted); font-size: var(--t-14); line-height: 1.7; } .og-empty-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--firuzeh); } .og-empty-ic svg { width: 26px; height: 26px; } .og-refresh { width: 100%; } .og-empty .btn { width: auto; padding-inline: var(--s5); } /* منتظرهای صفِ جفتِ خودکار در لابی (CHANGELOG-LOBBY-SEEKS.md): همان ردیفِ دعوت، به‌علاوه‌ی آدم (آواتار، نام، ریتینگ) — این‌جا مهم این است که «چه کسی» همین الان بازی می‌خواهد. */ .og-who { display: flex; align-items: center; gap: 7px; min-width: 0; } .og-who .ava.sm { width: 24px; height: 24px; font-size: calc(11px * var(--fs, 1)); } .og-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-14); font-weight: 700; unicode-bidi: plaintext; } .og-rating { flex: 0 0 auto; font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; } .og-seek .og-speed { font-size: var(--t-12); color: var(--muted); font-weight: 700; } @media (min-width: 768px) { .pz-tile-media { aspect-ratio: 2 / 1; } } /* ================================================================ صفحه‌ی «منو» — چهار بخشِ جدا: ابزار · پیشنهادات · تنظیمات · مدیریت. هر بخش یک عنوانِ کوچک (eyebrow) با فاصله‌ی زیاد از بخشِ قبل دارد، تا صفحه یک فهرستِ یکنواخت نباشد؛ مدیریت (فقط ناظر/مدیر) از همه دورتر و با یک خطِ نقطه‌چین جدا می‌شود. ================================================================ */ #menu .sec-title { font-size: var(--t-20); color: var(--text); margin-bottom: var(--s2); } .mn-eyebrow { display: flex; align-items: center; gap: var(--s2); margin: var(--s6) 2px var(--s2); font-size: var(--t-12); font-weight: 700; color: var(--muted); letter-spacing: .04em; } .mn-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); } #menu .sec-title + .mn-eyebrow { margin-top: var(--s4); } #menu .nav-list { box-shadow: var(--shadow-sm); } #menu .nav-row { padding: var(--s3) var(--s4); min-height: 60px; } #menu .nr-ic { width: 38px; height: 38px; border-radius: var(--r); } #menu .nr-ic svg { width: 19px; height: 19px; } #menu .nr-sub { white-space: normal; } .mn-quick { padding: var(--s1) var(--s4); margin-bottom: var(--s3); } .mn-quick .opt-row { flex-wrap: nowrap; } .mn-quick .opt-row > .seg { min-width: 0; flex: 1 1 0; max-width: 240px; } .mn-quick .seg button { padding-inline: var(--s2); white-space: nowrap; } .mn-quick .seg button.opt-ic { gap: 4px; padding-inline: 4px; } /* ۳ دکمه‌ی آیکون‌دار در ۲۴۰px جا شوند */ .mn-quick .opt-row:last-of-type { border-bottom: 0; } .mn-quick:last-child { margin-bottom: 0; } .mn-after-card { margin-top: 0; } .mn-admin-section { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px dashed var(--line); } .mn-admin-section .mn-eyebrow { margin-top: 0; } .mn-admin-section.hidden { display: none; } #menu .nav-row.mn-admin { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-sm); } #menu .mn-admin .nr-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } @media (min-width: 900px) { #menu .sec { max-width: 640px; } } /* ================================================================ صفحه‌ی «یادگیری» — کتابخانه‌ی قابل‌مرور ---------------------------------------------------------------- بدونِ مسیرِ اجباری: کارتِ اختیاریِ مهره‌ها (.ln-pieces) ← چهار دسته (.ln-cats) ← درس‌های دسته‌ی انتخاب‌شده (.ln-panel) ← «تمرین کن / ببین و کاوش کن» (.ln-side؛ روی مانیتورِ پهن ستونِ کناری). رنگِ هر دسته از --cat/--cat-soft. ساخته‌شده در renderLearn (js/lessons.js). ================================================================ */ .ln-h { margin: var(--s5) 2px var(--s3); font-size: var(--t-13); font-weight: 700; color: var(--muted); letter-spacing: .02em; } .ln-side > .ln-h:first-child { margin-top: 0; } #learn .sec-title { font-size: var(--t-20); color: var(--text); margin-bottom: var(--s3); } .ln-lesson-meta:empty { display: none; } /* ---------- کارتِ اختیاریِ مهره‌ها */ .ln-pieces { padding: var(--s4); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: linear-gradient(140deg, var(--accent-soft), var(--panel) 80%); } .ln-pieces-txt { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s3); } .ln-pieces-txt b { font-size: var(--t-16); font-weight: 800; } .ln-pieces-txt small { font-size: var(--t-12); color: var(--muted); line-height: 1.8; } .ln-pieces-meta { margin: var(--s3) 0; font-size: var(--t-12); font-weight: 600; color: var(--muted); } .ln-pieces-bar { margin: var(--s3) 0; } .ln-pieces > .ln-pieces-btn { width: 100%; margin: 0; } .ln-pieces.is-complete { display: flex; align-items: center; gap: var(--s3); background: var(--panel); } .ln-pieces.is-complete .ln-pieces-txt { flex: 1; min-width: 0; margin: 0; } .ln-pieces.is-complete > .ln-pieces-btn { width: auto; flex: 0 0 auto; padding: 8px 16px; } .ln-pieces-skip { display: block; width: 100%; margin: var(--s2) 0 0; padding: 8px; background: none; border: 0; font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .ln-pieces-skip:active { opacity: .6; } /* ردیفِ کوچکِ پایینِ صفحه‌ی یادگیری: کارتِ مهره‌ها بعد از بسته شدن یا تمام شدنِ فصل‌ها. عمداً سبک: بدونِ پس‌زمینه‌ی رنگی و سایه، فقط یک خط و متنِ کم‌رنگ. */ #learnPiecesDock:empty { display: none; } .ln-pieces-compact { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding: var(--s2) var(--s1); border-top: 1px solid var(--line); } .ln-pieces-compact .ln-badge, .ln-pieces-compact .ln-compact-ic { width: 26px; height: 26px; } .ln-pieces-compact .ln-badge svg { width: 12px; height: 12px; } .ln-compact-ic { flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); } .ln-compact-ic svg { width: 22px; height: 22px; opacity: .7; } .ln-pieces-compact .ln-pieces-txt { flex: 1; min-width: 0; margin: 0; } .ln-pieces-compact .ln-pieces-txt b { font-size: var(--t-13); font-weight: 700; color: var(--muted); } .ln-pieces-compact .ln-pieces-txt small { font-size: var(--t-11); line-height: 1.6; } .ln-pieces-compact .ln-pieces-btn { flex: 0 0 auto; width: auto; margin: 0; padding: 5px 14px; min-height: 0; font-size: var(--t-12); } .ln-badge { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; } .ln-badge svg { width: 16px; height: 16px; } .ln-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); } .ln-piece { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1 / 1.08; padding: 4px 2px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--text); } .ln-piece svg { width: 56%; height: auto; aspect-ratio: 1; } .ln-piece-name { font-size: var(--t-10); font-weight: 700; color: var(--muted); line-height: 1.2; } button.ln-piece { cursor: pointer; transition: transform .12s ease, border-color .12s; } button.ln-piece:active { transform: scale(.94); } button.ln-piece.is-open:hover { border-color: var(--firuzeh); } .ln-piece.is-done { background: var(--accent-soft); border-color: var(--firuzeh); } .ln-piece.is-locked { opacity: 1; } .ln-piece-badge { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--firuzeh); color: var(--on-accent); } .ln-piece-badge svg { width: 11px; height: 11px; } /* ---------- چهار دسته */ .ln-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .ln-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: var(--s4) var(--s3) var(--s3); text-align: start; font: inherit; color: inherit; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s ease, border-color .12s, background .12s, box-shadow .12s; } .ln-cat:hover { box-shadow: var(--shadow-md); } .ln-cat:active { transform: scale(.98); } .ln-cat-ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; margin-bottom: var(--s2); background: var(--cat-soft); color: var(--cat); } .ln-cat-ic svg { width: 21px; height: 21px; } .ln-cat-name { font-size: var(--t-16); font-weight: 800; } .ln-cat-blurb { font-size: var(--t-12); color: var(--muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ln-cat-count { margin-top: var(--s1); font-size: var(--t-11); font-weight: 700; color: var(--cat); font-variant-numeric: tabular-nums; } .ln-cat.is-selected { border-color: var(--cat); background: var(--cat-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 16%, transparent); } .ln-cat.is-selected .ln-cat-ic { background: var(--cat); color: #fff; } /* ---------- درس‌های دسته‌ی انتخاب‌شده */ .ln-panel { margin-top: var(--s4); padding: var(--s4) var(--s4) var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .ln-panel-head { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); } .ln-panel-head h3 { margin: 0; font-size: var(--t-15); font-weight: 800; } .ln-panel-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); } .ln-panel-ic svg { width: 17px; height: 17px; } .ln-rows { display: flex; flex-direction: column; } .ln-soon { margin: var(--s2) 2px var(--s3); font-size: var(--t-12); color: var(--muted); } .ln-panel > .hint-text { margin: var(--s2) 0 var(--s3); } .ln-lesson { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); margin-inline: calc(-1 * var(--s2)); width: calc(100% + 2 * var(--s2)); text-align: start; font: inherit; color: inherit; border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--line); transition: background .12s; } .ln-rows > .ln-lesson:last-child, .ln-rows > .lesson-card-wrap:last-child .ln-lesson { border-bottom-color: transparent; } button.ln-lesson { cursor: pointer; } button.ln-lesson:hover, button.ln-lesson:active { background: var(--raised); } .ln-lesson.is-planned { opacity: .55; cursor: default; } .ln-dot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); } .ln-dot svg { width: 15px; height: 15px; } .ln-lesson.is-done .ln-dot { background: var(--good); color: #fff; } .ln-lesson-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ln-lesson-title { font-weight: 700; font-size: var(--t-14); line-height: 1.5; } .ln-lesson-sum { font-size: var(--t-12); color: var(--muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ln-lesson-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: var(--t-11); color: var(--muted); } .ln-lv { padding: 1px 9px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--line); font-size: var(--t-11); font-weight: 700; color: var(--muted); } .ln-lv.beginner { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); } .ln-lv.advanced { color: var(--saffron); border-color: color-mix(in srgb, var(--saffron) 45%, var(--line)); } /* ---------- ابزارهای شاخص: مختصات + کتابخانه‌ی بزرگان (بالای دسته‌ها) */ .ln-feats { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s4); } .ln-feat, .ln-feats .masters-hero { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 84px; margin: 0; padding: var(--s3) var(--s4); text-align: start; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .ln-feat:hover { box-shadow: var(--shadow-md); } .ln-feat:active { transform: scale(.985); } .ln-feat-ic { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); } .ln-feat-ic svg { width: 28px; height: 28px; } .ln-feat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ln-feat-title { font-weight: 800; font-size: var(--t-15); line-height: 1.4; } .ln-feat-sub { color: var(--muted); font-size: var(--t-12); line-height: 1.7; } .ln-feat .nr-chev, .ln-feats .masters-hero .nr-chev { flex: 0 0 auto; color: var(--muted); } .ln-feats + .ln-h { margin-top: var(--s5); } .ln-feats .masters-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: center; grid-template-areas: "txt chev" "av av"; row-gap: var(--s3); column-gap: var(--s3); background: linear-gradient(135deg, var(--accent-soft), var(--panel) 70%); border-color: color-mix(in srgb, var(--firuzeh) 42%, var(--line)); } .ln-feats .masters-hero .mh-txt { grid-area: txt; } .ln-feats .masters-hero .nr-chev { grid-area: chev; } .ln-feats .masters-hero .mh-avatars { grid-area: av; justify-self: start; padding-inline-start: 0; } .ln-feats .masters-hero .mh-avatars .m-av:first-child { margin-inline-start: 0; } .ln-feats .masters-hero .mh-title { font-size: var(--t-15); } /* ---------- ببین و کاوش */ .ln-side .nav-list { box-shadow: var(--shadow-sm); } /* ---------- چیدمانِ تبلت/دسکتاپ */ @media (min-width: 640px) { .ln-feats { grid-template-columns: 1fr 1fr; } .ln-cats { grid-template-columns: repeat(4, 1fr); } .ln-cat { padding-inline: var(--s3); } } @media (min-width: 768px) { .ln-pieces:not(.is-complete) .ln-chips { max-width: 460px; } .ln-pieces > .ln-pieces-btn { width: auto; min-width: 220px; } } @media (min-width: 1100px) { #learn:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; } #learn > .sec { margin-bottom: 0; } .ln-side { position: sticky; top: var(--s4); padding-top: calc(20px * 1.4 + var(--s3)); } } /* ================================================================ صفحه‌ی «خانه» — صیقل (v0.408) ---------------------------------------------------------------- فقط ظاهر: همان markup/idها و منطق؛ تغییر در رندرِ پنلِ رتبه‌ها (renderHomeStatsStrip در js/puzzles.js) و ردیفِ تاریخچه (historyRowHtml). زبانِ بصری: گوشه‌ی گردِ --r-lg، سطحِ سفید + سایه‌ی آرام، و برای هر کارت یک «رنگِ تأکید» (--tint) که فقط به‌صورتِ شیبِ بسیار ملایم و آیکن می‌آید. ================================================================ */ #home .sec-title { font-size: var(--t-15); font-weight: 800; color: var(--text); letter-spacing: 0; } #home .card { border-radius: var(--r-lg); } /* ورودِ آرام: بخش‌ها یکی‌یکی محو می‌شوند (فقط opacity، تا چیزی جابه‌جا نپرد) */ @keyframes homeIn { from { opacity: 0; } to { opacity: 1; } } #home:not(.hidden) .home-col > .sec, #home:not(.hidden) > .home-hero { animation: homeIn .42s ease both; } #home:not(.hidden) .home-col > .sec:nth-child(2) { animation-delay: .04s; } #home:not(.hidden) .home-col > .sec:nth-child(3) { animation-delay: .08s; } #home:not(.hidden) .home-col > .sec:nth-child(4) { animation-delay: .12s; } #home:not(.hidden) .home-col > .sec:nth-child(5) { animation-delay: .16s; } #home:not(.hidden) .home-col > .sec:nth-child(n+6) { animation-delay: .2s; } @media (prefers-reduced-motion: reduce) { #home:not(.hidden) .home-col > .sec, #home:not(.hidden) > .home-hero { animation: none; } } /* ---------- هیرو */ #home .home-hero-photo { border-radius: var(--r-lg); box-shadow: var(--shadow-md); } /* ---------- پنلِ رتبه‌ها: سه سرعتِ اصلی درشت + یک ردیفِ آرامِ آمار */ #home .hss-row { display: block; overflow: visible; padding: 0; } .hs-panel { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .hs-rapid { --tint: var(--firuzeh); } .hs-blitz { --tint: var(--saffron); } .hs-bullet { --tint: var(--danger); } .hs-skel { height: 168px; border-radius: var(--r-lg); background: var(--raised); opacity: .5; animation: lnPulse 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hs-skel { animation: none; } } /* ---------- دوستان: هر دوست یک کاشیِ کوچک، حلقه‌ی سبز = آنلاین */ #home #friendsCard { background: none; border: 0; box-shadow: none; padding: 0; } #home #friendsList.friend-strip { gap: var(--s3); padding: 2px 2px 8px; } #home #friendsList.friend-strip .friend-row { flex: 0 0 88px; gap: 5px; padding: var(--s3) 4px var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } #home #friendsList.friend-strip .friend-row:hover { background: var(--panel); box-shadow: var(--shadow-md); } #home #friendsList.friend-strip .friend-row:active { transform: scale(.97); } #home #friendsList.friend-strip .ava.sm { width: 46px; height: 46px; border-radius: 50%; } #home #friendsList.friend-strip .friend-row:has(.dot.on) .ava.sm { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--good); } #home #friendsList.friend-strip .dot { display: none; } #home #friendsList.friend-strip .fr-name { font-weight: 700; margin-top: 2px; } #home #friendsList.friend-strip > .hint-text { width: 100%; margin: 0; padding: var(--s4); text-align: center; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); } /* ---------- اقدام‌های سریع: کاشیِ رنگی با شیبِ ملایم */ #home .home-quick-actions .qa-card:not(.qa-list-card) { --tint: var(--firuzeh); position: relative; overflow: hidden; isolation: isolate; min-height: 136px; padding: var(--s4); gap: 4px; justify-content: flex-start; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--tint) 28%, var(--line)); background: linear-gradient(155deg, color-mix(in srgb, var(--tint) 14%, var(--panel)), var(--panel) 70%); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } #home .home-quick-actions .qa-card:not(.qa-list-card):hover { box-shadow: var(--shadow-md); } #home .home-quick-actions .qa-card:not(.qa-list-card):active { transform: scale(.98); } #posterDaily { --tint: var(--saffron); } #home .home-quick-actions .qa-card:not(.qa-list-card) .qa-ic { width: 44px; height: 44px; border-radius: var(--r); margin-bottom: auto; background: color-mix(in srgb, var(--tint) 18%, var(--panel)); color: var(--tint); border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent); } #home .home-quick-actions .qa-card:not(.qa-list-card) .qa-ic svg { width: 22px; height: 22px; } #home .home-quick-actions .qa-card:not(.qa-list-card) .qa-title { margin-top: var(--s3); font-size: var(--t-16); font-weight: 800; } #home .home-quick-actions .qa-card:not(.qa-list-card) .qa-sub { font-size: var(--t-12); line-height: 1.6; } #home .qa-sub:empty { display: none; } /* ---------- کارتِ کتابخانه‌ی بزرگان */ #home .masters-hero { min-height: 84px; padding: var(--s4); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-soft), var(--panel) 65%); border: 1px solid color-mix(in srgb, var(--firuzeh) 42%, var(--line)); box-shadow: var(--shadow-sm); } #home .masters-hero .mh-title { font-size: var(--t-15); } #home .masters-hero .nr-chev { color: var(--muted); } /* ---------- بازی‌های اخیر */ #home #history .grow { gap: var(--s3); padding: var(--s3) 0; } #home #history .grow .who { display: flex; align-items: center; gap: 8px; font-weight: 700; } #home #history .grow .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #history .grow .res, #historyFullList .grow .res, #importedList .grow .res { flex: 0 0 auto; width: 16.5px; height: 16.5px; border-radius: var(--r-xs); margin: 0; display: inline-grid; place-items: center; font-size: var(--t-10); font-weight: 800; color: #fff; } #history .grow .res.win, #historyFullList .grow .res.win, #importedList .grow .res.win { background: var(--good); } #history .grow .res.loss, #historyFullList .grow .res.loss, #importedList .grow .res.loss { background: var(--danger); } #history .grow .res.draw, #history .grow .res.unfinished, #historyFullList .grow .res.draw, #historyFullList .grow .res.unfinished, #importedList .grow .res.draw, #importedList .grow .res.unfinished { background: var(--saffron); } #home #history .grow button { padding: 6px 13px; border-radius: var(--r-btn-sm); border: 0; font-size: var(--t-12); font-weight: 700; background: var(--raised); color: var(--text); } #home #history .grow button[data-analyse] { background: var(--accent-soft); color: var(--firuzeh); } #home #history .grow button:active { transform: scale(.96); } /* ------------------------------------------------------------ استریکِ روزانه (شعله‌ی کنارِ آواتار) صفر: شعله‌ی خاکستریِ ساکن. ۱ و بیشتر: شعله‌ی نارنجی/زرد با لرزشِ ملایم (همان flickerِ پازل) + عدد. */ .day-streak { direction: ltr; /* همیشه «شعله، عدد» از چپ به راست */ display: inline-flex; align-items: center; gap: 3px; line-height: 1; font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .day-streak b { font-weight: 800; font-size: var(--t-13); color: var(--text); } .day-streak .ds-flame { display: inline-block; width: 13px; height: 17px; flex: 0 0 auto; } .day-streak .ds-flame svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 90%; } .day-streak.on .f-out { fill: #ff6a3d; } .day-streak.on .f-in { fill: #ffd24a; } .day-streak.on .ds-flame svg { animation: flicker 1.1s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 106, 61, 0.5)); } .day-streak.off .f-out { fill: var(--muted); opacity: 0.5; } .day-streak.off .f-in { fill: var(--panel); opacity: 0.9; } .day-streak.off b { color: var(--muted); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .day-streak.on .ds-flame svg { animation: none; } } /* هدر: کنارِ آواتارِ کوچک؛ تا کاربرِ واردنشده/بارنشده جایی نگیرد خالی می‌ماند */ .who-streak:empty { display: none; } /* عددِ استریکِ هدر همیشه لاتین (ارقام ۰-۹ و فونتِ انگلیسی)، حتی در رابطِ فارسی */ .who-streak .day-streak b { font-size: var(--t-12); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .who-streak .day-streak .ds-flame { width: 15px; height: 20px; } /* پروفایل: قرصِ استریک بلافاصله بعد از نامِ کاربر (ترتیبِ خواندنِ هر زبان) */ .pf-streak { display: inline-block; vertical-align: middle; margin-inline-start: 10px; } .pf-streak .day-streak { padding: 4px 10px; gap: 4px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--line); white-space: nowrap; } .pf-streak .day-streak b { font-size: var(--t-14); } .pf-streak .day-streak .ds-flame { width: 14px; height: 19px; } .pf-streak .day-streak.on { border-color: color-mix(in srgb, #ff6a3d 45%, var(--line)); } /* ردیفِ قابل‌لمس = مرور؛ آواتارِ حریف و «تحلیل» کارِ خودشان را دارند */ .grow[data-replay], .grow[data-pf-replay] { cursor: pointer; -webkit-tap-highlight-color: transparent; } .grow[data-replay]:active, .grow[data-pf-replay]:active { background: color-mix(in srgb, var(--raised) 60%, transparent); } /* ردیفِ تاریخچه در هر جا (خانه، شیتِ «همه»، واردشده‌ها، پروفایل): نامِ حریف همیشه چسبیده به آواتار. قبلاً `.who` در شیت/واردشده‌ها block بود و با unicode-bidi:plaintext نامِ فارسی در UIِ انگلیسی (و برعکس) به لبه‌ی دورِ سطر می‌چسبید؛ flex آن را از ابتدای ستون می‌چیند. */ .grow.gh .who { display: flex; align-items: center; gap: 6px; font-weight: 700; unicode-bidi: normal; } .grow.gh .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .grow.gh .ava { flex: 0 0 auto; } /* آواتارِ حریف در ردیف‌های لیستِ بازی‌ها (اخیر در خانه، پروفایل، بازی‌های واردشده، در جریان و مکاتبه‌ای): ۲۶ ← ۳۴px (حدودِ +۳۰٪). سقفش ارتفاعِ دو خطِ «نام + متا» (≈۳۵px) است؛ بزرگ‌تر از این ردیف را بلندتر می‌کرد. آواتارِ سربرگِ تحلیل عمداً دست نخورده: آنجا هر پیکسل ارتفاع به تخته می‌رسد. */ .grow.gh .ava.sm, .grow.corr-row .ava.sm, .grow.corr-list-row .ava.sm { width: 34px; height: 34px; border-radius: var(--r-sm); font-size: calc(14px * var(--fs, 1)); } /* ریتینگِ حریف در لحظه‌ی بازی — کنارِ نامش، کم‌رنگ‌تر و بدونِ اینکه با نامِ بلند گم شود */ .grow .who-rt { flex: 0 0 auto; font-size: var(--t-12); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } /* پروفایل: همان چیدمانِ خانه (نام + ریتینگ در یک خط، نشانِ نتیجه به‌صورتِ مربعِ گوشه‌گرد کنارِ دکمه) */ #pfGames .grow { gap: var(--s3); padding: var(--s3) 0; } #pfGames .grow .who { display: flex; align-items: center; gap: 8px; font-weight: 700; } #pfGames .grow .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #pfGames .grow .res { flex: 0 0 auto; width: 16.5px; height: 16.5px; border-radius: var(--r-xs); margin: 0; display: inline-grid; place-items: center; font-size: var(--t-10); font-weight: 800; color: #fff; } #pfGames .grow .res.win { background: var(--good); } #pfGames .grow .res.loss { background: var(--danger); } #pfGames .grow .res.draw, #pfGames .grow .res.unfinished { background: var(--saffron); } #pfGames .grow button { padding: 6px 13px; border-radius: var(--r-btn-sm); border: 0; font-size: var(--t-12); font-weight: 700; background: var(--raised); color: var(--text); } #pfGames .grow button[data-pf-analyse] { background: var(--accent-soft); color: var(--firuzeh); } #pfGames .grow button:active { transform: scale(.96); } /* ---------- ستونِ کناری: بنر، افتخارات، جمله */ #home .home-tour-banner { border-radius: var(--r-lg); box-shadow: var(--shadow-md); } @media (min-width: 1100px) and (max-width: 1499px) { .home-tour-banner-sub { display: none; } .home-tour-banner-title { font-size: var(--t-12); } } #home .home-ach-card { padding: var(--s4); } #home .home-ach-card .qa-ic { width: 40px; height: 40px; border-radius: var(--r); background: color-mix(in srgb, var(--saffron) 16%, var(--panel)); color: var(--saffron); border: 1px solid color-mix(in srgb, var(--saffron) 28%, transparent); } #home .home-ach-card .qa-ic svg { width: 20px; height: 20px; } #home .wl-bar.sm { height: 6px; border-radius: var(--r-pill); overflow: hidden; } #home .wl-bar.sm .w { background: linear-gradient(90deg, var(--saffron), var(--firuzeh)); border-radius: var(--r-pill); } #home .home-quote-card { position: relative; overflow: hidden; padding: var(--s4) var(--s5); } #home .home-quote-card::before { content: "\201C"; position: absolute; inset-block-start: -2px; inset-inline-start: 14px; font: 700 64px/1 Georgia, serif; color: var(--firuzeh); opacity: .16; pointer-events: none; } #home .home-quote-body { padding-top: var(--s3); } #home .home-quote:lang(fa) { font-style: normal; } /* گوشیِ باریک: نشانِ برد/باخت خودش نتیجه را می‌گوید، پس متنِ تکراریِ نتیجه در خطِ دوم حذف می‌شود تا ردیف دو خط بماند و دکمه‌ها جا شوند. */ @media (max-width: 520px) { #home #history .grow .g-res-txt { display: none; } #home #history .grow button { padding: 6px 11px; } } /* دو کارتِ اقدامِ سریع همیشه دوستونه‌اند (روی تبلت/دسکتاپ سه/چهارستونه‌ی قدیمی فقط یک نیمه‌ی ردیف را پر می‌کرد). «بازی‌های در جریان» تمام‌عرض می‌ماند. */ #home .qa-grid { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { #home .home-quick-actions .qa-card:not(.qa-list-card) { min-height: 116px; } } /* ردیفِ دوست: کلِ کاشی قابل‌لمس است (پروفایل را باز می‌کند) */ .friend-row[data-open-profile] { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* کارتِ بزرگان روی گوشی: پنج آواتار کنارِ متن جا نمی‌شدند و متن را به ستونِ باریکِ چندخطی می‌شکستند — حالا متن بالا، آواتارها زیرش. */ @media (max-width: 520px) { #home .masters-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; grid-template-areas: "txt chev" "av av"; row-gap: var(--s3); } #home .masters-hero .mh-txt { grid-area: txt; } #home .masters-hero .nr-chev { grid-area: chev; } #home .masters-hero .mh-avatars { grid-area: av; justify-self: start; } } .mh-avatars:empty { display: none; } /* آواتارهای هم‌پوشان کمی از جعبه‌شان بیرون می‌زنند؛ فاصله‌ی متن را جبران می‌کنیم */ @media (min-width: 521px) { #home .masters-hero .mh-avatars { margin-inline-end: 14px; } } /* ================================================================ دوره‌های افتتاحیه (js/courses.js) ---------------------------------------------------------------- کارتِ دوره در صفحه‌ی یادگیری، صفحه‌ی دوره (فصل‌های آکاردئونی و خط‌ها) و نوارِ پایانیِ تخته. تزئین عمداً کم است: تنها نقشِ تصویری، مهره‌ای است که افتتاحیه را می‌سازد (فیلِ ایتالیایی) با ستِ مهره‌ی خودِ کاربر — نه طرح یا شیبِ تزئینی. همه‌ی رنگ‌ها از توکن‌ها، پس تمِ روشن/تیره خودکار است. ================================================================ */ .cr-list { display: grid; grid-template-columns: 1fr; gap: var(--s3); } .cr-card { display: flex; align-items: center; gap: var(--s3); width: 100%; margin: 0; padding: var(--s3) var(--s4); text-align: start; font: inherit; color: inherit; background: var(--panel); border: 1px solid color-mix(in srgb, var(--firuzeh) 30%, var(--line)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .cr-card:hover { box-shadow: var(--shadow-md); } .cr-card:active { transform: scale(.985); } .cr-card-ic, .cr-hero-ic { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--firuzeh) 22%, transparent); } .cr-card-ic svg, .cr-hero-ic svg { width: 46px; height: 46px; } .cr-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cr-card-title { font-weight: 800; font-size: var(--t-15); line-height: 1.4; } .cr-card-title small { margin-inline-start: 6px; font-weight: 600; font-size: var(--t-11); color: var(--muted); } .cr-card-sum { color: var(--muted); font-size: var(--t-12); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cr-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-11); color: var(--muted); font-weight: 600; } .cr-card-meta > span + span::before { content: "·"; margin-inline-end: 10px; color: var(--faint); } .cr-card-meta > .cr-due-pill::before { content: none; } .cr-card-bar { margin-top: 4px; height: 4px; } .cr-card .nr-chev { flex: 0 0 auto; color: var(--muted); } .cr-due-pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-weight: 700; background: var(--accent-soft); color: var(--firuzeh); font-size: var(--t-11); } /* کارتِ «مرورِ امروز» در خانه و بنرِ همان در صفحه‌ی دوره */ .cr-home-due, .cr-due-banner { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; } .cr-home-due { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-lg); } .cr-due-banner { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid color-mix(in srgb, var(--firuzeh) 45%, var(--line)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .cr-due-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); } .cr-due-ic svg { width: 18px; height: 18px; } .cr-due-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-due-txt b { font-size: var(--t-13); } .cr-due-txt small { color: var(--muted); font-size: var(--t-11); line-height: 1.6; } .cr-due-go { flex: 0 0 auto; width: auto; padding: 7px 16px; margin: 0; } /* «برنامه‌ی امروز» (js/plan.js) — روی خانه، جای دو کارتِ مرور */ .home-quick-actions.has-plan #homeCourseDue, .home-quick-actions.has-plan #homeMistakeDue { display: none !important; } .plan-card { padding: var(--s3) var(--s4) var(--s2); margin-bottom: var(--s3); } .plan-head { display: flex; align-items: baseline; gap: var(--s2); } .plan-title { flex: 1; min-width: 0; font-weight: 700; font-size: var(--t-14); } .plan-count { color: var(--muted); font-size: var(--t-12); white-space: nowrap; } .plan-bar { display: flex; gap: 4px; margin: var(--s2) 0 var(--s1); } .plan-bar i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--raised); transition: background .25s; } .plan-bar i.on { background: var(--firuzeh); } .plan-rows { display: flex; flex-direction: column; } .plan-row { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; font: inherit; color: inherit; padding: var(--s2) 0; border-bottom: 1px solid var(--line); cursor: pointer; background: none; } .plan-row:last-child { border-bottom: 0; } .plan-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); } .plan-ic svg { width: 16px; height: 16px; } .plan-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .plan-txt b { font-weight: 600; font-size: var(--t-13); } .plan-txt small { color: var(--muted); font-size: var(--t-11); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-side { flex: 0 0 auto; font-size: var(--t-11); color: var(--muted); padding: 2px 8px; border-radius: var(--r-pill); background: var(--raised); white-space: nowrap; } .plan-row.done .plan-ic { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } .plan-row.done .plan-txt b { color: var(--muted); } .plan-card.is-done { padding: var(--s3) var(--s4); } .plan-card.is-done .plan-head { align-items: center; } .plan-done-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } .plan-done-ic svg { width: 14px; height: 14px; } /* «پیشرفتِ این هفته» (js/plan.js) — روی پروفایل؛ همان کاشی‌های Insights */ .plan-progress-link { flex: 0 0 auto; font-size: var(--t-12); } .pg-note { margin: 0 0 2px; } .pg-trend { margin-top: var(--s3); } .pg-row { padding: 10px 0; border-top: 1px solid var(--line); } .pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); } .pg-head b { font-size: var(--t-14); } .pg-sub { margin-top: 3px; color: var(--muted); font-size: var(--t-12); font-variant-numeric: tabular-nums; } .pg-tag { flex: 0 0 auto; font-size: var(--t-11); font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); } .pg-tag.good { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); } .pg-tag.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } /* «حالتِ مربی» (js/coach.js): کلید در شیتِ بازی با ربات، و پیام‌های زیرِ تخته */ .coach-opt { border-bottom: 0; padding-top: var(--s2); } .coach-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .coach-opt-txt b { font-size: var(--t-13); } .coach-opt-txt small { color: var(--muted); font-size: var(--t-11); line-height: 1.6; } .coach-note { color: var(--muted); } .coach-good { color: var(--good); font-weight: 700; } .coach-why { margin-top: 4px; line-height: 1.7; } .coach-actions { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; direction: ltr; } .coach-actions .btn { width: auto; flex: 1 1 auto; margin: 0; padding: 7px 14px; } /* پاپ‌آپِ مربی (js/coachpop.js). گوشی/تبلت: position:fixed، پس هیچ ارتفاعی به ستونِ وسط‌چینِ صفحه نمی‌دهد و تخته با آمدن/رفتنِ پیام نمی‌پرد؛ top و max-height را JS از روی لبه‌ی پایینِ تخته و بالای نوارِ ابزار می‌گذارد (روی تخته نمی‌نشیند). دسکتاپ: در ریلِ کناری، در جریانِ خودِ ریل (ستونِ تخته جداست). */ .coach-pop { position: fixed; z-index: 6; inset-inline: var(--gutter); max-width: 520px; margin-inline: auto; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; padding: 8px var(--s3); border-radius: var(--r-sm); font-size: var(--t-14); line-height: 1.7; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); animation: coach-pop-in .16s ease-out; } .coach-pop.bad { border-color: var(--danger); } .coach-pop.good { border-color: var(--firuzeh); } .coach-pop:not(.sticky) { cursor: pointer; } .coach-pop .coach-note { color: var(--text); } .coach-pop .coach-warn { display: flex; flex-direction: column; min-height: 0; } .coach-pop .coach-why { overflow-y: auto; min-height: 0; margin-top: 2px; line-height: 1.65; } .coach-pop .coach-actions { margin-top: var(--s2); flex: 0 0 auto; } .coach-pop .coach-actions .btn { min-height: 36px; height: 36px; padding-block: 0; } .coach-pop .coach-why:first-child { margin-top: 0; } @keyframes coach-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .coach-pop { animation: none; } } @media (min-width: 1100px) { .coach-pop { position: static; inset-inline: auto; max-width: none; margin: var(--s3) 0 0; box-shadow: none; } } /* «اشتباه‌های بازی‌هایت» در صفحه‌ی پازل — همان ردیفِ ناوبری، با فاصله‌ی کارت‌های همان صفحه */ .gm-entry { margin-bottom: var(--s3); box-shadow: var(--shadow-sm); } /* نقطه‌ضعف‌ها (صفحه‌ی دوره) — ساده، بدونِ تزئین */ .cr-weak { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } .cr-weak-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; } .cr-weak-head b { font-size: var(--t-13); } .cr-weak-head small, .cr-weak-txt small { color: var(--muted); font-size: var(--t-11); line-height: 1.6; } .cr-weak-row { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; border-top: 1px solid var(--line); } .cr-weak-row:first-of-type { border-top: 0; } .cr-weak-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-weak-txt b { font-size: var(--t-13); font-weight: 700; line-height: 1.5; } .cr-weak-row .btn { flex: 0 0 auto; width: auto; margin: 0; } /* دو کارتِ دوره (مسیرِ یادگیری / خروج از کتاب) کنارِ هم؛ با اسکرولِ افقی یکی‌یکی دیده می‌شوند */ .pf-swipe { margin-bottom: var(--s3); min-width: 0; } .pf-swipe-track { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .pf-swipe-track::-webkit-scrollbar { display: none; } .pf-swipe-track > .card { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; } .pf-swipe-track > .card.hidden { display: none; } .pf-swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--s2); } .pf-swipe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--line); cursor: pointer; } .pf-swipe-dots button[aria-selected="true"] { width: 18px; background: var(--firuzeh); } .bx-n { flex: 0 0 auto; color: var(--muted); font-size: var(--t-12); font-variant-numeric: tabular-nums; } /* ---------- صفحه‌ی دوره */ .cr-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); margin-bottom: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .cr-hero-head h2 { margin: 0; font-size: var(--t-18); font-weight: 800; } .cr-hero-head p { margin: 2px 0 0; color: var(--muted); font-size: var(--t-12); font-weight: 600; } .cr-hero-sum { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--t-13); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cr-hero-prog { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); font-size: var(--t-12); font-weight: 700; color: var(--muted); } .cr-hero-prog .pbar { flex: 1; } .cr-chapters { display: flex; flex-direction: column; gap: var(--s3); } .cr-ch { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .cr-ch-head { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); text-align: start; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .cr-ch-no { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--firuzeh); font-weight: 800; font-size: var(--t-13); } .cr-ch-no svg { width: 15px; height: 15px; } .cr-ch.is-done .cr-ch-no { background: var(--good); color: #fff; } .cr-ch.is-locked .cr-ch-no, .cr-ch.is-premium .cr-ch-no { background: var(--raised); color: var(--muted); } .cr-ch.is-premium .cr-ch-no { color: var(--firuzeh); } .cr-ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-ch-txt b { font-size: var(--t-14); font-weight: 800; line-height: 1.5; } .cr-ch-txt small { color: var(--muted); font-size: var(--t-12); line-height: 1.7; } .cr-ch:not(.is-open) .cr-ch-txt small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .cr-ch-count { flex: 0 0 auto; font-size: var(--t-12); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .cr-ch-chev { flex: 0 0 auto; color: var(--muted); display: grid; } .cr-ch-chev svg { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .18s ease; } .cr-ch.is-open .cr-ch-chev svg { transform: rotate(90deg); } .cr-ch-body { display: none; padding: 0 var(--s4) var(--s3); } .cr-ch.is-open .cr-ch-body { display: block; } .cr-line { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); } .cr-line.is-locked { opacity: .55; } .cr-side { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--raised); border: 1px solid var(--line); } .cr-side svg { width: 24px; height: 24px; } .cr-line-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-line-txt b { font-size: var(--t-13); font-weight: 700; line-height: 1.5; } .cr-line-txt small { color: var(--muted); font-size: var(--t-11); } .cr-line-act { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .cr-line-act .btn.sm { min-width: 64px; } .cr-line-lock { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); } .cr-line-lock svg { width: 16px; height: 16px; } .cr-relearn svg { width: 16px; height: 16px; } .cr-stars { flex: 0 0 auto; display: inline-flex; gap: 1px; } .cr-stars i { display: grid; color: var(--line); } .cr-stars i.on { color: var(--firuzeh); } .cr-stars svg { width: 13px; height: 13px; fill: currentColor; } .cr-ch-note { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-12); line-height: 1.7; } .cr-ch-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; color: var(--firuzeh); } .cr-ch-btn { margin-top: var(--s3); } .cr-ch-hint { margin: var(--s2) 2px 0; color: var(--muted); font-size: var(--t-11); line-height: 1.7; text-align: center; } .cr-foot { margin-top: var(--s4); text-align: center; } .cr-skel { height: 220px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); opacity: .6; } /* ---------- تسلط (static/js/mastery.js) چهار پله با نردبانِ ارتقای مهره: پیاده ← اسب ← وزیر. رنگ‌ها فقط از توکن‌ها می‌آیند: خاکستری (در حال یادگیری) ← سبز (آشنا) ← طلاییِ برند (مسلط)؛ «رو به فراموشی» نارنجی. */ .ms-chip { --ms: var(--faint); position: relative; flex: 0 0 auto; display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ms) 13%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--ms) 75%, transparent); } .ms-chip svg { width: 20px; height: 20px; display: block; } .ms-chip.is-sm { width: 22px; height: 22px; border-width: 1.25px; } .ms-chip.is-sm svg { width: 15px; height: 15px; } .ms-chip.lv0 { background: transparent; border: 1.5px dashed var(--line); } .ms-chip.lv0 svg { opacity: .3; filter: grayscale(1); } .ms-chip.lv1 { --ms: var(--muted); } .ms-chip.lv2 { --ms: var(--good); } .ms-chip.lv3 { --ms: var(--firuzeh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--firuzeh) 14%, transparent); } .ms-chip.is-fading { border-style: dashed; } .ms-chip.is-fading svg { opacity: .7; } .ms-chip.is-fading::after { content: ""; position: absolute; inset-block-start: -2px; inset-inline-end: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 2px var(--panel); } .ms-bar { display: flex; gap: 2px; height: 6px; border-radius: var(--r-pill); overflow: hidden; min-width: 0; background: var(--raised); transform-origin: 0 50%; animation: ms-grow .5s cubic-bezier(.2, .7, .2, 1) both; } html[dir="rtl"] .ms-bar { transform-origin: 100% 50%; } .ms-bar > i { display: block; min-width: 6px; border-radius: var(--r-pill); } .ms-bar > i.lv1 { background: var(--muted); } .ms-bar > i.lv2 { background: var(--good); } .ms-bar > i.lv3 { background: var(--firuzeh); } .ms-bar > i.rest { background: transparent; } .ms-bar.is-sm { height: 4px; } @keyframes ms-grow { from { transform: scaleX(.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ms-bar { animation: none; } } .ms-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; } .ms-legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--t-12); font-weight: 600; } .ms-legend b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .ms-panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s3); } .ms-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .ms-panel-head b { font-size: var(--t-13); font-weight: 800; } .ms-note { margin: 0; color: var(--muted); font-size: var(--t-11); line-height: 1.85; } .ms-fade-pill { display: inline-block; padding: 1px 9px; border-radius: var(--r-pill); font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--saffron) 16%, transparent); color: var(--saffron); font-size: var(--t-11); } .cr-stars.is-mini svg { width: 11px; height: 11px; } .cr-line-txt small .cr-stars.is-mini { vertical-align: -1px; margin-inline-start: 2px; } /* ---------- پروفایل: مسیر یادگیری افتتاحیه (کارتِ #pfCoursesCard — static/js/courses.js) */ .cr-card-ic.is-sm { width: 40px; height: 40px; border-radius: var(--r); } .cr-card-ic.is-sm svg { width: 30px; height: 30px; } .pf-ms { margin-bottom: var(--s2); } .pf-cr-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pf-cr-private { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: var(--r-pill); background: var(--raised); color: var(--muted); font-size: var(--t-11); font-weight: 700; white-space: nowrap; } .pf-cr-private svg { width: 11px; height: 11px; } .pf-cr-list { display: flex; flex-direction: column; } .pf-cr-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 10px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; } .pf-cr-row:active { opacity: .7; } .pf-cr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .pf-cr-txt b { font-size: var(--t-13); font-weight: 700; line-height: 1.5; } .pf-cr-n { flex: 0 0 auto; min-width: 3.4em; text-align: end; font-weight: 800; font-size: var(--t-14); font-variant-numeric: tabular-nums; } .pf-cr-n small { color: var(--muted); font-weight: 600; font-size: var(--t-11); } .pf-cr-more { width: 100%; margin-top: var(--s2); } .pf-cr-vis { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); } .pf-cr-vis-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pf-cr-vis-txt b { font-size: var(--t-13); font-weight: 700; } .pf-cr-vis-txt small { color: var(--muted); font-size: var(--t-11); line-height: 1.7; } /* روندِ تسلط (نمودارِ ناحیه‌ایِ انباشته) — static/js/mastery.js */ .pf-cr-trend { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0; padding-top: var(--s3); border-top: 1px solid var(--line); } .pf-cr-trend-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; } .pf-cr-trend-head b { font-size: var(--t-13); font-weight: 700; } .pf-cr-ret { padding: 1px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); font-size: var(--t-11); font-weight: 800; white-space: nowrap; } .pf-cr-trend .trend-tabs { margin: 0; } .ms-trend { direction: ltr; touch-action: pan-y; } .ms-trend-svg { width: 100%; height: auto; display: block; direction: ltr; cursor: crosshair; } .ms-trend-svg .a1 { fill: var(--muted); opacity: .45; stroke: var(--panel); stroke-width: 1; } .ms-trend-svg .a2 { fill: var(--good); opacity: .85; stroke: var(--panel); stroke-width: 1; } .ms-trend-svg .a3 { fill: var(--firuzeh); stroke: var(--panel); stroke-width: 1; } .ms-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; } .ms-axis { fill: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; } .ms-cursor { stroke: var(--text); stroke-width: 1; opacity: 0; pointer-events: none; transition: opacity .12s; } .ms-trend-read { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 22px; color: var(--muted); font-size: var(--t-12); font-weight: 600; } .ms-rd-date { color: var(--text); font-weight: 800; } .ms-rd { display: inline-flex; align-items: center; gap: 5px; } .ms-rd b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .ms-rd.is-zero { opacity: .55; } .ms-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); } .ms-dot.lv2 { background: var(--good); } .ms-dot.lv3 { background: var(--firuzeh); } @media (prefers-reduced-motion: reduce) { .ms-cursor { transition: none; } } /* ---------- تخته‌ی دوره صفحه خودش اسکرول نمی‌خورد: سربرگِ یک‌خطی ← توضیح‌ها (باقیِ ارتفاع، با اسکرولِ داخلی) ← تخته با نوارِ ارزیابیِ عمودی ← یک ردیف دکمه. اندازه‌ی تخته = ارتفاعِ صفحه منهای همین‌ها. */ #screenLayer > #coursePlay { justify-content: flex-start; padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); } .cp-head { display: flex; align-items: center; gap: var(--s2); min-height: 40px; margin-bottom: 6px; } .cp-head-txt { flex: 1; min-width: 0; } .cp-head h2 { margin: 0; font-size: var(--t-15); font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-sub { display: flex; align-items: center; gap: var(--s2); margin-top: 1px; min-width: 0; color: var(--muted); font-size: var(--t-12); white-space: nowrap; } .cp-sub #cpSub { overflow: hidden; text-overflow: ellipsis; } .cp-mode { flex: 0 0 auto; padding: 0 8px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-11); background: var(--accent-soft); color: var(--firuzeh); } .cp-mode.m-review, .cp-mode.m-mix { background: var(--live-soft); color: var(--live); } .cp-mode.m-test { background: var(--raised); color: var(--text); } /* جای دکمه‌ها نباید با زبان عوض شود: هر ردیفِ data-fixpos همیشه با چیدمانِ انگلیسی (LTR) چیده می‌شود؛ فقط خودِ متنِ دکمه/عنوان جهتِ زبان را نگه می‌دارد. ردیفِ دکمه‌ی تازه = همین یک صفت. */ [data-fixpos] { direction: ltr; } html[dir="rtl"] [data-fixpos] :is(.btn, .cp-head-txt) { direction: rtl; } /* تخته + نوارِ ارزیابیِ عمودی کنارش. نوار عمداً مستقل از تمِ روشن/تیره است: سفید = سهمِ سفید، از پایین (برای شاگردِ سیاه، چون تخته برعکس است، از بالا). */ .cp-stage { display: flex; align-items: stretch; gap: 4px; align-self: center; width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 330px)); } #screenLayer > #coursePlay #cpBoardHost { flex: 1 1 0; min-width: 0; } .cp-eval { position: relative; flex: 0 0 26px; background: var(--eval-black); overflow: hidden; border-radius: var(--r-sm); } .cp-eval i { position: absolute; inset: auto 0 0 0; height: 50%; background: var(--eval-white); transition: height .45s cubic-bezier(.3, .7, .3, 1); } .cp-eval.is-flip i { inset: 0 0 auto 0; } .cp-eval .v { position: absolute; left: 0; right: 0; padding: 4px 0; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: -.2px; font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; } .cp-eval .v.w { bottom: 0; color: #1d1e20; } .cp-eval .v.b { top: 0; color: #f4f4f4; } .cp-eval.is-flip .v.w { bottom: auto; top: 0; } .cp-eval.is-flip .v.b { top: auto; bottom: 0; } .cp-eval.is-bad i { background: color-mix(in srgb, var(--c-blunder) 35%, var(--eval-white)); } .cp-eval.is-bad .v { color: var(--c-blunder); } .cp-eval.is-bad .v.b { color: #ff9b8f; } /* متن بالا: هرچه جا ماند مالِ متن است (روی گوشیِ بلند، متن جای بیشتری می‌گیرد، نه تخته فاصله) */ #screenLayer > #coursePlay > .cp-dyn { flex: 1 1 0; min-height: 96px; overflow-y: auto; } .cp-dyn .coach { margin-top: 0; } .coach .line.guide { border-inline-start-color: var(--live); } .coach .line svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--good); } .coach .cr-stars i { color: var(--line); } .coach .cr-stars i.on { color: var(--firuzeh); } .cp-stats { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-12); color: var(--muted); } .cp-wdl { flex: 0 0 110px; height: 6px; border-radius: var(--r-pill); overflow: hidden; display: flex; background: var(--raised); border: 1px solid var(--line); } .cp-wdl i { display: block; height: 100%; } .cp-wdl .w { background: #f2f0ea; } .cp-wdl .d { background: var(--faint); } .cp-wdl .b { background: #2b2f34; } .cp-result { display: flex; align-items: center; gap: var(--s2); } .cp-result .cr-stars svg { width: 18px; height: 18px; } .cp-bar { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); } .cp-finish { flex: 1; min-width: 0; display: flex; } .cp-finish .btn { width: 100%; margin: 0; padding: 10px var(--s3); } .cp-tools { display: flex; align-items: center; gap: var(--s2); } .cp-finish.hidden + .cp-tools { flex: 1; } .cp-nav { display: flex; align-items: center; gap: var(--s2); margin-left: auto; } .cp-head-acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .cp-head-acts .icon-btn.is-off { color: var(--faint); } /* کلیدِ جابه‌جاییِ یاد بگیر ⇄ تمرین: حالتِ دیگر را نشان می‌دهد */ .cp-switch { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; justify-content: center; width: 44px; height: 40px; padding: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--firuzeh); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--firuzeh) 35%, transparent); transition: transform .06s, background .12s; } .cp-switch svg { width: 20px; height: 20px; flex: 0 0 auto; } .cp-switch:active { transform: scale(.95); } .cp-nav .ic:first-child svg { transform: none; } .cp-nav .ic:last-child svg { transform: scaleX(-1); } .cp-nav .ic:disabled { opacity: .35; } .cp-more { display: flex; flex-wrap: wrap; gap: var(--s2); } .cp-more .btn { margin: 0; } /* برچسبِ حرکت/خانه داخلِ متن */ .mvchip { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; padding: 0 7px 0 5px; border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--firuzeh) 35%, transparent); font-weight: 800; font-size: .92em; line-height: 1.55; vertical-align: 1px; white-space: nowrap; unicode-bidi: isolate; cursor: pointer; color: var(--text); } .mvchip b { font-weight: 800; font-family: inherit; } .mvchip.sq { padding: 0 6px; background: var(--raised); border-color: var(--line); } .mc-pc { display: inline-grid; width: 1.25em; height: 1.25em; } .mc-pc svg { width: 100%; height: 100%; } .mc-pc.c-w .body { fill: var(--pw-fill); stroke: var(--pw-stroke); stroke-width: 1.3; stroke-linejoin: round; } .mc-pc.c-w .ln { fill: none; stroke: var(--pw-detail); stroke-linecap: round; } .mc-pc.c-w .dt { fill: var(--pw-detail); stroke: none; } .mc-pc.c-b .body { fill: var(--pb-fill); stroke: var(--pb-stroke); stroke-width: 1.3; stroke-linejoin: round; } .mc-pc.c-b .ln { fill: none; stroke: var(--pb-detail); stroke-linecap: round; } .mc-pc.c-b .dt { fill: var(--pb-detail); stroke: none; } @media (min-width: 640px) { .cr-list { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { #course { max-width: 720px; margin-inline: auto; } } @media (min-width: 1100px) { .cp-stage { width: min(100%, calc(var(--app-100dvh) - 366px)); } } /* مهره‌های تزئینیِ بیرون از تخته: ستِ «خانگی» رنگش را از کلاسِ .pc می‌گیرد که این‌جا نیست؛ همان قاعده‌ها برای سفید/سیاه (ستِ Cburnett رنگِ خودش را دارد و این‌ها بی‌اثرند). */ .cr-card-ic .body, .cr-hero-ic .body, .rv-course-ic .body, .cr-side.side-w .body, .ms-chip .body { fill: var(--pw-fill); stroke: var(--pw-stroke); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; } .cr-card-ic .ln, .cr-hero-ic .ln, .rv-course-ic .ln, .cr-side.side-w .ln, .ms-chip .ln { fill: none; stroke: var(--pw-detail); stroke-linecap: round; } .cr-card-ic .dt, .cr-hero-ic .dt, .rv-course-ic .dt, .cr-side.side-w .dt, .ms-chip .dt { fill: var(--pw-detail); stroke: none; } .cr-side.side-b .body { fill: var(--pb-fill); stroke: var(--pb-stroke); stroke-width: 1.3; stroke-linejoin: round; } .cr-side.side-b .ln { fill: none; stroke: var(--pb-detail); stroke-linecap: round; } .cr-side.side-b .dt { fill: var(--pb-detail); stroke: none; } .cr-side.side-b { background: color-mix(in srgb, var(--raised) 60%, #9aa2ad 40%); } /* «این بازی با کدام خطِ دوره شروع شد؟» در پاپ‌آپِ خلاصه‌ی بازی */ .rv-course { margin: var(--s3) 0; padding: var(--s3); border-radius: var(--r); background: var(--raised); border: 1px solid var(--line); font-size: var(--t-12); line-height: 1.7; } .rv-course-head { display: flex; align-items: center; gap: var(--s2); } .rv-course-head > span:last-child { display: flex; flex-direction: column; } .rv-course-head small { color: var(--muted); } .rv-course-ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); flex: 0 0 auto; } .rv-course-ic svg { width: 26px; height: 26px; } .rv-course p { margin: var(--s2) 0; } .rv-course-why { color: var(--muted); border-inline-start: 3px solid var(--firuzeh); padding-inline-start: var(--s2); } /* ---------- افتتاحیه‌ها: یک خانه برای دوره‌ها و درس‌های کوتاه */ .ln-sub { margin: var(--s4) 0 var(--s2); font-size: var(--t-12); font-weight: 800; color: var(--muted); letter-spacing: .01em; } .ln-panel-head + .ln-sub { margin-top: var(--s3); } #lessonList .cr-list { margin-bottom: var(--s1); } .cr-continue { display: flex; align-items: center; gap: var(--s3); width: 100%; margin: 0 0 var(--s4); padding: var(--s3) var(--s4); text-align: start; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-soft), var(--panel) 70%); border: 1px solid color-mix(in srgb, var(--firuzeh) 38%, var(--line)); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } .cr-continue:hover { box-shadow: var(--shadow-md); } .cr-continue:active { transform: scale(.985); } .cr-continue .cr-card-ic { width: 52px; height: 52px; } .cr-continue .cr-card-ic svg { width: 40px; height: 40px; } .cr-kicker { font-size: var(--t-11); font-weight: 800; letter-spacing: .02em; color: var(--firuzeh); } .cr-continue .nr-chev { flex: 0 0 auto; color: var(--muted); } /* ---------- تأکید در متنِ درس‌ها (نشانه‌گذاریِ سبکِ متن: **پررنگ**، ==هایلایت==، {+خوب}، {-بد}، {!احتیاط}) عمداً کم‌رنگ و کم‌تعداد: هر متن فقط یکی دو نقطه‌ی تأکید دارد تا صفحه شلوغ نشود. هایلایت مثلِ ماژیکِ نیم‌ارتفاع زیرِ کلمه می‌نشیند، نه یک جعبه‌ی رنگیِ سنگین. */ .coach strong, .tx-b { font-weight: 800; color: var(--text); } .coach mark, .tx-hl { color: inherit; font-weight: 700; padding: 0 2px; margin: 0 -1px; border-radius: var(--r-xs); background: linear-gradient(transparent 38%, color-mix(in srgb, var(--firuzeh) 26%, transparent) 38%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .tx-good, .tx-bad, .tx-warn { font-weight: 700; } .tx-good { color: var(--c-good); } .tx-bad { color: var(--c-blunder); } .tx-warn { color: var(--c-mistake); } :root[data-appearance="light"] .tx-warn, :root[data-appearance="light"] .tx-good { filter: brightness(.82); } /* ---------------------------------------------- ردیفِ مکاتبه‌ایِ «بازی‌های در جریان» یک سطر: آواتار، نام + خطِ کوچکِ نوبت/مهلت، دکمه‌ی کوچکِ «ادامه». قاعده‌ی موبایلِ #ongoingCard دکمه را تمام‌عرض می‌کرد؛ این‌جا با ویژگیِ بالاتر لغوش می‌کنیم. */ #ongoingCard .grow.corr-row { flex-wrap: nowrap; gap: var(--s2); padding: var(--s2) 0; align-items: center; } #ongoingCard .grow.corr-row .ava { flex: 0 0 auto; } #ongoingCard .grow.corr-row .info { flex: 1 1 auto; min-width: 0; } #ongoingCard .grow.corr-row .who { font-weight: 600; } #ongoingCard .grow.corr-row .meta { font-size: var(--t-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ongoingCard .grow.corr-row .corr-tag { color: var(--muted); } #ongoingCard .grow.corr-row.my-turn .meta { color: var(--text); } #ongoingCard .grow.corr-row { cursor: pointer; width: 100%; } #ongoingCard .grow.corr-row button.go { flex: 0 0 auto; order: 0; padding: 5px 14px; font-size: var(--t-12); border-radius: var(--r-btn-sm); text-align: center; } /* نوبتِ توست: طلاییِ برند، پررنگ */ #ongoingCard .grow.corr-row button.corr-turn-btn { font-weight: 800; box-shadow: 0 0 0 1px var(--firuzeh); } #ongoingCard .grow.corr-row.my-turn .who-name { font-weight: 700; } /* نوبتِ حریف: کم‌وزن — کمرنگ، بدونِ دکمه */ #ongoingCard .grow.corr-row.their-turn { opacity: .62; } #ongoingCard .grow.corr-row.their-turn .who { font-weight: 500; } #ongoingCard .grow.corr-row .corr-wait { flex: 0 0 auto; font-size: var(--t-11); color: var(--muted); white-space: nowrap; } /* دکمه/برچسبِ نوبت همیشه به *انتهای* ردیف بچسبد: فارسی (راست‌به‌چپ) = سمتِ چپ، انگلیسی = سمتِ راست */ #ongoingCard .grow.corr-row button.corr-turn-btn, #ongoingCard .grow.corr-row .corr-wait { margin-inline-start: auto; margin-inline-end: 0; } /* ریشه‌ی باگ: .qa-card رو align-items:flex-start دارد، پس #ongoing به‌اندازه‌ی محتوا جمع می‌شد (نام ناپدید و دکمه چسبیده به آواتار). کشیده‌اش می‌کنیم تا ردیف تمام‌عرضِ کارت باشد. */ #ongoingCard #ongoing { align-self: stretch; width: 100%; } /* نامِ انگلیسی در صفحه‌ی فارسی: متنِ لاتین در بلاکِ راست‌به‌چپ، با هر بیدی‌ایی که بیاید، باید کنارِ آواتار (ابتدای ردیف) بنشیند نه کنارِ دکمه. نام یک جزیره‌ی مستقل است و خودِ بلاک از ابتدای ردیف تراز می‌شود. */ #ongoingCard .grow.corr-row .info, #ongoingCard .grow.corr-row .who, #ongoingCard .grow.corr-row .meta { text-align: start; } #ongoingCard .grow.corr-row .who-name { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } /* ریشه‌ی باگِ نامِ انگلیسی: `.who` سراسری unicode-bidi:plaintext دارد، یعنی جهتِ بلاک از خودِ متن گرفته می‌شد (لاتین ⇒ چپ‌چین، کنارِ دکمه). این‌جا جهت از صفحه ارث می‌رسد. */ #ongoingCard .grow.corr-row .who { unicode-bidi: normal; direction: inherit; text-align: start; } /* ردیفِ «نوبتِ توست» در شیتِ زنگوله: آواتار + نام + نوعِ بازی؛ دکمه‌ی طلاییِ پررنگ در انتها */ .corr-bell-row { cursor: pointer; align-items: center; } .corr-bell-row .fr-name { unicode-bidi: normal; direction: inherit; text-align: start; font-weight: 700; } .corr-bell-row .fr-meta { text-align: start; } .corr-bell-row .btn.corr-turn-btn { margin-inline-start: auto; font-weight: 800; white-space: nowrap; background: var(--firuzeh); color: var(--on-accent); border-color: transparent; border-radius: var(--r-btn-sm); } /* «بازی‌های من» و «تقویمِ مهلت‌ها» در صفحه‌ی مکاتبه‌ای: آواتار + نامِ حریف کنارِ هم (نامِ لاتین با unicode-bidi:plaintext چپ‌چین نشود)، دکمه در انتهای ردیف */ .grow.corr-list-row .ava { flex: 0 0 auto; } .grow.corr-list-row .info { text-align: start; } .grow.corr-list-row .who { unicode-bidi: normal; direction: inherit; text-align: start; font-weight: 600; } .grow.corr-list-row .who-name { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .grow.corr-list-row .meta { text-align: start; } .grow.corr-list-row > button { margin-inline-start: auto; } /* ================= اخبار شطرنج ================= سرتیتر (تاریخِ امروز + عنوانِ درشت) ← زبانه‌های کشور ← چیپ‌های موضوع و زبان ← «خبرِ اصلی» با عکسِ بزرگ ← ردیف‌های جمع‌وجورِ روزنامه‌ای (دسته‌شده با روز) ← صفحه‌ی خواندنِ تمام‌صفحه. بدونِ تزئینِ اضافه؛ تنها تأکیدِ رنگی همان طلاییِ برند است (کیکر، زبانه‌ی فعال، خطِ نقل‌قول). */ #news > .sec { max-width: 760px; margin-inline: auto; } .news-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } .news-head-txt { min-width: 0; } .news-dateline { margin: 0 0 2px; font-size: var(--t-12); font-weight: 700; color: var(--firuzeh); } .news-dateline:empty { display: none; } #news .news-head .sec-title { margin: 0; font-size: var(--t-24); line-height: 1.4; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } #news .news-head .sec-sub { margin: 2px 0 0; } .news-manage { flex: 0 0 auto; margin-top: 4px; padding: 5px 12px; border-radius: var(--r-pill); text-decoration: none; border: 1px solid var(--line); background: var(--panel); color: var(--firuzeh); font-weight: 700; font-size: var(--t-12); } .news-filters { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); } .news-filters:empty { display: none; } .news-tabbar { display: flex; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--line); } .news-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; } .news-tabs::-webkit-scrollbar { display: none; } .news-tab { flex: 0 0 auto; position: relative; padding: 6px 2px 10px; background: none; border: 0; cursor: pointer; color: var(--muted); font-weight: 700; font-size: var(--t-14); transition: color .15s; } .news-tab[aria-pressed="true"] { color: var(--text); } .news-tab[aria-pressed="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--firuzeh); } .news-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; min-width: 0; } .news-chips::-webkit-scrollbar { display: none; } .news-chips button { flex: 0 0 auto; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; cursor: pointer; background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: var(--t-12); transition: background .15s, color .15s, border-color .15s; } .news-chips button[aria-pressed="true"], .news-lang.on { color: var(--firuzeh); border-color: color-mix(in srgb, var(--firuzeh) 50%, transparent); background: color-mix(in srgb, var(--firuzeh) 12%, transparent); } .news-lang { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px auto; margin-inline-start: auto; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); font-weight: 600; font-size: var(--t-12); white-space: nowrap; } .news-lang svg { width: 14px; height: 14px; flex: 0 0 auto; } .news-lang svg.cr { width: 12px; height: 12px; opacity: .7; } .news-lang-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s2); } .news-lang-opt { padding: 12px var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink); color: var(--text); font-weight: 700; font-size: var(--t-14); text-align: start; cursor: pointer; } .news-lang-opt.on { border-color: var(--firuzeh); color: var(--firuzeh); } /* کارت‌ها: کلِ کارت لمس‌پذیر است (صفحه‌ی خواندن) */ .news-card { cursor: pointer; -webkit-tap-highlight-color: transparent; } .news-card:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 3px; } .news-title { margin: 0; font-weight: 700; color: var(--text); overflow-wrap: anywhere; transition: color .15s; } .news-kicker { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-12); font-weight: 600; color: var(--muted); } .nk-topic { color: var(--firuzeh); font-weight: 800; } .nk-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; flex: 0 0 auto; } .news-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: var(--t-12); color: var(--muted); } .news-src { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .news-src bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ns-ava { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--line); color: var(--text); font-size: var(--t-11); font-weight: 800; line-height: 1; } .news-stats { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s3); } .nst-r, .nst-v { display: inline-flex; align-items: center; gap: 4px; } .nst-r .e { font-size: 13px; line-height: 1; } .nst-r .e + .e { margin-inline-start: -5px; } .nst-r .n { margin-inline-start: 2px; } .nst-v svg { width: 14px; height: 14px; } /* خبرِ اصلی */ .news-lead { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s4); box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .15s; } .news-lead:active { transform: scale(.992); } .news-lead .news-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--ink); } .nl-body { position: relative; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); } .news-lead.no-img .nl-body { padding-top: var(--s5); } .news-lead.no-img .nl-body::before { /* بی‌عکس: فقط یک خطِ کوتاهِ طلایی بالای کیکر */ content: ""; position: absolute; top: 0; inset-inline-start: var(--s4); width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--firuzeh); } .news-lead .news-title { font-size: var(--t-20); line-height: 1.55; font-weight: 800; letter-spacing: -0.005em; } .news-sum { margin: 0; color: var(--muted); font-size: var(--t-14); line-height: 1.85; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-lead .news-foot { margin-top: 2px; padding-top: var(--s3); border-top: 1px solid var(--line); } /* ردیف‌ها */ .news-stack { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--s4); } .news-group { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0 var(--s1); font-size: var(--t-11); font-weight: 800; color: var(--muted); letter-spacing: .02em; } .news-group::after { content: ""; flex: 1; height: 1px; background: var(--line); } .news-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); } .news-group + .news-row { border-top: 0; } .nr-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .news-row .news-title { font-size: var(--t-15); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nr-thumb { flex: 0 0 auto; width: 88px; height: 88px; object-fit: cover; border-radius: 10px; background: var(--ink); display: block; } .news-row:active .news-title { color: var(--firuzeh); } @media (hover: hover) { .news-row:hover .news-title, .news-lead:hover .news-title { color: var(--firuzeh); } .news-lead:hover { border-color: color-mix(in srgb, var(--firuzeh) 35%, var(--line)); } } .news-more { width: 100%; margin-top: var(--s3); } .news-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s6) var(--s4); text-align: center; } .news-empty .ne-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); } .news-empty .ne-ic svg { width: 22px; height: 22px; } .news-empty .hint-text { margin: 0; } /* صفحه‌ی خواندن */ html.news-reading { overflow: hidden; } .news-reader { position: fixed; inset: 0; z-index: 49; background: var(--ink); opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1); } .news-reader.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .news-reader { transition: none; transform: none; } } .nrd-panel { height: 100%; display: flex; flex-direction: column; background: var(--ink); } .nrd-bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s1); padding: env(safe-area-inset-top) var(--s2) 0; min-height: 52px; background: var(--panel); border-bottom: 1px solid var(--line); } .nrd-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: none; border: 0; color: var(--text); cursor: pointer; } .nrd-close:active { background: var(--raised); } .nrd-close svg { width: 22px; height: 22px; } [dir="rtl"] .nrd-close svg { transform: scaleX(-1); } .nrd-bar-title { font-weight: 700; font-size: var(--t-14); color: var(--muted); } .nrd-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nrd-img { width: 100%; aspect-ratio: 16 / 10; max-height: 46vh; object-fit: cover; display: block; background: var(--panel); } .nrd-content { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom)); } .nrd-tags { display: flex; flex-wrap: wrap; gap: 6px; } .nrd-tag { padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--t-11); font-weight: 700; color: var(--muted); } .nrd-tag.accent { color: var(--firuzeh); border-color: color-mix(in srgb, var(--firuzeh) 45%, transparent); background: color-mix(in srgb, var(--firuzeh) 10%, transparent); } .nrd-title { margin: 0; font-size: var(--t-24); line-height: 1.5; font-weight: 800; color: var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; } .nrd-meta { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); } .nrd-meta .ns-ava { width: 34px; height: 34px; border-radius: 10px; font-size: var(--t-14); } .nrd-meta-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .nrd-src { font-weight: 700; font-size: var(--t-13); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nrd-when { font-size: var(--t-12); color: var(--muted); } .nrd-source { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: 12px var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--firuzeh); font-weight: 800; font-size: var(--t-14); text-decoration: none; } .nrd-source:active { background: var(--raised); } .nrd-source svg { width: 18px; height: 18px; flex: 0 0 auto; } .news-reader .news-social { margin-top: 0; padding-top: var(--s3); border-top: 1px solid var(--line); align-items: center; } .news-reader .news-social .ch-views { padding-bottom: 0; } /* متنِ قالب‌دار (خبرِ دستی، پیش‌نمایشِ پنلِ ادمین) — static/js/richtext.js */ .rt-body { font-size: var(--t-16); line-height: 2; color: var(--text); overflow-wrap: anywhere; } .rt-body p { margin: 0 0 1em; } .rt-body > :last-child { margin-bottom: 0; } .rt-body b { font-weight: 800; } .rt-body em { font-style: italic; } .rt-body a { color: var(--firuzeh); text-decoration: underline; text-underline-offset: 3px; } .rt-h { margin: 1.5em 0 .4em; font-size: var(--t-18); line-height: 1.6; font-weight: 800; color: var(--text); } .rt-body > .rt-h:first-child { margin-top: 0; } .rt-q { margin: 1.2em 0; padding: var(--s2) var(--s4); color: var(--text); border-inline-start: 3px solid var(--firuzeh); background: color-mix(in srgb, var(--firuzeh) 8%, transparent); border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); } .rt-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; } .rt-h-btn { font-weight: 800; } .rt-q-btn { font-size: 18px; line-height: 1; } @media (min-width: 768px) { .news-lead.has-img { display: grid; grid-template-columns: 1.15fr 1fr; } .news-lead.has-img .news-img { height: 100%; min-height: 250px; aspect-ratio: auto; } .news-lead.has-img .nl-body { justify-content: center; } .nr-thumb { width: 112px; height: 84px; } .news-reader { background: rgba(5, 7, 9, .6); display: grid; place-items: center; padding: var(--s5); } .nrd-panel { width: min(760px, 100%); height: min(92vh, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .nrd-img { max-height: 420px; } .nrd-title { font-size: var(--t-30); } } /* کارتِ «تازه‌ترین اخبار» در صفحه‌ی خانه */ .hn-list { display: flex; flex-direction: column; } .hn-more { width: 100%; margin-top: var(--s2); } .hn-item { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; padding: var(--s2) 0; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; cursor: pointer; } .hn-item:first-child { border-top: 0; } .hn-img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--ink); } .hn-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hn-title { font-weight: 700; line-height: 1.6; font-size: var(--t-14); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hn-meta { color: var(--muted); font-size: var(--t-12); unicode-bidi: plaintext; } /* ---- پروفایل: کارت‌ها با محتوای زیاد بزرگ نمی‌شوند — فهرست‌ها داخلِ خودشان اسکرول می‌کنند ---- */ /* یادگیری افتتاحیه‌ها: بیش از ۳ ردیف → حدودِ ۳ ردیف و نیم ارتفاع، بقیه با اسکرول */ .pf-cr-list.is-scroll { max-height: calc(3.5 * 62px * var(--fs, 1)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* خروج از کتاب: کارت هم‌قدِ کارتِ کناری (flex stretch) و فهرستش داخلِ باقیِ فضا اسکرول می‌شود؛ .bx-inner مطلق است تا طولِ فهرست ارتفاعِ کارت را بالا نبرد */ #bookExitCard:not(.hidden) { display: flex; flex-direction: column; } #bookExitBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .bx-scroll { position: relative; flex: 1 1 0; min-height: calc(3.5 * 62px * var(--fs, 1)); } .bx-inner { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Chess Insights: بیش از حدِ معقول → اسکرول داخلی */ #insightsBody { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 2px; } /* ------------------------------------------------ کاوشگرِ افتتاحیه — دسکتاپ تخته یک ستون، پنلِ کاوشگر ستونِ کناریِ هم‌قدِ تخته (فقط فهرست اسکرول می‌خورد). تخته چپ و پنل راست در هر دو زبان — همان چیدمانِ تخته‌ی تحلیل. */ @media (min-width: 1100px) { #screenLayer > #openbook { --ob-side: clamp(340px, 30vw, 460px); --ob-gap: var(--s5); --ob-board: min( calc(var(--app-100dvh) - 300px), calc(100vw - var(--gutter) * 2 - var(--ob-side) - var(--ob-gap)), 820px ); --ob-total: calc(var(--ob-board) + var(--ob-side) + var(--ob-gap)); } #screenLayer > #openbook > .lesson-head, #screenLayer > #openbook > .toolbar, #screenLayer > #openbook > #obMsg { max-width: var(--ob-total); width: 100%; margin-inline: auto; } #screenLayer > #openbook > #obBody { display: grid; grid-template-columns: var(--ob-board) var(--ob-side); column-gap: var(--ob-gap); align-items: start; max-width: none; width: var(--ob-total); margin-inline: auto; direction: ltr; } #screenLayer > #openbook .ob-stage { max-width: none; width: var(--ob-board); } #screenLayer > #openbook #obBoardHost { max-width: none; width: 100%; } #screenLayer > #openbook #obBoardHost .board { width: 100%; } #obSide { margin-top: 0; min-height: 0; height: calc(var(--ob-board) + 22px); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: var(--s2); direction: rtl; } html[dir="ltr"] #obSide { direction: ltr; } #obSide #obDynamic.ob-dynamic { min-height: 0; } .ob-srow { padding-block: 7px; } } /* ================================================================ ۱۲. خانه، شیتِ شروعِ بازی و سربرگ (CHANGELOG-QUICK-PLAY.md) ================================================================ */ /* ---------- سربرگ: چرخ‌دنده حالا همه‌جا در سربرگ است (قبلاً روی صفحه‌های «مقصد» پنهان بود چون «منو» هم تنظیمات را دارد). برای اینکه شلوغ نشود: آیکونِ SVGِ هم‌وزنِ زنگوله/پاکت، کم‌رنگ‌تر از آن‌ها، و آواتار بزرگ‌تر تا نقطه‌ی تمرکزِ سربرگ باشد. */ #btnSettings svg { width: 18px; height: 18px; } /* ---------- بازی‌های در جریان: بالای همه؛ بی‌بازی → کلِ بخش جمع می‌شود */ .home-ongoing-sec:has(> #ongoingCard.hidden) { display: none; } /* ---------- ریتینگ‌ها: یک ردیفِ جمع‌وجور (رپید/بلیتز/بولت/پازل)؛ لمس → پروفایل */ .hs-panel.hs-compact { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding: 0; text-align: center; color: var(--text); cursor: pointer; } .hs-item { --tint: var(--firuzeh); display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 5px; row-gap: 1px; padding: var(--s3) var(--s1); min-width: 0; } .hs-item + .hs-item { border-inline-start: 1px solid var(--line); } .hs-puzzle { --tint: var(--live); } .hs-compact .hs-ic { display: grid; place-items: center; width: auto; height: auto; margin: 0; background: none; border: 0; color: var(--tint); } .hs-compact .hs-ic svg { width: 15px; height: 15px; } .hs-compact .hs-val { font-size: var(--t-18); font-weight: 800; line-height: 1.2; } .hs-compact .hs-name { grid-column: 1 / -1; font-size: var(--t-11); font-weight: 600; color: var(--muted); } .hs-item.is-empty .hs-val { color: var(--muted); opacity: .55; } .hs-item.is-empty .hs-ic { color: var(--muted); } .home-stats-strip-sec .hs-skel { height: 64px; } /* ---------- شیتِ شروعِ بازی: زمان‌ها همیشه باز، ردیف به ردیف زیرِ دسته */ .tc-groups { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s3); } .tcg-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: var(--s2); } .tcg-cat { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--t-12); font-weight: 700; color: var(--muted); white-space: nowrap; } .tcg-cat svg { width: 14px; height: 14px; flex: 0 0 auto; } .tcg-bullet .tcg-cat svg { color: var(--pf-bullet); } .tcg-blitz .tcg-cat svg { color: var(--pf-blitz); } .tcg-rapid .tcg-cat svg { color: var(--pf-rapid); } .tcg-classical .tcg-cat svg { color: var(--pf-classical); } .tcg-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .tc-groups .tc-btn { padding: 9px 2px; min-width: 0; } .tc-groups .tc-time { font-size: var(--t-13); white-space: nowrap; } .tc-groups .tc-cat { display: none; } .tc-groups .tc-btn-custom::after { top: 1px; inset-inline-end: 3px; } /* گوشیِ خیلی باریک: نامِ دسته بالای ردیف، تا کاشی‌ها جا داشته باشند */ @media (max-width: 359px) { .tcg-row { grid-template-columns: 1fr; gap: 4px; } } #paneOnline .variant-field { margin-bottom: var(--s3); } #paneOnline #btnQueue { margin-top: 0; } #paneOnline #homeMsg:empty { display: none; } /* عددِ «منتظر» روی کاشیِ زمان — نشانِ اعلانِ آشنا، گوشه‌ی آغازِ کاشی (گوشه‌ی پایانی مالِ ⚙ دلخواه است). حلقه‌ی همرنگِ کارت جدایش می‌کند، حتی روی کاشیِ انتخاب‌شده. */ .tc-groups .tc-btn { position: relative; } .tc-wait { position: absolute; top: -6px; inset-inline-start: -5px; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--live); color: var(--on-accent); box-shadow: 0 0 0 2px var(--panel); font-size: var(--t-10); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; } .seek-legend { display: flex; align-items: center; gap: 7px; margin: calc(-1 * var(--s1)) 0 var(--s3); font-size: var(--t-12); color: var(--muted); line-height: 1.5; } .seek-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--live); } /* «یک نفر با زمانِ دیگری منتظر است» — زیرِ وضعیتِ صف، فقط وقتی در صفِ خودت تنهایی */ .q-suggest { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--live-soft); border: 1px solid color-mix(in srgb, var(--live) 35%, transparent); } .q-suggest-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); } .q-suggest-txt { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: var(--t-14); } .q-suggest-txt b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .q-suggest-txt small { flex-basis: 100%; font-size: var(--t-12); color: var(--muted); line-height: 1.5; } .q-suggest .btn { flex: 0 0 auto; margin: 0; } /* «بازی با دوست» — جمع‌شده؛ رنگ فقط همین‌جا معنا دارد */ .play-friend { margin-top: var(--s3); border-top: 1px solid var(--line); } .play-friend > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) 0 var(--s1); cursor: pointer; font-weight: 700; font-size: var(--t-14); color: var(--text); } .play-friend > summary::-webkit-details-marker { display: none; } .play-friend > summary .chev { flex: 0 0 auto; width: 8px; height: 8px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; } .play-friend[open] > summary .chev { transform: rotate(-135deg); } .play-friend-body { padding-top: var(--s2); } .play-friend-body > .hint-text { margin-bottom: var(--s2); } /* ---------- دسکتاپ: «بازی» در سایدبار هم (قبلاً فقط روی گوشی بود) */ @media (min-width: 1100px) { .bn-tab-mobile-play { display: flex; } } #paneOnline .play-lobby-btn { margin-top: var(--s2); } /* ================================================================ ۱۳. صفحه‌های تخته روی گوشی (CHANGELOG-BOARD-MOBILE.md) ================================================================ */ @media (max-width: 767px) { /* تخته‌هایی که تا لبه‌ی صفحه می‌روند گوشه‌ی گرد نمی‌خواهند — گوشه‌ی گرد کنارِ لبه‌ی شیشه‌ی گوشی بریده به‌نظر می‌رسید. سایه همان است. درس و کاوشگر (عمداً با حاشیه) دست نخوردند. */ #screenLayer > #play .board, #screenLayer > #puzzle #boardHost .board, #screenLayer > #explore #exploreHost .board, #screenLayer > #tutorialPlay #tutBoardHost .board, #screenLayer > #rush #rushBoardHost .board, #screenLayer > #storm #stormBoardHost .board, #screenLayer > #battle #battleBoardHost .board, #screenLayer > #spectate #watchBoardHost .board, #screenLayer > #anBoardTool #abBoardHost .board { border-radius: 0; } /* تماشا: مثلِ صفحه‌ی بازی تا لبه (قبلاً ۳۲px باریک‌تر از همان تخته در بازی بود) */ #screenLayer > #spectate #watchBoardHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 330px)); margin-inline: 0; align-self: center; } /* تخته‌ی تحلیل: عنوانِ بالای تخته برداشته شد (همان در منو نوشته شده بود)، تخته تا لبه، و ناوبری/ابزار کوتاه‌تر — تا تخته + موتور + خط‌ها + ناوبری بی‌اسکرول در صفحه جا شوند. #abBody روی گوشی ستونِ فلکس می‌شود تا تخته با align-self وسط بنشیند (#abSide هم display:contents است، پس بچه‌هایش آیتم‌های همین ستون‌اند). */ #screenLayer > #anBoardTool > .puzzle-head { display: none; } #screenLayer > #anBoardTool > #abBody { display: flex; flex-direction: column; } #screenLayer > #anBoardTool > #abBody > *, #screenLayer > #anBoardTool #abSide > * { flex: 0 0 auto; } #screenLayer > #anBoardTool #abBoardHost { width: calc(100% + var(--gutter) * 2); max-width: min(calc(100% + var(--gutter) * 2), calc(var(--app-100dvh) - 300px)); align-self: center; } #screenLayer > #anBoardTool #abEvalBar { margin-top: 6px; } #abNav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--s2); } #abNav .btn { margin: 0; padding: 8px 0; border-radius: var(--r-sm); } #abNav .btn:disabled { opacity: 0.4; cursor: default; } #abBoardControls { margin-top: 6px; } #abBoardControls .ic { width: 42px; height: 38px; } #abBoardControls .btn { padding: 8px var(--s2); border-radius: var(--r-sm); } #abActionRow { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; margin-top: var(--s2); } #abActionRow .btn { margin: 0; padding: 10px var(--s2); } } /* ---------- جای‌نگه‌دارِ بارگذاری (skeletonHtml در js/core.js، و همتای ایستایش در index.html) */ .skel { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0; } .skel-row { display: block; height: 14px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--raised) 0%, color-mix(in srgb, var(--raised) 55%, var(--panel)) 50%, var(--raised) 100%); background-size: 200% 100%; animation: skelShimmer 1.3s ease-in-out infinite; } .skel-row:nth-child(3n + 1) { width: 92%; } .skel-row:nth-child(3n + 2) { width: 68%; } .skel-row:nth-child(3n) { width: 80%; } @keyframes skelShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } } /* ================================================================ ۱۴. اولین ورود و حالت‌های خالی (CHANGELOG-ONBOARDING.md) نقشِ تزئینیِ این بخش فقط «یک خانه‌ی تخته با یک مهره» است — همان رنگِ خانه‌ی روشنِ تمِ تخته (--sq-light)، تا با هر تمی که کاربر انتخاب کرده هم‌خوان باشد. ================================================================ */ .ob-sheet .card.ob-card { max-width: 400px; padding: var(--s5) var(--s4) var(--s4); } .ob-kicker { margin: 0 0 2px; font-size: var(--t-12); font-weight: 700; color: var(--firuzeh); } .ob-card h2 { margin: 0 0 4px; font-size: var(--t-20); line-height: 1.35; } .ob-sub { margin-bottom: var(--s4); } .ob-levels { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); } .ob-level, .ob-first { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; padding: 10px var(--s3); border-radius: var(--r); border: 1px solid var(--line); background: var(--raised); transition: border-color .12s, background .12s, transform .08s; } .ob-level:active { transform: scale(.985); } .ob-level[aria-checked="true"] { border-color: var(--firuzeh); background: var(--accent-soft); } .ob-piece { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-sm); padding: 3px; background: var(--sq-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sq-dark) 35%, transparent); } .ob-piece .pc, .es-piece .pc { position: static; width: 100%; height: 100%; } .ob-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ob-txt b { font-size: var(--t-15); font-weight: 700; color: var(--text); } .ob-txt small { font-size: var(--t-12); color: var(--muted); line-height: 1.55; } .ob-first { background: var(--accent-soft); border-color: color-mix(in srgb, var(--firuzeh) 45%, var(--line)); margin: var(--s2) 0 var(--s3); } .ob-first .ob-piece { width: 52px; height: 52px; } .ob-rating { margin: 0 0 var(--s3); font-variant-numeric: tabular-nums; } .ob-card .btn.lg { margin-top: 0; } .ob-card .ob-skip { margin-top: var(--s2); color: var(--muted); border-color: transparent; } .ob-card .btn:disabled { opacity: .45; } /* حالتِ خالی: مهره + جمله + «کارِ بعدی» */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s3); text-align: center; } .es-piece { width: 40px; height: 40px; border-radius: var(--r-sm); padding: 3px; opacity: .9; background: var(--sq-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sq-dark) 35%, transparent); } .es-text { margin: 0; color: var(--muted); font-size: var(--t-13); line-height: 1.6; } .btn.sm.es-btn { border-color: color-mix(in srgb, var(--firuzeh) 55%, var(--line)); color: var(--firuzeh); background: transparent; } .btn.sm.es-btn:hover { background: var(--accent-soft); } #home #friendsList.friend-strip > .empty-state { width: 100%; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); } /* ریتینگِ موقت (هنوز بازی‌ای در این سرعت نشده): «؟» کوچکِ کم‌رنگ کنارِ عدد */ .hs-prov { font-style: normal; font-size: .62em; font-weight: 700; color: var(--muted); margin-inline-start: 1px; vertical-align: super; } .hs-item.is-empty .hs-val { opacity: .8; } /* ================================================================ ۱۵. ورود / ثبت‌نام (CHANGELOG-AUTH-REDESIGN.md) فقط دو زبانه، یک ستونِ باریک و وسط‌چین (گوشی و دسکتاپ یکسان)، بالایش همان عکسِ هیروی خانه (بی‌کراپ) با یک جمله‌ی خوش‌آمد که با زبانه عوض می‌شود. ================================================================ */ body.auth-screen header .hdr-right { visibility: hidden; } /* بیرون از حساب، زنگوله و پاکت معنا ندارند */ #auth .auth-wrap { max-width: 440px; margin: 0 auto; padding-top: var(--s2); } .auth-hero { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: var(--s4); } /* نوشته روی نیمه‌ی خالیِ خودِ عکس — راستِ فیزیکی، مستقل از زبان (همان دلیلِ هیروی خانه) */ .auth-hero-body { position: absolute; top: 0; bottom: 0; right: 0; width: 54%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--s3) var(--s4); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4); } .auth-hero-title { margin: 0; color: var(--on-photo); font-size: var(--t-18); font-weight: 800; line-height: 1.35; } .auth-hero-sub { margin: 0; color: var(--on-photo-muted); font-size: var(--t-12); line-height: 1.55; } /* گوشی: عکس کوتاه است — فقط جمله‌ی خوش‌آمد، تا نوشته روی مهره‌ها نیفتد */ @media (max-width: 767px) { .auth-hero-sub { display: none; } } @media (min-width: 768px) { .auth-hero-body { width: 46%; } } .seg.auth-tabs { margin: 0 0 var(--s3); padding: 4px; border-radius: var(--r); } .seg.auth-tabs button { padding: 10px 4px; border-radius: var(--r-sm); font-size: var(--t-15); font-weight: 700; } .seg.auth-tabs button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: var(--shadow-sm); } :root[data-appearance="light"] .seg.auth-tabs button[aria-pressed="true"] { background: var(--panel); } #auth .auth-card { padding: var(--s5) var(--s4) var(--s4); border-radius: var(--r-lg); margin-bottom: 0; } .auth-card[data-method="otp"] #googleAuthBlock { display: none; } .auth-card .btn-google { background: var(--panel); } .auth-card .btn.primary.lg { margin-top: var(--s1); } .auth-card .auth-or { margin: var(--s4) 0; } /* رمز: برچسب + «فراموش کردی؟» در یک ردیف، و چشمِ «نمایشِ رمز» داخلِ خودِ فیلد */ .field.auth-pw-field { margin-bottom: var(--s3); font-size: var(--t-13); color: var(--muted); } .field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); } .pw-field { position: relative; display: block; margin-top: var(--s1); } .pw-field input { margin-top: 0; padding-inline-end: 46px; } .pw-eye { position: absolute; top: 0; bottom: 0; inset-inline-end: 2px; width: 42px; display: grid; place-items: center; color: var(--muted); border-radius: var(--r-sm); } .pw-eye svg { width: 18px; height: 18px; } .pw-eye.on { color: var(--firuzeh); } html[dir="rtl"] #auth input[dir="ltr"] { text-align: right; } html[dir="rtl"] #auth input[dir="ltr"]:not(:placeholder-shown) { text-align: left; } .auth-link { color: var(--firuzeh); font-weight: 600; font-size: var(--t-13); padding: 2px 0; } .auth-link.sm { font-size: var(--t-12); } .auth-link:hover { text-decoration: underline; text-underline-offset: 3px; } #btnRegRestart { display: block; width: 100%; text-align: center; margin-top: var(--s2); } .auth-note { font-size: var(--t-12); margin-bottom: var(--s3); } /* راهِ دوم (کدِ یک‌بار مصرف) — آرام، زیرِ دکمه‌ی اصلی */ .auth-alt { display: block; width: 100%; margin-top: var(--s3); padding: 10px var(--s2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-13); font-weight: 600; text-align: center; } .auth-alt:hover { color: var(--text); } .auth-back { display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 var(--s2); color: var(--muted); font-size: var(--t-13); font-weight: 600; padding: 4px 0; } .auth-back:hover { color: var(--text); } .auth-back-ic { display: grid; place-items: center; } .auth-back-ic svg { width: 14px; height: 14px; } html[dir="rtl"] .auth-back-ic svg { transform: scaleX(-1); } .auth-send-row { align-items: stretch; } .auth-send-row > input { flex: 1 1 auto; margin-top: 0; } .auth-send-row > #btnAuthSend { flex: 0 0 auto; width: auto; margin: 0; padding-inline: var(--s4); white-space: nowrap; } #otpMethod .seg { margin-top: var(--s2); } #authCodeBlock { margin-top: var(--s3); } .auth-foot { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s4); text-align: center; } #guestCard { display: flex; flex-direction: column; align-items: center; gap: 2px; } .auth-guest { color: var(--text); font-weight: 700; font-size: var(--t-14); padding: 8px var(--s4); border-radius: var(--r-btn); border: 1px solid var(--line); } .auth-guest:hover { background: var(--raised); } .auth-foot-note { margin: 4px 0 0; max-width: 320px; font-size: var(--t-12); color: var(--muted); line-height: 1.6; } #btnAuthClose { width: auto; padding-inline: var(--s5); } .auth-privacy { font-size: var(--t-12); color: var(--faint); text-decoration: none; } .auth-privacy:hover { color: var(--muted); text-decoration: underline; } /* ================================================================ ۱۶. خانه‌ی دوستونه روی دسکتاپ (CHANGELOG-AUTH-REDESIGN.md) روی گوشی/تبلت .home-col «display: contents» است — یعنی انگار نیست و ترتیبِ تک‌ستونیِ قبلی دست نمی‌خورد. از ۱۱۰۰px: ستونِ اصلی (کارِ بعدی) + ستونِ کناری (تاریخچه، اجتماع، گفت‌وگو). ================================================================ */ .home-col { display: contents; } @media (min-width: 1100px) { #home:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); column-gap: var(--s5); align-items: start; max-width: none; } .home-col { display: block; min-width: 0; } /* هیرو بالای هر دو ستون، تمام‌عرض */ #home:not(.hidden) > .home-hero { grid-column: 1 / -1; } /* تمام‌عرض: نوارِ پهن (۱۶:۵)، نه عکسِ ۸:۳ که روی مانیتورِ بزرگ نیمِ صفحه را می‌گرفت */ #home > .home-hero .photo-card-img { aspect-ratio: 16 / 5; height: auto; object-fit: cover; object-position: 50% 45%; } /* ستونِ کناری باریک است: بازی‌های اخیر و بنرها زیرِ هم، نه کنارِ هم */ .home-col-side .home-lower-grid { flex-direction: column; align-items: stretch; gap: var(--s4); } .home-col-side .home-lower-grid .home-history, .home-col-side .home-lower-grid .home-side { flex: 0 0 auto; width: 100%; } .home-col-side .home-side { display: flex; flex-direction: column; gap: var(--s3); } .home-col-side #homeAchCard, .home-col-side #homeTourBanner, .home-col-side .home-quote-card { width: 100%; max-width: none; margin: 0; } } /* ================================================================ ۹-ب. پروفایل — ویترین (static/js/profile.js، CHANGELOG-PROFILE.md) گوشی: یک ستون. دسکتاپ: کارتِ هویت در ستونِ کناریِ چسبان + آمار در ستونِ اصلی. ================================================================ */ .trend-tabs button { padding-block: 10px; font-size: var(--t-13); } /* روندِ تسلطِ دوره‌ها (mastery.js) */ .pf-layout { display: block; } .pf-main > * + * { margin-top: 0; } .pf-block { margin-bottom: var(--s3); } .pf-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px var(--s2); } .pf-sec-head h2, .pf-ov-head h2, .pf-tr-head h2 { margin: 0; font-size: var(--t-15); font-weight: 800; } /* ---- کارتِ هویت ---- */ .pf-head { position: relative; text-align: center; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow-sm); } /* نوارِ بالا: یک گوشه‌ی تخته — خانه‌های شطرنجیِ کم‌رنگ که رو به پایین در کارت محو می‌شوند */ .pf-cover { position: relative; height: 76px; margin: 0 calc(-1 * var(--s4)); background: radial-gradient(90% 130% at 50% -30%, color-mix(in srgb, var(--firuzeh) 22%, transparent), transparent 70%), var(--panel); border-bottom: 0; } .pf-cover::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(color-mix(in srgb, var(--firuzeh) 10%, transparent) 0 25%, transparent 0 50%) 50% 0 / 32px 32px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); } :root:not([data-appearance="light"]) .pf-cover::before { opacity: .8; } .pf-ava-wrap { position: relative; width: 84px; margin: -46px auto var(--s2); z-index: 1; } #pfAva.ava.xl { width: 84px; height: 84px; border-radius: var(--r-xl); font-size: calc(32px * var(--fs, 1)); box-shadow: 0 0 0 4px var(--panel), 0 10px 24px -8px rgba(0, 0, 0, .45); } .pf-online { position: absolute; inset-inline-end: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--good); border: 3px solid var(--panel); } .pf-name { margin: 0; font-size: var(--t-24); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; } .pf-name-txt { unicode-bidi: plaintext; overflow-wrap: anywhere; } .pf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--s2); } .pf-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: var(--t-12); font-weight: 600; white-space: nowrap; } .pf-chip svg { width: 13px; height: 13px; opacity: .8; } .pf-chip.on { color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); } .pf-chip.on .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* استریک داخلِ برچسب: خودِ قرص (قاب/پس‌زمینه‌ی قبلی) لازم نیست */ .pf-chip.pf-streak { padding-inline: 8px 10px; margin: 0; } .pf-chip.pf-streak .day-streak { padding: 0; gap: 3px; background: none; border: 0; } .pf-chip.pf-streak .day-streak b { font-size: var(--t-12); color: var(--text); } .pf-chip.pf-streak .day-streak .ds-flame { width: 12px; height: 16px; } .pf-head .pf-bio { font-size: var(--t-14); margin: var(--s2) auto 0; max-width: 340px; } .pf-head .pf-actions { margin-top: var(--s3); } .pf-head .pf-actions .btn { min-width: 112px; margin: 0; } .pf-report { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); cursor: pointer; } .pf-report svg { width: 15px; height: 15px; } .pf-report:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); } .pf-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s3) calc(-1 * var(--s4)) 0; border-top: 1px solid var(--line); } .pf-count { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 10px 4px; background: none; border: 0; border-inline-end: 1px solid var(--line); color: var(--muted); font: inherit; font-size: var(--t-11); white-space: nowrap; } .pf-count:last-child { border-inline-end: 0; } .pf-count b { color: var(--text); font-size: var(--t-16); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; } button.pf-count { cursor: pointer; } button.pf-count:hover b { color: var(--firuzeh); } button.pf-count:active { background: var(--raised); } .pf-count > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---- ردیفِ کاشی‌های ریتینگ (CHANGELOG-PROFILE-PREMIUM.md) ---- روی گوشی افقی اسکرول می‌شود و تا لبه‌ی صفحه می‌رود (کاشیِ نیمه‌پیدا یعنی «ادامه دارد»)؛ از تبلت به بالا کاشی‌ها جا را پر می‌کنند. حسِ «پریمیوم» از جزئیات می‌آید، نه تزئین: سطحی که از بالا کمی به رنگِ همان سرعت می‌زند، لبه‌ی روشنِ یک‌پیکسلی، عددِ درشت با ارقامِ هم‌عرض، تغییرِ ۳۰ روزه و نمودارِ کوچکِ همان سرعت. */ .pf-strip { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) var(--s2); padding: 2px var(--gutter) 12px; } .pf-strip::-webkit-scrollbar { display: none; } .pf-strip .pf-tile { flex: 0 0 128px; scroll-snap-align: start; } @media (min-width: 768px) { .pf-strip { gap: 8px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .pf-strip .pf-tile { flex: 1 0 104px; } } .pf-tile { --acc: var(--firuzeh); position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 11px 12px 10px; margin: 0; border-radius: var(--r-card); overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 8%, var(--panel)) 0%, var(--panel) 62%); border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), var(--shadow-sm); color: var(--text); font: inherit; text-align: start; transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease; } .pf-tile.bullet { --acc: var(--pf-bullet); } .pf-tile.blitz { --acc: var(--pf-blitz); } .pf-tile.rapid { --acc: var(--pf-rapid); } .pf-tile.classical { --acc: var(--pf-classical); } .pf-tile.correspondence { --acc: var(--pf-corr); } .pf-tile.puzzle { --acc: var(--saffron); } button.pf-tile { cursor: pointer; } button.pf-tile:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); } button.pf-tile:active { transform: scale(.98); } /* کاشیِ نمودارِ فعلی: قابِ رنگِ همان سرعت و سایه‌ای نرم به همان رنگ */ button.pf-tile[aria-pressed="true"] { border-color: color-mix(in srgb, var(--acc) 75%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 17%, var(--panel)) 0%, color-mix(in srgb, var(--acc) 4%, var(--panel)) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px -14px var(--acc); } .pf-tile-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .pf-tile-ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); } .pf-tile-ic svg { width: 13px; height: 13px; } .pf-tile-name { flex: 1; min-width: 0; font-size: var(--t-12); font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-tile-best { flex: 0 0 auto; width: 16px; height: 16px; color: var(--saffron); display: grid; place-items: center; } .pf-tile-best svg { width: 14px; height: 14px; } .pf-tile-num { margin-top: 9px; font-size: var(--t-24); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .pf-tile-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; min-width: 0; font-size: var(--t-11); color: var(--muted); white-space: nowrap; } .pf-tile-sub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* تغییرِ ۳۰ روزه: قرصِ کوچکِ سبز/قرمز */ .pf-tile-d { flex: 0 0 auto; padding: 1px 5px; border-radius: var(--r-pill); font-size: var(--t-10); font-weight: 800; font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .pf-tile-d.up { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); } .pf-tile-d.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); } .pf-tile-d.zero { color: var(--muted); background: var(--raised); } /* پایینِ کاشی: نمودارِ کوچک (یا نوارِ برد/باخت وقتی هنوز نقطه‌ی کافی نیست) — همیشه ته‌نشین */ .pf-tile-foot { position: relative; height: 26px; margin-top: auto; padding-top: 8px; box-sizing: content-box; } .pf-spark { display: block; width: 100%; height: 26px; overflow: visible; } .pf-spark-area { fill: color-mix(in srgb, var(--acc) 15%, transparent); } .pf-spark-line { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .pf-spark-dot { position: absolute; width: 6px; height: 6px; margin: 4px 0 0 -3px; border-radius: 50%; translate: 0 -50%; background: var(--acc); box-shadow: 0 0 0 2px var(--panel); } .pf-tile-foot .pf-tile-bar { position: absolute; inset-inline: 0; bottom: 0; } .pf-tile-bar { display: flex; height: 3px; border-radius: var(--r-pill); overflow: hidden; background: var(--raised); } .pf-tile-bar i { display: block; height: 100%; } .pf-tile-bar .w { background: var(--good); } .pf-tile-bar .d { background: var(--muted); opacity: .5; } .pf-tile-bar .l { background: var(--danger); } /* سرعتی که هنوز بازی نشده: کاشیِ باریکِ خط‌چین — آیکون و نام، بی‌عدد. جا را به سرعت‌های واقعی می‌دهد */ .pf-tile.empty { background: transparent; border: 1px dashed var(--line); box-shadow: none; align-items: center; justify-content: center; gap: 6px; padding-inline: 4px; text-align: center; } .pf-strip .pf-tile.empty { flex: 0 0 80px; } @media (min-width: 768px) { .pf-strip .pf-tile.empty { flex: 0 0 66px; } } .pf-tile.empty .pf-tile-top { flex-direction: column; gap: 6px; } .pf-tile.empty .pf-tile-ic { background: var(--raised); color: var(--faint); } .pf-tile.empty .pf-tile-name { flex: 0 0 auto; max-width: 64px; font-size: var(--t-11); font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: break-word; hyphens: auto; /* «Correspondence» دو خط، نه «Correspo…» */ } /* ---- زبانه‌ها: خلاصه | بازی‌ها | پیشرفت — زیرِ سربرگ می‌چسبند ---- */ .pf-tabs { --pf-tabs-top: calc(52px + env(safe-area-inset-top, 0px)); position: sticky; top: var(--pf-tabs-top); z-index: 5; margin: 0 calc(-1 * var(--gutter)) var(--s3); padding: var(--s2) var(--gutter); background: var(--ink); /* محتوای زیرِ نوارِ چسبیده را می‌پوشاند */ } .pf-tabs-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--line); } .pf-tabs button { padding: 8px 4px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: inherit; font-size: var(--t-13); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .pf-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--firuzeh) 16%, var(--panel)); color: var(--firuzeh); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--firuzeh) 35%, transparent); } .pf-tabs button:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 1px; } @media (min-width: 768px) { .pf-tabs { --pf-tabs-top: calc(60px + env(safe-area-inset-top, 0px)); margin-inline: 0; padding-inline: 0; } } .pf-pane > .card + .card, .pf-pane > .card + .pf-swipe, .pf-pane > .pf-swipe + .card { margin-top: 0; } .pf-pane { animation: pf-pane-in .18s ease-out; } @keyframes pf-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* جای نمودار وقتی هنوز چند بازیِ رتبه‌دار نیست */ .pf-trend-soon { margin: var(--s3) 0 0; padding: var(--s3); border-radius: var(--r-sm); background: var(--raised); font-size: var(--t-13); color: var(--muted); line-height: 1.7; text-align: center; } /* ---- روندِ ریتینگ (رنگِ خط = رنگِ سرعتِ انتخاب‌شده؛ --acc را paintTrend می‌گذارد) ---- */ .pf-overview-card { --acc: var(--firuzeh); } .pf-ov-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); } .pf-ov-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--raised); } .pf-ov-seg button { padding: 5px 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: inherit; font-size: var(--t-12); font-weight: 700; cursor: pointer; white-space: nowrap; } .pf-ov-seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); } .pf-ov-one { font-size: var(--t-12); font-weight: 700; color: var(--muted); padding: 4px 10px; border-radius: var(--r-pill); background: var(--raised); } .pf-ov-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .pf-ov-num { font-size: var(--t-40); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pf-ov-d { font-size: var(--t-16); font-weight: 800; font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .pf-ov-d.up { color: var(--good); } .pf-ov-d.down { color: var(--danger); } .pf-ov-d.zero { color: var(--muted); } .pf-ov-lbl { font-size: var(--t-12); color: var(--muted); } .pf-ov-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: var(--t-12); color: var(--muted); } .pf-ov-facts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .pf-ov-ranges { display: flex; gap: 4px; margin-top: var(--s3); padding: 3px; border-radius: var(--r-sm); background: var(--raised); } .pf-ov-ranges button { flex: 1 1 0; min-width: 0; padding: 6px 2px; border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); font: inherit; font-size: var(--t-12); font-weight: 600; cursor: pointer; white-space: nowrap; } .pf-ov-ranges button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 800; box-shadow: var(--shadow-sm); } .pf-ov-none { margin: var(--s4) 0 var(--s2); text-align: center; } .tg-wrap { position: relative; margin-top: var(--s3); } .pf-overview-card .trend-svg { width: 100%; height: auto; display: block; margin: 0; min-height: 0; direction: ltr; touch-action: pan-y; cursor: crosshair; } .tg-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; } .tg-lbl { fill: var(--faint); } .tg-path { fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } .tg-halo { fill: var(--acc); opacity: .18; } .tg-dot { fill: var(--acc); stroke: var(--panel); stroke-width: 2; } .tg-cur-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; } .tg-cur-dot { fill: var(--panel); stroke: var(--acc); stroke-width: 2.5; } .tg-tip { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; border-radius: var(--r-sm); background: var(--text); color: var(--ink); line-height: 1.35; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); } .tg-tip b { font-size: var(--t-14); font-weight: 800; font-variant-numeric: tabular-nums; } .tg-tip span { font-size: var(--t-11); opacity: .75; } /* ---- نتیجه‌ها ---- */ .pf-wl { margin: 0; } .pf-wl-head { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--t-13); font-weight: 800; } .pf-wl-head span + span { color: var(--muted); font-weight: 600; font-size: var(--t-12); } .pf-wl-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0 var(--s3); } .pf-wl-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px; border-radius: var(--r-sm); background: var(--raised); } .pf-wl-cell b { font-size: var(--t-20); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.25; } .pf-wl-cell span { font-size: var(--t-12); color: var(--muted); } .pf-wl-cell small { font-size: var(--t-11); color: var(--faint); font-variant-numeric: tabular-nums; } .pf-wl-cell.w b { color: var(--good); } .pf-wl-cell.l b { color: var(--danger); } .pf-wl-bar { height: 6px; } /* ---- اتاقِ افتخارات ---- */ .pf-tr-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); } .pf-tr-count { font-size: var(--t-13); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .pf-tr-bar { height: 4px; margin: 10px 0 var(--s3); border-radius: var(--r-pill); background: var(--raised); overflow: hidden; } .pf-tr-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--saffron), var(--firuzeh)); transition: width .4s ease; } #profile .trophy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); } @media (min-width: 560px) { #profile .trophy-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } #profile .trophy { --tier: var(--muted); aspect-ratio: auto; min-height: 104px; padding: 12px 4px 10px; gap: 7px; justify-content: flex-start; font: inherit; color: var(--text); cursor: pointer; border-radius: var(--r-card); } #profile .trophy[data-tier="bronze"] { --tier: #b9743c; } #profile .trophy[data-tier="silver"] { --tier: #9fb0ba; } #profile .trophy[data-tier="gold"] { --tier: #dbaa46; } #profile .trophy:not(.locked) { background: color-mix(in srgb, var(--tier) 11%, var(--panel)); border-color: color-mix(in srgb, var(--tier) 38%, var(--line)); } #profile .trophy .badge { width: 40px; height: 40px; flex: 0 0 auto; } #profile .trophy:not(.locked) .badge { box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tier) 70%, transparent); } #profile .trophy .nm { font-size: var(--t-11); font-weight: 600; } #profile .trophy.locked { background: var(--raised); } .tr-prog { width: 56%; height: 3px; margin-top: auto; border-radius: var(--r-pill); background: var(--panel); overflow: hidden; } .tr-prog i { display: block; height: 100%; background: var(--muted); border-radius: var(--r-pill); } #pfTrophyMore { width: 100%; margin-top: var(--s3); } /* ---- دسکتاپ: دو ستون ---- */ @media (min-width: 1100px) { #profile { max-width: 1080px; } .pf-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s5); align-items: start; } .pf-side { position: sticky; top: 92px; } .pf-head { margin-bottom: 0; } .pf-main { margin-top: 0; } .pf-tabs { --pf-tabs-top: 72px; } } @media (prefers-reduced-motion: reduce) { .pf-tile, .pf-tr-bar i, .pf-tabs button { transition: none; } button.pf-tile:active { transform: none; } .pf-pane { animation: none; } } /* ================= صندوقِ پیام‌ها (static/js/inbox.js) ================= لایه‌ی شناور روی همان صفحه: کارتی زیرِ سربرگ (دسکتاپ: زیرِ دکمه‌ی پاکت با زبانه‌ی کوچک؛ گوشی: تمام‌عرض با حاشیه)، ارتفاعِ محتوا و حداکثر کمی بالای لبه‌ی پایین (placePanel در JS). هر پیام یک کارتِ جمع‌وجور با کاشیِ آیکونِ رنگیِ نوعش؛ اعلامیه‌ی تازه کامل و با قابِ طلاییِ ملایم. متنِ قالب‌دار همان .rt-body است. */ html.ibx-open { overflow: hidden; } .ibx { position: fixed; inset: 0; z-index: 49; background: rgba(5, 7, 9, .42); opacity: 0; transition: opacity .18s ease; } :root[data-appearance="light"] .ibx { background: rgba(26, 33, 38, .22); } .ibx.in { opacity: 1; } .ibx-panel { position: fixed; display: flex; flex-direction: column; overflow: visible; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .55), 0 3px 10px -2px rgba(0, 0, 0, .3); transform-origin: var(--caret-x, 50%) 0; transform: translateY(-6px) scale(.97); transition: transform .22s cubic-bezier(.2, .8, .2, 1); } .ibx.in .ibx-panel { transform: none; } @media (prefers-reduced-motion: reduce) { .ibx, .ibx-panel { transition: none; transform: none; } } .ibx-caret { /* زبانه‌ی کوچک رو به دکمه‌ی پاکت */ position: absolute; top: -7px; left: calc(var(--caret-x, 50%) - 7px); width: 14px; height: 14px; background: var(--panel); border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); border-radius: 3px 0 0 0; } .ibx-panel.no-caret .ibx-caret { display: none; } .ibx-bar { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); padding: 12px 10px 8px 16px; padding-inline: 16px 10px; } .ibx-h { margin: 0; font-size: var(--t-16); font-weight: 800; color: var(--text); } .ibx-unread { padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--t-11); font-weight: 800; color: var(--firuzeh); background: color-mix(in srgb, var(--firuzeh) 14%, transparent); } .ibx-close { margin-inline-start: auto; width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; border: 0; background: none; color: var(--muted); cursor: pointer; } .ibx-close:hover, .ibx-close:focus-visible { background: var(--raised); color: var(--text); } .ibx-close svg { width: 18px; height: 18px; } .ibx-tabs { flex: 0 0 auto; display: flex; gap: 2px; padding: 3px; margin: 0 12px 8px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); } .ibx-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 5px 6px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; color: var(--muted); font-weight: 700; font-size: var(--t-12); white-space: nowrap; transition: background .15s, color .15s; } .ibx-tab .n { font-size: var(--t-10); opacity: .75; } .ibx-tab[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); } .ibx-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 12px 12px; border-radius: 0 0 18px 18px; scrollbar-width: thin; } .ibx-list { display: flex; flex-direction: column; gap: 8px; } .ibx-group { display: flex; align-items: center; gap: var(--s2); margin-top: 4px; font-size: var(--t-11); font-weight: 800; color: var(--muted); letter-spacing: .02em; } .ibx-group:first-child { margin-top: 0; } .ibx-group::after { content: ""; flex: 1; height: 1px; background: var(--line); } .ibx-item { --tone: var(--muted); display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); transition: opacity .18s ease, transform .18s ease, border-color .15s; } .ibx-item.tone-gold { --tone: var(--firuzeh); } .ibx-item.tone-blue { --tone: #3B82F6; } .ibx-item.tone-red { --tone: #E5484D; } .ibx-item.tone-teal { --tone: #1AA6A6; } .ibx-item.tone-green { --tone: #2FA866; } .ibx-item.tone-purple { --tone: #9B6BFF; } .ibx-item.unread { border-color: color-mix(in srgb, var(--tone) 40%, var(--line)); } .ibx-item.featured { border: 1px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--firuzeh) 75%, transparent), var(--line) 60%) border-box; } .ibx-item.inbox-link { cursor: pointer; } .ibx-item.inbox-link:active { transform: scale(.99); } .ibx-item:focus-visible { outline: 2px solid var(--firuzeh); outline-offset: 2px; } .ibx-item.leaving { opacity: 0; transform: scale(.97); } .ibx-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); } .ibx-ic svg { width: 18px; height: 18px; } .ibx-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ibx-top { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: var(--t-12); color: var(--muted); } .ibx-kind { color: var(--tone); font-weight: 800; white-space: nowrap; } .ibx-item.tone-gray .ibx-kind { color: var(--muted); } .ibx-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex: 0 0 auto; } .ibx-when { white-space: nowrap; } .ibx-edited { font-size: var(--t-11); opacity: .8; } .ibx-new { padding: 0 7px; border-radius: var(--r-pill); font-size: var(--t-10); font-weight: 800; line-height: 1.7; color: var(--on-accent); background: var(--tone); } .ibx-item.tone-gray .ibx-new { background: var(--firuzeh); } .ibx-del { margin-inline-start: auto; width: 28px; height: 28px; margin-block: -3px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); opacity: .55; cursor: pointer; } .ibx-del:hover, .ibx-del:focus-visible { opacity: 1; background: var(--raised); color: #E5484D; } .ibx-del svg { width: 15px; height: 15px; } .ibx-title { margin: 0; font-size: var(--t-14); line-height: 1.65; font-weight: 800; color: var(--text); overflow-wrap: anywhere; } .ibx-body { font-size: var(--t-14); line-height: 1.85; color: var(--text); } .ibx-item.untitled .ibx-body { margin-top: 1px; } .ibx-body p { margin: 0 0 .55em; } .ibx-body .rt-h { font-size: var(--t-14); margin: .8em 0 .15em; } .ibx-body .rt-q { margin: .6em 0; padding: 5px 10px; } .ibx-body.clamp { max-height: calc(1.85em * 4); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); } .ibx-more { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--firuzeh); font-weight: 800; font-size: var(--t-12); } .ibx-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 4px 11px; border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 800; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); } .ibx-item.tone-gray .ibx-go { color: var(--firuzeh); background: color-mix(in srgb, var(--firuzeh) 13%, transparent); } .ibx-go svg { width: 13px; height: 13px; } [dir="ltr"] .ibx-go svg { transform: scaleX(-1); } .ibx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--s5) var(--s4) var(--s4); } .ibx-empty-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; margin-bottom: 2px; background: var(--ink); border: 1px solid var(--line); color: var(--firuzeh); } .ibx-empty-ic svg { width: 22px; height: 22px; } .ibx-empty-t { margin: 0; font-weight: 800; font-size: var(--t-14); color: var(--text); } .ibx-empty-s { margin: 0; font-size: var(--t-12); color: var(--muted); max-width: 260px; line-height: 1.8; } .ibx-skel { display: flex; flex-direction: column; gap: 8px; } .ibx-skel span { height: 78px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); animation: ibxPulse 1.2s ease-in-out infinite; } @keyframes ibxPulse { 50% { opacity: .55; } }