/* ═══════════════════════════════════════════
   شکارچیِ نور: بی‌نهایت — استایل‌ها
   ═══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#04060e;font-family:'Vazirmatn',Tahoma,sans-serif;user-select:none;touch-action:none}
#c{position:fixed;inset:0;cursor:crosshair;touch-action:none}

/* ---------- لایه‌های تمام‌صفحه ---------- */
.overlay{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(4,6,14,.85);backdrop-filter:blur(12px);text-align:center;padding:24px;transition:opacity .9s}
.overlay.hidden{opacity:0;pointer-events:none}
.emoji{font-size:52px;filter:drop-shadow(0 0 24px rgba(251,191,36,.7))}
h1{font-size:34px;font-weight:900;background:linear-gradient(90deg,#fbbf24,#fb7185,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.desc{max-width:520px;font-size:14.5px;font-weight:300;line-height:2.1;color:#b9c3dd}
.desc b{color:#fbbf24;font-weight:700}
.tips{display:flex;gap:14px;font-size:12px;color:#8b96b0;flex-wrap:wrap;justify-content:center}
.btn{margin-top:6px;padding:13px 48px;font-family:inherit;font-size:16px;font-weight:700;color:#1a1206;background:linear-gradient(135deg,#fbbf24,#fb923c);border:none;border-radius:40px;cursor:pointer;transition:.3s;box-shadow:0 10px 34px rgba(251,146,60,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(251,146,60,.55)}
.btn.mini{padding:10px 26px;font-size:13.5px;margin-top:0}
.pRow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;justify-content:center}

/* ---------- ⭐ لوگو و اعتبارِ طراح ---------- */
#logo{width:min(560px,86vw);max-height:34vh;filter:drop-shadow(0 0 40px rgba(34,211,238,.25));animation:logoIn 1.1s cubic-bezier(.2,.9,.3,1.1)}
@keyframes logoIn{from{opacity:0;transform:scale(.86) translateY(18px)}}
.credit{margin-top:14px;font-size:12.5px;font-weight:300;color:#8b96b0;direction:rtl}
.credit b{color:#fbbf24;font-weight:700}

/* ---------- HUD ---------- */
#hud{position:fixed;top:14px;right:14px;left:14px;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;opacity:0;transition:opacity .8s;pointer-events:none}
.grp{pointer-events:auto}
#score{font-size:34px;font-weight:900;color:#ffe9c4;text-shadow:0 0 26px rgba(251,191,36,.5);line-height:1;display:inline-block}
#score.pop{animation:pop .3s}
@keyframes pop{50%{transform:scale(1.22)}}
#best{font-size:11.5px;color:#8b96b0;margin-top:4px}
#lifeBox{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
#hearts{display:flex;gap:6px;direction:ltr}
#hearts i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a5f3fc,#0891b2);box-shadow:0 0 12px rgba(34,211,238,.7);transition:.4s}
#hearts i.off{background:#2a2f45;box-shadow:none;transform:scale(.6)}
#lvlName{font-size:13px;font-weight:700;color:#cdd6ea}
#lvlbar{width:130px;height:5px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
#lvlbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fbbf24,#fb7185);border-radius:4px;transition:width .3s}
#pupsRow{display:flex;gap:6px;direction:ltr;min-height:22px}
.pup{font-size:13px;padding:2px 7px;border-radius:9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#ffe9c4}
#snd{padding:5px 11px;font-family:inherit;font-size:12px;color:#cdd6ea;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;cursor:pointer}

/* ---------- نوارِ غول ---------- */
#bossBar{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:10;width:min(420px,80vw);opacity:0;transition:opacity .6s;pointer-events:none;text-align:center}
#bossName{font-size:15px;font-weight:900;color:#e9d5ff;text-shadow:0 0 16px rgba(168,85,247,.8);margin-bottom:5px}
#bossHp{height:9px;background:rgba(255,255,255,.09);border-radius:6px;overflow:hidden;border:1px solid rgba(217,70,239,.4)}
#bossHp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7c3aed,#d946ef,#f43f5e);border-radius:6px;transition:width .25s}

/* ---------- زنجیره ---------- */
#comboWrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:12px;opacity:0;transition:opacity .4s;pointer-events:none}
#mult{font-size:21px;font-weight:900;color:#fbbf24;text-shadow:0 0 18px rgba(251,191,36,.6)}
#cbar{width:180px;height:6px;background:rgba(255,255,255,.09);border-radius:5px;overflow:hidden}
#cbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#a78bfa,#fb7185);border-radius:5px}

/* ---------- اعلامِ بزرگ ---------- */
#ann{position:fixed;top:30%;left:0;right:0;z-index:8;text-align:center;opacity:0;transition:opacity .5s;pointer-events:none}
#ann.show{opacity:1}
#annMain{font-size:42px;font-weight:900;background:linear-gradient(90deg,#fbbf24,#fb7185,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 26px rgba(251,146,60,.45))}
#annSub{font-size:15.5px;font-weight:300;color:#c4cde4;margin-top:8px}

/* ---------- منوی مکث ---------- */
#pauseOv{transition:opacity .25s;z-index:26}

/* ---------- پایان ---------- */
#endStats{display:grid;grid-template-columns:auto auto;gap:9px 26px;justify-content:center;font-size:14px;color:#9aa8c8}
#endStats span{text-align:right}
#endStats b{color:#ffe9c4;font-size:16px;text-align:left;direction:ltr}
#endReason{font-size:16px;color:#fb7185;font-weight:700}

/* ---------- اعلانِ دستاوردها ---------- */
#achToasts{position:fixed;bottom:18px;left:18px;z-index:40;display:flex;flex-direction:column;gap:8px;pointer-events:none;direction:rtl;max-width:280px}
.achToast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:rgba(10,14,28,.92);border:1px solid rgba(251,191,36,.45);box-shadow:0 8px 30px rgba(251,146,60,.25);animation:achIn .5s cubic-bezier(.2,.9,.3,1.2);transition:opacity .5s,transform .5s}
.achToast.out{opacity:0;transform:translateX(-40px)}
.achE{font-size:26px;filter:drop-shadow(0 0 10px rgba(251,191,36,.6))}
.achT{display:flex;flex-direction:column;gap:2px;text-align:right}
.achT b{font-size:14px;font-weight:900;color:#ffe9c4}
.achT i{font-size:10.5px;font-style:normal;color:#fbbf24}
@keyframes achIn{from{opacity:0;transform:translateX(-40px) scale(.8)}}

/* ---------- ⚡ بنرِ چالش ---------- */
#chBanner{position:fixed;top:110px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:12px;padding:10px 22px;border-radius:16px;background:rgba(10,14,28,.9);border:1px solid rgba(251,191,36,.5);box-shadow:0 6px 30px rgba(251,146,60,.3);pointer-events:none;transition:opacity .4s}
#chBanner.hidden{opacity:0}
#chIcon{font-size:28px;filter:drop-shadow(0 0 10px rgba(251,191,36,.6))}
#chTxt{display:flex;flex-direction:column;gap:2px;text-align:right}
#chName{font-size:15px;font-weight:900;color:#ffe9c4}
#chSub{font-size:11px;font-style:normal;color:#b9c3dd}
#chTimer{font-size:22px;font-weight:900;color:#fbbf24;direction:ltr;min-width:34px;text-align:center}

/* ---------- ⚡ نوارِ توانایی‌ها ---------- */
#abilRow{position:fixed;bottom:24px;right:24px;z-index:10;display:flex;gap:10px;pointer-events:none}
.abil{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:13px;background:rgba(10,14,28,.75);border:1px solid rgba(255,255,255,.14);opacity:.55;transition:.3s}
.abil.ready{opacity:1;border-color:rgba(34,211,238,.55);box-shadow:0 0 18px rgba(34,211,238,.25)}
.abil.active{border-color:rgba(251,191,36,.8);box-shadow:0 0 22px rgba(251,191,36,.45)}
.abilIcon{font-size:19px}
.abilBar{width:44px;height:5px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.abilBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#fbbf24);border-radius:4px}
.abilKey{font-size:10px;color:#8b96b0;border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 6px;direction:ltr}

/* ---------- ⚡ شاخصِ آشوب (وسطِ لبه‌ی چپ) ---------- */
#chaosWrap{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:10;width:150px;display:flex;flex-direction:column;gap:6px;pointer-events:none;direction:rtl}
#chaosLabel{font-size:12px;font-weight:900;color:#c4cde4;text-shadow:0 0 12px rgba(34,211,238,.5);transition:.4s}
#chaosBar{height:7px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden;border:1px solid rgba(34,211,238,.25);transition:border-color .4s}
#chaosBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#818cf8);border-radius:5px;transition:width .3s,background .4s;box-shadow:0 0 14px rgba(34,211,238,.55)}
#chaosMsg{font-size:11px;font-weight:700;color:#fbbf24;min-height:15px;opacity:0;transition:opacity .3s;text-shadow:0 0 12px rgba(251,191,36,.6)}
/* حالتِ گرم (آشوب ۲۵–۵۰٪) */
#chaosWrap.warm #chaosLabel{color:#fde68a;text-shadow:0 0 14px rgba(251,191,36,.7)}
#chaosWrap.warm #chaosBar{border-color:rgba(251,191,36,.5)}
#chaosWrap.warm #chaosBar i{background:linear-gradient(90deg,#fbbf24,#fb923c);box-shadow:0 0 16px rgba(251,191,36,.65)}
/* حالتِ داغ (آشوب بالای ۵۰٪) */
#chaosWrap.hot #chaosLabel{color:#fda4af;text-shadow:0 0 16px rgba(244,63,94,.8)}
#chaosWrap.hot #chaosBar{border-color:rgba(244,63,94,.6);animation:chaosPulse 1s infinite}
#chaosWrap.hot #chaosBar i{background:linear-gradient(90deg,#f43f5e,#d946ef);box-shadow:0 0 20px rgba(244,63,94,.8)}
@keyframes chaosPulse{50%{box-shadow:0 0 22px rgba(244,63,94,.55)}}

/* ---------- ⚡ راهنمای ژست‌ها (وسطِ لبه‌ی راست) ---------- */
#gestureHint{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;gap:5px;pointer-events:none;direction:rtl;opacity:.45}
.gHint{font-size:10.5px;font-weight:500;color:#9aa8c8;padding:4px 10px;border-radius:9px;background:rgba(10,14,28,.55);border:1px solid rgba(255,255,255,.1);white-space:nowrap}