/* ═══════════════════════════════════════════════════════════════════════
   icons-fx.css — اندازهی بزرگتر + افکتهای زندهی آیکونها
   ▌ این فایل باید «بعد از» style.css لود شود.
   ▌ معماری دو لایه (هیچ افکتی با دیگری تداخل ندارد):
       · span.i     ← افکتهای تعاملی (هاور دکمهها)
       · svg داخلی  ← افکتهای همیشگی (شناوری، چشمک و…)
   ▌ خاموشکردن همه: کلاس no-icon-fx روی <body>
   ▌ برای کاربرانی که «کاهش حرکت» سیستم را روشن کردهاند، خودکار خاموش میشود.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── ۱) اندازه — اگر کوچک/بزرگ بود فقط همین دو خط ───────── */
.i{width:1.4em;height:1.4em;vertical-align:-.3em;
   transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.i-btn{width:1.25em;height:1.25em}

/* ───────── ۲) افکتهای همیشگی — هرکدام متناسب با شخصیتش ───────── */

/* ماه: شناورِ آرام */
@keyframes icFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.i-moon svg{animation:icFloat 3.5s ease-in-out infinite}

/* خورشید: پرتوها آرام میچرخند */
@keyframes icSun{to{transform:rotate(360deg)}}
.i-sun svg{animation:icSun 22s linear infinite}

/* روح: شناور و محو */
@keyframes icGhost{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-2.5px);opacity:.6}}
.i-ghost svg{animation:icGhost 2.8s ease-in-out infinite}

/* آتش: لرزش شعله */
@keyframes icFlicker{0%,100%{transform:scale(1) skewX(0)}25%{transform:scale(1.06,.94) skewX(2.5deg)}50%{transform:scale(.94,1.07) skewX(-2deg)}75%{transform:scale(1.03,.97) skewX(1deg)}}
.i-fire svg{animation:icFlicker 1.1s ease-in-out infinite;transform-origin:50% 100%}

/* رعد: هر چند ثانیه یکبار برق میزند */
@keyframes icFlash{0%,84%,100%{opacity:1;transform:scale(1)}86%{opacity:.25;transform:scale(.88)}88%{opacity:1;transform:scale(1.14)}92%{opacity:.5;transform:scale(.95)}95%{opacity:1;transform:scale(1.06)}}
.i-bolt svg{animation:icFlash 4.5s linear infinite}

/* قلب: ضربان */
@keyframes icBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(1)}36%{transform:scale(1.1)}48%{transform:scale(1)}}
.i-heart svg{animation:icBeat 2s ease-in-out infinite}

/* ستاره: چشمک */
@keyframes icTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.78) rotate(22deg);opacity:.5}}
.i-star svg{animation:icTwinkle 2.6s ease-in-out infinite}

/* جرقه: پخش و چرخش */
@keyframes icSparkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.68) rotate(90deg);opacity:.55}}
.i-spark svg{animation:icSparkle 2.2s ease-in-out infinite}

/* الماس: برق میزند */
@keyframes icGlitter{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.6;transform:scale(1.08) rotate(5deg)}}
.i-diamond svg{animation:icGlitter 2.8s ease-in-out infinite}

/* چشم: پلک میزند */
@keyframes icBlink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.07)}}
.i-eye svg{animation:icBlink 4.5s infinite}

/* ساعت: تاب آونگی */
@keyframes icPendulum{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
.i-clock svg{animation:icPendulum 2s ease-in-out infinite;transform-origin:50% 10%}

/* ساعتشنی: پر میشود بعد برمیگردد */
@keyframes icFlip{0%,42%{transform:rotate(0)}52%,92%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.i-hourglass svg{animation:icFlip 6s cubic-bezier(.6,0,.4,1) infinite}

/* ترازو: تاب خوردن حول محور */
@keyframes icBalance{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.i-scales svg{animation:icBalance 3.4s ease-in-out infinite;transform-origin:50% 25%}

/* پرچم: اهتیزان در باد */
@keyframes icWave{0%,100%{transform:skewX(0)}25%{transform:skewX(-7deg)}75%{transform:skewX(7deg)}}
.i-flag svg{animation:icWave 2.4s ease-in-out infinite;transform-origin:17% 62%}

/* تاج: تکان روی سر */
@keyframes icCrownTilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.i-crown svg{animation:icCrownTilt 3s ease-in-out infinite}

/* هدف: پالس */
@keyframes icPing{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
.i-target svg{animation:icPing 2.2s ease-in-out infinite}

/* ایموجی: قلقِ شادی */
@keyframes icHappy{0%,100%{transform:translateY(0)}30%{transform:translateY(-1.5px)}50%{transform:translateY(0)}70%{transform:translateY(-.7px)}}
.i-emoji svg{animation:icHappy 1.7s ease-in-out infinite}

/* پاور: مثل LED آمادهبهکار نفس میکشد */
@keyframes icBreathe{0%,100%{opacity:1}50%{opacity:.5}}
.i-power svg{animation:icBreathe 2.4s ease-in-out infinite}

/* زنگ: هر چند ثانیه یکبار تکان میخورد (زنگ میزند) */
@keyframes icRing{
  0%,55%,100%{transform:rotate(0)}
  60%{transform:rotate(14deg)}
  64%{transform:rotate(-12deg)}
  68%{transform:rotate(10deg)}
  72%{transform:rotate(-8deg)}
  76%{transform:rotate(6deg)}
  80%{transform:rotate(-4deg)}
  85%{transform:rotate(2deg)}
}
.i-bell svg{animation:icRing 4.5s ease-in-out infinite;transform-origin:50% 5%}

/* ───────── ۳) افکتهای بافتمحور — فقط جایی که معنی دارد ───────── */

/* در شب ماه مهتاب میگیرد / در روز خورشید میدرخشد */
.phase-night .i-moon svg{filter:drop-shadow(0 0 5px rgba(154,167,255,.8))}
.phase-day .i-sun svg{filter:drop-shadow(0 0 5px rgba(244,198,92,.85))}

/* جمجمهی بنر مرگ: تکان میخورد */
@keyframes icSkullWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-3deg)}}
.death-banner .i-skull svg{animation:icSkullWobble 1.5s ease-in-out infinite}

/* تیکِ تأیید: در هاور، دایره و تیک جلوی چشم «کشیده» میشوند */
.i-checkCircle svg circle{stroke-dasharray:63;--l:63}
.i-checkCircle svg path{stroke-dasharray:7;--l:7}
@keyframes icDraw{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}}
.i-checkCircle:hover svg circle,button:hover .i-checkCircle svg circle{animation:icDraw .55s ease both}
.i-checkCircle:hover svg path,button:hover .i-checkCircle svg path{animation:icDraw .3s ease .4s both}

/* ───────── ۴) افکتهای تعاملی — روی هاور دکمهها ─────────
   (این بلاک «اول» میآید و بلاکهای اختصاصی بعدش آن را میپوشانند) ───────── */

/* همهی آیکونهای داخل هر دکمهای: پاپ فنری کوچک */
.i:hover,button:hover .i{transform:scale(1.13)}

/* رفرش: یک دور کامل */
.i-refresh:hover,button:hover .i-refresh{animation:icSpinOnce .55s cubic-bezier(.5,0,.35,1)}
@keyframes icSpinOnce{to{transform:rotate(360deg)}}

/* سطل آشغال / قفل / میکروفون خاموش: تکان */
.i-trash:hover,.i-lock:hover,.i-micOff:hover,
button:hover .i-trash,button:hover .i-lock,button:hover .i-micOff{animation:icShake .45s ease}
@keyframes icShake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-2px) rotate(-5deg)}40%{transform:translateX(2px) rotate(4deg)}60%{transform:translateX(-1.5px) rotate(-2deg)}80%{transform:translateX(1px) rotate(1deg)}}

/* + و ×: نیمدور میچرخند */
.i-plus:hover,button:hover .i-plus{transform:rotate(90deg) scale(1.08)}
.i-x:hover,button:hover .i-x{transform:rotate(90deg)}

/* تیک و میکروفون: پاپ */
.i-check:hover,.i-mic:hover,button:hover .i-check,button:hover .i-mic{animation:icPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes icPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

/* پخش: بزرگتر میشود */
.i-play:hover,button:hover .i-play{transform:scale(1.22)}

/* ارسال: هواپیما آمادهی پرتاب میشود */
.i-send:hover,button:hover .i-send{transform:translate(-2px,-2px) rotate(-14deg) scale(1.12)}

/* پاسخ: اشاره میکند */
.i-reply:hover,button:hover .i-reply{transform:translateX(-3px)}

/* فلش پایین: پرش */
.i-arrowDown:hover,button:hover .i-arrowDown{animation:icHop .45s ease}
@keyframes icHop{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* chevron: سُر میخورد */
.i-chevron:hover,button:hover .i-chevron{transform:translateX(3px)}

/* تاس و شافل: غلت میزنند */
.i-dice:hover,.i-shuffle:hover,button:hover .i-dice,button:hover .i-shuffle{animation:icRoll .6s ease}
@keyframes icRoll{0%,100%{transform:rotate(0) translateX(0)}25%{transform:rotate(-16deg) translateX(-2px)}50%{transform:rotate(12deg) translateX(2px)}75%{transform:rotate(-6deg) translateX(-1px)}}

/* زنگ: در هاور سریعتر و پرانرژیتر زنگ میزند */
.i-bell:hover svg,button:hover .i-bell svg{
  animation:icRing .9s ease-in-out infinite;
  transform-origin:50% 5%;
}

/* ───────── ۵) کنترل و دسترسپذیری ───────── */

/* کلید خاموشکردن: <body class="no-icon-fx"> */
.no-icon-fx .i,.no-icon-fx .i svg{animation:none!important;transform:none!important}

/* احترام به تنظیم «کاهش حرکت» کاربر */
@media (prefers-reduced-motion:reduce){
  .i,.i svg{animation:none!important;transition:none!important;transform:none!important}
}
/* ═══════════════════════════════════════════════════════════
   ۶) رنگبندی آیکونها — هماهنگ با انیمیشنها
   ▌ عوضکردن رنگ هر آیکون = فقط همین پالت
   ▌ خاموشکردن همه: <body class="no-icon-colors">
   ═══════════════════════════════════════════════════════════ */

/* ── ۶-۱) پالت ── */
/* بازی و نقشها */
.i-mask{--ic:#c9c4ff}
.i-ghost{--ic:#c9bcff}
.i-diamond{--ic:#8ab6ff}
.i-crown{--ic:#f4c65c}
.i-skull{--ic:#ff8a9b}
.i-scales{--ic:#f4c65c}
.i-target{--ic:#ff8a72}
.i-dice{--ic:#7ee0c0}
/* فاز و زمان */
.i-moon{--ic:#9aa7ff}
.i-sun{--ic:#f4c65c}
.i-hourglass{--ic:#e0b463}
.i-clock{--ic:#a8b4c8}
.i-flag{--ic:#ff778a}
/* گفتگو و پیام */
.i-chat{--ic:#7fd0ff}
.i-mail{--ic:#7fd0ff}
.i-send{--ic:#7fd0ff}
.i-reply{--ic:#a8b4c8}
.i-emoji{--ic:#f4c65c}
.i-notebook{--ic:#ffc98a}
.i-book{--ic:#ffc98a}
/* اکشن و کنترل */
.i-check{--ic:#55e0b7}
.i-checkCircle{--ic:#55e0b7}
.i-x{--ic:#ff778a}
.i-plus{--ic:#55e0b7}
.i-play{--ic:#55e0b7}
.i-power{--ic:#55e0b7}
.i-refresh{--ic:#a8b4c8}
.i-trash{--ic:#ff778a}
.i-mic{--ic:#55e0b7}
.i-micOff{--ic:#ff778a}
.i-shuffle{--ic:#c9c4ff}
.i-arrowDown{--ic:#a8b4c8}
.i-chevron{--ic:#a8b4c8}
.i-spark{--ic:#ffd98a}
/* کاربر و وضعیت */
.i-users{--ic:#7fd0ff}
.i-eye{--ic:#7ee0c0}
.i-lock{--ic:#f4c65c}
.i-heart{--ic:#ff6b8a}
.i-fire{--ic:#ff7849}
.i-bolt{--ic:#ffd94d}
.i-star{--ic:#ffd94d}
.i-bell{--ic:#ffca6c}
/* سند و داده */
.i-clipboard{--ic:#ffc98a}
.i-scroll{--ic:#e0c9a0}
.i-chart{--ic:#7ee0c0}
.i-layout{--ic:#a8b4c8}

/* ── ۶-۲) اعمال — یک قانون برای همه ──
   آیکونی که --ic ندارد، خودکار رنگِ متن اطرافش را میگیرد */
.i{color:var(--ic,currentColor);
   transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .25s}

/* کلید خاموشکردن کل رنگها */
body.no-icon-colors .i{color:currentColor}
body.no-icon-colors .i-ghost svg circle,
body.no-icon-colors .i-skull svg circle,
body.no-icon-colors .i-dice svg circle{fill:currentColor}

/* ── ۶-۳) استثناها — اینجاها آیکون باید رنگِ متن را بگیرد ──
   (روی گرادیان بنفشِ دکمهی ارسال، و ابزارهای پیام که با هاور سفید میشوند) */
.send-btn .i,
.message-tools .tool .i{--ic:currentColor}

/* ── ۶-۴) هالهی همرنگ — انیمیشنها با رنگ خودشان میدرخشند ──
   (currentColor یعنی: هر رنگی در پالت بگذاری، هاله خودش همرنگ میشود) */
.i-fire svg,.i-bolt svg,.i-heart svg,.i-star svg,
.i-spark svg,.i-diamond svg,.i-ghost svg,.i-bell svg
{filter:drop-shadow(0 0 4px currentColor)}
.i-moon svg,.i-sun svg{filter:drop-shadow(0 0 3px currentColor)}
/* در فاز درست، درخشش قویتر — این دو خط، نسخههای قبلی را خودکار بازنویسی میکنند */
.phase-night .i-moon svg{filter:drop-shadow(0 0 6px currentColor)}
.phase-day   .i-sun  svg{filter:drop-shadow(0 0 6px currentColor)}

/* ── ۶-۵) دونرنگ — چشمها و مهرهها با رنگ جدا میدرخشند ── */
.i-ghost svg circle{fill:#f6f3ff}   /* چشم روح: سفید درخشان */
.i-skull svg circle{fill:#ff4d68}   /* چشم جمجمه: قرمز جواهری */
.i-dice  svg circle{fill:#fff}      /* مهرههای تاس: سفید */

/* ── ۶-۶) هاور: هالهی محو همرنگ ── */
.i:hover,button:hover .i{filter:drop-shadow(0 0 4px currentColor)}

/* ── ۶-۷) حالت روشن (برای صفحهی تست) — رنگها خودکار تیرهتر میشوند ── */
body.light .i{color:color-mix(in srgb,var(--ic,currentColor) 62%,#141a28)}