/* ==========================================================================
   themes.css : رنگ و دکور هر فصل کالاف دیوتی موبایل
   هر فصل یک بلوک توکن دارد؛ دکورها مشترک‌اند و رنگشان از توکن‌ها می‌آید.
   راهنما: SEASON-THEME-GUIDE.md
   ========================================================================== */

/* ---------- فصل ۸ — Against All Fate (کولب Honkai Impact 3rd) ---------- */
body.t-s8{
  --bg:#05070e;
  --glow-1:rgba(52,120,255,.22);
  --panel:#0b1120;
  --panel-2:#111a2e;
  --text:#e9f0ff;
  --text-2:#cfdaf0;
  --muted:#8fa2c2;
  --line:rgba(255,255,255,.12);
  --pill-line:rgba(255,122,26,.42);
  --hud-line:rgba(120,190,255,.35);
  --fire:#ff7a1a;
  --fire-2:#e04f00;
  --fire-glow:rgba(255,122,26,.35);
  --live:#7bd63a;
  --unit-1:#16223c;
  --unit-2:#0a1120;
  --today-bg:rgba(255,122,26,.12);
  --today-ring:rgba(255,122,26,.18);
  --c-clan:#34d3ff;
  --c-event:#ff7a1a;
  --c-season:#b98cff;
  --hero-pos:50% 38%;
  --hero-pos-m:52% 32%;
  --ghost-pos:60% 42%;
  --sweep:rgba(120,190,255,.5);
}

/* ---------- تم پیش‌فرض تاکتیکی (وقتی تم فصل جدید هنوز گذاشته نشده) ---------- */
body.t-tactical{
  --bg:#070806;
  --glow-1:rgba(120,140,60,.2);
  --panel:#101208;
  --panel-2:#181c0e;
  --text:#f0f2e6;
  --text-2:#d9ddc8;
  --muted:#9aa383;
  --line:rgba(255,255,255,.12);
  --pill-line:rgba(255,122,26,.4);
  --hud-line:rgba(180,200,120,.3);
  --fire:#ff8a20;
  --fire-2:#d15a00;
  --fire-glow:rgba(255,138,32,.3);
  --live:#9ad63a;
  --unit-1:#1f2412;
  --unit-2:#0d1007;
  --today-bg:rgba(255,138,32,.12);
  --today-ring:rgba(255,138,32,.18);
  --c-clan:#9ad63a;
  --c-event:#ff8a20;
  --c-season:#e0c04a;
  --hero-pos:50% 42%;
  --hero-pos-m:54% 36%;
  --ghost-pos:60% 42%;
  --sweep:rgba(200,220,140,.45);
}

/* ---------- دکورهای مشترک هدر ---------- */
.hero-decor .scan{position:absolute;inset-inline:0;top:0;height:180px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--sweep),rgba(255,255,255,0));opacity:.12;mix-blend-mode:screen;animation:scanMove 7s linear infinite}
.hero-decor .lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 4px);opacity:.5;mix-blend-mode:overlay}
.hero-decor .radar{position:absolute;inset-inline-end:4%;bottom:14%;width:190px;height:190px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hud-line),0 0 40px rgba(0,0,0,.4);opacity:.55}
.hero-decor .radar::before{content:"";position:absolute;inset:18%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hud-line)}
.hero-decor .radar::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--sweep) 0deg,rgba(0,0,0,0) 48deg);animation:spin 3.6s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 62%,rgba(0,0,0,0) 63%);mask-image:radial-gradient(circle,#000 62%,rgba(0,0,0,0) 63%)}
.hero-decor .streak{position:absolute;top:var(--y,40%);inset-inline-start:var(--x,-10%);width:var(--w,180px);height:2px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--fire),rgba(255,255,255,0));opacity:0;animation:tracer var(--t,5s) linear infinite;animation-delay:var(--d,0s)}
.hero-decor .smoke{position:absolute;inset-inline:-10%;bottom:-20%;height:60%;background:radial-gradient(60% 80% at 30% 100%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),radial-gradient(50% 70% at 75% 100%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%);animation:haze 14s ease-in-out infinite alternate}
.hero-decor .brackets{position:absolute;inset:26px}
.hero-decor .brackets::before,.hero-decor .brackets::after{content:"";position:absolute;width:44px;height:44px;border:2px solid var(--fire);opacity:.55}
.hero-decor .brackets::before{top:0;inset-inline-start:0;border-width:2px 0 0 2px}
.hero-decor .brackets::after{bottom:0;inset-inline-end:0;border-width:0 2px 2px 0}

@keyframes scanMove{from{transform:translateY(-200px)}to{transform:translateY(105vh)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tracer{0%{opacity:0;transform:translateX(0)}6%{opacity:.9}40%{opacity:0;transform:translateX(120vw)}100%{opacity:0;transform:translateX(120vw)}}
@keyframes haze{from{transform:translateX(-4%)}to{transform:translateX(6%)}}

@media (max-width:760px){
  .hero-decor .radar{width:120px;height:120px;bottom:auto;top:12%;inset-inline-end:6%}
  .hero-decor .brackets{inset:14px}
  .hero-decor .brackets::before,.hero-decor .brackets::after{width:28px;height:28px}
}