/* ألوان مشتقّة — تُحسب في applyTheme وقت التشغيل. البدائل هنا تعمل قبل تحميل الثيم
وعلى أي متصفح (استبدلت color-mix اللي ما تدعمها سفاري 15/16 وفايرفوكس <113). */
:root{
--ma22t: rgba(183,16,26,0.220);
--ma25p: #360d13;
--ma25t: rgba(183,16,26,0.250);
--ma30t: rgba(183,16,26,0.300);
--ma40t: rgba(183,16,26,0.400);
--ma45t: rgba(183,16,26,0.450);
--ma50t: rgba(183,16,26,0.500);
--ma55k: #65090e;
--ma60t: rgba(183,16,26,0.600);
--ma70k: #800b12;
--mb10p: #121d1e;
--mb20t: rgba(77,179,143,0.200);
--mb25t: rgba(77,179,143,0.250);
--mb30p: #1f3e37;
--mb35p: #22463d;
--mb40t: rgba(77,179,143,0.400);
--mb60w: #94d1bc;
--mn90t: rgba(18,20,28,0.900);
--mn92t: rgba(18,20,28,0.920);
}
/* =====================================================================
منشأة رقم صفر — واجهة اللعبة (RTL، Cairo). نظام تصميم خاص باللعبة:
لوحات بزوايا مقصوصة، خطوط مسح خفيفة، لا عناصر متصفح افتراضية (تمرير مخفي، مفاتيح مخصصة).
الألوان من محرر الثيم عبر متغيرات CSS.
===================================================================== */
:root { --bg:#07080c; --panel:#12141c; --text:#e8e6df; --accent:#b7101a; --accent2:#4db38f; --font:'Cairo',system-ui,sans-serif; --radius:3px; --line:#ffffff14; --ui:1; --cut:14px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; scrollbar-width:none } *::-webkit-scrollbar { display:none }
html, body { margin:0; height:100%; height:100svh; height:100dvh; background:var(--bg); color:var(--text); font-family:var(--font); overflow:hidden; font-size:calc(15px * var(--ui)) }
button, input, select, textarea { font-family:inherit; font-size:1rem; color:inherit }
svg { width:18px; height:18px; flex:none }
h1,h2,h3 { margin:0; font-weight:900 }
.muted { opacity:.65 } .small { font-size:.85rem } .mono { font-family:ui-monospace,Consolas,monospace; letter-spacing:2px } .center { text-align:center }
.err { color:#ff6b6b; min-height:1.2em; margin:.4em 0 0 } .hidden { display:none !important } [hidden] { display:none !important }
#bgfx { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }
#grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35; background:repeating-linear-gradient(0deg,#0000 0 3px,#00000033 3px 4px) }
body.in-game #bgfx, body.in-game #grain, body.in-game .menu-bg { display:none }
.screen { display:none; position:absolute; inset:0; z-index:1; align-items:safe center; justify-content:center; padding:16px; overflow:auto }
.screen.active { display:flex; animation:sIn .35s } .screen > * { margin:auto }
@keyframes sIn { from{opacity:0;transform:scale(.99)} to{opacity:1;transform:none} }
.screen.game { padding:0; background:#000 }
/* ---------- اللوحات (زوايا مقصوصة) ---------- */
.panel { position:relative; background:var(--mn92t); border:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 24px 70px #000c;
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)) }
.panel::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#ffffff06,transparent 30%); }
.panel::after { content:''; position:absolute; top:0; inset-inline-start:var(--cut); width:70px; height:2px; background:var(--accent); opacity:.9 }
/* ---------- أزرار ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#1a1d28; color:var(--text); border:1px solid #ffffff22; padding:10px 16px; cursor:pointer; font-weight:700; border-radius:var(--radius); transition:.15s; text-decoration:none; position:relative }
.btn:hover { background:#252a3a; border-color:#ffffff33 } .btn:active { transform:scale(.97) }
.btn.primary { background:linear-gradient(180deg,var(--accent),var(--ma70k)); border-color:transparent; color:#fff; box-shadow:0 8px 24px var(--ma40t); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) }
.btn.primary:hover { filter:brightness(1.12) }
.btn.ghost { background:transparent } .btn.sm { padding:6px 12px; font-size:.85rem } .btn.big { padding:14px 22px; font-size:1.1rem }
.btn:disabled { opacity:.5; pointer-events:none }
.ic { background:none; border:0; color:var(--text); opacity:.7; cursor:pointer; padding:4px } .ic:hover { opacity:1 }
.ic-btn { position:relative; width:38px; height:38px; display:grid; place-items:center; background:#0b0c11aa; border:1px solid var(--line); color:var(--text); cursor:pointer; border-radius:var(--radius) } .ic-btn:hover { border-color:var(--accent2) }
.ic-btn .dot { position:absolute; top:-4px; inset-inline-end:-4px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 1.2s infinite }
.row { display:flex; gap:8px; flex-wrap:wrap } .row > * { flex:1 }
input:not([type=checkbox]):not([type=range]), select, textarea { background:#0b0c11cc; border:1px solid #ffffff22; color:var(--text); padding:11px 12px; border-radius:var(--radius); width:100%; outline:none; transition:.15s; appearance:none; -webkit-appearance:none }
select { background-image:linear-gradient(45deg,transparent 50%,var(--accent2) 50%),linear-gradient(135deg,var(--accent2) 50%,transparent 50%); background-position:calc(12px) 50%,calc(12px + 5px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-inline-start:28px }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ma30t) }
textarea { resize:none; line-height:1.6 }
.seg { display:inline-flex; border:1px solid #ffffff22; border-radius:var(--radius); overflow:hidden }
.seg button { background:none; border:0; padding:7px 14px; cursor:pointer; color:var(--text); opacity:.7; font-weight:700 } .seg button.on { background:var(--accent); color:#fff; opacity:1 }
/* مفتاح تبديل مخصص */
.tg { appearance:none; -webkit-appearance:none; width:46px; height:24px; border-radius:99px; background:#0b0c11; border:1px solid #ffffff33; position:relative; cursor:pointer; transition:.2s; flex:none }
.tg::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:16px; height:16px; border-radius:50%; background:#777; transition:.2s }
.tg:checked { background:var(--mb35p); border-color:var(--accent2) } .tg:checked::after { background:var(--accent2); transform:translateX(-22px); box-shadow:0 0 8px var(--accent2) }
/* شريط تمرير مخصص */
input[type=range] { appearance:none; -webkit-appearance:none; height:6px; background:#ffffff18; border-radius:3px; outline:none; width:140px }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid #fff3; cursor:pointer; box-shadow:0 0 10px var(--ma60t) }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid #fff3; cursor:pointer }
/* ---------- الدخول ---------- */
.login-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; width:min(460px,100%); text-align:center; animation:rise .8s }
@keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.logo { max-height:110px; object-fit:contain; filter:drop-shadow(0 0 24px var(--ma50t)) }
.season { font-size:.8rem; letter-spacing:2px; color:var(--accent2); font-weight:700 }
.title { font-size:clamp(2rem,6vw,3.2rem); line-height:1.1; text-shadow:0 0 30px var(--ma45t), 0 2px 0 #000; animation:flicker 6s infinite }
@keyframes flicker { 0%,93%,100%{opacity:1} 94%{opacity:.6} 95%{opacity:1} 97%{opacity:.75} 98%{opacity:1} }
.quote { min-height:1.6em; margin:0 0 6px; opacity:.75; font-style:italic; transition:opacity .5s } .quote.swap { opacity:0 }
.login-box { width:100%; padding:22px; display:flex; flex-direction:column; gap:10px }
.lbl { font-size:.85rem; font-weight:700; text-align:start; opacity:.85; display:block }
.brand-links { display:flex; gap:10px; width:100%; margin-top:6px }
.brand { flex:1; display:flex; align-items:center; gap:10px; padding:10px 14px; text-decoration:none; color:#fff; border:1px solid #ffffff22; background:#0b0c11cc; transition:.2s; position:relative; overflow:hidden; text-align:start;
clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) }
/* أزرار الروابط: أيقونة في خانة يفصلها خطّ عن النص — نفس بنية الأزرار الجانبية،
والنص في المنتصف بلا سطر سفلي. */
.brand { padding:0; min-height:56px }
.brand .b-ic { display:grid; place-items:center; width:52px; align-self:stretch;
border-inline-end:1px solid #ffffff22; background:#ffffff08; flex:0 0 auto }
.brand svg { width:24px; height:24px }
.brand b { flex:1; display:grid; place-items:center; text-align:center; padding:10px 8px;
font-size:.95rem; line-height:1.25 }
.brand::before { content:''; position:absolute; inset:0; opacity:.18; transition:.2s }
.brand.taraddud { border-color:#ff6b3566 } .brand.taraddud svg { color:#ff8a5c } .brand.taraddud::before { background:linear-gradient(135deg,#ff6b35,transparent 60%) }
.brand.onyx { border-color:#9d7cff66 } .brand.onyx svg { color:#b79cff } .brand.onyx::before { background:linear-gradient(135deg,#7c5cff,transparent 60%) }
/* ديسكورد: مميّز — توهّج بلونه ونبض خفيف على الأيقونة */
.brand.discord { border-color:#5865f288 } .brand.discord svg { color:#98a4ff }
.brand.discord::before { background:linear-gradient(135deg,#5865f2,transparent 62%) }
.brand.discord .b-ic { background:#5865f21f; border-inline-end-color:#5865f24d }
.brand.discord:hover { border-color:#8b95ff; box-shadow:0 10px 26px #5865f23d }
.brand.discord:hover svg { animation:dcPulse 1.1s ease-in-out infinite }
@keyframes dcPulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.14) } }
@media (prefers-reduced-motion:reduce) { .brand.discord:hover svg { animation:none } }
/* على الجوال: ثلاثة أزرار في صفّ واحد تضيق — نلفّها */
@media (max-width:520px) { .brand-links { flex-wrap:wrap } .brand { min-width:calc(50% - 5px) } }
.brand:hover { transform:translateY(-2px); border-color:#ffffff55 } .brand:hover::before { opacity:.32 }
.mini-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.lnk { background:none; border:0; color:var(--text); opacity:.7; cursor:pointer; display:inline-flex; gap:6px; align-items:center; font-weight:700; font-size:.85rem } .lnk:hover { opacity:1; color:var(--accent2) }
/* ---------- الشريط العلوي ---------- */
.topbar { position:absolute; top:0; inset-inline:0; padding:10px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; background:linear-gradient(#000d,#0000); flex-wrap:wrap; z-index:2 }
/* ========== شريط القائمة: بطاقة الهوية + الموسم في الوسط + موجة ==========
البطاقة على طراز البطاقات المميّزة: البانر خلفيةً، والوجه فوقه، والخردة في الزاوية.
البانر يُعرض بـ object-fit:cover — يقصّ عند الأطراف ولا يمدّ الصورة أبدًا،
فتبقى نسبة الصورة المتّفق عليها في المحرك كما هي بلا تحريف. */
.tb2 { align-items:flex-start; padding-bottom:20px }
.tb2::after { content:''; position:absolute; inset-inline:0; bottom:0; height:1px;
background:linear-gradient(90deg,#0000,var(--mb40t) 22%,var(--mb40t) 78%,#0000) }
.tb-id { position:relative; display:flex; align-items:center; flex:0 1 auto; min-width:0 }
.tb-user { position:relative; display:block; width:min(330px,60vw); min-width:0; text-align:start;
background:#0b0c11; color:inherit; font:inherit; cursor:pointer; overflow:hidden;
border:1px solid var(--line); padding:0; -webkit-appearance:none; appearance:none;
clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
transition:border-color .25s ease, transform .25s ease }
.tb-user:hover { border-color:var(--mb40t); box-shadow:0 0 0 1px var(--mb40t), 0 10px 26px #000a }
.tb-user:focus-visible { outline:2px solid var(--accent2); outline-offset:2px }
/* طبقة البانر */
.tb-bn { position:absolute; inset:0; overflow:hidden; isolation:isolate; contain:paint; border-radius:inherit }
/* الصورة تملأ الطبقة تمامًا وتكبر من مركزها داخلها — ما تخرج عن حدود البطاقة أبدًا */
.tb-bn-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
display:block; opacity:.62; transform-origin:center;
transition:transform .6s ease, opacity .25s ease; transform:scale(1.02) }
.tb-user:hover .tb-bn-img { transform:scale(1.07); opacity:.74 }
/* حجاب متدرّج: يُبقي الاسم مقروءًا فوق أي بانر فاتح أو مزدحم */
.tb-bn::after { content:''; position:absolute; inset:0;
background:linear-gradient(270deg,#0b0c11f2 0%,#0b0c11b8 42%,#0b0c1160 100%) }
.tb-user.nobn { background:linear-gradient(120deg,#0b0c11,#12141d 60%,#0b0c11) }
.tb-user.nobn .tb-bn::after { background:none }
/* الوجه فوق البانر */
.tb-face { position:relative; z-index:1; display:flex; gap:10px; align-items:center; padding:7px 12px 7px 7px }
.tb-txt { display:flex; flex-direction:column; gap:3px; min-width:0 }
.tb-name { display:block; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-shadow:0 2px 10px #000c }
/* شريط لمعة رفيع يمرّ على البطاقة عند المرور — حسّ «مميّز» بلا ضجيج */
.tb-user::after { content:''; position:absolute; top:0; bottom:0; width:38%; z-index:2; pointer-events:none;
background:linear-gradient(100deg,#0000,#ffffff1f,#0000); transform:translateX(-160%); opacity:0 }
.tb-user:hover::after { animation:tbSheen .85s ease-out }
@keyframes tbSheen { 0% { transform:translateX(-160%); opacity:1 } 100% { transform:translateX(300%); opacity:0 } }
/* الخردة: رقاقة ملتصقة بزاوية البطاقة السفلية الخارجية */
.tb-scrap { position:relative; z-index:3; margin-inline-start:10px; align-self:center;
box-shadow:0 6px 18px #000a; background:#0b0c11f2; border-inline-start-width:2px }
/* الوسط: اسم الموسم */
/* الموسم في منتصف الشاشة فعليًا، لا في منتصف ما تبقّى بين البطاقة والأزرار
(اللذين يختلف عرضهما فينزاح النص). لذلك نضعه طبقة ممتدة ونوسّطها. */
.tb-mid { position:absolute; inset-inline:0; top:14px; display:flex; justify-content:center;
min-width:0; pointer-events:none; padding-inline:calc(min(330px,60vw) + 34px) }
.tb-mid .season-chip { pointer-events:auto }
.tb-mid .season-chip { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
background:#0b0c1188; backdrop-filter:blur(2px) }
.tb-mid .season-chip:empty { display:none }
/* ========== الدخان تحت الشريط ==========
لا صور ولا SVG: كل طبقة تدرّجات شعاعية على شريط عرضه ٢٠٠٪ يزحف بمقدار ٥٠٪
بالضبط — فاللحظة الأخيرة تطابق الأولى بكسلًا بكسل، حلقة بلا قطع ولا وميض.
ثلاث طبقات بسرعات واتجاهات مختلفة تكسر أي إحساس بالتكرار، وفوقها جمرات
تصعد وتذوب، وشقّ ضوئي أحمر يمسح الحافة كل بضع ثوانٍ. */
.tb-smoke { position:absolute; inset-inline:0; bottom:0; height:64px; overflow:hidden; pointer-events:none;
mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);
-webkit-mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000) }
.tb-smoke .sm { position:absolute; bottom:0; inset-inline-start:0; width:200%; height:100%;
will-change:transform; background-repeat:repeat-x }
.sm1 { opacity:.5; animation:smDrift 26s linear infinite;
background-image:
radial-gradient(60px 26px at 6% 100%, #4db38f38, #0000 70%),
radial-gradient(90px 34px at 21% 100%, #ffffff12, #0000 72%),
radial-gradient(70px 28px at 38% 100%, #4db38f2e, #0000 70%),
radial-gradient(110px 40px at 57% 100%, #ffffff10, #0000 74%),
radial-gradient(80px 30px at 74% 100%, #4db38f26, #0000 70%),
radial-gradient(95px 36px at 90% 100%, #ffffff12, #0000 72%);
background-size:50% 100% }
.sm2 { opacity:.42; animation:smDrift 41s linear infinite reverse;
background-image:
radial-gradient(130px 44px at 12% 100%, #b7101a2b, #0000 74%),
radial-gradient(100px 36px at 33% 100%, #ffffff0d, #0000 72%),
radial-gradient(150px 50px at 52% 100%, #b7101a1f, #0000 76%),
radial-gradient(115px 40px at 78% 100%, #ffffff0f, #0000 73%);
background-size:50% 100% }
.sm3 { opacity:.3; filter:blur(3px); animation:smDrift 63s linear infinite;
background-image:
radial-gradient(190px 56px at 18% 100%, #ffffff0c, #0000 78%),
radial-gradient(210px 60px at 62% 100%, #4db38f1c, #0000 80%);
background-size:50% 100% }
@keyframes smDrift { from { transform:translate3d(0,0,0) } to { transform:translate3d(-50%,0,0) } }
/* جمرات: تصعد وتذوب — كل واحدة بتأخير مختلف فما تتزامن */
.tb-ember { position:absolute; bottom:6px; width:2px; height:2px; border-radius:50%;
background:var(--accent2); box-shadow:0 0 6px var(--accent2); opacity:0 }
.e1 { inset-inline-start:22%; animation:smEmber 7s ease-out infinite }
.e2 { inset-inline-start:54%; background:var(--accent); box-shadow:0 0 7px var(--accent); animation:smEmber 9s ease-out infinite 2.4s }
.e3 { inset-inline-start:79%; animation:smEmber 11s ease-out infinite 5.1s }
@keyframes smEmber {
0% { transform:translate3d(0,0,0) scale(.6); opacity:0 }
12% { opacity:.85 }
70% { opacity:.35 }
100% { transform:translate3d(-16px,-46px,0) scale(1.25); opacity:0 }
}
/* الشقّ: خيط ضوئي يمسح الحافة السفلية ثم يختفي طويلًا — نبض مو وميض مستمر */
.tb-rift { position:absolute; inset-inline:0; bottom:0; height:1px;
background:linear-gradient(90deg,#0000,var(--accent) 45%,#fff6 50%,var(--accent) 55%,#0000);
transform:translateX(-100%); animation:smRift 11s cubic-bezier(.4,0,.2,1) infinite }
@keyframes smRift { 0% { transform:translateX(-100%); opacity:0 } 8% { opacity:.9 } 34% { transform:translateX(100%); opacity:0 } 100% { transform:translateX(100%); opacity:0 } }
/* ========== وسط الشريط: اسم الموسم وشعاره ========== */
.tb-season[hidden] { display:none }
.tb-season { --lv:var(--accent2); display:flex; flex-direction:column; align-items:center; gap:5px;
pointer-events:auto; max-width:100% }
.sn-txt { position:relative; font-weight:900; font-size:1.02rem; letter-spacing:.5px; line-height:1;
padding:5px 22px; white-space:nowrap; color:#fff;
background:linear-gradient(180deg,#0b0c11e8,#0b0c11b0);
border-block:1px solid color-mix(in srgb, var(--lv) 55%, transparent);
clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
text-shadow:0 0 14px color-mix(in srgb, var(--lv) 60%, transparent) }
.sn-txt:empty { display:none }
/* توهّج خفيف يتنفّس تحت النص — يعطيه حياة بلا ما يشتّت */
.sn-txt::before { content:''; position:absolute; inset:0; z-index:-1;
background:radial-gradient(60% 140% at 50% 50%, color-mix(in srgb, var(--lv) 22%, transparent), #0000 70%);
animation:snPulse 4.5s ease-in-out infinite }
@keyframes snPulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }
.sn-em { max-width:112px; max-height:42px; object-fit:contain; display:block;
filter:drop-shadow(0 3px 10px #000b) }
.sn-em[hidden] { display:none }
.avatar { width:40px; height:48px; background:#000; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) } .avatar canvas { max-width:100%; max-height:100%; width:auto; height:auto; image-rendering:pixelated }
/* أيقونة من المعرض: صورة تملأ المربّع بدل مقاسها الطبيعي — بدونها تظهر قصاصة سوداء */
.avatar img { width:100%; height:100%; object-fit:cover; display:block }
.tb-name { font-weight:800 } .title-badge { color:var(--accent2); font-size:.8rem; font-weight:700 }
.tb-xp { display:flex; align-items:center; gap:8px; font-size:.78rem; opacity:.85 }
.xp-mini { display:block; width:110px; height:6px; background:#ffffff18; overflow:hidden }
.xp-mini div, .xp-mini i { display:block; height:100%; background:var(--accent2); width:0 }
/* نقطة الأخبار على زرّها في القائمة بعد نقلها من الشريط العلوي */
.tile.sm > .dot { position:absolute; top:8px; inset-inline-end:8px; width:9px; height:9px; border-radius:50%;
background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 1.2s infinite }
.tile.sm > .dot.hidden { display:none }
.tb-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.season-chip { font-size:.75rem; letter-spacing:1px; color:var(--accent2); border:1px solid var(--mb40t); padding:3px 10px; font-weight:700 }
.scrap-chip { display:inline-flex; align-items:center; gap:6px; background:#0b0c11aa; border:1px solid #c9a24d66; color:#e9c76a; padding:5px 12px; font-weight:800; font-size:.9rem } .scrap-chip svg { width:16px; height:16px }
.scrap-chip.big { margin-inline-start:auto; font-size:1.1rem; padding:8px 16px } .scrap-chip.big span { font-size:.75rem; opacity:.7; font-weight:600 }
.announce { position:absolute; top:70px; inset-inline:0; text-align:center; padding:4px 16px; font-weight:700; font-size:.9rem; pointer-events:none }
.announce .info { color:#9fd3ff } .announce .warn { color:#ffd166 } .announce .danger { color:#ff6b6b }
.install { position:absolute; top:0; inset-inline:0; z-index:3; display:flex; align-items:center; gap:10px; padding:8px 16px; background:linear-gradient(90deg,var(--mb30p),#0b0c11ee); border-bottom:1px solid var(--mb40t); font-size:.88rem; font-weight:600 }
.install svg { color:var(--accent2) } .install span { flex:1 } .install .ic { margin-inline-start:auto }
body.installed .install { display:none }
/* ---------- القائمة ---------- */
.menu { display:grid; grid-template-columns:1fr 1.55fr 1fr; gap:12px; width:100%; align-items:start }
.menu-col { display:flex; flex-direction:column; gap:10px; align-content:start }
/* grid-auto-rows:1fr — بدونها كل صفّ يأخذ ارتفاع محتواه، فكان الصفّ الأول 140
والثاني 128 (قياس حقيقي). الآن الأربع بطاقات بارتفاع واحد دائمًا. */
/* صفوف البطاقات وحدها متساوية. grid-auto-rows:1fr وحدها كانت تشمل صفّ
«دخول برمز» وصفّ روابطنا أيضًا — فلما صارت الروابط ثلاثة ولفّت على الجوال
ارتفع صفّها وسحب البطاقات معه (قياس: 128 ← 194). */
.menu-play { display:grid; grid-template-columns:1fr 1fr; gap:12px;
grid-template-rows:1fr 1fr; grid-auto-rows:auto }
.menu-play > .pcard { height:100% }
.menu-play > .join-row, .menu-play > .brand-links { grid-column:1 / -1 }
/* فاصل الشراء: يفصل ما يُفتح باللعب عمّا يُشترى بالخردة */
.buy-sep { display:flex; align-items:center; gap:8px; margin:4px 0 2px; color:var(--accent2);
font-size:.74rem; font-weight:800; letter-spacing:.3px }
.buy-sep span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
.buy-sep svg { width:14px; height:14px }
.buy-sep::after { content:''; flex:1; height:1px;
background:linear-gradient(90deg,currentColor,#fff0); opacity:.45 }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:4px; background:var(--mn90t); border:1px solid var(--line); padding:18px 20px; cursor:pointer; text-align:start; color:var(--text); text-decoration:none; transition:.15s; position:relative; overflow:hidden;
clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px) }
.tile::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:2px; background:var(--accent2); transition:.25s } .tile:hover::after { width:100% }
.tile:hover { border-color:#ffffff33; transform:translateY(-2px); box-shadow:0 14px 30px #0009 }
.tile svg { width:24px; height:24px; color:var(--accent2); margin-bottom:4px } .tile b { font-size:1.15rem } .tile span { opacity:.6; font-size:.85rem }
.tile.primary { background:linear-gradient(135deg,var(--accent),var(--ma55k)); border-color:transparent; color:#fff } .tile.primary svg { color:#fff } .tile.primary span { opacity:.85 }
.tile.sm { padding:14px; gap:2px } .tile.sm b { font-size:.95rem } .tile.sm svg { width:20px; height:20px }
.tile.join { cursor:default } .tile.join:hover { transform:none; box-shadow:none } .tile.join label { font-weight:700; opacity:.8; font-size:.9rem } .tile.join .row { width:100% } .tile.join .row .btn { flex:0 0 auto }
/* ---------- صفحات عامة ---------- */
.page { width:min(980px,100%); padding:22px; max-height:94vh; overflow:auto; display:flex; flex-direction:column; gap:14px }
.page.narrow { width:min(560px,100%) }
.page-h { display:flex; align-items:center; gap:14px; flex-wrap:wrap } .page-h h2 { font-size:1.4rem } .page-h .back { padding:6px 10px }
.tabs { margin-inline-start:auto; display:flex; gap:4px; background:#0b0c11; padding:4px }
.tabs button { display:flex; gap:6px; align-items:center; background:none; border:0; color:var(--text); opacity:.6; padding:7px 14px; cursor:pointer; font-weight:700 } .tabs button.on { background:var(--accent); opacity:1; color:#fff }
.page-body { line-height:1.9; font-size:.98rem } .page-body p { margin:0 0 10px } .page-body .news-item { border-inline-start:3px solid var(--accent2); padding:8px 14px; margin-bottom:12px; background:#0b0c11 } .page-body .news-item h4 { margin:0 0 4px; font-size:1.05rem } .page-body .news-item .d { font-size:.75rem; opacity:.55 } .page-body .pin { color:#ffd166; font-size:.72rem; margin-inline-start:6px }
/* الشخصيات */
.chars { display:grid; grid-template-columns:1fr 300px; gap:14px }
.char-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; align-content:start }
.cg { background:#0b0c11; border:2px solid var(--line); padding:10px; text-align:center; cursor:pointer; position:relative; transition:.15s }
.cg:hover { border-color:#ffffff33; transform:translateY(-2px) } .cg.sel { border-color:var(--accent2) } .cg.locked { opacity:.55 }
.cg canvas { width:64px; height:96px; image-rendering:pixelated; display:block; margin:0 auto 6px }
.cg b { display:block; font-size:.95rem } .cg small { opacity:.6 } .cg .lock { position:absolute; top:6px; inset-inline-end:6px; color:#ffd166; display:flex; align-items:center; gap:3px; font-size:.7rem }
.cg .eq { position:absolute; top:6px; inset-inline-start:6px; color:var(--accent2) }
.char-card { background:#0b0c11; border:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; position:relative; overflow:hidden }
.char-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%,var(--ma22t),transparent 60%); pointer-events:none }
.char-card .big { width:96px; height:144px; image-rendering:pixelated; filter:drop-shadow(0 8px 16px #000) }
.char-card h3 { font-size:1.3rem } .char-card .ttl { color:var(--accent2); font-weight:700; margin-top:-6px }
.char-card p { margin:0; opacity:.8; line-height:1.7; font-size:.92rem }
.char-card .stats { display:flex; gap:10px; flex-wrap:wrap; justify-content:center } .char-card .stats span { background:#ffffff0d; padding:3px 10px; font-size:.78rem }
.pref-box { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.9rem; opacity:.9 }
/* البيركات */
.perk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px }
.perk { background:#0b0c11; border:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:6px; position:relative; transition:.15s; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) }
.perk.on { border-color:var(--accent2); background:var(--mb10p) } .perk.locked { opacity:.6 }
.perk .ph { display:flex; align-items:center; gap:8px } .perk .ph svg { color:#ffd166 } .perk b { font-size:1rem } .perk p { margin:0; font-size:.85rem; opacity:.75; line-height:1.5; flex:1 }
.perk .pf { display:flex; justify-content:space-between; align-items:center; font-size:.78rem } .perk .pf .btn { padding:4px 10px; font-size:.8rem }
.perk .src { opacity:.6; display:flex; gap:4px; align-items:center } .perk .src svg { width:12px; height:12px }
/* الباتل باس */
.page.pass { overflow:hidden }
.pass-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.pass-lvl { display:flex; flex-direction:column; align-items:center; background:#0b0c11; border:1px solid var(--accent2); padding:6px 18px; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) } .pass-lvl b { font-size:1.8rem; line-height:1; color:var(--accent2) }
.pass-bar { flex:1; display:flex; flex-direction:column; gap:6px; min-width:200px } .pass-xp { font-size:.9rem; font-weight:800 }
.xpbar { height:14px; background:#0b0c11; border:1px solid #ffffff22; overflow:hidden; position:relative } .xpbar div { height:100%; background:linear-gradient(90deg,var(--accent2),var(--mb60w)); width:0; transition:width .6s }
.xpbar::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 10%,#0007 10% 10.5%) }
.carousel { display:flex; align-items:center; gap:8px }
.car-btn { width:42px; height:80px; flex:none; background:#0b0c11; border:1px solid var(--line); color:var(--text); cursor:pointer; display:grid; place-items:center } .car-btn:hover { border-color:var(--accent2); color:var(--accent2) } .car-btn svg { width:22px; height:22px }
.pass-track-wrap { flex:1; overflow:hidden; cursor:grab } .pass-track-wrap.drag { cursor:grabbing }
.pass-track { display:flex; gap:12px; padding:16px 6px 10px; transition:transform .35s; will-change:transform }
.tier { flex:0 0 156px; background:#0b0c11; border:1px solid var(--line); padding:14px 12px 12px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; position:relative; user-select:none; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px) }
.tier .n { position:absolute; top:0; inset-inline-end:0; background:#1a1d28; padding:2px 10px; font-size:.75rem; font-weight:900; border-bottom:1px solid var(--line); border-inline-start:1px solid var(--line) }
.tier canvas { width:48px; height:72px; image-rendering:pixelated; pointer-events:none } .tier .ttl-ico { width:48px; height:72px; display:grid; place-items:center; color:#ffd166 } .tier .ttl-ico svg { width:30px; height:30px }
.tier .ttl-ico.scrap { color:#e9c76a } .tier .ttl-ico.perk { color:var(--accent2) }
.tier b { font-size:.88rem; line-height:1.3 } .tier .xp { opacity:.55; font-size:.75rem }
.tier.done { border-color:var(--accent2) } .tier.cur { border-color:var(--accent); box-shadow:0 0 0 3px var(--ma30t), 0 0 30px var(--ma25t) } .tier.locked { opacity:.6 }
.tier .btn { width:100%; padding:6px; font-size:.8rem } .tier .claimed { color:var(--accent2); font-size:.8rem; display:flex; gap:4px; align-items:center; padding:6px }
/* المتجر */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px }
.item { background:#0b0c11; border:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; position:relative; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) }
.item .ico { width:56px; height:72px; display:grid; place-items:center; color:#ffd166 } .item .ico svg { width:32px; height:32px } .item canvas { width:48px; height:72px; image-rendering:pixelated }
.item b { font-size:.92rem } .item .kind { font-size:.72rem; opacity:.55 } .item .price { display:flex; align-items:center; gap:5px; color:#e9c76a; font-weight:800 } .item .price svg { width:14px; height:14px }
.item.owned { border-color:var(--accent2) } .item .btn { width:100%; padding:6px; font-size:.85rem }
/* الإعدادات */
.set-group { display:flex; flex-direction:column; gap:6px } .set-group h3 { font-size:.85rem; color:var(--accent2); letter-spacing:1px; margin-bottom:4px }
.set { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#0b0c11; padding:10px 14px; border:1px solid var(--line) }
.set > span { font-weight:600 } .set b { width:44px; text-align:end; font-size:.85rem }
.keys { font-size:.82rem; opacity:.75; line-height:1.8 } kbd { background:#ffffff14; border:1px solid #ffffff22; padding:0 6px; font-family:inherit }
/* اللوبي */
.code-chip { margin-inline-start:auto; display:flex; align-items:center; gap:6px; background:#0b0c11; border:1px dashed #ffffff33; padding:4px 6px 4px 14px; font-size:1.2rem }
.players { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px }
.players li { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:#0b0c11; border:1px solid var(--line) }
.players .pref { opacity:.6; font-size:.85rem } .players .bot { font-size:.7rem; opacity:.5; border:1px solid #ffffff33; padding:0 6px; margin-inline-start:6px }
.countdown { font-size:1.6rem; font-weight:900; text-align:center; color:var(--accent); min-height:1.3em; margin:0 }
/* النهاية */
.end-banner { text-align:center; padding:16px; background:#0b0c11; border:1px solid var(--line) } .end-banner h2 { font-size:2rem }
.end-banner.win { border-color:var(--accent2); box-shadow:0 0 40px var(--mb25t) } .end-banner.lose { border-color:var(--accent) }
.end-you { display:flex; gap:8px; flex-wrap:wrap; justify-content:center } .end-you span { background:#ffffff0d; padding:4px 12px; font-size:.85rem } .end-you span.hi { background:var(--mb20t); color:var(--accent2); font-weight:800 } .end-you span.scrap { color:#e9c76a }
.end-ch { display:flex; flex-direction:column; gap:4px } .end-ch div { display:flex; justify-content:space-between; font-size:.85rem; background:#0b0c11; padding:6px 12px; border-inline-start:3px solid #ffffff33 } .end-ch div.done { border-color:var(--accent2) } .end-ch div.done span:last-child { color:var(--accent2) }
.table { width:100%; border-collapse:collapse } .table td, .table th { padding:8px; border-bottom:1px solid var(--line); text-align:start } .table tr.win td { color:var(--accent2) } .table td.sc { color:#e9c76a }
/* ---------- المسرح ---------- */
#stage { position:relative; width:100%; height:100%; overflow:hidden; background:#000 }
#cv { position:absolute; inset:0; margin:auto; image-rendering:pixelated; image-rendering:crisp-edges }
#vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 55%,#000c 100%) }
#dmgFlash { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 40%,#c00 100%); opacity:0; transition:opacity .4s } #dmgFlash.on { opacity:.55; transition:none }
.crt { position:absolute; inset:0; pointer-events:none; display:none; background:repeating-linear-gradient(0deg,#0000 0 2px,#0003 2px 3px); mix-blend-mode:multiply }
.crt::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#ff000008,#00ff0008,#0000ff08); animation:flick 3s infinite }
@keyframes flick { 0%,100%{opacity:.9} 50%{opacity:.6} }
body.crt-on .crt { display:block }
#hud { position:absolute; inset:0; pointer-events:none; font-size:calc(1rem * var(--ui)) }
.hud-top { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; padding:10px 14px; background:linear-gradient(#000c,transparent) } .hud-top > :first-child { justify-self:start } .hud-top > :last-child { justify-self:end }
.hud-right { display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.hud-chip { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#000a; border:1px solid #ffffff22; padding:5px 12px; font-weight:700; font-size:.85rem; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) }
.hud-chip.role svg { color:var(--accent2) } .hud-chip.role.awbad svg { color:#ff5252 }
.hud-chip.gate { color:#ffd166; border-color:#ffd16655; animation:pulse 1s infinite } @keyframes pulse { 50%{opacity:.6} }
.hud-chip.scrap { color:#e9c76a; border-color:#c9a24d55 }
.hud-center { display:flex; flex-direction:column; align-items:center; gap:6px }
.hud-timer { display:flex; align-items:center; gap:6px; font-size:1.4rem; font-weight:900; text-shadow:0 2px 6px #000; background:#000a; padding:4px 16px; border:1px solid #ffffff22; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) } .hud-timer svg { opacity:.7 }
.hud-timer.low { color:#ff5252; border-color:#ff525266 }
.hud-obj { display:flex; gap:8px } .hud-obj .o { display:flex; align-items:center; gap:5px; background:#0009; border:1px solid #ffffff22; padding:2px 10px; font-size:.82rem; font-weight:800 } .hud-obj .o svg { width:14px; height:14px; color:#ffd166 } .hud-obj .o.done { color:var(--accent2); border-color:var(--mb40t) } .hud-obj .o.done svg { color:var(--accent2) }
.hud-team { position:absolute; top:64px; inset-inline-start:12px; display:flex; flex-direction:column; gap:4px } body.no-team .hud-team { display:none }
.hud-team .tm { display:flex; align-items:center; gap:6px; background:#000a; border:1px solid #ffffff18; padding:3px 8px; font-size:.72rem; min-width:150px; border-inline-start:3px solid var(--accent2) }
.hud-team .tm.me { border-inline-start-color:#fff } .hud-team .tm.bad { border-inline-start-color:#ff5252 } .hud-team .tm.gone { opacity:.45; border-inline-start-color:#555 }
.hud-team .tm .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80px } .hud-team .tm .hp { display:flex; gap:1px } .hud-team .tm .hp svg { width:10px; height:10px; color:#ff5252 } .hud-team .tm .hp svg.off { color:#ffffff22 }
.hud-team .tm .lv { display:flex; gap:1px } .hud-team .tm .lv svg { width:10px; height:10px; color:#8fd3ff } .hud-team .tm .lv svg.off { color:#ffffff22 }
.hud-team .tm .st { opacity:.8; font-size:.68rem } .hud-team .tm .st.warn { color:#ff5252; font-weight:800 } .hud-team .tm .fd { color:#7bd389 } .hud-team .tm .fd svg { width:10px; height:10px }
.hud-ch { position:absolute; top:64px; inset-inline-end:12px; display:flex; flex-direction:column; gap:4px; align-items:flex-end }
.hud-ch .c { background:#000a; border:1px solid #ffffff18; padding:3px 10px; font-size:.72rem; display:flex; gap:8px; align-items:center } .hud-ch .c svg { width:12px; height:12px; color:#ffd166 } .hud-ch .c.done { color:var(--accent2); border-color:var(--mb40t) } .hud-ch .c.done svg { color:var(--accent2) }
.hud-msg { position:absolute; top:28%; inset-inline:0; text-align:center; font-size:1.5rem; font-weight:900; text-shadow:0 2px 12px #000; opacity:0; transition:opacity .3s; letter-spacing:.5px } .hud-msg.show { opacity:1 }
.prog { position:absolute; bottom:24%; left:50%; transform:translateX(-50%); width:220px; display:flex; flex-direction:column; gap:4px; align-items:center }
.prog span { font-size:.8rem; font-weight:700; text-shadow:0 1px 3px #000; background:#000a; padding:2px 10px }
.prog .bar { width:100%; height:12px; background:#000c; border:1px solid #fff5; overflow:hidden } .prog .bar div { height:100%; background:linear-gradient(90deg,var(--accent2),#8ff); width:0 }
.skill { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) }
.chat { position:absolute; bottom:12px; inset-inline-start:12px; font-size:.85rem; text-shadow:0 1px 2px #000; max-width:45% } .chat div { background:#000a; padding:3px 10px; margin-top:4px; border:1px solid #ffffff14 }
.status { position:absolute; bottom:12px; inset-inline-end:12px; font-weight:700; display:flex; align-items:center; gap:6px; background:#000a; padding:5px 12px; border:1px solid #ffffff22 } .status:empty { display:none }
.status.danger { color:#ff6b6b; border-color:#ff6b6b55 } .status.good { color:var(--accent2) } .status.kill { color:#ff2d2d; border-color:#ff2d2d; animation:pulse .6s infinite }
.hud-hint { position:absolute; bottom:60px; inset-inline:0; text-align:center; font-size:.85rem; opacity:.7; text-shadow:0 1px 3px #000 }
.fps { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); font-size:.65rem; opacity:.5; font-family:monospace }
.scrap-pop { position:absolute; top:40%; inset-inline:0; text-align:center; color:#e9c76a; font-weight:900; font-size:1.2rem; text-shadow:0 2px 8px #000; opacity:0; pointer-events:none } .scrap-pop.show { animation:popUp 1.2s }
@keyframes popUp { 0%{opacity:0;transform:translateY(10px)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-30px)} }
.jumpscare { position:absolute; inset:0; z-index:20; background:#000; display:grid; place-items:center; animation:jsShake .12s infinite } .jumpscare img { max-width:100%; max-height:100%; object-fit:contain; animation:jsZoom .9s ease-out forwards; filter:contrast(1.3) }
@keyframes jsShake { 0%{transform:translate(0,0)} 25%{transform:translate(6px,-4px)} 50%{transform:translate(-5px,5px)} 75%{transform:translate(4px,3px)} 100%{transform:translate(-3px,-6px)} }
@keyframes jsZoom { from{transform:scale(.4);opacity:.2} 30%{transform:scale(1.15);opacity:1} to{transform:scale(1.25);opacity:1} }
/* ---------- اللمس ---------- */
.touch-ui { display:none; position:absolute; inset:0; pointer-events:none }
body.touch .touch-ui { display:block }
.joy { position:absolute; bottom:26px; right:26px; width:120px; height:120px; border-radius:50%; background:#ffffff14; border:2px solid #ffffff33; pointer-events:auto; touch-action:none }
#joyKnob { position:absolute; width:50px; height:50px; border-radius:50%; background:#ffffff55; left:35px; top:35px }
body.bigjoy .joy { width:160px; height:160px } body.bigjoy #joyKnob { width:64px; height:64px; left:48px; top:48px }
.act { position:absolute; bottom:40px; left:30px; width:90px; height:90px; border-radius:50%; background:var(--accent); color:#fff; border:3px solid #fff5; font-weight:900; font-size:1.1rem; pointer-events:auto; touch-action:none }
body.joyleft .joy { right:auto; left:26px } body.joyleft .act { left:auto; right:30px }
.mini { position:absolute; top:54px; width:42px; height:42px; border-radius:50%; background:#0009; color:#fff; border:1px solid #fff5; pointer-events:auto; display:grid; place-items:center }
#btnChatMenu { left:12px } #btnReportMenu { left:62px }
#btnChatMenu[hidden], #btnReportMenu[hidden], #btnEndReport[hidden] { display:none !important } /* جولة 68 */
.qc { position:absolute; top:104px; left:12px; display:grid; gap:4px; z-index:3 } .qc button { background:#000c; color:#fff; border:1px solid #fff4; padding:8px 12px; text-align:start }
/* ---------- نوافذ ---------- */
.modal { position:fixed; inset:0; background:#000b; display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; -webkit-backdrop-filter:blur(3px) ; backdrop-filter:blur(3px) }
.dlg { padding:20px; width:min(440px,100%); display:flex; flex-direction:column; gap:10px; max-height:92vh; overflow:auto }
.dlg-h { display:flex; align-items:center; gap:8px } .dlg-h h3 { display:flex; gap:8px; align-items:center; flex:1 } .dlg-h svg { color:var(--accent2) }
.reasons { display:flex; flex-wrap:wrap; gap:6px } .reasons button { background:#0b0c11; border:1px solid #ffffff22; color:var(--text); padding:6px 12px; cursor:pointer; font-size:.85rem; font-weight:700 } .reasons button.on { border-color:var(--accent); background:var(--ma25p); color:#fff }
.daily-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:6px }
.dd { background:#0b0c11; border:1px solid var(--line); padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:3px; font-size:.75rem } .dd .n { font-size:.68rem; opacity:.55 } .dd b { font-size:.8rem } .dd svg { width:18px; height:18px; margin:0 auto; color:#ffd166 }
.dd.got { opacity:.5; border-color:var(--accent2) } .dd.got svg { color:var(--accent2) } .dd.cur { border-color:var(--accent); box-shadow:0 0 0 2px var(--ma30t) }
.toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:#000d; color:#fff; padding:10px 18px; border-inline-start:4px solid var(--accent); z-index:60; font-weight:700; max-width:90vw }
.wip { position:fixed; bottom:0; inset-inline:0; text-align:center; font-size:.72rem; padding:4px 12px; background:#000a; color:#ffffffaa; z-index:2; pointer-events:none; letter-spacing:.3px }
.wip:empty, body.in-game .wip { display:none }
body.touch .chat, body.touch .status { bottom:150px } body.touch .hud-ch { top:104px }
.rotate-hint { display:none; position:absolute; top:44%; inset-inline:0; text-align:center; font-size:.85rem; opacity:.6; pointer-events:none }
@media (orientation:portrait) and (max-width:700px) { .rotate-hint { display:block } #cv { top:22% !important; margin-top:0 !important } .hud-team { top:auto; bottom:200px } .hud-ch { display:none } }
/* بين ٧٠٠ و١٢٠٠ بكسل كان اسم الموسم يركب على رقاقة الخردة: الطبقة الممتدة
تحجز عرضًا ثابتًا (min(330px,60vw)+34) أضيق من البطاقة + الرقاقة فعليًا،
فالنص المتوسّط يزحف فوقها. بدل ما نخمّن رقمًا أكبر، نرجّع الاسم لصفّ
الشريط العادي — نفس اللي يصير تحت ٧٠٠ أصلًا ويشتغل تمام. */
@media (max-width:1200px) {
.tb-mid { position:static; padding-inline:0; flex:1 1 auto; min-width:0; justify-content:center }
.tb-mid .tb-season { max-width:100%; min-width:0 }
.sn-txt { max-width:100%; overflow:hidden; text-overflow:ellipsis;
font-size:.94rem; padding-inline:18px }
}
@media (max-width:700px) { .menu { grid-template-columns:1fr } .chars { grid-template-columns:1fr } .page { padding:14px } .hud-msg { font-size:1.1rem } .topbar { padding:8px 12px } .xp-mini { width:70px } .brand-links { flex-direction:column } .hud-team .tm { min-width:120px } .tb-right .btn { display:none } }
/* ==========================================================================
v3 — خلفية القائمة · سلايدات «كيف تلعب» · أخبار بصور · أيقونات المحتوى
========================================================================== */
/* ---- خلفية القائمة الاختيارية (تظهر خلف التدرّج المتحرك) ---- */
.menu-bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.34;filter:saturate(.8) contrast(1.05);pointer-events:none}
.menu-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0006,#000a 60%,#000d)}
/* ---- أيقونات المحتوى القادمة من المحرك ---- */
.perk-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--accent2)}
.perk-ic svg{width:22px;height:22px}
.perk-ic img{width:26px;height:26px;object-fit:cover;border-radius:6px}
.ttl-ico img,.item .ico img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.dd img{width:28px;height:28px;object-fit:cover;border-radius:7px}
/* ---- صفحة عريضة ---- */
.panel.page.wide{max-width:960px}
/* ---- «كيف تلعب»: سلايدات ---- */
.hs-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.hs-tabs button{background:#ffffff0d;border:1px solid #ffffff1f;color:inherit;opacity:.72;padding:6px 15px;border-radius:var(--radius);cursor:pointer;font:inherit;font-weight:700;transition:.15s}
.hs-tabs button:hover{opacity:1}
.hs-tabs button.on{background:var(--accent);border-color:transparent;color:#fff;opacity:1}
.hs{display:flex;flex-direction:column;gap:14px}
.hs-stage{background:#00000047;border:1px solid #ffffff17;border-radius:var(--radius);overflow:hidden;touch-action:pan-y}
.hs-media{min-height:170px;aspect-ratio:16/9;background:#05060a;display:grid;place-items:center;overflow:hidden}
.hs-media img{width:100%;height:100%;object-fit:cover;display:block}
.hs-ph{display:grid;place-items:center;opacity:.22}
.hs-ph svg{width:74px;height:74px}
.hs-body{padding:16px 18px 20px}
.hs-body h3{margin:0 0 7px;font-size:1.22rem;font-weight:900;color:var(--accent2)}
.hs-body p{margin:0;line-height:1.95;opacity:.92;min-height:3.9em}
.hs-nav{display:flex;align-items:center;gap:12px;justify-content:center}
.hs-nav .btn{padding:9px 14px}
.hs-dots{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:center}
.hs-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#ffffff33;cursor:pointer;transition:.15s}
.hs-dots button:hover{background:#ffffff66}
.hs-dots button.on{background:var(--accent);width:24px;border-radius:99px}
@media(max-width:620px){.hs-body p{min-height:0}.hs-media{min-height:190px;aspect-ratio:4/3}}
/* ---- الأخبار ---- */
.news-body{display:flex;flex-direction:column;gap:14px}
.news-item{background:#00000038;border:1px solid #ffffff14;border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr}
.news-item.has-img{grid-template-columns:210px 1fr}
.news-item.pinned{border-color:#ffffff33;box-shadow:inset 3px 0 0 var(--accent)}
.news-img{background:#05060a;min-height:130px;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover;display:block}
.news-txt{padding:14px 16px 16px;min-width:0}
.news-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.news-item h4{margin:0 0 6px;font-size:1.06rem;font-weight:900}
.news-item p{margin:0 0 6px;line-height:1.9;opacity:.9}
.news-item .d{font-size:.78rem;opacity:.55;font-family:ui-monospace,monospace}
.news-item .pin{font-size:.7rem;background:var(--accent);color:#fff;padding:1px 8px;border-radius:99px}
.tagpill{font-size:.72rem;padding:2px 10px;border-radius:99px;border:1px solid;white-space:nowrap;font-weight:700}
.tagpill.update{color:#8fc7ff;border-color:#5aa9ff55;background:#5aa9ff14}
.tagpill.event{color:#ffc857;border-color:#ffc85755;background:#ffc85714}
.tagpill.fix{color:#3ec98f;border-color:#3ec98f55;background:#3ec98f14}
.tagpill.note{color:#aab;border-color:#ffffff22;background:#ffffff08}
@media(max-width:620px){.news-item.has-img{grid-template-columns:1fr}.news-img{min-height:160px;max-height:190px}}
/* عدّاد البنق داخل المباراة */
.fps.ping{bottom:18px;opacity:.85;font-weight:700}
.fps.ping.good{color:#4db38f}
.fps.ping.mid{color:#ffc857}
.fps.ping.bad{color:#ff6b6b}
.set small{display:block;opacity:.6;font-size:.76rem;font-weight:400;line-height:1.5;margin-top:2px}
/* =====================================================================
v3 — الجوال واللوحيات وتوافق المتصفحات
===================================================================== */
/* --- ارتفاع ثابت مع شريط العنوان المتحرّك في سفاري/كروم الجوال --- */
:root{ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
--safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); }
/* --- لا تمرير ولا تكبير أثناء اللعب --- */
html,body{ overscroll-behavior:none; -webkit-text-size-adjust:100%; text-size-adjust:100% }
body.in-game{ position:fixed; inset:0; width:100%; touch-action:none }
#stage,#hud,#cv,.touch-ui{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
button,.btn,.tile,.tg,label{ touch-action:manipulation }
/* --- المناطق الآمنة (النوتش/شريط الهوم) --- */
.screen{ padding-top:calc(16px + var(--safe-t)); padding-bottom:calc(16px + var(--safe-b));
padding-inline:calc(16px + max(var(--safe-l),var(--safe-r))) }
.screen.game{ padding:0 }
.topbar{ padding-top:calc(var(--safe-t) + 8px) }
.install{ padding-top:calc(8px + var(--safe-t)) }
#hud{ padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l) }
.joy{ bottom:calc(26px + var(--safe-b)); right:calc(26px + var(--safe-r)) }
.act{ bottom:calc(40px + var(--safe-b)); left:calc(30px + var(--safe-l)) }
body.joyleft .joy{ right:auto; left:calc(26px + var(--safe-l)) }
body.joyleft .act{ left:auto; right:calc(30px + var(--safe-r)) }
/* --- جويستيك متحرّك: يظهر مكان ما تلمس --- */
body.dynjoy .joy{ opacity:.22; transition:opacity .12s; pointer-events:none } /* شبح خفيف يدلّ اللاعب، ويظهر كاملًا تحت إصبعه */
body.dynjoy .joy.live{ opacity:1 }
.joy-zone{ position:absolute; inset:0; pointer-events:auto; touch-action:none; display:none }
body.touch.dynjoy .joy-zone{ display:block }
body.dynjoy .act{ z-index:3 }
/* --- أزرار لمس أكبر وأوضح على الشاشات الصغيرة --- */
@media (pointer:coarse){
.btn,.tile{ min-height:46px }
.ic-btn{ min-width:44px; min-height:44px }
input:not([type=checkbox]):not([type=range]),select{ font-size:16px } /* يمنع تكبير سفاري التلقائي عند الكتابة */
}
/* --- شاشات قصيرة (جوال بالعرض) --- */
@media (max-height:460px){
.logo{ max-height:64px }
.title{ font-size:clamp(1.4rem,5vw,2rem) }
.screen{ align-items:flex-start }
.panel{ padding:14px 16px }
}
/* --- جوال بالطول --- */
@media (max-width:560px){
.joy{ width:132px; height:132px }
.act{ width:96px; height:96px }
}
/* --- لوحيات: لا تمدّد اللوحات على كل العرض --- */
@media (min-width:900px){ .panel{ max-width:min(92vw,880px) } }
/* --- بادئات webkit لسفاري --- */
.panel{ -webkit-backdrop-filter:blur(8px) }
#cv{ image-rendering:-webkit-optimize-contrast }
/* شريط «فيه تحديث» — يظهر أعلى الشاشة خارج المباراة */
.upd-bar{position:fixed;top:0;inset-inline:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
padding:calc(10px + var(--safe-t)) 16px 10px;background:linear-gradient(90deg,var(--mb30p),#0b0c11ee);
border-bottom:1px solid var(--mb40t);font-weight:700;font-size:.92rem;
transform:translateY(-110%);transition:transform .25s ease}
.upd-bar.in{transform:none}
.upd-bar svg{width:20px;height:20px;color:var(--accent2)}
.upd-bar .btn{padding:6px 14px}
body.in-game .upd-bar{display:none} /* لا نقاطع اللاعب داخل المباراة */
/* =====================================================================
شاشة التجهيز (البيركات) — خانات + مخزون، بالنقر وبالسحب
===================================================================== */
.loadout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,320px); gap: 18px; align-items: start; margin-bottom: 16px; }
.lo-slots { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
padding: 18px 14px; border-radius: 14px; position: relative;
background: radial-gradient(120% 140% at 50% 0%, var(--ma22t) 0%, transparent 70%), var(--mn90t);
border: 1px solid var(--line); }
.lo-slots::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(255,255,255,.022) 7px 8px); opacity: .5; }
/* الخانة: معيّن (زي DbD) لكن بحواف حادة وتوهج يتبع الندرة */
.lo-slot { width: 104px; height: 104px; position: relative; cursor: pointer; flex: 0 0 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
background: var(--panel); border: 2px solid var(--line);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.lo-slot:hover, .lo-slot:focus-visible { transform: scale(1.05); outline: none; }
.lo-slot.over { transform: scale(1.12); border-color: var(--accent); box-shadow: 0 0 0 3px var(--ma40t); }
.lo-slot .lo-empty { opacity: .28; }
.lo-slot .lo-empty svg { width: 24px; height: 24px; }
.lo-slot .pt-name { display: none; }
.lo-slot.filled .pt-gem svg, .lo-slot.filled .pt-gem img { width: 40px; height: 40px; }
.lo-x { position: absolute; inset-block-start: 26px; inset-inline-end: 26px; width: 22px; height: 22px;
border: 0; border-radius: 50%; background: #0009; color: #fff; cursor: pointer; display: none;
align-items: center; justify-content: center; padding: 0; }
.lo-x svg { width: 13px; height: 13px; }
.lo-slot.filled:hover .lo-x, .lo-slot.filled:focus-within .lo-x { display: flex; }
/* لوحة التفاصيل */
.lo-detail .lod { background: var(--mn90t); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
border-top: 3px solid var(--rar); }
.lod-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.lod-h h3 { margin: 0 0 2px; font-size: 17px; }
.lod-rar { font-size: 12px; font-weight: 700; color: var(--rar); }
.lod-d { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--text); }
.lod-eff { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
background: var(--ma25t); color: var(--accent2); font-size: 13px; margin-bottom: 10px; }
.lod-eff svg { width: 14px; height: 14px; }
.lod-f { display: flex; align-items: center; justify-content: space-between; gap: 10px;
border-top: 1px solid var(--line); padding-top: 10px; }
.lod-f .src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #9aa0ab; }
.lod-f .src svg { width: 14px; height: 14px; }
/* شريط البحث والفلاتر */
.inv-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.inv-search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0;
background: var(--mn90t); border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; }
.inv-search svg { width: 15px; height: 15px; opacity: .5; flex: 0 0 auto; }
.inv-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text);
font: inherit; font-size: 16px; padding: 9px 0; outline: none; }
.inv-filters { display: flex; gap: 6px; }
.inv-filters button { background: var(--mn90t); border: 1px solid var(--line); color: #9aa0ab;
border-radius: 8px; padding: 8px 13px; cursor: pointer; font: inherit; font-size: 13px; }
.inv-filters button.on { background: var(--ma25t); border-color: var(--accent); color: var(--text); }
/* المخزون */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.inv-empty { grid-column: 1 / -1; text-align: center; padding: 22px; }
.inv-tip { margin-top: 12px; text-align: center; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 12px 6px 10px; border-radius: 10px; cursor: pointer; text-align: center;
background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--rar);
transition: transform .12s ease, border-color .12s ease, background .12s ease;
touch-action: none; -webkit-user-select: none; user-select: none; }
.ptile:hover, .ptile:focus-visible { transform: translateY(-2px); border-color: var(--rar); outline: none; }
.ptile.sel { background: var(--ma25t); border-color: var(--accent); }
.ptile.on::after { content: 'مجهّز'; position: absolute; inset-block-start: 5px; inset-inline-start: 5px;
font-size: 10px; font-weight: 700; color: var(--accent2); background: var(--panel);
border-radius: 4px; padding: 1px 5px; }
.ptile.locked { opacity: .45; }
.ptile .pt-name { font-size: 12px; line-height: 1.35; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-lock { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; opacity: .8; }
.pt-lock svg { width: 13px; height: 13px; }
.pt-gem { display: inline-flex; align-items: center; justify-content: center; color: var(--rar); }
.pt-gem svg, .pt-gem img { width: 30px; height: 30px; object-fit: contain; }
.pt-gem.big svg, .pt-gem.big img { width: 44px; height: 44px; }
/* ألوان الندرة */
.r-common { --rar: #8b8f9a; }
.r-rare { --rar: #5aa9e6; }
.r-epic { --rar: #b072e0; }
/* شبح السحب */
.drag-ghost { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 90; pointer-events: none;
width: 60px; height: 60px; margin: -30px 0 0 -30px; display: flex; align-items: center; justify-content: center;
background: var(--panel); border: 2px solid var(--rar); border-radius: 10px;
box-shadow: 0 8px 24px #000a; opacity: .95; }
.drag-ghost svg, .drag-ghost img { width: 32px; height: 32px; }
body.dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
body.dragging .ptile, body.dragging .lo-slot { cursor: grabbing; }
@media (max-width: 860px) {
.loadout { grid-template-columns: 1fr; }
.lo-slot { width: 88px; height: 88px; }
.lo-slot.filled .pt-gem svg, .lo-slot.filled .pt-gem img { width: 32px; height: 32px; }
.lo-x { display: flex; inset-block-start: 20px; inset-inline-end: 20px; }
.inv-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
.lo-head { flex: 1 0 100%; display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 4px; position: relative; z-index: 1; }
.lo-head b { font-size: 14px; letter-spacing: .5px; }
.lo-head span { font-size: 12px; color: #9aa0ab; }
.lo-slot.filled { border-color: var(--rar); box-shadow: 0 0 18px -4px var(--rar); }
.lo-slot.filled .pt-gem { color: var(--rar); }
/* =====================================================================
القائمة — إعادة تصميم: زر بطل مائل، شبكة مرتّبة، وحركات دخول
===================================================================== */
/* شاشة القائمة: عمود مركزي.
كانت صفًا مرنًا، وفقرة الخطأ الفارغة (#menuErr) عنصر مرن مثلها عليه margin:auto —
فيتقاسم الفراغ مع كتلة القائمة وتنزاح لليمين بمقدار يكبر كلما كبرت الشاشة
(٣٥٢px على شاشة 2560). الآن عمود واحد مركزي أفقيًا ورأسيًا. */
/* القائمة تجلس في الأسفل — الفراغ كله فوقها فتبان الخلفية، مثل شاشات ألعاب الرعب.
safe: لو طال المحتوى عن الشاشة يبدأ من الأعلى بدل ما يُقصّ رأسه. */
#scr-menu { flex-direction:column; justify-content:safe flex-end; align-items:safe center;
padding-top:calc(84px + var(--safe-t)); padding-bottom:calc(28px + var(--safe-b)) }
#scr-menu > * { margin:0 }
.menu-wrap { width:min(1120px,100%); display:flex; flex-direction:column; gap:14px; margin:0 auto }
/* الإعلان صار في السياق الطبيعي — كان position:absolute فتغطّيه الأزرار */
.announce:not(:empty) { position:static; text-align:center; padding:10px 16px; font-weight:700; font-size:.92rem;
background:var(--mn90t); border:1px solid var(--line); border-inline-start:3px solid var(--accent2);
border-radius:var(--radius); pointer-events:auto; animation:annIn .4s ease both }
@keyframes annIn { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }
/* زر البطل */
.mn-hero { position:relative; display:flex; align-items:stretch; gap:0; min-height:132px; padding:0; cursor:pointer;
background:linear-gradient(135deg,var(--accent),var(--ma55k)); border:1px solid transparent; color:#fff;
overflow:hidden; text-align:start; font:inherit; width:100%;
clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
transition:transform .18s ease, box-shadow .18s ease }
.mn-hero:hover, .mn-hero:focus-visible { transform:translateY(-3px); box-shadow:0 18px 40px #000a; outline:none }
.mn-hero:active { transform:translateY(-1px) }
.mh-media { position:absolute; inset-block:0; inset-inline-start:0; width:46%; overflow:hidden;
clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%) }
.mh-media img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85;
transition:transform .5s ease; transform:scale(1.02) }
.mn-hero:hover .mh-media img { transform:scale(1.09) }
.mh-media::after { content:''; position:absolute; inset:0;
background:linear-gradient(90deg,#0000 35%,var(--ma70k) 92%) }
.mh-media:empty, .mh-media.off { display:none }
.mh-body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:5px;
padding:20px 22px; margin-inline-start:auto; width:60%; }
.mh-badge { display:inline-flex; align-self:flex-start; padding:2px 9px; border-radius:999px;
background:#ffffff26; font-size:.72rem; font-weight:800; letter-spacing:.5px }
.mh-badge:empty { display:none }
.mh-title { font-size:1.6rem; line-height:1.15; text-shadow:0 2px 12px #0008 }
.mh-sub { opacity:.88; font-size:.9rem }
.mh-go { position:absolute; z-index:1; inset-block-end:16px; inset-inline-end:18px; width:34px; height:34px;
display:grid; place-items:center; border-radius:50%; background:#ffffff1f; transition:transform .2s ease, background .2s ease }
.mn-hero:hover .mh-go { background:#ffffff33; transform:translateX(-4px) }
[dir=rtl] .mn-hero:hover .mh-go { transform:translateX(4px) }
/* لمعة تمرّ على الزر */
.mn-hero::before { content:''; position:absolute; inset-block:0; inset-inline-start:-60%; width:45%; z-index:2;
background:linear-gradient(105deg,#fff0,#ffffff2e,#fff0); transform:skewX(-18deg); pointer-events:none;
transition:inset-inline-start .6s ease }
.mn-hero:hover::before { inset-inline-start:115% }
/* حركة دخول متدرّجة لكل زر */
.screen.active .mn-hero, .screen.active .menu-main > .tile, .screen.active .menu-main > .brand-links,
.screen.active .menu-side > .tile { animation:mnIn .38s ease both }
.menu-side > .tile:nth-child(1) { animation-delay:.03s } .menu-side > .tile:nth-child(2) { animation-delay:.06s }
.menu-side > .tile:nth-child(3) { animation-delay:.09s } .menu-side > .tile:nth-child(4) { animation-delay:.12s }
.menu-side > .tile:nth-child(5) { animation-delay:.15s } .menu-side > .tile:nth-child(6) { animation-delay:.18s }
.menu-side > .tile:nth-child(7) { animation-delay:.21s } .menu-side > .tile:nth-child(8) { animation-delay:.24s }
.menu-main > *:nth-child(2) { animation-delay:.06s } .menu-main > *:nth-child(3) { animation-delay:.1s }
.menu-main > *:nth-child(4) { animation-delay:.14s }
@keyframes mnIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
/* حركة على كل زر صغير */
.tile.sm { transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease }
.tile.sm svg { transition:transform .18s ease }
.tile.sm:hover svg, .tile.sm:focus-visible svg { transform:scale(1.18) translateY(-1px) }
.tile.sm:active { transform:translateY(0) scale(.985) }
.tile .t-ic { width:20px; height:20px; display:inline-grid; place-items:center; color:var(--accent2); margin-bottom:4px }
.tile .t-ic svg, .tile .t-ic img { width:20px; height:20px; object-fit:contain }
/* ---------- الأزرار الجانبية الصغيرة ----------
كانت الأيقونة فوق النص فيختلف ارتفاع كل زر بطول اسمه وتبدو الصفوف غير مستوية.
الآن: خانتان — الأيقونة في مربّع ثابت له خطّه الفاصل، والنص يملأ ما تبقّى
ويتمركز فيه. فكل الأزرار بنفس الارتفاع مهما طال الاسم، والأيقونة لها مساحتها. */
.menu-col { grid-auto-rows:1fr } /* الصفوف كلها بارتفاع الأطول = شبكة مستوية */
.menu-col .tile.sm { display:grid; grid-template-columns:52px 1fr; align-items:stretch;
padding:0; gap:0; min-height:58px; height:100%; overflow:hidden }
.menu-col .tile.sm > .t-ic { width:auto; height:auto; margin:0; display:grid; place-items:center;
border-inline-end:1px solid var(--line); background:#ffffff08;
transition:background .18s ease, border-color .18s ease }
.menu-col .tile.sm > .t-ic svg, .menu-col .tile.sm > .t-ic img { width:21px; height:21px }
.menu-col .tile.sm > b { display:grid; place-items:center; text-align:center; padding:12px 10px;
font-size:.95rem; line-height:1.25; min-width:0 }
.menu-col .tile.sm:hover > .t-ic, .menu-col .tile.sm:focus-visible > .t-ic {
background:#ffffff12; border-color:var(--mb40t) }
.menu-col .tile.sm > .dot { top:7px; inset-inline-end:7px }
/* الفاصل السفلي المتحرّك يبدأ من حافة النص لا من تحت الأيقونة */
.menu-col .tile.sm::after { inset-inline-start:52px }
.login-head { display:flex; flex-direction:column; gap:3px; margin-bottom:8px }
.login-head b { font-size:1.05rem } .login-head span { opacity:.7; font-size:.86rem }
.login-head[hidden] { display:none }
.login-note { margin:8px 0 0; text-align:center }
@media (prefers-reduced-motion: reduce) {
.screen.active .mn-hero, .screen.active .menu-main > *, .screen.active .menu-side > .tile,
.announce:not(:empty) { animation:none }
.mn-hero::before { display:none }
.tb-smoke .sm, .tb-ember, .tb-rift, .sn-txt::before, .tb-user:hover::after { animation:none }
.tb-user:hover .tb-bn-img { transform:scale(1.03) }
}
@media (max-width:700px) {
/* على الجوال يلتف الشريط لسطرين وارتفاعه متغيّر، فأي مسافة ثابتة إما تقصّر أو تزيد.
نجعله عنصرًا عاديًا في التدفّق فيأخذ مساحته بنفسه — بلا أرقام سحرية ولا تراكب. */
#scr-menu { padding-top:calc(10px + var(--safe-t)); gap:10px }
#scr-menu .topbar { position:static; width:100%; background:none; padding-inline:0 }
/* الشريط على الجوال: البطاقة سطرًا كاملًا، والموسم والأزرار تحتها — بلا ازدحام */
.tb2 { flex-wrap:wrap; align-items:center; padding-bottom:16px; row-gap:8px }
.tb-id { flex:1 1 100%; order:0 }
.tb-user { width:100%; flex:1 1 auto }
.tb-scrap { margin-inline-start:8px }
.tb-mid { position:static; order:2; flex:1 1 auto; justify-content:flex-start; padding-inline:0 }
.tb2 .tb-right { order:1; flex:0 0 auto }
.tb-smoke { height:46px; opacity:.75 }
.tb-season { flex-direction:row; align-items:center; gap:8px }
.sn-txt { font-size:.88rem; padding:4px 16px }
.sn-em { max-width:64px; max-height:26px }
.menu { grid-template-columns:1fr; gap:14px }
.menu-play { order:-1 } /* اللعب أولًا على الجوال */
.menu-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; grid-auto-rows:1fr }
.buy-sep { grid-column:1 / -1 }
.menu-play > .pcard { min-height:104px }
/* نفس الاندماج على الجوال — بلا حدّ مائل ولا عرض جزئي */
.pc-media { inset:0; width:auto; clip-path:none }
.pc-body { width:66%; padding:13px 15px }
.pc-title { font-size:1rem } .pcard.hero .pc-title { font-size:1.25rem } .pc-sub { font-size:.8rem }
.pc-go { width:30px; height:30px; inset-block-end:12px; inset-inline-end:12px }
.cd-in { font-size:1rem; letter-spacing:1px }
.cd-prize { gap:10px; padding:11px } .cd-pz-art { width:60px; height:60px } .cd-pz-art.wide { width:104px; height:46px }
.tm-body { max-height:38vh }
}
@media (max-width:420px) {
.menu-play { grid-template-columns:1fr; grid-template-rows:repeat(4,1fr) }
.menu-play > .pcard { grid-column:1 / -1 }
}
/* ---------- بطاقات اللعب الأربع ---------- */
/* --tint: لون الزر من المحرك. الافتراضي لون الواجهة، فالمظهر يبقى متناسقًا بلا إعداد. */
.pcard { --tint:var(--panel); position:relative; display:flex; align-items:stretch; min-height:108px; padding:0;
cursor:pointer; color:var(--text); font:inherit; text-align:start; width:100%; overflow:hidden;
background:linear-gradient(135deg,var(--tint),#0b0c11 82%); border:1px solid var(--line);
clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.pcard:hover, .pcard:focus-visible { transform:translateY(-3px); box-shadow:0 16px 36px #000a; border-color:#ffffff33; outline:none }
.pcard:active { transform:translateY(-1px) }
.pcard.hero { --tint:var(--accent); color:#fff; border-color:transparent }
.menu-play > .pcard { min-height:128px }
/* ---------- اندماج الصورة بلون الزر ----------
كان بينهما حدّ مائل حادّ — خطّ مرسوم يفصل نصفين. الآن الصورة تمتدّ على كامل
البطاقة ويخفت قناعها تدريجيًا ناحية النص، ويعبر فوقها تدرّج بلون الزر من الجهة
الثانية. النتيجة انتقال مستمر بلا أي حافة: تُقرأ كصورة واحدة مضاءة بلون الزر.
(الواجهة RTL: inset-inline-start = يمين، و«to left» = باتجاه النص.) */
.pc-media { position:absolute; inset:0; overflow:hidden; clip-path:none;
-webkit-mask-image:linear-gradient(to left, #000 0 30%, #000c 52%, #0000 88%);
mask-image:linear-gradient(to left, #000 0 30%, #000c 52%, #0000 88%) }
.pc-media img { width:100%; height:100%; object-fit:cover; display:block; opacity:.92;
object-position:var(--focus, 50% 50%);
transition:transform .5s ease; transform:scale(1.03) }
.pcard:hover .pc-media img { transform:scale(1.08) }
/* تدرّج لون الزر فوق الصورة — يبدأ صلبًا عند النص ويتلاشى داخلها */
.pc-media::after { content:''; position:absolute; inset:0;
background:linear-gradient(to left, #0000 8%, color-mix(in srgb, var(--tint) 62%, #0b0c11) 48%,
color-mix(in srgb, var(--tint) 92%, #0b0c11) 74%, var(--tint) 100%) }
/* حجاب سفلي خفيف: يثبّت قراءة النص فوق أي صورة فاتحة */
.pcard::after { content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to left, #0000 45%, #0b0c1159 100%) }
.pcard.nomedia .pc-media, .pcard.nomedia::after { display:none }
.pc-body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:4px;
padding:14px 16px; margin-inline-start:auto; width:64% }
/* مكان النص داخل البطاقة — يُختار من المحرك. «أسفل» يجعل عناوين البطاقات
الأربع على خطّ واحد مهما اختلف طول الشرح، وهو أنظف شكل. */
.menu-play.tx-top .pc-body { justify-content:flex-start }
.menu-play.tx-mid .pc-body { justify-content:center }
.menu-play.tx-bot .pc-body { justify-content:flex-end }
/* سطر الشرح اختياري لكل بطاقة — يُطفأ من المحرك ويرجع متى شاء */
.pcard.nosub .pc-sub { display:none }
/* الشارة وأيقونة التشغيل على بطاقة الانضمام: تُظهر بطلب من المحرك فقط */
.pcard .pc-badge, .pcard .pc-go { display:none }
.pcard.show-badge .pc-badge { display:inline-flex }
.pcard.show-go .pc-go { display:grid }
.pcard.nomedia .pc-body { width:100%; margin-inline-start:0 }
.pc-badge { display:inline-flex; align-self:flex-start; padding:2px 9px; border-radius:999px;
background:#ffffff26; font-size:.72rem; font-weight:800; letter-spacing:.5px }
.pc-badge:empty { display:none }
/* أيقونات بطاقات اللعب الأربع أُزيلت بطلبه — العنوان وحده أوضح.
(القاعدة بعد تعريفها لا قبله، وإلا ألغاها التعريف اللاحق.) */
.pc-ic { display:none }
/* ترتيب النصّ: العنوان يلتفّ التفافًا متوازنًا لا كلمة وحيدة في سطر،
والشرح محصور بسطرين مهما طال — فتبقى البطاقات الأربع متناسقة دائمًا. */
.pc-title { font-size:1.12rem; line-height:1.25; text-shadow:0 2px 12px #0008; text-wrap:balance }
.pcard.hero .pc-title { font-size:1.35rem }
.pc-sub { opacity:.8; font-size:.85rem; line-height:1.35;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.pc-go { position:absolute; z-index:1; inset-block-end:14px; inset-inline-end:16px; width:34px; height:34px;
display:grid; place-items:center; border-radius:50%; background:#ffffff1f; transition:transform .2s ease, background .2s ease }
.pcard:hover .pc-go { background:#ffffff33; transform:translateX(-4px) }
[dir=rtl] .pcard:hover .pc-go { transform:translateX(4px) }
.pcard.soon { cursor:default; opacity:.62; filter:saturate(.5) }
.pcard.soon:hover { transform:none; box-shadow:none; border-color:var(--line) }
.pcard.soon .pc-title::after { content:''; }
/* لمعة تمرّ على بطاقة البطل */
.pcard.hero::before { content:''; position:absolute; inset-block:0; inset-inline-start:-60%; width:45%; z-index:2;
background:linear-gradient(105deg,#fff0,#ffffff2e,#fff0); transform:skewX(-18deg); pointer-events:none;
transition:inset-inline-start .6s ease }
.pcard.hero:hover::before { inset-inline-start:115% }
.join-row { display:flex; flex-direction:column; gap:5px; background:var(--mn90t); border:1px solid var(--line);
padding:12px 14px; border-radius:var(--radius) }
.join-row label { font-weight:700; opacity:.8; font-size:.9rem }
.join-row .row { width:100%; display:flex; gap:8px } .join-row .row input { flex:1 } .join-row .row .btn { flex:0 0 auto }
/* الأزرار الجانبية: صورة اختيارية كطبقة خافتة خلف النص */
.tile.sm.has-img::before { content:''; position:absolute; inset:0; z-index:0;
background-image:var(--img); background-size:cover; background-position:center; opacity:.3 }
.tile.sm.has-img::after { content:''; position:absolute; inset:0; z-index:0; width:100%; height:100%;
background:linear-gradient(105deg,var(--tint,transparent) 18%,#0b0c11cc 88%) }
.tile.sm.has-img > * { position:relative; z-index:1 }
.tile.sm.has-img:hover::after { width:100% }
/* حركة دخول للأعمدة الجديدة */
.screen.active .menu-col > .tile, .screen.active .menu-play > * { animation:mnIn .38s ease both }
.menu-col > .tile:nth-child(2) { animation-delay:.04s } .menu-col > .tile:nth-child(3) { animation-delay:.08s }
.menu-col > .tile:nth-child(4) { animation-delay:.12s } .menu-col > .tile:nth-child(5) { animation-delay:.16s }
.menu-col > .tile:nth-child(6) { animation-delay:.2s }
.menu-play > *:nth-child(2) { animation-delay:.05s } .menu-play > *:nth-child(3) { animation-delay:.09s }
.menu-play > *:nth-child(4) { animation-delay:.13s }
/* ---------- شاشة استبدال الكود ---------- */
.cd-wrap { display:flex; flex-direction:column; gap:12px; max-width:520px; margin:6px auto 0 }
.cd-box { display:flex; align-items:center; gap:8px; background:#0b0c11; border:1px solid var(--line);
border-radius:var(--radius); padding:8px 10px; transition:border-color .16s ease, box-shadow .16s ease }
.cd-box:focus-within { border-color:var(--accent2); box-shadow:0 0 0 3px var(--ma25t) }
.cd-ic { width:26px; height:26px; display:grid; place-items:center; color:var(--accent2); flex:0 0 auto }
.cd-ic svg { width:22px; height:22px }
.cd-in { flex:1; background:none; border:0; color:var(--text); font-size:1.15rem; letter-spacing:2px;
text-align:center; padding:8px 4px; min-width:0 } .cd-in:focus { outline:none }
/* كود عربي: الخطّ الأحادي والمسافة بين الحروف يكسران اتصال الحروف العربية،
فنرجع لخطّ الواجهة بلا تباعد متى ما كتب اللاعب بالعربي. */
.cd-in.ar { font-family:inherit; letter-spacing:normal }
.cd-go.busy, .cd-box .btn:disabled { opacity:.6 }
.cd-msg { min-height:1.2em; text-align:center; font-weight:700; font-size:.92rem; margin:0 }
.cd-msg.bad { color:#ff7d7d } .cd-msg.good { color:#7ee6a6 }
.cd-prize { display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--radius);
background:linear-gradient(135deg,var(--ma25p),#12141c 70%); border:1px solid var(--accent) }
.cd-prize.hidden { display:none }
.cd-prize.pop { animation:pzIn .45s cubic-bezier(.2,1.3,.4,1) both }
@keyframes pzIn { from { opacity:0; transform:scale(.88) translateY(8px) } to { opacity:1; transform:none } }
.cd-pz-art { width:74px; height:74px; flex:0 0 auto; border-radius:12px; overflow:hidden; background:#0b0c11;
display:grid; place-items:center; border:1px solid var(--line) }
.cd-pz-art.wide { width:132px; height:56px }
.cd-pz-art img { width:100%; height:100%; object-fit:cover; display:block }
.cd-pz-ic { width:34px; height:34px; color:var(--accent2) }
.cd-pz-txt { display:flex; flex-direction:column; gap:2px; min-width:0 }
.cd-pz-kind { font-size:.74rem; font-weight:800; color:var(--accent2); letter-spacing:.4px }
.cd-pz-txt b { font-size:1.1rem } .cd-pz-txt small { opacity:.65; font-size:.8rem }
/* ---------- شاشة التذكير ---------- */
.tm-page { max-width:620px; margin-inline:auto }
.tm-h { display:flex; align-items:center; gap:10px; margin-bottom:10px }
.tm-h h2 { margin:0 }
.tm-ic { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px;
background:var(--ma25t); color:var(--accent2) } .tm-ic svg { width:24px; height:24px }
.tm-body { max-height:44vh; overflow:auto; display:flex; flex-direction:column; gap:9px;
padding:14px; border-radius:var(--radius); background:#0b0c11; border:1px solid var(--line) }
.tm-body:focus-visible { outline:2px solid var(--accent2); outline-offset:2px }
.tm-body p { margin:0; display:flex; gap:9px; align-items:flex-start; font-size:.94rem; line-height:1.65 }
.tm-dot { width:7px; height:7px; flex:0 0 auto; margin-top:.55em; border-radius:50%; background:var(--accent2) }
.tm-agree { display:flex; align-items:center; gap:9px; margin:14px 0 10px; cursor:pointer; font-weight:700 }
.tm-agree input { width:19px; height:19px; accent-color:var(--accent); cursor:pointer; flex:0 0 auto }
#tmGo { width:100% } #tmGo:disabled { opacity:.45; cursor:not-allowed }
/* نقطة التحديث في الشريط العلوي */
#btnUpdate { position:relative }
/* ---------- الحسابات: دخول / تسجيل / استرجاع ---------- */
.auth-tabs { display:flex; gap:6px; margin-bottom:14px; background:#0b0c1188; padding:4px; border-radius:var(--radius) }
.auth-tabs button { flex:1; padding:9px 10px; background:none; border:0; color:#9aa0ab; font:inherit; font-weight:700;
cursor:pointer; border-radius:calc(var(--radius) - 1px); transition:.15s }
.auth-tabs button.on { background:var(--ma25t); color:var(--text); box-shadow:inset 0 -2px 0 var(--accent) }
.auth-tabs[hidden] { display:none }
.auth-pane { display:flex; flex-direction:column }
.auth-pane[hidden] { display:none }
.pw-row { position:relative; display:flex; align-items:center }
.pw-row input { flex:1; padding-inline-end:42px }
.pw-eye { position:absolute; inset-inline-end:6px; width:32px; height:32px; display:grid; place-items:center;
background:none; border:0; color:#9aa0ab; cursor:pointer; padding:0 }
.pw-eye.on { color:var(--accent2) }
.pw-eye svg { width:18px; height:18px }
.forgot { align-self:center; margin-top:8px; background:none; border:0; color:#9aa0ab; cursor:pointer;
font:inherit; font-size:.85rem; text-decoration:underline }
.forgot:hover { color:var(--accent2) }
.rec-modal .dlg { max-width:420px; text-align:center }
.rec-modal h3 { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px }
.rec-code { font-size:1.35rem; font-weight:900; letter-spacing:3px; padding:14px; margin:14px 0;
background:#0b0c11; border:1px dashed var(--accent2); border-radius:var(--radius); color:var(--accent2); user-select:all }
.rec-modal .row2 { display:flex; gap:8px; justify-content:center }
/* ---------- حوار إعادة التحميل / التحديث ---------- */
.rl-box { max-width:400px; text-align:center; align-items:center }
.rl-ic { width:54px; height:54px; display:grid; place-items:center; border-radius:50%;
background:var(--ma25t); color:var(--accent); margin:0 auto 4px }
.rl-ic.upd { background:var(--mb20t); color:var(--accent2) }
.rl-ic svg { width:26px; height:26px }
.rl-box h3 { margin-bottom:4px }
.rl-box p { margin:0 0 6px }
.rl-box .row2 { display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
/* يمنع «اسحب للتحديث» على الجوال أثناء اللعب */
body.in-game { overscroll-behavior:none }
/* =====================================================================
الشخصيات — منصّة عرض + شبكة، بنفس لغة صفحة التجهيز
===================================================================== */
.cs-wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start }
.cs-stage { min-width:0 }
.cs-card { display:flex; gap:16px; padding:16px; border-radius:12px; background:var(--mn90t);
border:1px solid var(--line); border-top:3px solid var(--rar) }
.cs-portrait { position:relative; flex:0 0 132px; height:198px; border-radius:10px; overflow:hidden;
background:linear-gradient(180deg,#0b0c11,#14161f); border:1px solid var(--line); display:grid; place-items:center }
.cs-portrait canvas { width:112px; height:168px; image-rendering:pixelated }
.cs-veil { position:absolute; inset:0; display:grid; place-items:center; background:#000a; color:#fff }
.cs-veil svg { width:30px; height:30px }
.cs-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px }
.cs-tier { align-self:flex-start; font-size:.72rem; font-weight:800; padding:2px 9px; border-radius:999px;
background:var(--ma25t); color:var(--rar) }
.cs-info h3 { font-size:1.3rem }
.cs-ttl { color:var(--accent2); font-size:.9rem; font-weight:700 }
.cs-story { margin:0; font-size:.92rem; line-height:1.75; opacity:.85 }
.cs-traits { display:flex; flex-wrap:wrap; gap:6px }
.cs-traits span { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; padding:3px 9px;
border-radius:999px; background:#0b0c11; border:1px solid var(--line) }
.cs-traits svg { width:13px; height:13px; color:var(--accent2) }
.cs-note { margin:4px 0 0 }
.cs-side { display:flex; flex-direction:column; gap:10px; min-width:0 }
.cs-search { display:flex; align-items:center; gap:8px; background:var(--mn90t); border:1px solid var(--line);
border-radius:9px; padding:0 10px }
.cs-search svg { width:15px; height:15px; opacity:.5; flex:none }
.cs-search input { flex:1; min-width:0; background:none; border:0; color:var(--text); font:inherit;
font-size:16px; padding:9px 0; outline:none }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px }
.cs-empty { grid-column:1/-1; text-align:center; padding:18px }
.cs-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px;
border-radius:10px; cursor:pointer; text-align:center; background:var(--panel); border:1px solid var(--line);
border-top:2px solid var(--rar); transition:transform .12s ease, border-color .12s ease }
.cs-tile:hover, .cs-tile:focus-visible { transform:translateY(-2px); border-color:var(--rar); outline:none }
.cs-tile.sel { background:var(--ma25t); border-color:var(--accent) }
.cs-tile.locked { opacity:.5 }
.cs-tile b { font-size:.8rem; line-height:1.3 }
.cs-pv { width:56px; height:66px; display:grid; place-items:center }
.cs-pv canvas { max-width:100%; max-height:100%; width:auto; height:auto; image-rendering:pixelated }
.cs-lock { position:absolute; inset-block-start:4px; inset-inline-end:4px; display:inline-flex; align-items:center;
gap:2px; font-size:.65rem; background:#000a; border-radius:4px; padding:1px 4px }
.cs-lock svg { width:11px; height:11px }
.cs-eq { position:absolute; inset-block-start:4px; inset-inline-start:4px; color:var(--accent2) }
.cs-eq svg { width:14px; height:14px }
/* =====================================================================
البروفايل
===================================================================== */
.pf-hero { position:relative; margin-bottom:54px }
.pf-banner { height:150px; border-radius:12px; background-size:cover; background-position:center;
background-repeat:no-repeat; background-color:#0b0c11; /* لا يبيضّ مهما كان الثيم */
border:1px solid var(--line) }
.pf-bn-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.pf-banner.empty { background:linear-gradient(120deg,var(--ma25p),#12141c 60%,var(--mb30p)) }
.pf-id { position:absolute; inset-inline:14px; inset-block-end:-44px; display:flex; align-items:flex-end; gap:14px }
.pf-av { position:relative; width:92px; height:92px; flex:0 0 auto; border-radius:14px; overflow:hidden;
background:#0b0c11; border:2px solid var(--accent); cursor:pointer; padding:0; display:grid; place-items:center }
.pf-av-in, .pf-av-in img, .pf-av-in canvas { width:100%; height:100%; display:block }
.pf-av-in img { object-fit:cover }
.pf-av-in canvas { image-rendering:pixelated; object-fit:contain }
.pf-av-edit { position:absolute; inset-block-end:0; inset-inline:0; padding:3px; background:#000b; color:#fff;
display:grid; place-items:center; opacity:0; transition:.15s }
.pf-av:hover .pf-av-edit, .pf-av:focus-visible .pf-av-edit { opacity:1 }
.pf-av-edit svg { width:14px; height:14px }
.pf-meta { flex:1; min-width:0; padding-bottom:6px }
.pf-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pf-name b { font-size:1.35rem }
.pf-lvl { display:flex; align-items:center; gap:8px; font-size:.85rem; flex-wrap:wrap }
.pf-lvl .xp-mini { width:120px }
.pf-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; margin-bottom:16px }
.pf-st { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:10px;
background:var(--mn90t); border:1px solid var(--line) }
.pf-st svg { width:17px; height:17px; color:var(--accent2) }
.pf-st b { font-size:1.2rem } .pf-st span { font-size:.75rem; opacity:.6 }
.pf-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px }
.pf-box { padding:14px; border-radius:10px; background:var(--mn90t); border:1px solid var(--line) }
.pf-box h3 { font-size:1rem; margin-bottom:6px }
.pf-box .row { display:flex; gap:8px; margin-top:8px } .pf-box .row input { flex:1; min-width:0 }
.pf-titles { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.pf-t { background:#0b0c11; border:1px solid var(--line); color:var(--text); padding:6px 12px; cursor:pointer;
font:inherit; font-size:.84rem; border-radius:999px }
.pf-t.on { border-color:var(--accent); background:var(--ma25p) }
.pf-pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; max-height:52vh; overflow:auto }
.pf-pick.wide { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) }
.pf-opt { padding:0; border:2px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer;
background:#0b0c11; aspect-ratio:1/1; display:grid; place-items:center }
.pf-pick.wide .pf-opt { aspect-ratio:3/1 }
.pf-opt.on { border-color:var(--accent) }
.pf-opt img { width:100%; height:100%; object-fit:cover; display:block }
/* «بلا اختيار» — آخر القائمة وبمظهر مختلف تمامًا، فلا تُضغط بالغلط بدل الاختيار */
.pf-opt.pf-clear { border-style:dashed; border-color:#ffffff2e; background:#0b0c11 }
.pf-opt.pf-clear:hover { border-color:#ff7d7d99 }
.pf-none { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); font-size:.78rem; font-weight:700 }
.pf-none svg { width:16px; height:16px }
.pf-none { font-size:.78rem; color:#9aa0ab }
@media (max-width:860px) {
.cs-wrap { grid-template-columns:1fr }
.cs-card { flex-direction:column; align-items:center; text-align:center }
.cs-info { align-items:center } .cs-tier { align-self:center }
.pf-id { position:static; margin-top:-40px; padding-inline:6px }
.pf-hero { margin-bottom:14px }
}
/* ---------- شاشة الإقلاع: تمنع وميض صفحة التسجيل قبل استئناف الجلسة ---------- */
.boot { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:var(--bg) }
.boot-in { display:flex; flex-direction:column; align-items:center; gap:12px }
.boot-ring { width:34px; height:34px; border-radius:50%; border:3px solid #ffffff1f;
border-top-color:var(--accent); animation:bootSpin .8s linear infinite }
.boot-txt { font-size:.86rem; color:#9aa0ab }
@keyframes bootSpin { to { transform:rotate(360deg) } }
body.booted .boot { opacity:0; pointer-events:none; transition:opacity .25s ease }
body.booted .boot.gone { display:none }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration:2s } }
.logo[hidden] { display:none }
/* ---------- البروفايل: الحالة الفارغة للمبتدئ ---------- */
.pf-banner { position:relative; cursor:pointer; transition:border-color .15s ease, transform .15s ease; overflow:hidden }
.pf-banner:hover, .pf-banner:focus-visible { border-color:var(--accent2); outline:none }
.pf-banner.empty { border:1px dashed #ffffff26;
background:linear-gradient(120deg,#0b0c11,#0f1117 60%,#0b0c11) }
.pf-bn-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:3px; color:#9aa0ab; pointer-events:none }
.pf-bn-empty svg { width:26px; height:26px; opacity:.55 }
.pf-bn-empty b { font-size:.95rem; color:var(--text) }
.pf-bn-empty small { font-size:.78rem }
.pf-banner.empty:hover .pf-bn-empty svg { opacity:.9 }
.pf-av.empty { border-style:dashed; border-color:#ffffff33 }
.pf-av.empty .pf-av-edit { opacity:.85 }
.pf-opt { position:relative }
.pf-opt.locked { opacity:.42; cursor:default }
.pf-opt-lock { position:absolute; inset:0; display:grid; place-items:center; background:#0007; color:#fff }
.pf-opt-lock svg { width:16px; height:16px }
.pf-opt-nm { position:absolute; inset-block-end:0; inset-inline:0; font-size:.66rem; padding:2px 4px;
background:#000a; color:#cfd3dc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf-empty { padding:18px }
.pf-box .err.good { color:#4db38f }
/* ---------- إطار البروفايل: صورة شفافة تحيط بالأيقونة ----------
الإطار مربّع دائمًا، لكن أيقونة الشريط ٤٠×٤٨ (طوليّة). كان الإطار يُمدّ على
صندوق غير مربّع ويخرج عنه بـinset سالب، فيُقصّ عند حافة البطاقة ويبان مكسورًا.
الآن: الصندوق يصير مربّعًا عند وجود إطار، والإطار يملؤه تمامًا بلا خروج،
والأيقونة تنكمش داخله فيطوّقها. */
.framed { position:relative }
.pf-frame { position:absolute; inset:0; width:100%; height:100%; max-width:none;
object-fit:contain; pointer-events:none; z-index:3; display:block }
/* أيقونة الشريط: تصير مربّعة عند التأطير فما ينضغط الإطار ولا يخرج */
/* .avatar img العامة أقوى تخصيصًا من .pf-frame فكانت تفرض cover على الإطار
وتمطّطه. نعيد ضبطه هنا بتخصيص أعلى. وحجم مربّع مثبّت بـ!important لأن
قواعد الجوال تضيّق الأيقونة فيخرج الإطار عن التربيع. */
.avatar .pf-frame, .avatar.framed > img.pf-frame { object-fit:contain; width:100%; height:100%; inset:0; clip-path:none }
.avatar.framed { width:48px; height:48px; flex:0 0 auto; overflow:hidden; clip-path:none;
border-color:transparent; background:transparent; display:grid; place-items:center }
/* :not(.pf-frame) مهم: الإطار نفسه ![]()
ابن مباشر، وبدون الاستثناء كان يأخذ
مقاس ٧٠٪ وobject-fit:cover فينضغط ويصغر بدل ما يطوّق الأيقونة */
.avatar.framed > img:not(.pf-frame) { width:70%; height:70%; object-fit:cover;
clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px) }
.avatar.framed > canvas { width:auto; height:70%; object-fit:contain }
/* أيقونة البروفايل: مربّعة أصلًا — نكتفي بتصغير المحتوى داخل الإطار */
.pf-av.framed > .pf-av-in { transform:scale(.74) }
.pf-av.framed .pf-av-edit { z-index:4 }
.pf-btns { display:flex; gap:8px; flex-wrap:wrap }
.pf-pick.frames .pf-opt img { object-fit:contain; background:
linear-gradient(45deg,#ffffff08 25%,#0000 25%,#0000 75%,#ffffff08 75%) 0 0/16px 16px,
linear-gradient(45deg,#ffffff08 25%,#0000 25%,#0000 75%,#ffffff08 75%) 8px 8px/16px 16px, #0b0c11 }
/* ---------- المكافآت: تبويبان في صفحة واحدة ----------
.subtabs ما كان لها أي تنسيق في ملف اللعبة (موجودة في المحرك فقط)، فالمتصفّح
يرسمها أزرارًا رمادية فاتحة فتبان دخيلة على الواجهة الداكنة. هذا تعريفها هنا. */
.rw-dlg { max-width:min(680px,95vw) }
.subtabs, .rw-tabs { display:flex; gap:4px; padding:4px; margin-bottom:12px;
background:#0b0c11; border:1px solid var(--line); border-radius:calc(var(--radius) + 4px) }
.subtabs button, .rw-tabs button { position:relative; flex:1 1 0; min-width:0; padding:9px 12px;
font:inherit; font-weight:800; font-size:.92rem; color:var(--text); opacity:.62; cursor:pointer;
background:none; border:0; border-radius:var(--radius); -webkit-appearance:none; appearance:none;
transition:background .18s ease, opacity .18s ease, color .18s ease }
.subtabs button:hover, .rw-tabs button:hover { opacity:.9; background:#ffffff0d }
.subtabs button.on, .rw-tabs button.on { opacity:1; background:#ffffff14; color:#fff;
box-shadow:inset 0 -2px 0 var(--accent2) }
.subtabs button:focus-visible, .rw-tabs button:focus-visible { outline:2px solid var(--accent2); outline-offset:-2px }
.rw-tabs .dot { position:absolute; top:6px; inset-inline-end:8px; width:8px; height:8px; border-radius:50%;
background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 1.2s infinite }
.rw-tabs .dot.hidden { display:none }
/* سطر الحالة: رقاقات بدل جملة طويلة */
#dailyHint { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px }
.rw-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:.78rem; font-weight:700;
border-radius:999px; background:#ffffff0f; border:1px solid var(--line) }
.rw-chip svg { width:13px; height:13px }
.rw-chip.live { background:#4db38f1f; border-color:var(--mb40t); color:#7ee0bd }
.rw-chip.wait { background:#ffffff0a; opacity:.75 }
.rw-chip.done { background:#c9a24d1f; border-color:#c9a24d55; color:#e9c76a }
.rw-chip.soft { opacity:.6; background:none }
/* بطاقة الجائزة */
.daily-grid { gap:8px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) }
.dd { position:relative; gap:5px; padding:12px 8px 11px; border-radius:var(--radius);
background:linear-gradient(180deg,#141722,#0b0c11); transition:transform .16s ease, border-color .16s ease }
.dd .n { font-size:.68rem; opacity:.5; font-weight:700 }
.dd b { font-size:.85rem; line-height:1.25 }
.dd-ic { display:grid; place-items:center; width:38px; height:38px; margin:1px auto 2px; border-radius:50%;
background:#ffffff0a; border:1px solid var(--line) }
.dd-ic svg { width:20px; height:20px; margin:0; color:#ffd166 }
.dd-ic img { width:24px; height:24px; object-fit:contain; border-radius:0 }
.dd.got { opacity:.55; border-color:var(--mb40t) }
.dd.got .dd-ic { background:#4db38f1a; border-color:var(--mb40t) } .dd.got .dd-ic svg { color:var(--accent2) }
.dd-ok { position:absolute; top:5px; inset-inline-start:5px; width:17px; height:17px; border-radius:50%;
display:grid; place-items:center; background:var(--accent2); color:#06110d }
.dd-ok svg { width:11px; height:11px; margin:0; color:inherit }
/* الجائزة الحالية: مميّزة بوضوح — هي المقصد */
.dd.cur { opacity:1; border-color:var(--accent); background:linear-gradient(180deg,#2a1116,#0b0c11);
box-shadow:0 0 0 1px var(--ma40t), 0 10px 26px #0008; transform:translateY(-2px) }
.dd.cur .dd-ic { background:var(--ma30t); border-color:var(--ma40t) }
.dd-now { position:absolute; top:-8px; inset-inline-end:8px; padding:1px 8px; border-radius:999px;
font-size:.62rem; font-weight:900; letter-spacing:.4px; background:var(--accent); color:#fff;
box-shadow:0 3px 10px var(--ma40t) }
.dd-once { display:block; margin-top:1px; font-size:.64rem; font-weight:800; letter-spacing:.3px;
color:var(--accent2); opacity:.85 }
/* لا شي بعد */
.rw-empty { display:flex; flex-direction:column; align-items:center; gap:6px; grid-column:1 / -1;
padding:30px 10px; text-align:center }
.rw-empty svg { width:32px; height:32px; opacity:.35 }
.rw-empty b { font-size:.98rem } .rw-empty small { opacity:.55; font-size:.82rem }
.rw-claim { width:100%; margin-top:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px }
.rw-claim:disabled { opacity:.5; cursor:default }
@media (max-width:420px) { .daily-grid { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) } .dd b { font-size:.78rem } }
/* ---------- كشف هدايا الكود ----------
صندوق يهتزّ ثم ينفتح، والهدايا تتقلّب واحدة بعد واحدة بتأخير متدرّج.
الإجمالي ≈ ٠٫٩ث + ٠٫٤ث لكل هدية — إحساس بالحدث بلا انتظار ممل. */
.cd-reveal { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px;
padding:16px 12px 14px; border-radius:var(--radius); background:linear-gradient(180deg,#141722,#0b0c11);
border:1px solid var(--line); position:relative; overflow:hidden }
.cd-reveal::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
background:radial-gradient(60% 50% at 50% 0%, var(--ma30t), #0000 70%) }
.cd-reveal.go::before { animation:rvFlash 1.1s ease-out forwards }
@keyframes rvFlash { 0% { opacity:0 } 25% { opacity:1 } 100% { opacity:.25 } }
/* الصندوق */
.rv-box { position:relative; width:64px; height:64px; display:grid; place-items:center; border-radius:12px;
background:linear-gradient(160deg,#2a1116,#12141c); border:1px solid var(--ma40t) }
.cd-reveal.go .rv-box { animation:rvShake .6s cubic-bezier(.36,.07,.19,.97) }
@keyframes rvShake {
0%,100% { transform:translateX(0) rotate(0) }
15% { transform:translateX(-4px) rotate(-4deg) } 30% { transform:translateX(4px) rotate(4deg) }
45% { transform:translateX(-3px) rotate(-3deg) } 60% { transform:translateX(3px) rotate(3deg) }
80% { transform:translateX(-1px) rotate(-1deg) }
}
.rv-ic { width:30px; height:30px; color:var(--accent); position:relative; z-index:1;
transition:transform .35s ease, opacity .35s ease }
.cd-reveal.open .rv-ic { transform:scale(.6) translateY(-6px); opacity:.35 }
.rv-lid { position:absolute; inset-inline:0; top:0; height:50%; border-radius:12px 12px 0 0;
background:linear-gradient(180deg,#3a1a20,#1d1016); border-bottom:1px solid var(--ma40t);
transform-origin:top center; transition:transform .45s cubic-bezier(.34,1.4,.64,1), opacity .45s ease }
.cd-reveal.open .rv-lid { transform:rotateX(-110deg) translateY(-3px); opacity:.25 }
.rv-glow { position:absolute; inset:0; border-radius:12px; opacity:0;
box-shadow:0 0 0 0 var(--ma40t) }
.cd-reveal.open .rv-glow { animation:rvPulse .9s ease-out }
@keyframes rvPulse { 0% { opacity:.9; box-shadow:0 0 0 0 var(--ma40t) } 100% { opacity:0; box-shadow:0 0 0 26px #0000 } }
.rv-head { text-align:center; opacity:0; transform:translateY(6px) }
.cd-reveal.open .rv-head { animation:rvIn .35s ease forwards }
.rv-head b { display:block; font-size:1.02rem } .rv-head small { opacity:.6; font-size:.8rem }
/* بطاقات الهدايا */
.rv-items { display:flex; flex-direction:column; gap:8px; width:100%; max-width:340px }
.rv-card { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--radius);
background:#ffffff0a; border:1px solid var(--line); opacity:0; transform:translateY(10px) scale(.96) }
.cd-reveal.go .rv-card { animation:rvIn .45s cubic-bezier(.34,1.3,.64,1) forwards; animation-delay:var(--d) }
@keyframes rvIn { to { opacity:1; transform:none } }
.rv-art { display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border-radius:8px;
background:#0b0c11; border:1px solid var(--line); overflow:hidden }
.rv-art.wide { width:88px; height:34px }
.rv-art img { width:100%; height:100%; object-fit:cover; display:block }
.rv-art .cd-pz-ic { width:22px; height:22px; color:#ffd166 }
.rv-txt { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 }
.rv-txt small { font-size:.7rem; opacity:.55; font-weight:700 }
.rv-txt b { font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rv-tick { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; flex:0 0 auto;
background:var(--accent2); color:#06110d }
.rv-tick svg { width:13px; height:13px }
@media (prefers-reduced-motion: reduce) {
.cd-reveal .rv-box, .cd-reveal .rv-card, .cd-reveal .rv-head, .cd-reveal::before, .rv-glow { animation:none }
.cd-reveal .rv-card, .cd-reveal .rv-head { opacity:1; transform:none }
.cd-reveal .rv-lid { transition:none; opacity:.25 }
}
/* ===== هوية الدور: الناجون مقابل أوباد =====
الصفحتان كانتا متطابقتين فما يفرّق اللاعب بينهما إلا بالاسم. الآن لكل دور
لونه (يُضبط من المحرك) يمسّ الترويسة والتبويب والبطاقات والمختار. */
#scr-perks, #scr-chars { --role:#3f9d7a }
/* شريط لوني أعلى اللوحة يعلن الدور فورًا */
#scr-perks .page, #scr-chars .page { position:relative }
#scr-perks .page::before, #scr-chars .page::before { content:''; position:absolute; inset-block-start:0;
inset-inline:0; height:3px; z-index:2; pointer-events:none;
background:linear-gradient(to left, transparent, var(--role), transparent) }
#scr-perks .page-h h2, #scr-chars .page-h h2 { color:color-mix(in srgb, var(--role) 50%, #ffffff) }
#scr-perks .tabs [data-prole].on, #scr-chars .tabs [data-kind].on {
background:color-mix(in srgb, var(--role) 84%, #0b0c11); border-color:transparent; color:#fff }
/* بطاقات البيركات */
#scr-perks .ptile.on, #scr-perks .ptile.sel { border-color:var(--role);
box-shadow:0 0 0 1px color-mix(in srgb, var(--role) 55%, transparent), 0 10px 26px #0008 }
#scr-perks .ptile:hover { border-color:color-mix(in srgb, var(--role) 60%, #ffffff22) }
#scr-perks .lo-head b { color:color-mix(in srgb, var(--role) 55%, #ffffff) }
#scr-perks .lo-slot.filled { border-color:color-mix(in srgb, var(--role) 62%, transparent) }
/* بطاقات الشخصيات */
#scr-chars .cs-tile.sel { border-color:var(--role);
box-shadow:0 0 0 1px color-mix(in srgb, var(--role) 55%, transparent), 0 10px 26px #0008 }
#scr-chars .cs-tile:hover { border-color:color-mix(in srgb, var(--role) 60%, #ffffff22) }
#scr-chars .cs-eq { background:var(--role) }
/* وهج خفيف خلف الترويسة يثبّت الإحساس باللون */
#scr-perks .page-h, #scr-chars .page-h { position:relative }
#scr-perks .page-h::after, #scr-chars .page-h::after { content:''; position:absolute; inset:-14px -10px auto;
height:120px; pointer-events:none; z-index:-1;
background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--role) 24%, transparent), transparent 74%) }
/* ================= المتجر ================= */
/* كان قائمة رمادية بلا معاينة ولا وصف. الآن: بانر تختاره، شريط مميّز يتحرّك،
تصنيفات، ومعاينة حقيقية لكل نوع منتج. */
.shop-bn { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
aspect-ratio:4/1; min-height:0; display:flex; align-items:stretch; margin-bottom:12px;
background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, #0b0c11), #0b0c11 78%) }
.shop-bn .sb-img { position:absolute; inset:0; }
.shop-bn .sb-img img { display:block; width:100%; height:100%; object-fit:cover; opacity:.55;
-webkit-mask-image:linear-gradient(to left,#000 0 34%,#0000 88%); mask-image:linear-gradient(to left,#000 0 34%,#0000 88%) }
.shop-bn .sb-body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center;
gap:6px; padding:16px 18px; width:66% }
.sb-kicker { align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.6px; padding:3px 10px;
border-radius:999px; background:#ffffff26 }
.shop-bn b { font-size:1.3rem; line-height:1.25; text-shadow:0 2px 12px #0009 }
.shop-bn p { margin:0; opacity:.82; font-size:.88rem; line-height:1.4;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.shop-bn .btn { align-self:flex-start; margin-top:2px }
.sf-wrap { margin-bottom:12px }
.sf-h { display:flex; align-items:baseline; gap:8px; margin-bottom:6px }
.sf-view { overflow:hidden; border-radius:var(--radius); padding:2px }
.sf-rail { display:flex; gap:10px; width:max-content; will-change:transform }
.sf-rail .item { width:176px; flex:0 0 auto }
.shop-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px }
.sh-tab { background:#ffffff0f; border:1px solid var(--line); color:inherit; border-radius:999px;
padding:6px 14px; cursor:pointer; font:inherit; font-size:.86rem; transition:.15s }
.sh-tab:hover { background:#ffffff1c }
.sh-tab.on { background:var(--accent); border-color:transparent; color:#fff }
.shop-grid .item, .sf-rail .item { position:relative; display:flex; flex-direction:column; align-items:center;
gap:6px; text-align:center; cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease }
.shop-grid .item:hover, .sf-rail .item:hover { transform:translateY(-3px); border-color:#ffffff33;
box-shadow:0 14px 30px #0009 }
.si-tag { position:absolute; inset-block-start:6px; inset-inline-start:6px; z-index:2; font-size:.66rem;
font-weight:800; padding:2px 8px; border-radius:999px; background:var(--accent); color:#fff }
.si-art { display:grid; place-items:center; width:100%; height:86px; border-radius:10px; overflow:hidden;
background:#ffffff08; border:1px solid var(--line) }
.si-art img { width:100%; height:100%; object-fit:cover }
.si-art.avatar img, .si-art.frame img { width:74px; height:74px; object-fit:contain }
.si-art.ttl b { font-size:.95rem; opacity:.9 }
.si-art.ic svg { width:34px; height:34px; opacity:.85 }
/* المربّعة تملأ ارتفاع الصندوق وتبقى مربّعة */
.si-art.sk canvas { max-width:100%; max-height:100%; width:auto; height:auto; image-rendering:pixelated }
.si-name { font-size:.92rem; line-height:1.25 }
.si-desc { font-size:.76rem; opacity:.68; line-height:1.35;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* نافذة تفاصيل المنتج */
.si-dlg { position:relative; text-align:center; max-width:420px }
.si-x { position:absolute; inset-block-start:8px; inset-inline-end:8px; padding:6px }
.si-big { margin:6px auto 10px; max-width:220px }
.si-big .si-art { height:150px }
.si-big .si-art.sk canvas { max-width:100%; max-height:110px; width:auto; height:auto }
.si-big .si-art.avatar img, .si-big .si-art.frame img { width:120px; height:120px }
.si-p { min-height:2.4em; margin:6px 0 12px }
.si-foot { display:flex; align-items:center; justify-content:space-between; gap:10px }
.price.big { font-size:1.1rem }
@media (max-width:520px) {
.shop-bn { min-height:128px } .shop-bn .sb-body { width:74%; padding:13px 14px } .shop-bn b { font-size:1.08rem }
.sf-rail .item { width:148px } .si-art { height:72px }
}
/* ================= الباتل باس ================= */
.pass-head.bp { display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.bp-tier { display:flex; flex-direction:column; align-items:center; min-width:82px; padding:8px 12px;
border-radius:var(--radius); border:1px solid var(--line);
background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 26%, #0b0c11), #0b0c11) }
.bp-tier b { font-size:1.7rem; line-height:1 }
.bp-tier i { font-style:normal; font-size:.74rem; opacity:.6 }
.pass-head.bp .pass-bar { flex:1; min-width:200px }
.xpbar.bp { position:relative; overflow:hidden; height:14px; border-radius:999px }
.xpbar.bp > div { transition:width .5s cubic-bezier(.22,1,.36,1) }
/* لمعة تمرّ على الشريط — تعطي إحساس التقدّم */
.bp-shine { position:absolute; inset-block:0; inset-inline-start:-40%; width:32%; pointer-events:none;
background:linear-gradient(105deg,#fff0,#ffffff3d,#fff0); transform:skewX(-18deg);
animation:bpShine 2.6s ease-in-out infinite }
@keyframes bpShine { 0% { inset-inline-start:-40% } 60%,100% { inset-inline-start:120% } }
.bp-hint { margin-top:3px }
.bp-next { display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:110px }
.bp-next-in { font-weight:700; font-size:.9rem }
@media (prefers-reduced-motion:reduce) { .bp-shine { animation:none; display:none } }
@media (max-width:520px) { .pass-head.bp { gap:10px } .bp-next { display:none } }
/* =====================================================================
الجوال: ترتيب الشاشة عموديًا وعرضيًا
---------------------------------------------------------------------
المشاكل اللي انعالجت هنا، كلها مقاسة على جوال حقيقي 390×844 و844×390:
• الشريط السفلي «قيد التطوير» كان يغطي آخر صف من كل صفحة.
• في الوضع العرضي: النوافذ تطلع أطول من الشاشة وزر الإجراء تحت الحافة
بلا ما تعرف إنه موجود.
• رسالة اللعب الوسطى كانت تعبر فوق قائمة التحديات وشريط الفريق.
• بانر المتجر يبلع نص الشاشة ونصّه يختفي خلف الزر.
• عمودي: لوحة اللعب شريط صغير في وسط سواد، والفريق ضايع تحتها.
المبدأ: نحجز لكل طبقة مكانها، وما نخلي شيئًا يعوم فوق شيء.
===================================================================== */
/* dvh يحسب شريط المتصفح المتحرّك؛ vh بديل للمتصفحات القديمة */
:root { --wipbar: 0px; }
body:has(.wip:not(:empty)) { --wipbar: 26px; }
/* البانر ما يُعصر: الصفحة عمود flex، فلمّا يطول محتواها كانت تقلّص البانر
إلى min-height ثم تقلّص فقرة الوصف داخله إلى ارتفاع صفر — فيختفي النص
كليًا على الجوال بلا أي أثر يدلّك عليه. flex:0 0 auto يخلّي الصفحة تمرّر
بدل ما تعصر. */
.shop-bn { flex: 0 0 auto; }
.shop-bn .sb-body > * { flex: 0 0 auto; }
@media (max-width: 950px) {
/* ١) الشريط السفلي ما يغطي آخر المحتوى */
.screen { padding-bottom: calc(14px + var(--safe-b) + var(--wipbar)); }
.screen.game { padding-bottom: 0; }
/* ٢) الصفحات تدخل في ارتفاع الشاشة مهما كان */
.page {
max-height: calc(100vh - 28px - var(--safe-t) - var(--safe-b) - var(--wipbar));
max-height: calc(100dvh - 28px - var(--safe-t) - var(--safe-b) - var(--wipbar));
}
/* ٣) رأس القائمة: الموسم ما يزاحم الخردة ولا الحساب */
.tb-mid { inset-inline: 132px; }
.tb-mid .season-chip { max-width: 100%; }
}
/* ---------- الوضع العرضي على جوال (الشاشة قصيرة) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
.screen { padding-block: calc(8px + var(--safe-t)) calc(8px + var(--safe-b) + var(--wipbar)); }
.page { padding: 12px 14px; gap: 10px; }
.page-h h2 { font-size: 1.15rem; }
.topbar { padding-block: calc(var(--safe-t) + 4px) 4px; }
/* شريط الموسم زينة — يختفي أول ما تضيق الشاشة بدل ما يتصادم */
.tb-mid { display: none; }
/* تنبيه «قيد التطوير» يصير لسانًا صغيرًا في الوسط بدل جدار يعبر الشاشة
ويغطي آخر صف من القائمة طول ما أنت تمرّر. */
.wip { inset-inline: auto; left: 50%; transform: translateX(-50%);
padding: 2px 12px; font-size: .62rem; border-radius: 9px 9px 0 0;
background: #000c; max-width: 86vw; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
/* بانر المتجر: يقصر، ونصّه يبان كامل، والزر ما يركب فوقه.
flex:0 0 auto ضرورية — بدونها كان الـflex يعصر فقرة الوصف إلى ارتفاع
صفر لتدخل في min-height، فيختفي النص تمامًا بلا أي أثر. */
.shop-bn { min-height: 86px; }
.shop-bn .sb-body { width: 78%; padding: 9px 12px; gap: 3px; }
.shop-bn b { font-size: 1rem; line-height: 1.2; }
.shop-bn p { font-size: .78rem; line-height: 1.35; -webkit-line-clamp: 1; line-clamp: 1; }
.shop-bn .btn { padding: 5px 12px; font-size: .8rem; }
.sb-kicker { font-size: .62rem; padding: 2px 8px; }
}
/* ---------- النوافذ: الرأس والزر الرئيسي يثبتان، والوسط يتمرّر ---------- */
/* قبلها كان زر «استلام المكافأة» تحت حافة الشاشة في الوضع العرضي — موجود
لكن ما أحد يشوفه ولا يعرف إن فيه تمرير. */
@media (max-height: 620px) {
.dlg {
max-height: calc(100vh - 16px - var(--safe-t) - var(--safe-b));
max-height: calc(100dvh - 16px - var(--safe-t) - var(--safe-b));
padding: 14px 16px;
}
.dlg > .dlg-h {
position: sticky; top: -14px; z-index: 3;
margin: -14px -16px 0; padding: 12px 16px 8px;
background: linear-gradient(var(--panel) 78%, transparent);
}
.dlg > .btn.primary.big:last-child,
.dlg > .btn.primary:last-child {
position: sticky; bottom: -14px; z-index: 3;
margin: 4px -16px -14px; border-radius: 0;
box-shadow: 0 -14px 20px -10px #000c;
}
}
/* =====================================================================
داخل اللعب
===================================================================== */
/* الرسالة الوسطى تبقى في العمود الأوسط فقط — لا تعبر فوق الأعمدة الجانبية */
.hud-msg {
width: min(60ch, 56vw); margin-inline: auto; padding: 6px 14px;
border-radius: 10px; background: radial-gradient(60% 140% at 50% 50%, #000c 0%, #0000 100%);
}
@media (orientation: portrait) { .hud-msg { width: min(60ch, 92vw); } }
@media (max-height: 520px) and (orientation: landscape) {
/* أعمدة جانبية أنحف حتى يبقى الوسط للّعب */
.hud-team .tm { min-width: 118px; font-size: .66rem; padding: 2px 7px; }
.hud-team .tm .nm { max-width: 62px; }
.hud-ch .c { font-size: .64rem; padding: 2px 7px; }
.hud-team { top: 52px; gap: 3px; }
/* التحديات تنزل تحت زرّي الدردشة والبلاغ (top:54px + 42px) — كانت تركب فوقهما */
.hud-ch { top: 104px; }
body.touch .hud-ch { top: 104px; }
.hud-msg { font-size: 1.05rem; top: 38%; }
.hud-hint { bottom: calc(14px + var(--safe-b)); font-size: .78rem;
width: min(70ch, 54vw); margin-inline: auto; }
.hud-timer { font-size: 1.05rem; padding: 2px 12px; }
.hud-top { padding: 6px 10px; }
}
/* ---------- عمودي: نحجز ثلاثة أشرطة — رأس، لعب، تحكّم ---------- */
@media (orientation: portrait) and (max-width: 700px) {
/* اللوحة تبقى متوسّطة بتقنية inset:0 + margin:auto الأصلية، لكن نحجز
شريطًا سفليًا للتحكّم فتتوسّط في ما تبقّى بدل نسبة ثابتة (22%) كانت
تتركها شريطًا صغيرًا وسط سواد. */
#cv { inset: 0 !important; margin: auto !important;
margin-bottom: calc(168px + var(--safe-b)) !important; }
/* الفريق تحت شريط المهام مباشرة — لا يعوم في السواد */
.hud-team { top: calc(104px + var(--safe-t)) !important; bottom: auto !important;
inset-inline-start: 10px; }
/* التحديات كانت مخفيّة تمامًا — نرجّعها صفًّا مضغوطًا في الأعلى */
/* عموديًا كذلك: تحت الزرّين لا فوقهما */
.hud-ch { display: flex !important; top: calc(106px + var(--safe-t)) !important;
inset-inline-end: 10px; }
.hud-ch .c { font-size: .66rem; padding: 2px 7px; max-width: 46vw; }
.hud-ch .c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-team .tm { min-width: 108px; font-size: .66rem; }
.hud-hint { bottom: calc(190px + var(--safe-b)); }
.rotate-hint { top: auto; bottom: calc(150px + var(--safe-b)); }
}
/* ===== شارة النسخة التجريبية (PTB) =====
علامة في الزاوية على غرار شارة DBD التجريبية. تظهر فوق كل الشاشات وما
تعترض أي نقرة. الحجم يتكيّف مع الشاشة بـclamp — شاشة الكمبيوتر الكبيرة
تستاهل شارة أكبر من شاشة الجوال، ومقياس واحد ثابت كان يطلع ضئيلًا عليها.
--ptb-s مقياس صاحب اللعبة (صغيرة/متوسطة/كبيرة) فوق ذلك التكيّف. */
.ptb{
position:fixed; z-index:6; pointer-events:none; user-select:none;
display:flex; flex-direction:column; gap:2px; max-width:min(46ch,74vw);
--ptb-s:1;
--ptb-f:calc(clamp(.78rem, .6rem + .52vw, 1.12rem) * var(--ptb-s));
--ptb-pad:calc(clamp(5px, .35vw + 3px, 9px) * var(--ptb-s));
padding:var(--ptb-pad) calc(var(--ptb-pad) * 1.7);
border-inline-start:calc(3px * var(--ptb-s)) solid var(--ptb-c,#b7101a);
background:linear-gradient(90deg,#0b0c11f2,#0b0c11c4);
opacity:var(--ptb-o,.85); transition:opacity .25s ease;
text-align:start; line-height:1.3;
}
.ptb[hidden]{ display:none }
.ptb.sm{ --ptb-s:.82 } .ptb.md{ --ptb-s:1 } .ptb.lg{ --ptb-s:1.28 }
.ptb b{ font-size:var(--ptb-f); font-weight:900; letter-spacing:.6px; color:var(--ptb-c,#b7101a) }
.ptb span{ font-size:calc(var(--ptb-f) * .82); color:var(--ptb-sc,#e8e6df); opacity:.75 }
.ptb span:empty{ display:none }
/* المواضع الأربعة. الأعلى يبدأ تحت الشريط العلوي فعليًا: --ptb-top يُقاس
بالجافاسكربت من ارتفاع الشريط الظاهر، لأن ارتفاعه يتغيّر مع الالتفاف
وحواف الجهاز — رقم ثابت كان يركب فوق شريط الخبرة والعلم. */
.ptb.tl{ top:var(--ptb-top, calc(8px + var(--safe-t))); left:calc(8px + var(--safe-l,0px)); right:auto }
.ptb.tr{ top:var(--ptb-top, calc(8px + var(--safe-t))); right:calc(8px + var(--safe-r,0px)); left:auto }
.ptb.bl{ bottom:calc(8px + var(--safe-b) + var(--wipbar,0px)); left:calc(8px + var(--safe-l,0px)); right:auto }
.ptb.br{ bottom:calc(8px + var(--safe-b) + var(--wipbar,0px)); right:calc(8px + var(--safe-r,0px)); left:auto }
/* داخل المباراة: أخفت وأصغر حتى لا تزاحم الـHUD */
body.in-game .ptb{ opacity:calc(var(--ptb-o,.85) * .5); --ptb-s:calc(var(--ptb-b,1) * .78) }
body.in-game .ptb span{ display:none }
body.in-game .ptb.sm{ --ptb-b:.82 } body.in-game .ptb.md{ --ptb-b:1 } body.in-game .ptb.lg{ --ptb-b:1.28 }
/* شاشات قصيرة جدًا: السطر الفرعي يختفي حتى لا يزاحم شيئًا */
@media (max-height:430px){ .ptb span{ display:none } .ptb{ max-width:58vw } }
/* ===== الشارة على الجوال: بطاقة صغيرة متناسقة في الزاوية =====
نفس شكل الكمبيوتر لكن أصغر وبعرض محدود. الحجز من JS (ptbTop) يمنع
المحتوى يجلس تحتها، فما نحتاج الشريط العريض اللي كان يقلتش مع تصغير النافذة. */
@media (max-width:900px){
body:not(.in-game) .ptb{
--ptb-f:calc(.74rem * var(--ptb-s));
--ptb-pad:calc(4px * var(--ptb-s));
max-width:min(60vw, 250px); gap:1px;
background:#0b0c11e6;
}
body:not(.in-game) .ptb span{ font-size:calc(var(--ptb-f) * .8); line-height:1.25;
display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
body:not(.in-game) .ptb span:empty{ display:none }
}
@media (max-width:900px) and (max-height:430px){ body:not(.in-game) .ptb span{ display:none } }
/* داخل المباراة على اللمس: الشارة تزاحم الفريق والتحديات — تختفي */
body.touch.in-game .ptb{ display:none !important }
/* ===== أزرار الأدوات (كشاف · حصى) ===== */
.toolbar{ position:absolute; z-index:4; display:flex; gap:10px;
bottom:calc(150px + var(--safe-b)); left:calc(30px + var(--safe-l)) }
.toolbar[hidden]{ display:none }
.tool{ position:relative; width:52px; height:52px; padding:0; border-radius:12px;
border:1px solid #ffffff22; background:#0b0c11cc; color:var(--text);
display:grid; place-items:center; cursor:pointer; touch-action:none;
-webkit-tap-highlight-color:transparent; transition:border-color .15s, background .15s }
.tool[hidden]{ display:none }
.tool .t-ic{ width:36px; height:36px; image-rendering:pixelated; pointer-events:none }
.tool.on{ border-color:#ffd98a; background:#ffd98a1f; box-shadow:0 0 12px #ffd98a44 }
.tool.empty{ opacity:.42 }
.tool:active{ transform:scale(.94) }
/* شريط البطّارية تحت أيقونة الكشاف */
.tool .t-bar{ position:absolute; left:8px; right:8px; bottom:6px; height:3px;
background:#ffffff1f; border-radius:2px; overflow:hidden }
.tool .t-bar > b{ display:block; height:100%; width:100%; background:#ffd98a; transition:width .2s linear }
.tool.empty .t-bar > b{ background:#8a7a45 }
/* عدّاد الحصى */
.tool .t-n{ position:absolute; top:3px; inset-inline-end:6px; font-size:.68rem; font-weight:900;
font-style:normal; color:#e8e6df; text-shadow:0 1px 2px #000 }
/* على الكمبيوتر الأزرار أصغر وفي الزاوية، والاختصار مكتوب عليها */
@media (hover:hover) and (pointer:fine){
.toolbar{ bottom:calc(20px + var(--safe-b)); left:calc(20px + var(--safe-l)); gap:8px }
.tool{ width:44px; height:44px }
.tool .t-ic{ width:30px; height:30px }
.tool::after{ content:attr(data-key); position:absolute; bottom:-14px; inset-inline:0;
text-align:center; font-size:.6rem; color:#ffffff55; letter-spacing:.5px }
}
/* جوال عرضي قصير: ما تزاحم زرّ الفعل */
@media (max-height:430px){
.toolbar{ bottom:calc(112px + var(--safe-b)); gap:8px }
.tool{ width:44px; height:44px } .tool .t-ic{ width:30px; height:30px }
}
/* ===================== شاشة التخصيص =====================
ثلاثة تبويبات في شاشة واحدة. الرأس يحمل الدور المشترك، والتبويبات تحته،
والجسم يملأ ما بقي ويتمرّر لوحده — فالرأس والتبويبات يبقيان ثابتين مهما
طالت القوائم، على الكمبيوتر والتابلت والجوال بالوضعين. */
.page.cz{ display:flex; flex-direction:column; gap:0; min-height:0; overflow:hidden }
.cz-top{ display:flex; align-items:center; gap:12px; padding:2px 0 12px;
border-bottom:1px solid #ffffff12 }
.cz-title{ flex:1 1 auto; min-width:0 }
.cz-title h2{ margin:0; font-size:clamp(1.05rem,.8rem+.7vw,1.6rem); font-weight:900; letter-spacing:.5px }
.cz-title .muted{ display:block; font-size:.76rem; margin-top:1px }
.cz-back{ flex:0 0 auto }
.cz-role{ flex:0 0 auto }
.cz-role button{ display:inline-flex; align-items:center; gap:6px }
.cz-role svg{ width:15px; height:15px }
/* شريط التبويبات: كبير وواضح، مع مؤشّر تحت المختار */
.cz-tabs{ display:flex; gap:4px; padding:10px 0 0; flex:0 0 auto }
.cz-tabs button{ flex:1 1 0; min-width:0; position:relative; display:inline-flex;
align-items:center; justify-content:center; gap:8px; padding:11px 10px 13px;
background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
color:#ffffff8a; font-weight:800; font-size:.92rem; font-family:inherit;
transition:color .15s, border-color .15s, background .15s }
.cz-tabs button svg{ width:17px; height:17px; flex:0 0 auto }
.cz-tabs button:hover{ color:#ffffffcc; background:#ffffff08 }
.cz-tabs button.on{ color:var(--role,var(--accent)); border-bottom-color:var(--role,var(--accent)) }
.cz-tabs button.on::after{ content:''; position:absolute; inset-inline:18%; bottom:-2px; height:2px;
background:var(--role,var(--accent)); box-shadow:0 0 10px var(--role,var(--accent)) }
.cz-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px;
padding-top:14px; overflow:auto; -webkit-overflow-scrolling:touch }
.cz-body[hidden]{ display:none }
/* اسم الشخصية فوق شبكة سكناتها */
.cz-owner{ display:flex; align-items:baseline; gap:8px; padding:0 2px 8px }
.cz-owner b{ font-size:1rem; font-weight:900 }
/* زرّ القصة داخل بطاقة الشخصية */
.cs-lore{ align-self:flex-start; margin:8px 0 2px; display:inline-flex; align-items:center; gap:6px }
.cs-lore svg{ width:14px; height:14px }
/* ---- التابلت والجوال ---- */
@media (max-width:900px){
.cz-top{ flex-wrap:wrap; gap:8px; padding-bottom:10px }
.cz-title{ order:-1; flex:1 1 100% }
.cz-back{ order:-2 }
.cz-role{ flex:1 1 100% }
.cz-role button{ flex:1 1 0; justify-content:center }
.cz-tabs button{ font-size:.84rem; padding:10px 6px 12px; gap:6px }
.lore-box{ flex-direction:column; gap:14px; padding:16px }
.lore-art{ width:100%; padding:10px }
.lore-art canvas{ width:64px; height:96px }
}
/* جوال عرضي قصير: نضغط الرأس حتى يبقى للجسم مكان */
@media (max-height:520px){
.cz-top{ padding-bottom:6px } .cz-title .muted{ display:none }
.cz-tabs button{ padding:7px 6px 9px; font-size:.8rem }
.cz-body{ padding-top:9px; gap:8px }
.lore-box{ flex-direction:row; max-height:94vh; padding:14px }
.lore-art{ width:92px } .lore-art canvas{ width:56px; height:84px }
.lore-txt h3{ font-size:1.1rem } .lore-sec{ margin-top:9px; padding-top:8px }
}
/* شاشات ضيقة جدًا: التبويبات أيقونات ونصّ أصغر بلا التفاف */
@media (max-width:400px){
.cz-tabs button span{ font-size:.76rem }
.cz-tabs button{ gap:4px; padding-inline:2px }
}
/* اللوحة تملأ الشاشة: التخصيص صفحة عمل لا نافذة صغيرة وسط فراغ */
#scr-custom .page.cz{ width:min(1280px,100%); max-width:100%;
height:min(100%, calc(100dvh - 2 * (16px + var(--safe-t)))); max-height:none; margin:auto }
#scr-custom{ align-items:stretch; justify-content:center }
/* زرّ الدور المختار يأخذ لون دوره — أخضر للناجين وأحمر للأوباد */
.cz-role button.on{ background:var(--role,var(--accent)); border-color:var(--role,var(--accent)); color:#08090d }
.cz-role button.on svg{ color:#08090d }
@media (max-width:900px){
#scr-custom .page.cz{ height:min(100%, calc(100dvh - 2 * (10px + var(--safe-t)))) }
}
/* ===================== بطاقة القصة =====================
عمودان: بورتريه في إطار، ومحتوى مقسّم لأقسام معنونة. --role يلوّنها
بلون الدور فتشعر إنك تقرأ عن ناجٍ أو عن أوباد لا عن سطر في جدول. */
.lore-dlg{ position:fixed; inset:0; z-index:40; display:grid; place-items:center;
background:rgba(4,5,10,.82); padding:18px; opacity:0; transition:opacity .18s ease;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.lore-dlg.in{ opacity:1 }
.lore-dlg.hidden{ display:none }
.lore-box{ position:relative; display:grid; grid-template-columns:200px 1fr; gap:0;
width:min(860px,100%); max-height:min(88vh,760px); overflow:hidden;
background:linear-gradient(155deg,#161a24,#0a0c12 60%); border:1px solid #ffffff1c;
border-radius:16px; box-shadow:0 30px 90px #000c, 0 0 0 1px var(--role,#b7101a)22;
transform:translateY(10px) scale(.985); transition:transform .22s cubic-bezier(.2,.8,.3,1) }
.lore-dlg.in .lore-box{ transform:none }
.lore-box::before{ content:''; position:absolute; inset-inline:0; top:0; height:2px;
background:linear-gradient(90deg,transparent,var(--role,#b7101a),transparent) }
.lore-x{ position:absolute; top:10px; inset-inline-end:12px; z-index:2; width:34px; height:34px;
display:grid; place-items:center; border-radius:9px; border:1px solid #ffffff1a;
background:#0d0f16cc; color:#fff9; cursor:pointer }
.lore-x svg{ width:16px; height:16px }
.lore-x:hover{ background:var(--role,#b7101a); color:#fff; border-color:transparent }
/* العمود الأيمن */
.lore-side{ display:flex; flex-direction:column; align-items:center; gap:12px;
padding:26px 16px 20px; background:
radial-gradient(90% 55% at 50% 22%, color-mix(in srgb, var(--role,#b7101a) 22%, transparent), transparent 70%),
linear-gradient(180deg,#11141c,#0a0c12);
border-inline-end:1px solid #ffffff12 }
.lore-frame{ position:relative; width:136px; height:180px; display:grid; place-items:center;
background:linear-gradient(180deg,#0c0e15,#05060a); border:1px solid #ffffff16; border-radius:12px }
.lore-frame::after{ content:''; position:absolute; inset:5px; border:1px solid var(--role,#b7101a);
opacity:.45; border-radius:8px; pointer-events:none }
.lore-art canvas, #loreArt{ width:88px; height:132px; image-rendering:pixelated;
filter:drop-shadow(0 6px 14px #000a) }
.lore-tier{ position:absolute; bottom:-9px; inset-inline:auto; padding:2px 10px; border-radius:99px;
font-size:.66rem; font-weight:900; letter-spacing:.5px; color:#08090d;
background:var(--role,#b7101a); box-shadow:0 3px 10px #0008 }
.lore-quote{ margin:8px 0 0; text-align:center; font-size:.8rem; line-height:1.7;
color:#ffffff6e; font-style:italic }
.lore-quote:empty{ display:none }
/* العمود الأيسر */
.lore-main{ min-width:0; overflow:auto; padding:24px 26px 26px; -webkit-overflow-scrolling:touch }
.lore-head{ padding-inline-end:44px }
.lore-kind{ display:inline-block; font-size:.66rem; font-weight:900; letter-spacing:2px;
color:var(--role,#b7101a); padding:3px 9px; border:1px solid color-mix(in srgb, var(--role,#b7101a) 45%, transparent);
border-radius:99px }
.lore-main h3{ margin:8px 0 2px; font-size:clamp(1.3rem,1rem+1vw,1.8rem); font-weight:900; letter-spacing:.3px }
.lore-title{ margin:0; color:var(--role,#b7101a); font-size:.9rem; font-weight:700; opacity:.85 }
.lore-sec{ margin-top:20px }
.lore-sec h4{ display:flex; align-items:center; gap:7px; margin:0 0 9px;
font-size:.74rem; font-weight:900; letter-spacing:1.2px; color:#ffffff7a;
text-transform:none }
.lore-sec h4 svg{ width:14px; height:14px; color:var(--role,#b7101a) }
.lore-sec h4::after{ content:''; flex:1 1 auto; height:1px; background:#ffffff12 }
.lore-story{ margin:0; line-height:1.95; font-size:.94rem; color:#ded9d0;
padding-inline-start:11px; border-inline-start:2px solid color-mix(in srgb, var(--role,#b7101a) 40%, transparent) }
/* القدرة */
.lore-ability{ display:flex; gap:12px; align-items:flex-start; padding:13px 14px;
background:linear-gradient(120deg, color-mix(in srgb, var(--role,#b7101a) 13%, transparent), #ffffff05);
border:1px solid color-mix(in srgb, var(--role,#b7101a) 30%, transparent); border-radius:11px }
.la-ico{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:9px;
background:#0a0c12; border:1px solid color-mix(in srgb, var(--role,#b7101a) 45%, transparent);
color:var(--role,#b7101a) }
.la-ico svg{ width:19px; height:19px }
.lore-ability b{ display:block; color:var(--role,#b7101a); font-size:1rem; margin-bottom:3px }
.lore-ability p{ margin:0; font-size:.86rem; line-height:1.8; color:#ccc7bf }
/* البيركات الخاصة: ثلاثة مربّعات جنب بعض — كما في ديد باي دايلايت */
.lore-perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.lore-perks .lp{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
padding:14px 10px 12px; background:linear-gradient(180deg,#ffffff0b,#ffffff04);
border:1px solid #ffffff14; border-radius:12px; transition:transform .16s, border-color .16s, background .16s }
.lore-perks .lp:hover{ transform:translateY(-3px); background:#ffffff11;
border-color:color-mix(in srgb, var(--role,#b7101a) 55%, transparent) }
/* الجوهرة: معيّن على طريقة بيركات ديد باي دايلايت */
.lp-gem{ position:relative; width:58px; height:58px; display:grid; place-items:center;
background:linear-gradient(145deg,#1a1e28,#0a0c12); border:1px solid #ffffff1c;
transform:rotate(45deg); border-radius:12px; color:var(--role,#b7101a) }
.lp-gem > svg, .lp-gem > img{ transform:rotate(-45deg) }
.lp-gem svg{ width:24px; height:24px }
.lp-gem img{ width:28px; height:28px; object-fit:contain; image-rendering:pixelated }
.lore-perks .lp.r-rare .lp-gem{ border-color:#4d8fd8; box-shadow:0 0 14px #4d8fd833 }
.lore-perks .lp.r-epic .lp-gem{ border-color:#a05fd8; box-shadow:0 0 14px #a05fd833 }
.lore-perks .lp.r-common .lp-gem{ box-shadow:0 0 12px color-mix(in srgb, var(--role,#b7101a) 22%, transparent) }
.lp-lk{ position:absolute; inset:auto -6px -6px auto; transform:rotate(-45deg);
font-style:normal; font-size:.6rem; font-weight:900; color:#08090d; background:#ffd166;
border-radius:99px; padding:1px 6px; white-space:nowrap }
.lore-perks .lp > b{ font-size:.86rem; font-weight:900; line-height:1.35; margin-top:4px }
.lp-d{ font-size:.75rem; color:#ffffff7e; line-height:1.6 }
.lp-none{ grid-column:1/-1 }
/* القدرة الفاضية: تُعرَض باهتة مع إرشاد بدل ما تختفي */
.lore-ability.empty, #loreAbilityBox.empty .lore-ability{ opacity:.62; border-style:dashed }
/* الجوال والتابلت: عمود واحد والبورتريه شريط علوي */
@media (max-width:760px){
.lore-box{ grid-template-columns:1fr; max-height:92vh }
.lore-side{ flex-direction:row; align-items:center; gap:14px; padding:18px 16px;
border-inline-end:0; border-block-end:1px solid #ffffff12 }
.lore-frame{ width:84px; height:110px; flex:0 0 auto }
#loreArt{ width:54px; height:81px }
.lore-quote{ margin:0; text-align:start; font-size:.78rem }
.lore-main{ padding:18px }
.lore-sec{ margin-top:16px }
.lore-perks{ gap:8px }
.lp-gem{ width:48px; height:48px } .lp-gem svg{ width:20px; height:20px }
.lore-perks .lp{ padding:11px 6px 10px } .lore-perks .lp > b{ font-size:.78rem }
.lp-d{ font-size:.68rem }
}
@media (max-width:380px){
.lore-perks{ grid-template-columns:1fr }
.lore-perks .lp{ flex-direction:row; text-align:start; gap:12px; padding:10px 12px }
.lp-gem{ width:42px; height:42px; flex:0 0 auto } .lp-gem svg{ width:18px; height:18px }
.lore-perks .lp > b{ margin-top:0 }
}
@media (max-height:520px){
.lore-box{ grid-template-columns:150px 1fr; max-height:94vh }
.lore-side{ padding:14px 10px } .lore-frame{ width:104px; height:136px }
#loreArt{ width:64px; height:96px } .lore-quote{ display:none }
.lore-main{ padding:16px 18px } .lore-sec{ margin-top:13px }
.lore-story{ line-height:1.7; font-size:.86rem }
}
/* ============ حياة شاشة الاختيار ============
المربّعات ترتفع وتتوهّج عند التحويم، والمختار يعلن نفسه بإطار ونبضة،
والبطاقة تدخل بانزلاق خفيف كل ما بدّلت — فالاختيار يُحَسّ لا يُقرأ فقط. */
.cs-grid .cs-tile{ position:relative; transition:transform .16s cubic-bezier(.2,.8,.3,1),
border-color .16s, box-shadow .16s, background .16s; will-change:transform }
.cs-grid .cs-tile::after{ content:''; position:absolute; inset:0; border-radius:inherit;
pointer-events:none; opacity:0; transition:opacity .18s;
background:radial-gradient(70% 55% at 50% 12%, color-mix(in srgb, var(--role,#b7101a) 26%, transparent), transparent 70%) }
.cs-grid .cs-tile:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--role,#b7101a) 60%, transparent);
box-shadow:0 10px 26px #0009 }
.cs-grid .cs-tile:hover::after{ opacity:1 }
.cs-grid .cs-tile:active{ transform:translateY(-1px) scale(.985) }
.cs-grid .cs-tile.sel{ border-color:var(--role,#b7101a);
box-shadow:0 0 0 1px var(--role,#b7101a), 0 12px 30px color-mix(in srgb, var(--role,#b7101a) 22%, #0009) }
.cs-grid .cs-tile.sel::after{ opacity:1 }
/* شريط سفلي يعلن المختار */
.cs-grid .cs-tile.sel::before{ content:''; position:absolute; inset-inline:22%; bottom:0; height:2px;
border-radius:2px; background:var(--role,#b7101a); box-shadow:0 0 10px var(--role,#b7101a) }
.cs-grid .cs-tile.locked{ filter:grayscale(.55) }
.cs-grid .cs-tile.locked:hover{ transform:translateY(-2px) }
/* الصورة تتنفّس داخل المربّع المختار */
.cs-grid .cs-tile.sel .cs-pv canvas{ animation:cs-bob 2.4s ease-in-out infinite }
@keyframes cs-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
/* البطاقة تدخل بانزلاق كل ما بدّلت الاختيار */
.cs-stage .cs-card, #outfitCard > *{ animation:cs-in .26s cubic-bezier(.2,.8,.3,1) both }
@keyframes cs-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
/* البورتريه الكبير في هالة لون الدور */
.cs-portrait{ position:relative }
.cs-portrait::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:radial-gradient(60% 45% at 50% 30%, color-mix(in srgb, var(--role,#b7101a) 20%, transparent), transparent 72%) }
/* زرّ القصة يلفت النظر بلا صراخ */
.cs-lore{ position:relative; overflow:hidden }
.cs-lore:hover{ border-color:color-mix(in srgb, var(--role,#b7101a) 65%, transparent);
color:var(--role,#b7101a) }
/* التبويبات: مؤشّر ينزلق بدل ما يقفز */
.cz-tabs button{ transition:color .18s, background .18s }
.cz-tabs button.on::after{ animation:cz-slide .22s cubic-bezier(.2,.8,.3,1) both }
@keyframes cz-slide{ from{ transform:scaleX(.3); opacity:0 } to{ transform:none; opacity:1 } }
/* من يفضّل تقليل الحركة: نسكّت كل شيء */
@media (prefers-reduced-motion:reduce){
.cs-grid .cs-tile, .cs-grid .cs-tile.sel .cs-pv canvas,
.cs-stage .cs-card, #outfitCard > *, .cz-tabs button.on::after, .lore-box{
animation:none !important; transition:none !important; transform:none !important }
}
/* أيقونة الشخصية المرفوعة: المقفلة رمادية والمفتوحة بألوانها */
.cs-pv .cs-icon{ width:100%; height:100%; max-width:64px; max-height:76px; object-fit:contain;
image-rendering:auto; transition:filter .2s ease, transform .16s ease }
.cs-tile.locked .cs-pv .cs-icon{ filter:grayscale(1) brightness(.62) contrast(.92) }
.cs-tile:not(.locked):hover .cs-pv .cs-icon{ transform:scale(1.04) }
.cs-tile.sel .cs-pv .cs-icon{ filter:drop-shadow(0 4px 12px color-mix(in srgb, var(--role,#b7101a) 45%, transparent)) }
/* والشريط المرسوم يأخذ نفس المعاملة حتى يتطابق الشكلان */
.cs-tile.locked .cs-pv canvas{ filter:grayscale(1) brightness(.62) }
/* ===== واجهة المباراة على الجوال: بلا تداخل بين الأزرار ===== */
/* رقاقة الدور ما تتعدّى عمودها — كانت تركب فوق المؤقّت بالطول */
.hud-top > * { max-width:100% }
.hud-top .hud-chip span { overflow:hidden; text-overflow:ellipsis }
/* عرضي: الأدوات بجنب زر الفعل لا فوقه */
@media (orientation:landscape) and (max-height:520px){
body.touch .toolbar{ bottom:calc(58px + var(--safe-b)); left:calc(134px + var(--safe-l)); right:auto; gap:8px }
body.touch.joyleft .toolbar{ left:auto; right:calc(134px + var(--safe-r)) }
body.touch .tool{ width:44px; height:44px } body.touch .tool .t-ic{ width:30px; height:30px }
body.touch .chat, body.touch .status{ bottom:calc(150px + var(--safe-b)) }
body.touch .prog{ bottom:calc(150px + var(--safe-b)) }
}
/* طولي: الحالة والدردشة فوق الأدوات والجويستيك، والتلميح يختفي بعد ثوانٍ */
@media (orientation:portrait) and (max-width:700px){
body.touch .chat, body.touch .status{ bottom:calc(222px + var(--safe-b)); max-width:46% }
body.touch.joyleft .toolbar{ left:auto; right:calc(30px + var(--safe-r)) }
body.touch .hud-hint{ bottom:calc(262px + var(--safe-b)); padding-inline:12px }
body.touch .prog{ bottom:calc(290px + var(--safe-b)) }
.rotate-hint{ animation:fzHintOut 7s forwards }
.hud-obj .o{ padding:2px 7px; font-size:.76rem }
}
@keyframes fzHintOut{ 0%,80%{ opacity:.6 } 100%{ opacity:0; visibility:hidden } }
/* رقاقة «البوابة مفتوحة» تطوّل عمود الخردة فتنزل الخردة فوق التحديات وأزرار
الدردشة. لما تظهر ننزّل اللي تحتها بمقدار سطر بدل ما تتراكب. */
#stage:has(#hudGate:not([hidden])) .hud-ch,
body.touch #stage:has(#hudGate:not([hidden])) .mini,
body.touch #stage:has(#hudGate:not([hidden])) .qc{ margin-top:40px }
@media (orientation:portrait) and (max-width:700px){
body.touch .rotate-hint{ bottom:calc(205px + var(--safe-b)) !important; top:auto }
}
@media (orientation:portrait) and (max-width:700px){ #hudGate span{ display:none } #hudGate{ padding:5px 8px } }
/* داخل المباراة (كمبيوتر): الشارة كانت تنزل تحت الرأس مباشرة فوق شريط الفريق — ننقلها لأسفل الوسط */
body.in-game .ptb{ top:auto !important; bottom:calc(30px + var(--safe-b)) !important; left:50% !important; right:auto !important; transform:translateX(-50%) }
/* زر الرجوع للقائمة بعد الهروب — وسط الشاشة تحت رسالة «هربت!» */
.esc-leave{ position:absolute; top:58%; left:50%; transform:translateX(-50%); z-index:6; pointer-events:auto }
.esc-leave[hidden]{ display:none }
/* مشاهد الشرح المتحرّكة */
.hs-media .hs-demo{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; display:block; background:#0d0f15 }
.tier{ cursor:pointer }
.tier-trait{ display:flex; gap:6px; align-items:center; justify-content:center; color:var(--accent2) }
.tier-trait svg{ width:14px; height:14px }
.shop-modal .si-big .si-art.sk canvas{ height:110px; width:auto; max-height:none }
/* الغرف المتاحة + تبديل عامة/خاصة */
.lobby-vis{ margin:4px 0 10px; display:flex } .lobby-vis button{ flex:1 1 0 }
.rooms-list li{ display:flex; align-items:center; gap:10px; justify-content:space-between }
.rooms-list .rm-info{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.rooms-list .rm-info b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rooms-list .rm-n{ font-weight:900; color:var(--accent2) }
.rooms-empty{ text-align:center; padding:18px 8px }
/* انقطاع النت أثناء المباراة: طبقة «نرجّعك» بدل الرمي للقائمة */
.net-veil{ position:absolute; inset:0; z-index:15; display:grid; place-items:center; background:#000a; pointer-events:none }
.net-veil[hidden]{ display:none }
.net-veil div{ background:#0b0c11ee; border:1px solid #ffffff22; padding:14px 20px; font-weight:800; text-align:center; border-radius:10px }
.net-veil small{ display:block; opacity:.7; font-weight:600; margin-top:4px }
.net-veil button{ display:block; margin:10px auto 0; pointer-events:auto }
/* ===== مقاسات ثابتة تطابق معاينة المحرك =====
المشكلة كانت إن الموقع يعطي ارتفاعًا ثابتًا والعرض يتغيّر، فتنقص الصورة غير
اللي شفته في المحرك. الآن نفس النسبة في المكانين: بانر المتجر 4:1 (12:5 جوال)،
بانر البروفايل 3:1، صورة الخبر 1.9:1. */
.shop-bn{ aspect-ratio:4/1 !important; min-height:0 !important }
@media (max-width:620px){ .shop-bn{ aspect-ratio:12/5 !important } }
.shop-bn .sb-body{ padding-block:10px }
.pf-banner{ height:auto !important; aspect-ratio:3/1 }
.news-img{ min-height:0 !important; max-height:none !important; aspect-ratio:1.9/1 }
.si-art.bn.wide{ aspect-ratio:3/1; height:auto }
/* ===== الباتل باس: شريط كل المستويات + استلم الكل ===== */
.bp-tools{ display:flex; align-items:center; gap:10px; margin:6px 0 2px; flex-wrap:wrap }
.bp-strip{ flex:1; display:flex; gap:4px; overflow-x:auto; padding:4px 2px; scrollbar-width:thin }
.bp-strip .bs{ flex:0 0 auto; min-width:30px; height:26px; padding:0 6px; border-radius:7px; border:1px solid #ffffff1c; background:#0b0c11;
color:#ffffff88; font-weight:800; font-size:.74rem; cursor:pointer; transition:transform .12s, border-color .12s }
.bp-strip .bs:hover{ transform:translateY(-1px); border-color:#ffffff55 }
.bp-strip .bs.vis{ background:#ffffff14; color:#fff }
.bp-strip .bs.got{ border-color:var(--accent2); color:var(--accent2) }
.bp-strip .bs.ready{ border-color:#ffd166; color:#ffd166; box-shadow:0 0 10px #ffd16655; animation:pulse 1.4s infinite }
.bp-strip .bs.cur{ border-color:var(--accent); color:#fff; box-shadow:0 0 0 2px var(--ma30t) }
.tier .btn.primary{ box-shadow:0 0 16px #ffd16655 }
.tier.done:not(:has(.claimed)){ border-color:#ffd166; box-shadow:0 0 0 2px #ffd16633, 0 0 24px #ffd16622 }
.tier::after{ content:''; position:absolute; inset-inline:0; top:0; height:3px; background:var(--tc,#ffffff22) }
.tier:has(.ttl-ico.perk)::after{ --tc:#9b7bff } .tier:has(canvas)::after{ --tc:#4db38f } .tier:has(.ttl-ico.scrap)::after{ --tc:#e9c76a } .tier:has(.ttl-ico.title)::after{ --tc:#8fd3ff }
/* =====================================================================
المتجر بشكل لعبة: كل بطاقة لها ندرة بلون وتوهّج، معاينة حيّة فوق،
ولوحة سفلية فيها الاسم والسعر كزر واحد. (يطغى على التنسيق القديم)
===================================================================== */
.shop-eco{ display:flex; gap:8px; flex-wrap:wrap; margin:-2px 0 10px }
.eco-chip{ font-size:.78rem; font-weight:800; padding:5px 12px; border-radius:999px; border:1px solid }
.eco-chip.m{ color:#ffd166; border-color:#ffd16677; background:#ffd16614; animation:pulse 2s infinite }
.eco-chip.d{ color:#7bd389; border-color:#7bd38977; background:#7bd38914 }
.shop-tabs .sh-tab i{ font-style:normal; font-size:.7rem; opacity:.6; margin-inline-start:6px; padding:0 6px; border-radius:99px; background:#ffffff14 }
.shop-grid{ grid-template-columns:repeat(auto-fill,minmax(172px,1fr)) !important; gap:12px !important }
.shop-grid .item, .sf-rail .item{
--rc:#8b93a7; padding:0 !important; gap:0 !important; align-items:stretch !important; text-align:start !important;
background:linear-gradient(180deg,#12141c,#0a0b10) !important; border:1px solid color-mix(in srgb, var(--rc) 35%, transparent) !important;
border-radius:12px !important; clip-path:none !important; overflow:hidden; cursor:pointer;
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease }
.item.r-rare{ --rc:#4d9fff } .item.r-epic{ --rc:#b06bff } .item.r-legendary{ --rc:#ffb02e }
.shop-grid .item:hover, .sf-rail .item:hover{ transform:translateY(-4px) !important; border-color:var(--rc) !important;
box-shadow:0 10px 28px #0009, 0 0 22px color-mix(in srgb, var(--rc) 30%, transparent) !important }
.item .it-stage{ position:relative; display:grid; place-items:center; height:128px; overflow:hidden;
background:radial-gradient(70% 90% at 50% 70%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 70%), #07080c;
border-bottom:1px solid #ffffff10 }
.item .it-stage::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--rc); opacity:.85 }
.item .it-stage .si-art{ height:100% !important; width:100%; background:none !important; border:0 !important; border-radius:0 }
.item .si-art.sk canvas{ height:92px !important; width:auto !important; filter:drop-shadow(0 6px 8px #000a) }
.item .si-art.avatar img{ width:84px !important; height:84px !important; object-fit:cover !important; border-radius:50%; border:3px solid var(--rc); box-shadow:0 0 18px color-mix(in srgb, var(--rc) 40%, transparent) }
.item .si-art.frame{ position:relative }
.si-art.frame .fr-in{ position:absolute; width:62px; height:62px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; background:#0b0c11; display:grid; place-items:center }
.si-art.frame .fr-in img{ width:100%; height:100%; object-fit:cover } .si-art.frame .fr-in canvas{ height:56px; image-rendering:pixelated }
.si-art.frame .fr-top{ position:relative; width:96px !important; height:96px !important; object-fit:contain !important }
.item .si-art.bn.wide{ padding:12px } .item .si-art.bn.wide img{ border-radius:8px; aspect-ratio:3/1; width:100%; height:auto; object-fit:cover; box-shadow:0 6px 16px #000a }
.si-art.ttl{ flex-direction:column; gap:2px; display:flex !important; align-items:center; justify-content:center }
.si-art.ttl small{ font-size:.78rem; opacity:.7 } .si-art.ttl b{ font-size:1.02rem !important; color:var(--rc); text-shadow:0 0 12px color-mix(in srgb, var(--rc) 50%, transparent) }
.si-art.perk .gem{ width:70px; height:70px; display:grid; place-items:center; color:#fff;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
background:linear-gradient(160deg, color-mix(in srgb, var(--rc) 85%, #fff 15%), color-mix(in srgb, var(--rc) 45%, #000)); box-shadow:0 0 24px var(--rc) }
.si-art.perk .gem svg, .si-art.perk .gem img{ width:32px; height:32px }
.item .it-foot{ display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px }
.item .it-foot .kind{ display:flex; justify-content:space-between; font-size:.7rem !important; opacity:.75 !important }
.item .it-foot .kind .rar{ font-style:normal; color:var(--rc); font-weight:800 }
.item .it-foot .si-name{ font-size:.95rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.it-price{ margin-top:4px; display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:8px; border-radius:9px;
border:1px solid #ffd16655; background:#ffd16614; color:#ffd166; font-weight:900; font-size:.95rem; cursor:pointer; font-family:inherit }
.it-price svg{ width:15px; height:15px } .it-price s{ opacity:.5; font-weight:600; font-size:.8rem }
.it-price.ok:hover{ background:#ffd166; color:#111 }
.it-price.no{ border-color:#ff525244; background:#ff52520d; color:#ff8080; cursor:not-allowed }
.it-price.owned{ border-color:color-mix(in srgb, var(--accent2) 50%, transparent); background:color-mix(in srgb, var(--accent2) 12%, transparent); color:var(--accent2); cursor:default; font-size:.82rem }
.item.owned{ opacity:.78 } .item.owned:hover{ opacity:1 }
.it-own, .it-disc{ position:absolute; z-index:2; top:8px; inset-inline-start:8px; display:flex; align-items:center; gap:4px;
font-size:.68rem; font-weight:900; padding:3px 8px; border-radius:99px }
.it-own{ background:var(--accent2); color:#08090d } .it-own svg{ width:11px; height:11px }
.it-disc{ background:#7bd389; color:#08090d }
.item .si-tag{ z-index:2; top:8px !important; inset-inline-end:8px !important }
.item.feat .it-stage::before{ content:''; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--rc) 25%, transparent), transparent 30%); animation:spin 6s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (max-width:520px){ .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important } .item .it-stage{ height:104px } .si-art.perk .gem{ width:58px; height:58px } }
@media (prefers-reduced-motion:reduce){ .item.feat .it-stage::before{ animation:none } }
/* ===== لوحة إحصائيات نهاية المباراة ===== */
.end-board{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:10px 0 }
.end-board[hidden]{ display:none }
.eb{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#0b0c11; padding:0 0 10px }
.eb.won{ border-color:color-mix(in srgb, var(--accent2) 55%, transparent) } .eb.me{ box-shadow:0 0 0 2px #ffffff33 }
.eb.aw{ border-color:#b5342b77 }
.eb-bn{ height:54px; background:linear-gradient(120deg,var(--ma25p),#12141c 60%,var(--mb30p)); background-size:cover; background-position:center; opacity:.75 }
.eb-top{ display:flex; align-items:center; gap:10px; padding:0 10px; margin-top:-22px; position:relative }
.eb-av{ position:relative; width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:#12141c; border:2px solid #0b0c11; display:grid; place-items:center; overflow:visible }
.eb-av > img:first-child{ width:100%; height:100%; border-radius:50%; object-fit:cover } .eb-av canvas{ height:34px; image-rendering:pixelated }
.eb-av .eb-fr{ position:absolute; inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px); object-fit:contain; pointer-events:none }
.eb-id{ display:flex; flex-direction:column; min-width:0; flex:1; padding-top:20px } .eb-id b{ font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.eb-sub{ font-size:.7rem; opacity:.7 }
.eb-fin{ margin-top:20px; font-size:.7rem; font-weight:900; padding:2px 8px; border-radius:99px; background:#ffffff14 }
.eb-fin.good{ background:color-mix(in srgb, var(--accent2) 25%, transparent); color:var(--accent2) } .eb-fin.bad{ background:#ff525226; color:#ff8080 } .eb-fin.warn{ background:#ffd16622; color:#ffd166 } .eb-fin.mut{ opacity:.6 }
.eb-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:8px 10px 0 }
.eb-stats span{ display:flex; flex-direction:column; align-items:center; background:#ffffff08; border-radius:7px; padding:4px 2px }
.eb-stats i{ font-style:normal; font-size:.62rem; opacity:.6; white-space:nowrap } .eb-stats b{ font-size:.9rem }
.eb-note{ font-size:.72rem; padding:6px 10px 0; opacity:.85 }
.eb-hp{ display:flex; gap:3px; padding:6px 10px 0 } .eb-hp i{ width:14px; height:5px; border-radius:3px; background:#ffffff1a } .eb-hp i.on{ background:#ff5252 }
.eb-perks{ display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px 0 } .eb-perks span{ font-size:.66rem; padding:2px 7px; border-radius:99px; background:#9b7bff22; color:#c9b8ff }
.eb-rw{ display:flex; gap:10px; padding:8px 10px 0; font-size:.78rem; font-weight:800 } .eb-rw .sc{ color:#e9c76a }
#scr-end .panel.page.narrow{ max-width:min(96vw,980px) }
/* =====================================================================
مقاسات الصور الموحّدة — آخر الملف عمدًا: هي المرجع النهائي.
كل مكان فيه صورة له نسبة ثابتة (من js/specs.js) على كل الشاشات، فالصورة
المقصوصة في المحرك تطلع كاملة بنفس القص على الكمبيوتر والجوال.
قبلها كان الارتفاع ثابتًا والعرض يتغيّر مع الشاشة، فكل جهاز يقصّ غير.
===================================================================== */
/* بطاقات اللعب + البطل: الصورة كاملة بنسبة ٣:٢ في طرف البطاقة، والنص في الطرف الثاني */
.pc-media, .mh-media { inset-block:0 !important; inset-inline-start:0 !important; inset-inline-end:auto !important;
width:auto !important; height:100% !important; aspect-ratio:var(--ar-card, 3 / 2); clip-path:none !important;
-webkit-mask-image:linear-gradient(to left, #000 0 62%, #0000 100%); mask-image:linear-gradient(to left, #000 0 62%, #0000 100%) }
.pc-media img, .mh-media img { transform:none !important; object-position:center !important }
.pcard:hover .pc-media img, .mn-hero:hover .mh-media img { transform:scale(1.04) !important }
.pc-media::after { background:linear-gradient(to left, #0000 45%, color-mix(in srgb, var(--tint) 55%, transparent) 100%) }
.mh-media::after { background:linear-gradient(to left, #0000 45%, var(--ma70k) 100%) }
/* الأزرار الجانبية: الصورة بنسبة ٣:٢ في طرف الزر */
.tile.sm.has-img::before { inset-block:0; inset-inline-start:auto; inset-inline-end:0; width:auto; aspect-ratio:var(--ar-tile, 3 / 2);
-webkit-mask-image:linear-gradient(to right, #000 0 55%, #0000 100%); mask-image:linear-gradient(to right, #000 0 55%, #0000 100%) }
/* بانر المتجر ٣:١ على كل الشاشات */
.shop-bn { aspect-ratio:var(--ar-shopbn, 3 / 1) !important; min-height:0 !important }
@media (max-width:620px) { .shop-bn { aspect-ratio:var(--ar-shopbn, 3 / 1) !important } .shop-bn .sb-body { padding:10px 12px; gap:3px } .shop-bn b { font-size:1rem } .shop-bn p { font-size:.76rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } }
/* بانر البروفايل ٣:١ في كل مكان: البروفايل، بطاقة الاسم فوق، وشاشة النتائج */
.pf-banner { height:auto !important; aspect-ratio:var(--ar-banner, 3 / 1) !important }
.tb-user { aspect-ratio:var(--ar-banner, 3 / 1) }
.eb-bn { height:auto !important; aspect-ratio:var(--ar-banner, 3 / 1) }
.eb-bn + .eb-top { margin-top:-22px }
/* الأخبار ١٫٩:١ — ما يتمدّد مع طول النص */
.news-img { min-height:0 !important; max-height:none !important; aspect-ratio:var(--ar-news, 1.9 / 1); align-self:start }
/* سلايدات «كيف تلعب» ٥:٣ على كل الشاشات */
.hs-media { min-height:0 !important; aspect-ratio:var(--ar-slide, 5 / 3) !important }
/* الجوال بالعرض: الشاشة قصيرة — بطاقة الاسم أصغر بنفس النسبة بدل ما تاكل نص الشاشة */
@media (max-height:500px) { .tb-user { width:min(240px,38vw) } }
/* ===== شارة البيرك: الإطار من المحرك والأيقونة بيضاء في نصه ===== */
.pbadge{ position:relative; display:inline-grid; place-items:center; width:100%; height:100%; aspect-ratio:1; flex:none }
.pbadge .pb-fr{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; pointer-events:none; transform:none !important }
.pbadge .pb-ic{ position:relative; z-index:1; display:grid; place-items:center; width:42%; height:42%; color:#fff; filter:drop-shadow(0 1px 2px #000c) }
.pbadge .pb-ic svg{ width:100% !important; height:100% !important; color:#fff; transform:none !important }
.pbadge .pb-ic img{ width:100% !important; height:100% !important; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 1px 2px #000c); transform:none !important }
.pbadge:not(.has-fr){ background:radial-gradient(circle,#2a1215,#12070a 70%); border-radius:10px }
.pbadge.xs{ width:22px; height:22px; vertical-align:middle; margin-inline-end:4px }
/* الحاويات القديمة (مسدس/معيّن) تصير فراغ شفاف والشارة تعبّيها */
.pb-host{ background:none !important; border:0 !important; box-shadow:none !important; clip-path:none !important; transform:none !important; padding:0 !important; overflow:visible !important }
.pt-gem.pb-host{ width:46px; height:46px } .pt-gem.big.pb-host{ width:72px; height:72px }
.lo-slot.filled .pt-gem.pb-host{ width:60px; height:60px }
.lp-gem.pb-host{ width:64px; height:64px }
.si-art.perk .gem.pb-host{ width:88px; height:88px }
.ttl-ico.pb-host{ width:44px; height:44px }
.dd-ic .pbadge{ width:30px; height:30px }
.eb-perks span{ display:inline-flex; align-items:center }
@media (max-width:520px){ .si-art.perk .gem.pb-host{ width:70px; height:70px } .lp-gem.pb-host{ width:52px; height:52px } }
.brand .b-ic.custom img{ width:24px; height:24px; object-fit:contain }
/* ===== قفل المتجر/الباتل باس للتحديث ===== */
.lock-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; margin:0 0 12px; border:1px solid #d9a04466; border-radius:var(--radius); background:#d9a04414; color:#ffd58a; font-weight:700; font-size:.9rem }
.lock-bar[hidden]{ display:none } .lock-bar svg{ width:18px; height:18px; flex:none }
.sb-kicker[hidden]{ display:none !important }
/* ===== الباندل ===== */
.si-art.bdl{ position:relative; display:grid; place-items:center; width:100%; height:100% }
.si-art.bdl.img img{ width:100%; height:100%; object-fit:cover }
.bdl-grid{ display:grid; gap:6px; place-items:center; grid-template-columns:repeat(2,44px) }
.bdl-grid.n1{ grid-template-columns:64px } .bdl-grid > span{ width:44px; height:44px; display:grid; place-items:center; background:#ffffff0d; border:1px solid #ffffff14; border-radius:8px }
.bdl-grid.n1 > span{ width:64px; height:64px }
.bdl-grid canvas{ height:34px; image-rendering:pixelated } .bdl-grid svg{ width:22px; height:22px; color:#fff }
.bdl-grid .pbadge{ width:40px; height:40px }
.bdl-n{ position:absolute; inset-block-end:6px; inset-inline-start:6px; font-style:normal; font-size:.66rem; font-weight:800; padding:1px 7px; border-radius:99px; background:#000a; color:#ffd166 }
.it-part{ position:absolute; inset-block-start:8px; inset-inline-start:8px; z-index:2; font-size:.62rem; font-weight:800; padding:1px 7px; border-radius:99px; background:#4dc3ff26; color:#8fd8ff }
.bdl-list{ list-style:none; margin:6px 0; padding:0; display:grid; gap:6px; max-height:260px; overflow:auto; width:100% }
.bdl-list li{ display:flex; align-items:center; gap:10px; padding:6px 8px; border:1px solid #ffffff14; border-radius:8px; background:#ffffff08; text-align:start }
.bdl-list li.own{ opacity:.55 }
.bl-art{ width:38px; height:38px; flex:none; display:grid; place-items:center; background:#0b0c11; border-radius:6px; overflow:hidden }
.bl-art img{ width:100%; height:100%; object-fit:cover } .bl-art canvas{ height:32px; image-rendering:pixelated } .bl-art svg{ width:20px; height:20px; color:#ffd166 }
.bl-art .pbadge.xs{ width:34px; height:34px; margin:0 }
.bl-n{ display:flex; flex-direction:column; min-width:0 } .bl-n b{ font-size:.88rem } .bl-n small{ opacity:.6; font-size:.72rem }
.bdl-note{ margin:4px 0; color:#8fd8ff } .bdl-note.lock{ color:#ffd58a }
.pbadge .pb-fr{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain !important }
.it-part{ inset-inline-start:auto !important; inset-inline-end:8px; inset-block-start:auto !important; inset-block-end:8px }
.item .si-tag{ inset-inline-start:auto !important; max-width:60% }
@media (max-height:500px){ .shop-bn{ width:min(100%,480px); margin-inline:auto } }
/* ===== البيرك بإطارك فقط — بلا خانات ولا خلفيات حوله، والإطار يملأ المكان ===== */
.lo-slot{ background:none !important; border:0 !important; clip-path:none !important; box-shadow:none !important; width:118px; height:118px }
.lo-slot.filled .pt-gem.pb-host{ width:112px !important; height:112px !important }
.lo-slot .lo-empty{ position:relative; width:104px; height:104px; display:grid; place-items:center; opacity:.35 }
.lo-slot .lo-empty .lo-efr{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:grayscale(1) brightness(.7); image-rendering:pixelated }
.lo-slot .lo-empty svg{ position:relative; width:26px; height:26px }
.lo-slot:hover .lo-empty, .lo-slot.over .lo-empty{ opacity:.7 }
.lo-slot.over{ box-shadow:none !important; filter:drop-shadow(0 0 10px var(--accent)) }
.lo-slot.filled{ filter:drop-shadow(0 0 10px color-mix(in srgb, var(--rar) 45%, transparent)) }
.lo-slot .lo-x{ z-index:3 }
.ptile .pt-gem.pb-host{ width:74px !important; height:74px !important }
.ptile{ padding-top:6px }
.pbadge .pb-ic{ width:48% !important; height:48% !important }
.pt-gem.big.pb-host{ width:96px !important; height:96px !important }
.si-art.perk .gem.pb-host{ width:104px !important; height:104px !important }
.lp-gem.pb-host{ width:80px !important; height:80px !important }
.ttl-ico.pb-host{ width:54px !important; height:54px !important }
@media (max-width:620px), (max-height:500px){
.lo-slot{ width:92px; height:92px } .lo-slot.filled .pt-gem.pb-host{ width:88px !important; height:88px !important }
.lo-slot .lo-empty{ width:82px; height:82px } .ptile .pt-gem.pb-host{ width:60px !important; height:60px !important }
.si-art.perk .gem.pb-host{ width:84px !important; height:84px !important } .lp-gem.pb-host{ width:62px !important; height:62px !important } }
/* =====================================================================
واجهة المباراة (طراز DBD) — hud.js
===================================================================== */
body.hud-dbd .hud-team, body.hud-dbd .hud-obj { display:none !important }
.dbd{ position:absolute; z-index:6; direction:ltr; pointer-events:none; --k:var(--dbd-k,1);
left:calc(18px + var(--safe-l, 0px)); bottom:calc(16px + var(--safe-b, 0px)); transform:scale(var(--k)); transform-origin:left bottom;
display:flex; flex-direction:column; gap:6px; font-family:inherit; color:#e8e6df; text-shadow:0 1px 3px #000 }
.dbd[hidden]{ display:none }
.dbd.pos-tl, body.touch .dbd.pos-auto{ bottom:auto; top:calc(58px + var(--safe-t, 0px)); transform-origin:left top }
body.touch .dbd.pos-auto{ --k:calc(var(--dbd-k,1) * .78) }
/* جولة 68: الجوال بالعرض القصير — اللوحة تصغر شوي عشان ما تلمس زر «فعل» (ولا شي ثاني) */
@media (max-height:440px) and (orientation:landscape){ body.touch .dbd.pos-auto{ --k:calc(var(--dbd-k,1) * .64) } }
.dbd-top{ display:flex; align-items:flex-end; gap:14px }
.dbd-objs{ display:flex; gap:12px; align-items:flex-end }
.dbd-o{ display:flex; align-items:center; gap:6px; position:relative }
.dbd-o b{ font-size:2.4rem; font-weight:300; line-height:1; letter-spacing:-1px; min-width:.8em; text-align:center; font-variant-numeric:tabular-nums }
.dbd-oi{ width:42px; height:42px; display:grid; place-items:center; border:1px solid #ffffff55; background:#0008; border-radius:4px }
.dbd-oi svg, .dbd-oi img{ width:28px; height:28px; object-fit:contain; color:#ddd }
.dbd-o small{ position:absolute; left:0; bottom:-14px; font-size:.6rem; opacity:.7; white-space:nowrap; direction:rtl }
.dbd-o.done{ opacity:.45 } .dbd-o.done b{ color:#7bd389 }
.dbd-o.gate .dbd-oi{ border-color:#ffd16688 } .dbd-o.gate .dbd-oi svg{ color:#ffd166 }
.dbd-o.gate.open .dbd-oi{ box-shadow:0 0 14px #ffd16688; animation:dbdPulse 1.2s ease-in-out infinite }
.dbd-o.gate small{ position:static; font-size:.7rem; opacity:.9 }
@keyframes dbdPulse{ 50%{ box-shadow:0 0 22px #ffd166cc } }
.dbd-tools{ display:flex; gap:6px; align-items:flex-end }
.dbd-t{ position:relative; width:40px; height:40px; display:grid; place-items:center; background:linear-gradient(135deg,#3a2a5a,#1c1530); border:1px solid #ffffff44; border-radius:4px }
.dbd-t svg, .dbd-t img{ width:24px; height:24px; color:#fff; object-fit:contain }
.dbd-t em{ position:absolute; top:-4px; right:-4px; font-style:normal; font-weight:900; font-size:.8rem; background:#000c; border-radius:6px; padding:0 4px }
.dbd-t.fl i{ position:absolute; left:3px; right:3px; bottom:3px; height:4px; background:#ffffff22; border-radius:2px }
.dbd-t.fl i::after{ content:''; position:absolute; inset:0; width:var(--p); background:#ffd166; border-radius:2px }
.dbd-t.fl.on{ box-shadow:0 0 12px #ffd16688 }
.dbd-abil{ display:flex; flex-direction:column; align-items:center; gap:2px }
.dbd-abil small{ font-size:.66rem; opacity:.85; direction:rtl }
.dbd-ab{ position:relative; width:58px; height:58px; display:grid; place-items:center }
.dbd-ab .dbd-ring{ position:absolute; inset:0; width:100%; height:100% }
.dbd-abi{ width:30px; height:30px; display:grid; place-items:center } .dbd-abi svg, .dbd-abi img{ width:100%; height:100%; color:#fff; object-fit:contain }
.dbd-ab.ready .fg{ stroke:#ff3b30 } .dbd-ab.ready{ filter:drop-shadow(0 0 8px #ff3b3099) }
.dbd-ab.stun{ opacity:.5 }
.dbd-ring{ transform:rotate(-90deg) } .dbd-ring circle{ fill:none; stroke-width:4 }
.dbd-ring .bg{ stroke:#ffffff26 } .dbd-ring .fg{ stroke:#c9c9c9; transition:stroke-dashoffset .2s linear }
.dbd-ring.pod .fg{ stroke:#ff3b30 }
.dbd-sep{ height:1px; width:min(360px,60vw); background:linear-gradient(90deg,#ffffffaa,#ffffff22 80%,transparent) }
.dbd-team{ display:flex; gap:12px; align-items:flex-start }
.dbd-sv{ position:relative; width:64px; display:flex; flex-direction:column; align-items:center; gap:2px }
.dbd-por{ position:relative; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle,#2a2d38,#0c0d12 70%); border:2px solid #ffffff55; display:grid; place-items:center; overflow:visible }
.dbd-por canvas{ height:40px; image-rendering:pixelated }
.dbd-sv.me .dbd-por{ border-color:#fff }
.dbd-sv.st-injured .dbd-por{ border-color:#ff9a3c } .dbd-sv.st-downed .dbd-por, .dbd-sv.st-carried .dbd-por{ border-color:#ff3b30 }
.dbd-sv.st-contained .dbd-por{ border-color:#ff3b30; box-shadow:0 0 12px #ff3b3088 }
.dbd-sv.st-escaped .dbd-por{ border-color:#7bd389 }
.dbd-sv.gone{ opacity:.5 } .dbd-sv.gone canvas{ filter:grayscale(1) }
.dbd-sti{ position:absolute; right:-8px; bottom:-4px; width:26px; height:26px; display:grid; place-items:center; background:#000c; border:1px solid #ffffff55; border-radius:50% }
.dbd-sti svg, .dbd-sti img{ width:16px; height:16px; object-fit:contain; color:#ff5a4e }
.dbd-sv.st-escaped .dbd-sti svg{ color:#7bd389 } .dbd-sv.st-contained .dbd-sti svg{ color:#ff3b30 }
.dbd-fd{ position:absolute; left:-6px; bottom:-4px; width:20px; height:20px; display:grid; place-items:center; background:#1f3d27; border-radius:50% }
.dbd-fd svg{ width:12px; height:12px; color:#7bd389 }
.dbd-pr{ position:absolute; inset:-5px; pointer-events:none }
.dbd-pr .dbd-ring{ width:100%; height:100% }
.dbd-pr em{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-style:normal; font-weight:900; font-size:.72rem; color:#ff5a4e; background:#000c; border-radius:6px; padding:0 4px }
.dbd-hk{ position:absolute; top:0; right:-4px; display:flex; flex-direction:column; gap:2px }
.dbd-hk i{ width:3px; height:10px; background:#ffffff33; border-radius:1px } .dbd-hk i.on{ background:#fff; box-shadow:0 0 4px #fff8 }
.dbd-nm{ font-size:.66rem; font-weight:700; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl }
.dbd-hp{ width:44px; height:3px; background:#ffffff22; border-radius:2px; overflow:hidden } .dbd-hp i{ display:block; height:100%; background:#c9302c }
.dbd-sv.st-healthy .dbd-hp i{ background:#d9d9d9 }
@media (max-height:500px){ .dbd-o b{ font-size:1.9rem } }
body.hud-dbd .status{ inset-inline-end:auto; left:50%; transform:translateX(-50%); bottom:calc(92px + var(--safe-b,0px)) }
body.hud-dbd.touch .status{ bottom:150px }
body.hud-dbd:not(.touch) .toolbar{ display:none !important } /* أدواتك تطلع داخل الواجهة (F/G تشتغل) */
body.touch .dbd-tools{ display:none } /* على الجوال أزرار الأدوات نفسها تبين */
/* الجوال: تحت زرّي الشات والبلاغ، والتحديات تنتقل للجهة الثانية */
body.touch .dbd.pos-auto{ top:calc(108px + var(--safe-t, 0px)) }
body.touch.hud-dbd .hud-ch{ inset-inline-end:auto; inset-inline-start:12px }
/* تخفيف الظلام + المعاينة */
.dark-pv{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 10px}
.dark-pv canvas{width:100%;max-width:360px;aspect-ratio:360/160;image-rendering:pixelated;border:1px solid #ffffff1c;background:#000}
.dark-pv[hidden],.set-dark[hidden]{display:none}
/* كيف تلعب: شريط تقدّم + دخول ناعم لكل سلايد */
.hs-prog{height:3px;background:#ffffff14;border-radius:3px;overflow:hidden}
.hs-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .35s ease}
.hs-stage.hs-in .hs-media{animation:hsMedia .45s ease both}
.hs-stage.hs-in .hs-body{animation:hsBody .45s .08s ease both}
@keyframes hsMedia{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@keyframes hsBody{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hs-media{position:relative}
.hs-media::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px #000c}
@media (prefers-reduced-motion:reduce){.hs-stage.hs-in .hs-media,.hs-stage.hs-in .hs-body{animation:none}}
/* اختيار الخريطة (الغرفة المخصّصة) */
.map-pick{margin:10px 0 4px}
.mp-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:min(46vh,340px);overflow:auto;padding:2px}
.mp-card{display:flex;flex-direction:column;text-align:start;padding:0;background:#0b0c11;border:1px solid #ffffff1c;border-radius:var(--radius);overflow:hidden;color:var(--text);cursor:pointer;transition:border-color .15s,transform .15s}
.mp-card:disabled{cursor:default;opacity:.8}
.mp-card:not(:disabled):hover{border-color:var(--accent2);transform:translateY(-1px)}
.mp-card.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;opacity:1}
.mp-img{aspect-ratio:var(--ar-card, 3 / 2);background:#05060a;display:grid;place-items:center;overflow:hidden}
.mp-img img{width:100%;height:100%;object-fit:cover;display:block}
.mp-img svg{width:34px;height:34px;opacity:.5}
.mp-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 9px}
.mp-t b{font-size:.85rem;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-t small{width:100%;font-size:.68rem;opacity:.55}
.mp-d{font-style:normal;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:99px;background:#ffffff14}
.mp-d.d-easy{background:#1f4d2e;color:#7bd389}.mp-d.d-med{background:#4d421f;color:#ffd166}.mp-d.d-hard{background:#4d2e1f;color:#ff9a3c}.mp-d.d-night{background:#4d1f22;color:#ff5a5f}
@media (orientation:landscape) and (max-height:500px){.mp-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));max-height:40vh}}
/* الجوال بالعرض: الخرائط صفّ أفقي يتمرّر — عشان يبان زر البدء والعدّاد */
@media (orientation:landscape) and (max-height:500px){
.mp-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:118px;grid-template-rows:auto;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.mp-img{aspect-ratio:2 / 1}
.mp-t{padding:4px 6px}.mp-t small{display:none}
}
@media (max-width:520px) and (orientation:portrait){ .mp-grid{grid-template-columns:repeat(2,1fr);max-height:38vh} }
/* أيقونة البروفايل مربّعة في كل مكان (كانت دائرية في لوحة النتائج والمتجر) */
.eb-av, .eb-av > img:first-child{ border-radius:6px !important }
.item .si-art.avatar img{ border-radius:10px !important }
.si-art.frame .fr-in{ border-radius:8px !important }
/* ===== «النموذج صفر» ===== */
/* زرّا القدرتين: حلقة كولداون (conic) ورقم الثواني */
.toolbar .tool.ab{position:relative;display:grid;place-items:center}
.toolbar .tool.ab svg{width:22px;height:22px;color:#e8e6df}
.toolbar .tool.ab::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(#000b var(--cd,0deg),transparent 0);pointer-events:none}
.toolbar .tool.ab .ab-cd{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.9rem;color:#fff;text-shadow:0 1px 3px #000}
.toolbar .tool.ab.on{box-shadow:0 0 0 2px #fff,0 0 14px #fff8}
/* بار الجنون */
.mad-bar{position:absolute;top:calc(58px + var(--safe-t,0px));left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:8px;background:#0009;border:1px solid #7a4fd066;pointer-events:none;font-size:.72rem;font-weight:800;color:#d9c8ff}
.mad-bar i{display:block;width:150px;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}
.mad-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#5b3aa8,#b48cff);transition:width .25s}
.mad-bar.full{border-color:#b48cff;animation:madPulse 1s infinite}.mad-bar.full b{background:#b48cff}
.mad-bar .mb-t{color:#fff;min-width:0}
@keyframes madPulse{50%{box-shadow:0 0 16px #b48cff88}}
body.touch .mad-bar{top:calc(12px + var(--safe-t,0px))}
/* هلوسات خفيفة: ظلال تتحرّك على الأطراف + ألوان تنزاح */
.mad-fx{position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 120px #3b1d6acc;animation:madHue 6s linear infinite}
.mad-fx i{position:absolute;width:90px;height:160px;border-radius:50% 50% 40% 40%;background:radial-gradient(ellipse,#000d,transparent 70%);filter:blur(4px);opacity:0;animation:madGhost 7s ease-in-out infinite}
.mad-fx i:nth-child(1){left:6%;top:30%}.mad-fx i:nth-child(2){right:8%;top:18%;animation-delay:2.3s}.mad-fx i:nth-child(3){left:40%;bottom:6%;animation-delay:4.6s}
@keyframes madGhost{0%,100%{opacity:0;transform:translateY(8px)}40%{opacity:.8}60%{opacity:.5;transform:translateY(-10px) scaleX(.8)}}
@keyframes madHue{0%,100%{backdrop-filter:hue-rotate(0deg) saturate(1.1)}50%{backdrop-filter:hue-rotate(-25deg) saturate(1.5)}}
/* التشويش: خطوط وتكسّر بعد ضربة التشويش */
.distort{position:absolute;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff10 0 2px,transparent 2px 5px);mix-blend-mode:screen;animation:distJit .12s steps(2) infinite}
.distort::before,.distort::after{content:'';position:absolute;left:0;right:0;height:14%;background:#ffffff14;backdrop-filter:invert(1) hue-rotate(90deg);animation:distBand 1.1s steps(6) infinite}
.distort::after{height:6%;animation-duration:.7s;animation-delay:.3s}
@keyframes distJit{50%{transform:translateX(3px)}}
@keyframes distBand{0%{top:10%}20%{top:62%}40%{top:25%}60%{top:80%}80%{top:4%}100%{top:48%}}
@media (prefers-reduced-motion:reduce){.distort,.distort::before,.distort::after,.mad-fx,.mad-fx i{animation:none}}
/* واجهة DBD: قدرتا النموذج صفر + عدّاد الصمت */
.dbd-abs{display:flex;align-items:center;gap:10px}
.dbd-abs .dbd-ab{position:relative}
.dbd-abs .dbd-ab em{position:absolute;bottom:-6px;inset-inline-end:-6px;font-style:normal;font-size:.62rem;font-weight:900;background:#000c;border:1px solid #ffffff55;border-radius:4px;padding:0 4px;direction:ltr}
.dbd-abs .dbd-ab.armed .dbd-abi{box-shadow:0 0 0 2px #fff,0 0 16px #fffa}
.dbd-sil{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;background:#0009;border:1px solid #9b7bd6aa;color:#d9c8ff}
.dbd-sil svg{width:16px;height:16px}.dbd-sil b{font-size:1rem}
.dbd-sil[hidden]{display:none}
/* تأثيرات الألقاب انتقلت لملف مشترك: game/css/titlefx.css */
.eb-tt{display:block;font-size:.72rem;margin-top:2px}
/* الباتل باس: عرض البطاقة محسوب (عدد كامل يبان) */
.pass-track .tier{flex:0 0 var(--tw,156px);min-width:0}
.pass-track .tier b{overflow-wrap:anywhere}
/* «الإعدام» في المتجر: صورة الجمبسكير مغبّشة + ختم E3DAM */
.si-art.mori{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:10px}
.si-art.mori img{width:92px;height:92px;object-fit:cover;filter:blur(1.5px) grayscale(.3) brightness(.8);transition:filter .3s}
.item:hover .si-art.mori img{filter:none}
.si-art.mori i{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) rotate(-6deg);font-style:normal;font-weight:900;letter-spacing:2px;font-size:.72rem;color:#fff;background:#b3121e;padding:1px 8px;border-radius:3px;box-shadow:0 2px 8px #000a}
/* أيقونة صفحة الاختيار: تملى المربّع كامل (٤:٥) والاسم فوقها بتدرّج */
.cs-tile.has-icon{padding:0;overflow:hidden;justify-content:flex-end;gap:0}
.cs-tile.has-icon .cs-pv{position:relative;width:100%;height:auto;aspect-ratio:4/5;display:block}
.cs-tile.has-icon .cs-pv .cs-icon{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;image-rendering:pixelated;border-radius:0}
.cs-tile.has-icon>b{position:absolute;inset-inline:0;bottom:0;padding:18px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:center;z-index:1}
.cs-tile.has-icon .cs-lock,.cs-tile.has-icon .cs-eq{z-index:2}
.cs-tile.has-icon.sel .cs-pv .cs-icon{filter:none}
.cs-tile.has-icon.sel{box-shadow:inset 0 0 0 2px var(--accent)}
/* بطاقة اللقب داخل كرت الباتل باس والمتجر */
.tt-host{display:block!important;width:100%;height:100%;padding:0!important;background:none!important}
.tier .ttl-ico.tt-host{width:100%;height:78px;font-size:.92rem}
.tier .ttl-ico.tt-host .tt-card{min-height:78px;padding:16px 6px 6px}
.si-art.ttl.tt-host{min-height:110px;font-size:1.05rem}
.si-art.ttl.tt-host .tt-card{min-height:110px}
.tt-host.sm .tt-card{min-height:56px;padding:14px 4px 4px;font-size:.8rem}
.tt-host.sm .tt-card-r{font-size:.54rem;top:3px}
/* ===== خلفية البروفايل: طبقة تحت المحتوى (بروفايل · كرت اللوبي · لوحة النتائج) ===== */
.pbg-host{position:relative;isolation:isolate}
.pbg{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.pbg>i{position:absolute;inset:calc(var(--pbg-b,0px) * -2 - 2px);background-size:cover;background-position:center;filter:blur(var(--pbg-b,0px))}
.pbg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,calc(var(--pbg-d,.35) * .55)),rgba(0,0,0,var(--pbg-d,.35)))}
.pbg.m-c{background:radial-gradient(120% 90% at 50% 0%,var(--pbg-c),#050507 130%)}
.pbg.m-t{background:none}.pbg.m-t::after{background:rgba(0,0,0,calc(var(--pbg-d,.35) * .5))}
.pbg-host.pbg-t{background:rgba(8,8,12,.22)!important;backdrop-filter:blur(2px)}
.pbg-host .pf-box,.pbg-host .pf-st{background:rgba(10,10,14,.55);backdrop-filter:blur(3px)}
#lobbyPlayers li.pbg-host{overflow:hidden}
.pf-bgbox{margin-top:12px}
.pf-bg-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-bg-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:8px}
.pf-bg-f{display:flex;flex-direction:column;gap:4px;font-size:.8rem;min-width:130px}
.pf-bg-f input[type=range]{width:140px}
.pf-bg-f[hidden]{display:none}
.pf-bg-mode button.on{background:var(--accent);color:#fff}
.pf-pick.bgs .pf-opt img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:560px){.pf-bg-f{min-width:0;flex:1 1 40%}.pf-bg-f input[type=range]{width:100%}}
/* المتجر: خلفية البروفايل والأدوات */
.si-art.pbg-art{position:relative}.si-art.pbg-art img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:8px}
.si-art.pbg-art .pbg-lbl{position:absolute;bottom:6px;inset-inline-start:6px;font-style:normal;font-size:.62rem;background:#000a;padding:1px 7px;border-radius:99px}
.si-art.tool{position:relative;display:grid;place-items:center;min-height:90px}
.si-art.tool svg{width:44px;height:44px;color:#ffd166;filter:drop-shadow(0 0 10px #ffd16655)}
.si-art.tool img{width:72px;height:72px;object-fit:contain;image-rendering:pixelated}
.si-art.tool i{position:absolute;font-style:normal;font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:99px}
.si-art.tool .tl-pack{top:6px;inset-inline-end:6px;background:#ffd166;color:#111}
.si-art.tool .tl-have{bottom:6px;inset-inline-start:6px;background:#2e7d32;color:#fff}
/* أداة المباراة في غرفة الانتظار */
.gear-pick{margin:10px 0}
.gear-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.gear{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--line,#ffffff1f);background:#ffffff08;color:inherit;font:inherit;cursor:pointer}
.gear .g-ic{display:grid;place-items:center;width:28px;height:28px}.gear .g-ic img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.gear .g-ic svg{width:20px;height:20px;color:#ffd166}
.gear i{font-style:normal;font-size:.72rem;padding:1px 7px;border-radius:99px;background:#ffffff14}
.gear.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
@media (max-width:540px){.gear{flex:1 1 45%}}
/* البروفايل: الاسم واللقب والأزرار تحت البانر — الأيقونة بس تركب على طرفه */
.pf-hero{margin-bottom:16px!important}
.pf-id{position:relative!important;inset:auto!important;margin-top:10px!important;padding-inline:14px!important;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pf-id .pf-av{margin-top:-58px;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.pf-id .pf-meta{padding-bottom:2px}
.pf-id .pf-btns{align-self:center}
@media (max-width:640px){.pf-id{margin-top:8px!important}.pf-id .pf-av{margin-top:-46px;width:76px;height:76px}.pf-id .pf-btns{width:100%}}
.item.r-uncommon{--rc:#5fd068}.item.r-mythic{--rc:#ff3b4f}.item.r-cursed{--rc:#8b3dff}.item.r-forbidden{--rc:#ff1f3d}
.pf-t .tr-chip{margin-inline-start:8px}
/* بطاقة الشخصية في التخصيص: النبذة سطرين/ثلاث بس — والقصة كاملة في «القصة والقدرة» */
.cs-card .cs-story{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lore-story{white-space:pre-line;overflow-wrap:anywhere}
/* «القصة والقدرة»: كانت النافذة تقصّ اللي تحت (البيركات) بدل ما تنسحب — صف الشبكة لازم يكون محدود */
.lore-box{grid-template-rows:minmax(0,1fr)}
.lore-main{min-height:0;max-height:inherit;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
.lore-side{min-height:0;overflow:hidden}
/* القصة الطويلة داخل صندوق ينسحب لحاله — والقدرة والبيركات تبان تحته على طول */
.lore-story{max-height:min(34vh,300px);overflow-y:auto;overscroll-behavior:contain;padding-inline-end:8px;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent;
-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent);padding-bottom:14px}
.lore-main::-webkit-scrollbar,.lore-story::-webkit-scrollbar{width:6px}.lore-main::-webkit-scrollbar-thumb,.lore-story::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:6px}
@media (max-width:760px){.lore-box{grid-template-rows:auto minmax(0,1fr)}.lore-story{max-height:28vh}}
/* المتجر: صورة بيع الشخصية (400×500) — في الكرت تملى المسرح بنفس ارتفاع باقي المنتجات، وفي النافذة تبان كاملة */
.item .it-stage:has(.si-art.portrait){padding:0}
.item .si-art.sk.portrait{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;margin:0;border-radius:0;background:#07080c}
.item .si-art.sk.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;image-rendering:pixelated;transition:transform .35s ease}
.item .si-art.sk.portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,10,.75));pointer-events:none}
.item:hover .si-art.sk.portrait img{transform:scale(1.05)}
.item.owned .si-art.sk.portrait img{filter:saturate(.6) brightness(.8)}
.shop-modal .si-big:has(.portrait){max-width:240px}
.shop-modal .si-big .si-art.sk.portrait{height:auto;aspect-ratio:4/5;width:100%;display:block;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px #ffffff1a}
.shop-modal .si-big .si-art.sk.portrait img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.si-lore{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:4px 0 10px}
@media (max-width:520px){.shop-modal .si-big:has(.portrait){max-width:190px}}
/* ===== عرض المكافآت الموحّد (الباتل باس + نوافذ المتجر والمستويات) ===== */
.tier .tier-art{width:100%;height:92px;display:grid;place-items:center;position:relative}
.tier .tier-k{font-size:.66rem;opacity:.6;margin-top:-2px}
.rw-art{display:grid;place-items:center;position:relative;width:100%;height:100%;overflow:hidden}
.rw-art img{display:block;pointer-events:none;user-select:none}
.rw-art canvas{width:auto!important;height:78%!important;image-rendering:pixelated}
.rw-skin.pic img{width:auto;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;image-rendering:pixelated;box-shadow:0 6px 16px #000a,0 0 0 1px #ffffff1a}
.rw-avatar .rw-av,.rw-frame .rw-av{position:relative;width:72px;height:72px;border-radius:12px;overflow:visible;display:grid;place-items:center;background:#07080c}
.rw-avatar .rw-av img{width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 6px 16px #000a,0 0 0 1px #ffffff1f}
.rw-frame .rw-av>img:not(.rw-fr),.rw-frame .rw-av canvas{width:78%!important;height:78%!important;object-fit:cover;border-radius:10px}
.rw-frame .rw-fr{position:absolute;inset:-12%;width:124%;height:124%;object-fit:contain}
.rw-banner img{width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:8px;box-shadow:0 6px 16px #000a,0 0 0 1px #ffffff1a}
.rw-bg img{width:100%;aspect-ratio:16/9;max-height:100%;object-fit:cover;border-radius:8px;box-shadow:0 6px 16px #000a,0 0 0 1px #ffffff1a}
.rw-bg i,.rw-mori i,.rw-tool i{position:absolute;font-style:normal;font-size:.6rem;font-weight:800;padding:1px 7px;border-radius:99px}
.rw-bg i{bottom:6px;inset-inline-start:6px;background:#000b;color:#fff}
.rw-mori img{height:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;filter:blur(1px) grayscale(.3) brightness(.8)}
.rw-mori i{bottom:6px;left:50%;transform:translateX(-50%) rotate(-5deg);background:#b3121e;color:#fff}
.rw-tool svg{width:44px;height:44px;color:#ffd166;filter:drop-shadow(0 0 10px #ffd16655)}.rw-tool img{height:72%;object-fit:contain;image-rendering:pixelated}
.rw-tool i{top:4px;inset-inline-end:4px;background:#ffd166;color:#111}
.rw-perk .gem{width:74px;height:74px}
.rw-title .tt-card{min-height:0;height:100%;padding:16px 6px 6px}
.rw-cur{gap:2px}.rw-cur svg{width:34px;height:34px;color:#e9c76a;filter:drop-shadow(0 0 10px #e9c76a55)}.rw-cur b{font-size:1.25rem;font-weight:900;color:#ffe08a}
.rw-cur.xp svg{color:#8fd3ff}.rw-cur.xp b{color:#bfe6ff}
.rw-ic svg{width:40px;height:40px;color:#ffd166}
/* لون خفيف للبطاقة حسب النوع */
.tier.rt-skin::after{--tc:#4db38f}.tier.rt-perk::after{--tc:#9b7bff}.tier.rt-scrap::after,.tier.rt-xp::after{--tc:#e9c76a}.tier.rt-title::after{--tc:#8fd3ff}
.tier.rt-avatar::after,.tier.rt-banner::after,.tier.rt-frame::after,.tier.rt-bg::after{--tc:#ff7bd8}.tier.rt-mori::after{--tc:#ff3b4f}.tier.rt-tool::after{--tc:#ffd166}
/* النافذة الكبيرة */
.rw-big{height:auto!important;max-width:260px!important;margin:6px auto 12px}
.rw-big .rw-art{height:180px}
.rw-big .rw-skin.pic{height:auto}.rw-big .rw-skin.pic img{height:auto;width:100%;max-width:220px}
.rw-big .rw-avatar .rw-av,.rw-big .rw-frame .rw-av{width:130px;height:130px}
.rw-big .rw-banner,.rw-big .rw-bg{height:auto}
.rw-big .rw-perk .gem{width:120px;height:120px}
.rw-big .rw-title .tt-card{font-size:1.25rem;min-height:130px}
.rw-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
/* معاينة على حسابك */
.pv-modal{z-index:60}
.pv-dlg{max-width:520px;width:min(94vw,520px);text-align:center}
.pv-dlg h3{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 4px}
.pv-card{position:relative;border-radius:14px;overflow:hidden;background:#0d0e14;border:1px solid #ffffff1a;margin:12px 0;text-align:start;padding-bottom:14px}
.pv-bn{aspect-ratio:3/1;background:linear-gradient(120deg,#2a0d12,#0d0e14)}.pv-bn img{width:100%;height:100%;object-fit:cover;display:block}
.pv-id{display:flex;align-items:flex-end;gap:12px;padding:0 14px;margin-top:-34px}
.pv-av{position:relative;width:76px;height:76px;flex:none;border-radius:12px;background:#07080c;display:grid;place-items:center;box-shadow:0 6px 18px #000b}
.pv-av>img:first-child{width:100%;height:100%;object-fit:cover;border-radius:12px}.pv-av canvas{height:80%;image-rendering:pixelated}
.pv-av .pv-fr{position:absolute;inset:-12%;width:124%;height:124%;object-fit:contain}
.pv-meta{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;min-width:0}.pv-meta b{font-size:1.1rem}.pv-meta small{opacity:.6}
.pv-seg{display:inline-flex}
/* r18: أرقام المستويات وشارات البطاقات دايم فوق الصورة */
.tier .n{z-index:5}
.tier .tier-art{margin-top:14px;height:84px;z-index:1}
.tier .rw-title .tt-card{overflow:hidden;font-size:.82rem;line-height:1.15;word-break:break-word}
.rw-art,.si-art{isolation:isolate}
.si-tag{z-index:5}
/* ---- واجهة المباراة: ترتيب أسماء الأهداف + خيارات المحرك + بيركاتك ---- */
.dbd-o small{ left:auto; right:0; width:42px; text-align:center; bottom:-13px; overflow:hidden; text-overflow:ellipsis }
.dbd-sep{ margin-top:8px }
.dbd.no-olbl .dbd-o:not(.gate) small{ display:none }
.dbd.no-nm .dbd-nm{ display:none }
.dbd.no-hp .dbd-hp{ display:none }
.dbd.kfix, body.touch .dbd.kfix.pos-auto{ --k:var(--dbd-k,1) }
.dbd-perks{ position:absolute; z-index:6; pointer-events:none; display:flex; gap:calc(10px * var(--pk,1)); direction:ltr; --pk:1 }
.dbd-perks[hidden]{ display:none }
.dbd-perks.pp-br{ right:calc(22px + var(--safe-r, 0px)); bottom:calc(24px + var(--safe-b, 0px)) }
.dbd-perks.pp-bl{ left:calc(22px + var(--safe-l, 0px)); bottom:calc(150px + var(--safe-b, 0px)) }
.dbd-perks.pp-tr{ right:calc(18px + var(--safe-r, 0px)); top:calc(58px + var(--safe-t, 0px)) }
.dbd-perks.pp-tc{ left:50%; transform:translateX(-50%); top:calc(52px + var(--safe-t, 0px)) }
.dbd-pk{ display:flex; flex-direction:column; align-items:center; gap:calc(8px * var(--pk,1)) }
.dbd-pkd{ width:calc(44px * var(--pk,1)); height:calc(44px * var(--pk,1)); display:grid; place-items:center; position:relative }
.dbd-pkd::before{ content:''; position:absolute; inset:14%; transform:rotate(45deg); border:2px solid var(--rc); border-radius:4px;
background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 35%, #0c0d13), #07080c 75%); box-shadow:0 0 10px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 8px #000a }
.dbd-pkd i{ position:relative; width:52%; height:52%; display:grid; place-items:center }
.dbd-pkd i svg, .dbd-pkd i img{ width:100%; height:100%; color:#fff; object-fit:contain; filter:drop-shadow(0 1px 2px #000) }
.dbd-pk b{ font-size:calc(.62rem * var(--pk,1)); font-weight:800; color:#e8e6df; text-shadow:0 1px 3px #000; white-space:nowrap; max-width:calc(80px * var(--pk,1)); overflow:hidden; text-overflow:ellipsis; direction:rtl }
.dbd-perks.pp-tc .dbd-pkd{ opacity:.92 }
/* ===== جولة 11: هوية كل وضع لعب — خلفية + عنوان مدمج + شريط أسفل ثابت ===== */
#scr-lobby.has-mbg, #scr-rooms.has-mbg {
background: linear-gradient(rgba(5,6,10,var(--mdim,.55)), rgba(5,6,10,var(--mdim,.55))), radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.55)), var(--mbg) var(--mfoc,50% 50%) / cover no-repeat, #07080c }
.screen[data-mode="quick"] { --mc:#d0313a }
.screen[data-mode="room"] { --mc:#d9a441 }
.screen[data-mode="custom"] { --mc:#4d8fe0 }
.screen[data-mode="rooms"] { --mc:#4db38f }
#scr-lobby .panel::after, #scr-rooms .panel::after { background:var(--mc,var(--accent)) }
/* العنوان = اسم الوضع بأيقونته */
.lb-title { display:flex; align-items:center; gap:10px; min-width:0 }
.lb-title > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lb-ic { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; color:var(--mc,var(--accent)); border:1px solid var(--mc,var(--accent)); background:rgba(255,255,255,.04) }
.lb-ic svg { width:18px; height:18px }
/* سطر واحد: شارة المكافآت + وصف قصير */
.mode-line { display:flex; align-items:center; gap:10px; margin:-4px 0 12px; min-width:0 }
.mode-line small { opacity:.65; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.mh-rw { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:800; padding:4px 9px; border:1px solid; white-space:nowrap; line-height:1.3 }
.mh-rw svg { width:12px; height:12px }
.mh-rw.ok { color:#6fd3a8; border-color:#6fd3a855; background:#6fd3a812 }
.mh-rw.warn { color:#f0c060; border-color:#f0c06055; background:#f0c06012 }
.mh-rw.no { color:#ff6b5e; border-color:#ff6b5e66; background:#ff6b5e18 }
/* تنبيه التدريب: سطر نحيف واضح */
.mode-warn { display:flex; gap:9px; align-items:center; padding:9px 12px; margin:0 0 12px; border:1px solid #f0c06044; border-inline-start:3px solid #f0c060; background:#f0c0600d; color:#f1dfb4; font-size:.86rem; line-height:1.5 }
.mode-warn svg { flex:0 0 auto; width:18px; height:18px; color:#f0c060 }
.mode-warn b { color:#ffd77a; font-weight:900 }
.mode-warn.hot { border-color:#ff6b5e55; border-inline-start-color:#ff6b5e; background:#ff6b5e10; color:#ffd6d1 }
.mode-warn.hot svg, .mode-warn.hot b { color:#ff7b6e }
.rdy-tag { font-size:.72rem; font-weight:800; padding:2px 8px; border:1px solid #ffffff22; opacity:.7; margin-inline:auto 8px; white-space:nowrap }
.rdy-tag.on { color:#6fd3a8; border-color:#6fd3a866; background:#6fd3a814; opacity:1 }
/* الشريط السفلي: الحالة فوق، والأزرار في صف واحد — ثابت أسفل اللوحة وما يتداخل */
.lb-foot { position:sticky; bottom:calc(var(--wipbar, 0px) - 1px); z-index:2; margin:14px -6px -6px; padding:12px 6px 6px; background:var(--panel,#12141c); border-top:1px solid var(--line); box-shadow:0 -14px 22px -10px #000c }
.lb-status { margin:0 0 10px; text-align:center; font-size:.92rem; font-weight:700; opacity:.8; min-height:1.4em; line-height:1.4 }
.lb-status::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mc,var(--accent)); margin-inline-end:8px; vertical-align:middle; animation:lbDot 1.4s ease-in-out infinite }
.lb-status:empty::before { display:none }
.lb-status.cd-on { font-size:1.35rem; font-weight:900; opacity:1; color:var(--mc,var(--accent)) }
@keyframes lbDot { 50% { opacity:.25 } }
.lb-actions { display:flex; gap:8px; align-items:stretch }
.lb-actions > .btn { flex:0 0 auto }
.lb-main { flex:1 1 auto; display:flex; min-width:0 }
.lb-main[hidden] { display:none !important }
.lb-actions:not(:has(.lb-main:not([hidden]))) #btnLeave { flex:1 1 auto }
.rdy-btn { flex:1 1 auto; min-width:0; padding:12px 16px; font-size:1.02rem }
.rdy-btn svg { width:17px; height:17px }
.rdy-btn[hidden] { display:none !important }
#btnRdy.on { background:#1d4a3b; border-color:#6fd3a8; color:#dff7ec }
#btnStart:disabled { opacity:.45; filter:grayscale(.6); cursor:not-allowed; box-shadow:none }
#btnStart.cancel { background:#3a1d1f; box-shadow:none }
#scr-lobby .page-h { flex-wrap:nowrap; gap:10px }
#scr-lobby .lb-title { flex:1 1 auto }
.lb-actions .btn { white-space:nowrap }
@media (max-width:560px) {
#scr-lobby .code-chip { font-size:.95rem; padding:3px 4px 3px 10px }
#scr-lobby .code-chip .btn { padding:4px 7px }
.lb-ic { width:30px; height:30px } .lb-ic svg { width:16px; height:16px }
.mode-line small { font-size:.8rem }
.lb-actions { flex-wrap:wrap }
.lb-main { order:-1; flex-basis:100% }
.lb-actions > .btn { flex:1 1 0 }
}
@media (prefers-reduced-motion:reduce) { .lb-status::before { animation:none } }
/* ===== جولة 12: مؤثرات — شيدر اللعب، جزيئات القائمة، إطار البطاقات المضيء ===== */
#cvfx { position:absolute; display:none; pointer-events:none; image-rendering:auto }
body.fx-post #cv { opacity:0 }
#pfx { position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; mix-blend-mode:screen }
/* جولة 13: حواف الصفحات المضيئة (شيدر) — فوق اللوحة، والأسود يختفي بالـ screen */
#edgefx { position:fixed; display:none; z-index:6; pointer-events:none; mix-blend-mode:screen }
body.in-game #edgefx { display:none !important }
body.in-game #pfx { display:none }
/* إطار مضيء يلف حول البطاقة — يتبع الزوايا المقصوصة */
@property --gd { syntax:''; inherits:false; initial-value:0 }
.pc-glow { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible;
opacity:0; transition:opacity .35s ease; color:var(--glow-c, color-mix(in srgb, var(--tint) 40%, #ffd9a8)) }
.pc-glow polygon { fill:none; stroke:currentColor; vector-effect:non-scaling-stroke; stroke-linejoin:miter }
.pc-glow .g-base { stroke-width:1.4; opacity:.75; filter:drop-shadow(0 0 4px currentColor) }
.pc-glow .g-run { stroke-width:3.2; stroke-dasharray:22 78; stroke-linecap:round;
filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor); animation:gRun var(--glow-sp, 2.2s) linear infinite paused }
.pc-glow .g-run2 { animation-delay:calc(var(--glow-sp, 2.2s) / -2); opacity:.7; stroke-dasharray:9 91 }
@keyframes gRun { to { stroke-dashoffset:-100 } }
.pcard:hover .pc-glow, .pcard:focus-visible .pc-glow, .pcard.g-hit .pc-glow { opacity:1 }
body:not(.no-cglow) .menu-play > .pcard:hover, body:not(.no-cglow) .menu-play > .pcard:focus-visible { box-shadow:0 16px 36px #000a, inset 0 0 26px -6px var(--glow-c, color-mix(in srgb, var(--tint) 40%, #ffd9a8)) }
.pcard:hover .pc-glow .g-run, .pcard:focus-visible .pc-glow .g-run, .pcard.g-hit .pc-glow .g-run { animation-play-state:running }
.pcard.g-hit .pc-glow .g-base { animation:gHit .5s ease-out }
@keyframes gHit { 0% { opacity:1; stroke-width:3; filter:drop-shadow(0 0 10px currentColor) } 100% { opacity:.45; stroke-width:1 } }
/* نبض خافت دائم على البطاقة الرئيسية — يجذب العين بدون إزعاج */
.menu-play > .pcard.hero .pc-glow { opacity:.5 }
.menu-play > .pcard.hero .pc-glow .g-run2 { animation-play-state:running }
.menu-play > .pcard.hero:hover .pc-glow { opacity:1 }
body.no-cglow .pc-glow { display:none }
@media (hover:none) { .menu-play > .pcard .pc-glow .g-run2 { animation-play-state:running } .menu-play > .pcard .pc-glow { opacity:.35 } }
@media (prefers-reduced-motion:reduce) { .pc-glow .g-run { animation:none } }
/* ===== نوافذ اللعبة (FZDialog) — بدل نوافذ المتصفح ===== */
.fzd-back { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; background:radial-gradient(ellipse at center,#000a,#000e); backdrop-filter:blur(3px); opacity:0; transition:opacity .16s }
.fzd-back.on { opacity:1 } .fzd-back.off { opacity:0 }
.fzd { position:relative; width:min(400px,100%); padding:18px 18px 16px; color:var(--text); background:linear-gradient(180deg,#232733 0%,#151820 55%,#0e1015 100%); border:1px solid #ffffff22;
box-shadow:0 0 0 1px #000, inset 0 1px 0 #ffffff1c, 0 24px 60px #000e, 0 0 40px var(--ma30t,#b7101a33);
clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
transform:translateY(10px) scale(.96); transition:transform .2s cubic-bezier(.2,1.4,.4,1) }
.fzd::before { content:''; position:absolute; inset:0 0 auto; height:4px; background:repeating-linear-gradient(-45deg,var(--accent) 0 8px,#111 8px 16px); opacity:.9 }
.fzd-back.on .fzd { transform:none } .fzd-back.off .fzd { transform:scale(.97) }
.fzd-rv { position:absolute; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#8a8f9c,#2a2d36); box-shadow:0 1px 0 #000 }
.fzd-rv.a { top:12px; left:20px } .fzd-rv.b { top:12px; right:20px } .fzd-rv.c { bottom:10px; left:20px } .fzd-rv.d { bottom:10px; right:20px }
.fzd-h { display:flex; align-items:center; gap:10px; margin:6px 0 10px }
.fzd-h b { font-size:1.08rem; letter-spacing:.2px }
.fzd-ic { width:38px; height:38px; display:grid; place-items:center; flex:none; background:#0a0b10; border:1px solid var(--accent2); color:var(--accent2); box-shadow:0 0 14px var(--mb35p,#4db38f55), inset 0 0 10px #0008; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) }
.fzd-h.danger .fzd-ic { border-color:var(--accent); color:#ff6b6b; box-shadow:0 0 14px var(--ma40t,#b7101a66) }
.fzd-ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.fzd-m { margin:0 0 12px; line-height:1.8; opacity:.88; font-size:.95rem }
.fzd-cost { display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:9px 12px; background:#0008; border:1px dashed #ffd16644 }
.fzd-cost span { opacity:.6; font-size:.8rem } .fzd-cost b { display:inline-flex; align-items:center; gap:6px; color:#ffd166; font-size:1.35rem; margin-inline-start:auto; text-shadow:0 0 12px #ffd16666 } .fzd-cost small { opacity:.6 }
.fzd-scrap { width:14px; height:14px; background:#ffd166; clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%) }
.fzd-in input { width:100%; box-sizing:border-box; font:inherit; font-size:1rem; padding:10px 12px; margin-bottom:14px; background:#07080c; color:var(--text); border:1px solid #ffffff2a }
.fzd-f { display:flex; gap:8px; justify-content:flex-end }
.fzd-b { font:inherit; font-weight:800; min-width:92px; padding:10px 16px; cursor:pointer; color:#fff; border:1px solid #ffffff22; background:#ffffff0d; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:filter .15s, transform .1s }
.fzd-b:hover { filter:brightness(1.2) } .fzd-b:active { transform:translateY(1px) }
.fzd-b.go { background:linear-gradient(180deg,#3f8f6c,#1d4a37); border-color:var(--accent2); box-shadow:0 6px 18px #0008 }
.fzd-b.danger { background:linear-gradient(180deg,var(--accent),#5a070c) }
.fzd-b:focus-visible { outline:2px solid #ffd166; outline-offset:2px }
@media (prefers-reduced-motion: reduce) { .fzd, .fzd-back { transition:none } }
/* ===== جولة 20: باتل باس حي — خلفية بكسل مرعبة + «قريبًا» ===== */
#scr-pass .bp-bg, #scr-shop .bp-bg { position:fixed; inset:0; width:100vw; height:100vh; object-fit:cover; image-rendering:pixelated; z-index:0; pointer-events:none }
#scr-pass > .panel, #scr-shop > .panel { position:relative; z-index:1; background:linear-gradient(180deg,#07080ce0,#07080cc4 55%,#07080ceb); border-color:#ffffff14; box-shadow:0 20px 60px #000a }
#scr-pass .tier.rt-train { background:linear-gradient(180deg,#1a160c,#0d0b07); border-color:#ffd16655 }
#scr-pass .tier.rt-train .tier-k { color:#ffd166 }
#scr-pass .rw-train canvas { width:96px; height:72px; image-rendering:pixelated }
.tri-dlg { position:fixed; inset:0; z-index:90; background:#000b; display:grid; place-items:center; padding:16px; backdrop-filter:blur(3px) }
.tri-dlg[hidden] { display:none }
.tri-box { width:min(640px,100%); background:#0b0c11; border:1px solid #ffd16644; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 20px 70px #000 }
.tri-h { display:flex; align-items:center; gap:10px } .tri-h b { flex:1; font-size:1.05rem } .tri-h .tier-k { color:#ffd166; font-size:.75rem }
.tri-cv { width:100%; height:auto; image-rendering:pixelated; border-radius:8px; background:#05060a }
#scr-pass .tier { transition:transform .18s, box-shadow .18s, border-color .18s; background:linear-gradient(180deg,#10121a,#0a0b10) }
#scr-pass .tier:hover { transform:translateY(-4px); box-shadow:0 8px 24px #0009, 0 0 0 1px var(--accent2) }
#scr-pass .tier.cur { animation:bpPulse 2.2s ease-in-out infinite }
#scr-pass .tier.done:not(.locked)::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 40%,#ffffff14 50%,transparent 60%); background-size:250% 100%; animation:bpShine 3.5s linear infinite }
#scr-pass .tier .btn.primary { animation:bpBtn 1.6s ease-in-out infinite }
@keyframes bpPulse { 0%,100% { box-shadow:0 0 0 3px var(--ma30t), 0 0 22px var(--ma25t) } 50% { box-shadow:0 0 0 3px var(--ma30t), 0 0 42px var(--ma30t) } }
@keyframes bpShine { from { background-position:150% 0 } to { background-position:-100% 0 } }
@keyframes bpBtn { 0%,100% { filter:brightness(1) } 50% { filter:brightness(1.25) } }
.bp-soon { display:grid; place-items:center; min-height:52vh; text-align:center; padding:20px }
.bp-soon[hidden] { display:none }
.bp-soon-in { max-width:520px; display:flex; flex-direction:column; align-items:center; gap:10px }
.bp-soon-tag { font-weight:900; letter-spacing:.3em; font-size:.85rem; color:var(--accent); border:1px solid var(--accent); padding:4px 16px; animation:bpFlick 4s steps(1) infinite }
.bp-soon-ic { width:56px; height:56px; color:var(--accent); filter:drop-shadow(0 0 14px var(--accent)); animation:bpFloat 3s ease-in-out infinite }
.bp-soon h3 { font-size:clamp(1.4rem,4vw,2.2rem); margin:0; text-shadow:0 0 18px var(--ma30t, #b7101a55), 2px 0 #b7101a66, -2px 0 #4dc3ff33; animation:bpGlitch 5s infinite }
.bp-soon p { margin:0; opacity:.8; line-height:1.7 }
.bp-soon-dots { display:flex; gap:6px } .bp-soon-dots i { width:7px; height:7px; background:var(--accent); animation:bpDot 1.2s infinite } .bp-soon-dots i:nth-child(2) { animation-delay:.2s } .bp-soon-dots i:nth-child(3) { animation-delay:.4s }
@keyframes bpFlick { 0%,92%,96%,100% { opacity:1 } 94%,98% { opacity:.2 } }
@keyframes bpFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes bpGlitch { 0%,90%,100% { transform:none } 91% { transform:translateX(-3px) skewX(-6deg) } 93% { transform:translateX(3px) } 95% { transform:none } }
@keyframes bpDot { 0%,100% { opacity:.2 } 50% { opacity:1 } }
#scr-pass.bp-is-soon .pass-head, #scr-pass.bp-is-soon .bp-tools, #scr-pass.bp-is-soon .carousel { display:none }
@media (prefers-reduced-motion:reduce) { #scr-pass .tier, #scr-pass .tier::after, .bp-soon * { animation:none !important } }
/* جولة 20.3: قفل المتجر واضح */
#scr-shop #shopLock { font-size:1rem; padding:14px 18px; border-width:2px; background:linear-gradient(90deg,#d9a0441f,#d9a04408); animation:bpPulse 2.4s ease-in-out infinite }
#scr-shop.shop-is-locked #shopLock, #scr-shop.shop-is-locked #shopGrid, #scr-shop.shop-is-locked #trShopSec, #scr-shop.shop-is-locked #shopFeat, #scr-shop.shop-is-locked #shopBanner, #scr-shop.shop-is-locked #shopTabs, #scr-shop.shop-is-locked #shopEco, #scr-shop.shop-is-locked .page > p.muted { display:none !important }
#scr-pass .tier .n.tr-n { background:#ffd166; color:#1a1406; font-size:.68rem }
/* ===== جولة 21: بطاقات الوصول + التصريح الأحمر ===== */
.cards-chip { color:#7fd6ff } .cards-chip[hidden] { display:none !important } .cards-chip svg { color:#4dc3ff }
.cards-img { width:1.2em; height:1.2em; object-fit:contain; image-rendering:pixelated; vertical-align:middle }
.shop-wallet { display:flex; gap:8px; flex-wrap:wrap; margin-inline-start:auto }
.it-price.cards { border-color:#4dc3ff66 !important; color:#9fe2ff } .it-price.cards svg { color:#4dc3ff }
.item.by-cards { box-shadow:0 0 0 1px #4dc3ff33 inset } .item.by-cards .it-stage::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 120%, #4dc3ff22, transparent 60%) }
.price.big.cards { color:#9fe2ff } .price.big.cards svg { color:#4dc3ff }
.rw-cur.cards { color:#9fe2ff } .rw-cur.cards svg { color:#4dc3ff } .rw-red { color:#ff4b5c; filter:drop-shadow(0 0 8px #e5273a) }
/* صف التصريح الأحمر تحت كل مستوى */
#scr-pass .tier { padding-bottom:8px }
.red-row { width:100%; margin-top:6px; padding:6px; border-radius:6px; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"tag tag tag" "art n st"; gap:4px 6px; align-items:center; text-align:start; position:relative; cursor:pointer;
background:linear-gradient(180deg,#2a070c,#13060a); border:1px solid #e5273a55; transition:transform .15s, box-shadow .2s }
.red-row[hidden] { display:none }
.red-row:hover { transform:translateY(-1px); box-shadow:0 0 18px #e5273a44 }
.red-row .rr-tag { grid-area:tag; font-size:.58rem; font-weight:900; letter-spacing:.06em; color:#ff6b78 }
.red-row .rr-art { grid-area:art; width:34px; height:34px; display:grid; place-items:center; overflow:hidden } .red-row .rr-art .rw-art { transform:scale(.55); transform-origin:center }
.red-row .rr-n { grid-area:n; font-size:.7rem; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.red-row .rr-lock, .red-row .rr-st { grid-area:st; color:#ff6b78 } .red-row .rr-lock svg, .red-row .rr-st svg { width:15px; height:15px }
.red-row .rr-claim { grid-area:st; background:#e5273a; color:#fff; border:0; border-radius:5px; font:inherit; font-size:.68rem; font-weight:800; padding:4px 8px; cursor:pointer; animation:bpBtn 1.4s ease-in-out infinite }
.red-row.locked { filter:saturate(.6) brightness(.8) } .red-row.locked::after { content:''; position:absolute; inset:0; border-radius:6px; background:repeating-linear-gradient(135deg,#0000 0 6px,#0003 6px 12px); pointer-events:none }
.red-row.got { opacity:.6 } .red-row.ready { box-shadow:0 0 0 1px #ff4b5c, 0 0 16px #e5273a66 }
.red-row.empty { cursor:default; opacity:.35; background:none; border-style:dashed; grid-template-areas:"tag n st" }
.red-banner { display:flex; align-items:center; gap:14px; padding:12px 16px; margin:0 0 12px; border-radius:10px; position:relative; overflow:hidden;
background:linear-gradient(100deg,#3a060d,#180509 55%,#0c0507); border:1px solid #e5273a77 }
.red-banner[hidden] { display:none }
.red-banner::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 4px); pointer-events:none }
.red-banner::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-40%; background:linear-gradient(100deg,transparent,#ff4b5c22,transparent); animation:rbSweep 4s ease-in-out infinite }
@keyframes rbSweep { 0% { left:-40% } 60%,100% { left:120% } }
.rb-seal { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%; background:#e5273a22; border:2px solid #e5273a; color:#ff4b5c; box-shadow:0 0 18px #e5273a66 } .rb-seal svg { width:24px; height:24px }
.rb-t { flex:1; display:flex; flex-direction:column; gap:2px; position:relative; z-index:1 } .rb-t b { font-size:1.05rem; letter-spacing:.02em; color:#ffd5d9 } .rb-t small { opacity:.8 } .rb-t em { color:#ff6b78; font-style:normal; font-weight:800 }
.red-banner .rb-go { position:relative; z-index:1; background:#e5273a; border-color:#e5273a }
.red-banner.on .rb-seal { background:#e5273a; color:#fff }
.red-dlg { text-align:center; max-width:460px; display:flex; flex-direction:column; gap:10px; align-items:center; background:linear-gradient(180deg,#22060b,#0d0507); border:1px solid #e5273a88 }
.rd-seal { width:70px; height:70px; display:grid; place-items:center; border-radius:50%; border:2px solid #e5273a; color:#ff4b5c; box-shadow:0 0 30px #e5273a88; animation:bpFloat 3s ease-in-out infinite } .rd-seal svg { width:34px; height:34px }
.red-dlg h3 { margin:0; font-size:1.4rem; color:#ffd5d9 }
.rd-prev { display:flex; gap:8px; flex-wrap:wrap; justify-content:center } .rd-i { width:64px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px; border-radius:8px; background:#0006; border:1px solid #e5273a44 }
.rd-i > div { width:52px; height:52px; display:grid; place-items:center; overflow:hidden } .rd-i .rw-art { transform:scale(.7) }
.rd-act { display:flex; flex-direction:column; gap:6px; align-items:center; width:100% } .rd-act .btn { width:100%; justify-content:center }
.rd-buy { background:#e5273a !important; border-color:#e5273a !important } .rd-buy svg, .rd-buy img { width:18px; height:18px }
@media (max-width:600px) { .red-banner { flex-wrap:wrap } .red-banner .rb-go { width:100% } }
.red-banner { flex:none } #scr-pass .tier { flex-shrink:0 }
/* ===== جولة 21 (المرحلة 3): متجر وباتل باس بطابع اللعبة — مو صفحة موقع ===== */
/* عناوين أقسام المتجر */
.sh-sec { grid-column:1/-1; display:flex; align-items:center; gap:10px; margin:14px 0 2px; color:#e8e2d2 }
.sh-sec:first-child { margin-top:0 }
.sh-sec b { font-size:1rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap }
.sh-sec i { font-style:normal; font-size:.7rem; padding:1px 8px; border:1px solid currentColor; opacity:.6; clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%) }
.sh-sec .sh-sec-l { flex:1; height:2px; background:linear-gradient(90deg,transparent,var(--accent) 30%,transparent); opacity:.5 }
.sh-sec .sh-sec-l:first-child { flex:0 0 18px; background:var(--accent); opacity:1 }
.sh-sec.s-cards { color:#9fe2ff } .sh-sec.s-cards .sh-sec-l { background:linear-gradient(90deg,transparent,#4dc3ff 30%,transparent) } .sh-sec.s-cards .sh-sec-l:first-child { background:#4dc3ff }
/* تبويبات المتجر: شرائح معدنية بدل أزرار موقع */
.shop-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0 6px } .shop-tabs::-webkit-scrollbar { display:none }
.shop-tabs .sh-tab { border-radius:0; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); padding:8px 18px; background:linear-gradient(180deg,#1a1c25,#101119); border:0; box-shadow:inset 0 -2px 0 #ffffff14; font-weight:800; white-space:nowrap; transition:.15s }
.shop-tabs .sh-tab:hover { background:linear-gradient(180deg,#252836,#14151d) }
.shop-tabs .sh-tab.on { background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000)); box-shadow:inset 0 -2px 0 #0006, 0 0 16px color-mix(in srgb,var(--accent) 50%,transparent) }
/* كروت المنتجات: إطار ندرة متوهج + زوايا مقصوصة + لمعة */
.shop-grid .item, .sf-rail .item { --rc:#7d8597; background:linear-gradient(180deg,#14161f 0%,#0b0c11 70%); border:1px solid color-mix(in srgb,var(--rc) 45%,transparent) !important;
box-shadow:inset 0 0 0 1px #0008, inset 0 -40px 60px -40px color-mix(in srgb,var(--rc) 35%,transparent) }
.shop-grid .item.r-rare, .sf-rail .item.r-rare { --rc:#4d9bff } .shop-grid .item.r-epic, .sf-rail .item.r-epic { --rc:#b06bff } .shop-grid .item.r-legendary, .sf-rail .item.r-legendary { --rc:#ffb03a }
.shop-grid .item::before, .sf-rail .item::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--rc); box-shadow:0 0 12px var(--rc); z-index:2 }
.shop-grid .item:hover, .sf-rail .item:hover { box-shadow:inset 0 0 0 1px #0008, inset 0 -60px 70px -40px color-mix(in srgb,var(--rc) 55%,transparent), 0 10px 26px #000a, 0 0 22px color-mix(in srgb,var(--rc) 30%,transparent) }
.shop-grid .item .it-stage, .sf-rail .item .it-stage { position:relative; overflow:hidden }
.shop-grid .item .it-stage::before, .sf-rail .item .it-stage::before { content:''; position:absolute; inset:-50% -50%; background:linear-gradient(115deg,transparent 45%,#ffffff12 50%,transparent 55%); transform:translateX(-60%); transition:transform .6s; pointer-events:none; z-index:3 }
.shop-grid .item:hover .it-stage::before, .sf-rail .item:hover .it-stage::before { transform:translateX(60%) }
.shop-grid .item.owned { filter:saturate(.55) } .shop-grid .item.by-cards { --rc:#4dc3ff }
.shop-grid .item .si-name { font-size:.95rem; line-height:1.3 }
.shop-grid .item .it-price { clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); border-radius:0 !important }
/* شريط مستويات الباتل باس: بلا شريط تمرير المتصفح — مسار بكسل مع حواف تتلاشى */
#bpStrip { scrollbar-width:none; -ms-overflow-style:none; mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); padding:4px 18px; scroll-behavior:smooth }
#bpStrip::-webkit-scrollbar { display:none; height:0 }
#bpStrip .bs { border-radius:0; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); min-width:34px; font-variant-numeric:tabular-nums; transition:transform .15s, background .15s }
#bpStrip .bs:hover { transform:translateY(-2px) } #bpStrip .bs.vis { box-shadow:inset 0 -2px 0 var(--accent) }
#bpStrip .bs.cur { background:var(--accent); color:#fff; box-shadow:0 0 14px var(--accent) }
#scr-pass .pass-track-wrap { mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent) }
#scr-pass .car-btn { border-radius:0; clip-path:polygon(0 0,100% 12%,100% 88%,0 100%); background:linear-gradient(180deg,#1a1c25,#0d0e14) } #scr-pass .car-btn:first-child { clip-path:polygon(0 12%,100% 0,100% 100%,0 88%) }
#scr-pass .car-btn:hover { background:linear-gradient(180deg,var(--accent),#2a0508) }
#scr-pass .tier .n { clip-path:polygon(0 0,100% 0,100% 100%,8px 100%) }
#scr-pass .xpbar.bp { border-radius:0; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%) }
/* ===== جولة 21.2: أنميشن فتح التصريح الأحمر ===== */
.ru-ov { position:fixed; inset:0; z-index:9999; background:#050204; display:grid; place-items:center; overflow:hidden; animation:ruIn .3s ease-out }
.ru-ov.out { animation:ruOut .4s ease-in forwards }
@keyframes ruIn { from { opacity:0 } } @keyframes ruOut { to { opacity:0; transform:scale(1.05) } }
.ru-fx { position:absolute; inset:0; pointer-events:none; z-index:3 }
.ru-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg,#ff3b4e0d 0 2px,transparent 2px 4px); animation:ruScan 1.2s steps(6) infinite; pointer-events:none }
@keyframes ruScan { to { background-position:0 24px } }
.ru-door { position:absolute; top:0; bottom:0; width:50.5%; z-index:2; background:linear-gradient(90deg,#1a0508,#2a080d 70%,#3a0a10); box-shadow:inset 0 0 80px #000;
background-image:repeating-linear-gradient(0deg,#0000 0 38px,#0006 38px 40px), linear-gradient(90deg,#1a0508,#2a080d 70%,#3a0a10) }
.ru-door::after { content:''; position:absolute; top:50%; width:46px; height:46px; margin-top:-23px; border-radius:50%; border:3px solid #ff3b4e; box-shadow:0 0 18px #ff3b4e }
.ru-door.l { left:0; animation:ruDoorL 1.1s cubic-bezier(.7,0,.3,1) .9s forwards } .ru-door.l::after { right:-23px }
.ru-door.r { right:0; animation:ruDoorR 1.1s cubic-bezier(.7,0,.3,1) .9s forwards } .ru-door.r::after { left:-23px }
@keyframes ruDoorL { to { transform:translateX(-102%) } } @keyframes ruDoorR { to { transform:translateX(102%) } }
.ru-alarm { position:absolute; top:12%; z-index:4; font-weight:900; letter-spacing:.2em; color:#ff3b4e; text-shadow:0 0 14px #ff3b4e; animation:ruBlink .35s steps(2) 5, ruFade .4s 1.9s forwards }
@keyframes ruBlink { 50% { opacity:.15 } } @keyframes ruFade { to { opacity:0 } }
.ru-core { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; opacity:0; animation:ruCore .6s 1.4s ease-out forwards }
@keyframes ruCore { from { opacity:0; transform:scale(.6) } to { opacity:1; transform:none } }
.ru-ring { position:absolute; top:-30px; width:220px; height:220px; border-radius:50%; border:2px dashed #ff3b4e88; animation:ruSpin 9s linear infinite }
.ru-ring.b { width:270px; height:270px; top:-55px; border:1px solid #ffd16644; animation-direction:reverse; animation-duration:14s }
@keyframes ruSpin { to { transform:rotate(360deg) } }
.ru-seal { width:160px; height:160px; border-radius:50%; display:grid; place-items:center; color:#fff; background:radial-gradient(circle,#ff3b4e,#8a0a16 70%); box-shadow:0 0 60px #ff3b4e, 0 0 140px #e5273a88, inset 0 0 30px #0006;
animation:ruSeal 2.4s 1.4s ease-in-out infinite } .ru-seal svg { width:78px; height:78px; filter:drop-shadow(0 0 10px #fff8) }
@keyframes ruSeal { 50% { box-shadow:0 0 90px #ff3b4e, 0 0 200px #e5273aaa, inset 0 0 30px #0006 } }
.ru-txt small { color:#ffd166; letter-spacing:.3em; font-weight:800 } .ru-txt h2 { margin:4px 0; font-size:clamp(2rem,6vw,3.4rem); color:#ffe1e4; text-shadow:0 0 24px #ff3b4e, 3px 0 #ff3b4e55, -3px 0 #4dc3ff33 } .ru-txt p { margin:0; opacity:.85 }
.ru-stamp { position:absolute; top:40px; inset-inline-end:-60px; padding:6px 18px; border:4px solid #ffd166; color:#ffd166; font-weight:900; font-size:1.4rem; letter-spacing:.2em; transform:rotate(-14deg) scale(3); opacity:0; animation:ruStamp .35s 2.2s cubic-bezier(.3,1.6,.6,1) forwards }
@keyframes ruStamp { to { transform:rotate(-14deg) scale(1); opacity:.95 } }
.ru-go { opacity:0; animation:ruFadeIn .4s 2.5s forwards; background:#e5273a !important; border-color:#e5273a !important; min-width:160px } @keyframes ruFadeIn { to { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .ru-door { display:none } .ru-core { animation:none; opacity:1 } }
/* ===== جولة 21.2: شارات العملات — معدن ووهج وعدّاد ===== */
.scrap-chip { --cc:#e9c76a; position:relative; display:inline-flex; align-items:center; gap:8px; padding:5px 14px 5px 6px; border:1px solid color-mix(in srgb,var(--cc) 40%,transparent) !important; border-radius:0 !important;
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); background:linear-gradient(180deg,#1a1b22,#0c0d12) !important;
box-shadow:inset 0 1px 0 #ffffff12, inset 0 -14px 20px -14px color-mix(in srgb,var(--cc) 40%,transparent); overflow:visible; cursor:default }
.scrap-chip.cards-chip { --cc:#4dc3ff }
.scrap-chip > svg, .scrap-chip > img { width:26px !important; height:26px !important; padding:4px; box-sizing:border-box; color:var(--cc) !important; background:color-mix(in srgb,var(--cc) 16%,#000); border:1px solid color-mix(in srgb,var(--cc) 45%,transparent);
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); filter:drop-shadow(0 0 4px color-mix(in srgb,var(--cc) 60%,transparent)) }
.scrap-chip b { font-variant-numeric:tabular-nums; font-weight:900; letter-spacing:.02em; color:#fff; text-shadow:0 0 10px color-mix(in srgb,var(--cc) 60%,transparent); min-width:2ch }
.scrap-chip span { font-size:.7rem; opacity:.65 }
.scrap-chip::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 40%,#ffffff22 50%,transparent 60%); background-size:250% 100%; background-position:150% 0; pointer-events:none }
.scrap-chip:hover::after, .scrap-chip.bump::after { animation:curShine .9s ease-out }
@keyframes curShine { to { background-position:-100% 0 } }
.scrap-chip.bump { animation:curBump .5s ease-out } .scrap-chip.drop { animation:curDrop .45s ease-out }
@keyframes curBump { 30% { transform:scale(1.12); box-shadow:0 0 22px var(--cc) } } @keyframes curDrop { 30% { transform:translateX(-3px) } 60% { transform:translateX(3px) } }
.cur-float { position:absolute; top:-4px; inset-inline-end:8px; font-style:normal; font-weight:900; font-size:.85rem; pointer-events:none; animation:curFloat 1.2s ease-out forwards; z-index:5; text-shadow:0 0 8px #000 }
.cur-float.up { color:#7dffb0 } .cur-float.dn { color:#ff8a8a }
@keyframes curFloat { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-28px) } }
.tb-scrap, .tb-cards { margin-inline-start:4px }
/* =====================================================================
جولة 42: التخصيص — شاشة اختيار شخصيات بروح اللعبة
حواف مقصوصة بدل الدوائر، لون الجهة (--role) يقود كل شي، والحركة كلها
transform/opacity بس (ما فيه blur متحرك ولا backdrop-filter) عشان الدخول ينعم.
===================================================================== */
/* ---- الخلفية: طبقة واحدة ثابتة على مستوى الصفحة، تظهر بتلاشي ناعم ---- */
.czbg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0; visibility:hidden;
transition:opacity .45s ease, visibility 0s linear .45s; --role:#3f9d7a;
background:radial-gradient(70% 60% at 22% 80%, color-mix(in srgb, var(--role) 30%, transparent), transparent 70%),
radial-gradient(60% 50% at 85% 15%, color-mix(in srgb, var(--role) 16%, transparent), transparent 70%), #05060a }
body.cz-on .czbg { opacity:1; visibility:visible; transition:opacity .45s ease }
body.cz-on .menu-bg, body.cz-on #bgfx { opacity:0; transition:opacity .45s }
.czbg i { position:absolute; display:block; will-change:transform }
.czbg-art { top:0; bottom:0; inset-inline-end:-4%; width:62%; background-size:cover; background-position:center 20%; opacity:0;
transition:opacity .7s ease; filter:grayscale(.35) contrast(1.08) brightness(.9);
-webkit-mask:linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(#000 60%, transparent); mask:linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(#000 60%, transparent);
-webkit-mask-composite:source-in; mask-composite:intersect; animation:czbgZoom 24s ease-in-out infinite alternate }
[dir=rtl] .czbg-art { -webkit-mask:linear-gradient(to right, #000 35%, transparent 95%), linear-gradient(#000 60%, transparent); mask:linear-gradient(to right, #000 35%, transparent 95%), linear-gradient(#000 60%, transparent); -webkit-mask-composite:source-in; mask-composite:intersect }
.czbg-art.on { opacity:.28 }
.czbg-fog { inset:-20% -60%; opacity:.55; background:radial-gradient(28% 18% at 20% 70%, #ffffff10, transparent 70%), radial-gradient(24% 16% at 55% 55%, #ffffff0c, transparent 70%), radial-gradient(30% 20% at 85% 80%, #ffffff0e, transparent 70%);
animation:czbgFog 46s linear infinite }
.czbg-fog.f2 { animation-duration:70s; animation-direction:reverse; opacity:.35; top:10% }
.czbg-sparks { left:0; right:0; top:0; height:200%; opacity:.7;
background-image:radial-gradient(1.6px 1.6px at 8% 12%, #ffffffaa, transparent), radial-gradient(1px 1px at 22% 38%, #ffffff88, transparent), radial-gradient(1.4px 1.4px at 37% 70%, #ffffff99, transparent),
radial-gradient(1px 1px at 51% 22%, #ffffff77, transparent), radial-gradient(1.8px 1.8px at 66% 55%, #ffffff99, transparent), radial-gradient(1px 1px at 79% 84%, #ffffff88, transparent), radial-gradient(1.4px 1.4px at 92% 31%, #ffffff77, transparent);
background-size:100% 50%; animation:czbgRise 26s linear infinite }
.czbg-vig { inset:0; background:repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 3px), radial-gradient(120% 95% at 50% 50%, transparent 45%, #000d 100%) }
.czbg.role-awbad { background:radial-gradient(70% 60% at 22% 80%, color-mix(in srgb, var(--role) 34%, transparent), transparent 70%),
radial-gradient(60% 50% at 85% 15%, color-mix(in srgb, var(--role) 18%, transparent), transparent 70%), #090304 }
.czbg.role-awbad .czbg-sparks { background-image:radial-gradient(2px 2px at 8% 12%, #ff6a3d, transparent), radial-gradient(1.4px 1.4px at 22% 38%, #ff9a50, transparent), radial-gradient(1.8px 1.8px at 37% 70%, #ff4630, transparent),
radial-gradient(1px 1px at 51% 22%, #ffc080, transparent), radial-gradient(2px 2px at 66% 55%, #ff6a3d, transparent), radial-gradient(1.4px 1.4px at 79% 84%, #ff8a40, transparent), radial-gradient(1px 1px at 92% 31%, #ffb070, transparent); animation-duration:16s }
.czbg.role-awbad .czbg-fog { background:radial-gradient(28% 18% at 20% 70%, #ff30200f, transparent 70%), radial-gradient(24% 16% at 55% 55%, #ff201a0c, transparent 70%), radial-gradient(30% 20% at 85% 80%, #ff40280e, transparent 70%) }
.czbg.role-awbad::after { content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 30% 75%, color-mix(in srgb, var(--role) 22%, transparent), transparent 70%); animation:czbgBeat 2.6s ease-in-out infinite }
@keyframes czbgZoom { from { transform:scale(1) translateY(0) } to { transform:scale(1.07) translateY(-1.5%) } }
@keyframes czbgFog { from { transform:translateX(0) } to { transform:translateX(30%) } }
@keyframes czbgRise { from { transform:translateY(0) } to { transform:translateY(-50%) } }
@keyframes czbgBeat { 0%,100% { opacity:.35 } 10% { opacity:1 } 22% { opacity:.5 } 32% { opacity:.85 } }
/* ---- اللوحة: دخول ناعم ---- */
#scr-custom { z-index:1 }
#scr-custom .page.cz { position:relative; background:linear-gradient(180deg, #0b0d13ee, #07080cf2); border:1px solid color-mix(in srgb, var(--role,#3f9d7a) 30%, #ffffff12);
box-shadow:0 30px 90px -40px color-mix(in srgb, var(--role,#3f9d7a) 60%, transparent), inset 0 1px 0 #ffffff0d }
#scr-custom .page.cz::before { content:''; position:absolute; inset-inline:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--role,#3f9d7a), transparent); opacity:.8 }
#scr-custom.active .page.cz { animation:czIn .42s cubic-bezier(.2,.9,.3,1) both }
@keyframes czIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
/* ---- مبدّل الجهة: نصلين ---- */
#scr-custom .cz-role { display:flex; gap:6px; padding:0; background:none; border:0 }
#scr-custom .cz-role button { --c:#ffffff; display:inline-flex; align-items:center; gap:8px; padding:10px 24px 10px 26px; border:0; cursor:pointer; font:inherit; font-size:1rem; font-weight:900; letter-spacing:.3px;
color:#ffffff8a; background:#ffffff0a; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); transition:color .2s, background .25s, transform .15s }
#scr-custom .cz-role button svg { width:18px; height:18px; color:inherit }
#scr-custom .cz-role button:hover { color:#fff; background:#ffffff16 }
#scr-custom .cz-role button:active { transform:scale(.97) }
#scr-custom .cz-role button.on { color:#fff; background:linear-gradient(100deg, color-mix(in srgb, var(--role) 85%, #fff2), color-mix(in srgb, var(--role) 70%, #000)); text-shadow:0 1px 2px #0009 }
#scr-custom .cz-role button.on svg { color:#fff }
#scr-custom .cz-tabs button.on { text-shadow:0 0 14px color-mix(in srgb, var(--role) 70%, transparent) }
/* ---- بطاقة الشخصية ---- */
#scr-custom .cs-card { position:relative; display:grid; grid-template-columns:210px minmax(0,1fr); gap:20px; padding:16px; border-radius:0;
background:linear-gradient(135deg, color-mix(in srgb, var(--role) 14%, #0b0d12) 0%, #090a0f 55%); border:1px solid color-mix(in srgb, var(--role) 28%, #ffffff12);
clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); animation:csIn .3s ease-out }
#scr-custom .cs-card::after { content:''; position:absolute; top:0; inset-inline-end:0; width:44%; height:3px; background:linear-gradient(90deg, transparent, var(--role)) }
#scr-custom .cs-show { position:relative; height:280px; display:grid; place-items:end center; padding-bottom:26px; overflow:hidden;
background:radial-gradient(70% 45% at 50% 72%, color-mix(in srgb, var(--role) 30%, transparent), transparent 75%), linear-gradient(180deg, #0a0c11, #05060a);
border:1px solid color-mix(in srgb, var(--role) 25%, #ffffff10); clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px) }
#scr-custom .cs-show canvas { position:relative; z-index:2; width:144px; height:216px; image-rendering:pixelated; animation:csFloat 3.4s ease-in-out infinite;
filter:drop-shadow(0 8px 10px #000) }
#scr-custom .cs-spot { position:absolute; z-index:1; top:-6%; bottom:10%; left:22%; right:22%; background:linear-gradient(180deg, color-mix(in srgb, var(--role) 40%, transparent), transparent 85%);
clip-path:polygon(38% 0,62% 0,100% 100%,0 100%); opacity:.55; animation:csSpot 4.5s ease-in-out infinite }
#scr-custom .cs-plat { position:absolute; z-index:1; left:18%; right:18%; bottom:20px; height:14px; border-radius:50%;
background:radial-gradient(closest-side, color-mix(in srgb, var(--role) 75%, #fff4), transparent); animation:csPlat 3.4s ease-in-out infinite }
#scr-custom .cs-tier { position:absolute; z-index:3; top:10px; inset-inline-start:10px; font-size:.7rem; font-weight:900; padding:3px 12px 3px 14px; color:#fff;
background:color-mix(in srgb, var(--role) 70%, #000); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); border-radius:0 }
#scr-custom .cs-card.is-lk .cs-tier { background:#2a2d36; color:#ffffffc0 }
#scr-custom .cs-veil { z-index:3; background:#0009 }
#scr-custom .cs-card.is-lk canvas { filter:grayscale(.85) brightness(.55) drop-shadow(0 8px 10px #000) }
#scr-custom .cs-info { display:flex; flex-direction:column; gap:10px; min-width:0 }
#scr-custom .cs-head { display:flex; flex-direction:column; gap:2px }
#scr-custom .cs-ttl { display:inline-flex; align-items:center; gap:8px; color:var(--role); filter:brightness(1.4); font-size:.78rem; font-weight:900; letter-spacing:1px }
#scr-custom .cs-ttl::before { content:''; width:18px; height:2px; background:currentColor }
#scr-custom .cs-info h3 { margin:0; font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight:900; line-height:1.1; letter-spacing:.3px }
#scr-custom .cs-story { margin:0; font-size:.9rem; line-height:1.75; color:#d8d3cbcc; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
#scr-custom .cs-traits { display:flex; flex-wrap:wrap; gap:6px }
#scr-custom .cs-traits span { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; padding:4px 12px 4px 10px; border:0; border-radius:0;
background:#ffffff0c; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%) }
#scr-custom .cs-traits svg { width:13px; height:13px; color:var(--role); filter:brightness(1.4) }
#scr-custom .cs-ability { display:flex; align-items:center; gap:10px; padding:9px 12px; background:linear-gradient(90deg, color-mix(in srgb, var(--role) 22%, transparent), transparent);
border-inline-start:3px solid var(--role) }
#scr-custom .cs-ability svg { width:20px; height:20px; color:var(--role); filter:brightness(1.4); flex:none }
#scr-custom .cs-ability span { display:flex; flex-direction:column } #scr-custom .cs-ability small { font-size:.66rem; opacity:.65; letter-spacing:1px }
#scr-custom .cs-acts { display:flex; gap:8px; margin-top:auto; flex-wrap:wrap }
#scr-custom .cs-acts .cs-go { flex:1 1 200px; margin:0 }
#scr-custom .cs-acts .cs-lore { flex:0 0 auto; margin:0; align-self:stretch }
#scr-custom .cs-note { margin:0; font-size:.74rem; opacity:.55 }
@keyframes csIn { from { opacity:0; transform:translateX(-10px) } to { opacity:1; transform:none } }
[dir=rtl] #scr-custom .cs-card { animation-name:csInR } @keyframes csInR { from { opacity:0; transform:translateX(10px) } to { opacity:1; transform:none } }
@keyframes csFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-5px) } }
@keyframes csPlat { 0%,100% { opacity:.9; transform:scaleX(1) } 50% { opacity:.55; transform:scaleX(.86) } }
@keyframes csSpot { 0%,100% { opacity:.4 } 50% { opacity:.7 } }
/* ---- عدّادات الأوباد (تنستخدم في البطاقة والملف) ---- */
.cs-meters, .lore-stats { display:grid; gap:7px }
.sm-row { display:grid; grid-template-columns:104px 1fr 50px; align-items:center; gap:10px; font-size:.78rem; --c:var(--role,#b5342b) }
.sm-l { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#ffffffc8 } .sm-l svg { width:13px; height:13px; color:var(--c); filter:brightness(1.4) }
.sm-cells { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; direction:ltr }
.sm-cells i { height:9px; background:#ffffff12; transform:skewX(-18deg) }
.sm-cells i.on { background:var(--c); box-shadow:0 0 8px -2px var(--c); animation:smPop .35s ease-out both; animation-delay:var(--d) }
.sm-row b { font-size:.74rem; text-align:end; color:#ffffff80 }
.sm-row.up b { color:#7fe0a6 } .sm-row.dn b { color:#ff8f7f }
@keyframes smPop { from { opacity:0; transform:skewX(-18deg) scaleY(.2) } to { opacity:1; transform:skewX(-18deg) } }
/* ---- الشبكة ---- */
#scr-custom .cs-grid .cs-tile { border-radius:0; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); background:#0c0e14; border-color:#ffffff14 }
#scr-custom .cs-grid .cs-tile.sel { background:color-mix(in srgb, var(--role) 18%, #0c0e14); border-color:var(--role); box-shadow:inset 0 0 0 1px var(--role), inset 0 -40px 40px -30px color-mix(in srgb, var(--role) 50%, transparent) }
#scr-custom .cs-grid .cs-tile.locked { opacity:.55; filter:grayscale(.7) }
#scr-custom .cs-grid .cs-tile.locked:hover { opacity:.8 }
/* ---- دورك في المباراة الجاية ---- */
#scr-custom .cz-pref { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; background:#ffffff06; border:1px solid #ffffff12; opacity:1 }
#scr-custom .cz-pref-l { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.9rem }
#scr-custom .cz-pref-l svg { width:16px; height:16px; color:var(--role) }
#scr-custom .cz-pref-opts { display:flex; gap:4px }
#scr-custom .cz-pref-opts button { display:inline-flex; align-items:center; gap:7px; padding:8px 18px 8px 20px; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:.88rem;
color:#ffffff90; background:#ffffff0a; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); transition:background .2s, color .2s }
#scr-custom .cz-pref-opts button svg { width:16px; height:16px }
#scr-custom .cz-pref-opts button:hover { color:#fff; background:#ffffff18 }
#scr-custom .cz-pref-opts button.on { color:#fff; background:#ffffff26 }
#scr-custom .cz-pref-opts button[data-pref="survivor"].on { background:linear-gradient(100deg, #3f9d7a, #24604a) }
#scr-custom .cz-pref-opts button[data-pref="awbad"].on { background:linear-gradient(100deg, #c23a2e, #6e1a14) }
/* ---- الملف الكامل (القصة والقدرة) ---- */
.lore-bgart { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 20%; opacity:0; pointer-events:none; transition:opacity .5s;
-webkit-mask:linear-gradient(90deg, transparent, #000 70%); mask:linear-gradient(90deg, transparent, #000 70%) }
[dir=rtl] .lore-bgart { -webkit-mask:linear-gradient(270deg, transparent, #000 70%); mask:linear-gradient(270deg, transparent, #000 70%) }
.lore-bgart.on { opacity:.12 }
.lore-box > .lore-side, .lore-box > .lore-main { position:relative; z-index:1 }
.lore-file { display:inline-block; margin-inline-start:8px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.68rem; letter-spacing:1px; color:#ffffff66; direction:ltr }
.lore-dlg .lore-box { border-radius:0; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px) }
.lore-dlg .lore-frame { border-radius:0; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
background:radial-gradient(70% 45% at 50% 75%, color-mix(in srgb, var(--role,#b7101a) 30%, transparent), transparent 75%), linear-gradient(180deg,#0c0e15,#05060a) }
.lore-dlg .lore-frame::after { border-radius:0 }
.lore-dlg .lore-frame::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--role,#b7101a) 25%, transparent) 50%, transparent); height:30%; animation:loreScan 3.2s linear infinite; pointer-events:none }
.lore-dlg.in .lore-sec, .lore-dlg.in .lore-head { animation:loreUp .4s cubic-bezier(.2,.9,.3,1) both }
.lore-dlg.in .lore-sec:nth-of-type(1) { animation-delay:.05s } .lore-dlg.in .lore-sec:nth-of-type(2) { animation-delay:.1s } .lore-dlg.in .lore-sec:nth-of-type(3) { animation-delay:.15s } .lore-dlg.in .lore-sec:nth-of-type(4) { animation-delay:.2s }
.lore-dlg .lore-ability, .lore-dlg .la-ico, .lore-dlg .lore-x, .lore-dlg .lore-kind { border-radius:0 }
.lore-dlg .lore-ability { border:0; border-inline-start:3px solid var(--role,#b7101a) }
@keyframes loreScan { from { transform:translateY(-100%) } to { transform:translateY(340%) } }
@keyframes loreUp { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (max-width:700px) {
#scr-custom .cz-role { width:100% } #scr-custom .cz-role button { flex:1 1 0; justify-content:center; padding:10px 8px }
#scr-custom .cs-card { grid-template-columns:1fr; gap:14px; padding:12px }
#scr-custom .cs-show { height:236px } #scr-custom .cs-show canvas { width:120px; height:180px }
#scr-custom .cs-info { align-items:stretch; text-align:start }
#scr-custom .cz-pref { flex-direction:column; align-items:stretch } #scr-custom .cz-pref-opts button { flex:1 1 0; justify-content:center; padding:9px 6px }
.sm-row { grid-template-columns:92px 1fr 44px }
.czbg-art { width:100%; inset-inline-end:0 } .czbg-art.on { opacity:.16 }
}
@media (prefers-reduced-motion:reduce) { .czbg i, .czbg::after, #scr-custom .cs-show canvas, #scr-custom .cs-plat, #scr-custom .cs-spot { animation:none !important } }
.lore-dlg .lore-tier { bottom:6px; border-radius:0; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); padding:2px 12px }
.lore-dlg .lore-perks .lp { border-radius:0; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) }
/* جولة 43: مشهد التخصيص البكسلي + صورة الملف الكامل وخلفيته */
.czbg-cv { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges }
.czbg-vig { position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 95% at 50% 50%, transparent 50%, #000c 100%) }
#scr-custom .page.cz { background:linear-gradient(180deg, #0a0c11e0, #07080ce8) }
.lore-dlg.has-img .lore-frame { width:168px; height:210px; padding:0; overflow:hidden }
.lore-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block }
.lore-dlg.has-img .lore-frame::before { z-index:1 }
.lore-bgart.full { opacity:0 } .lore-bgart.full.on { opacity:.38 }
.lore-bgart.full { -webkit-mask:linear-gradient(180deg, #000 30%, #0008 70%, transparent); mask:linear-gradient(180deg, #000 30%, #0008 70%, transparent) }
@media (max-width:700px) { .lore-dlg.has-img .lore-frame { width:130px; height:162px } }
/* المشهد يبان ورا اللوحة: نخففها والبطاقات لها خلفياتها */
#scr-custom .page.cz { background:linear-gradient(180deg, #07080cb8, #07080cc4) }
#scr-custom .cs-grid .cs-tile, #scr-custom .cs-search, #scr-custom .cz-pref { background-color:#0a0c12d9 }
/* جولة 52أ.10: داخل «المخطّط صفر» خلفية القائمة مغطّاة بالكامل بخلفيته — نخفيها عشان المتصفح ما يركّبها كل فريم (لاق) */
body.mk-on #bgfx, body.mk-on #pfx, body.mk-on #grain, body.mk-on .menu-bg { visibility:hidden }
/* =====================================================================
جولة 64: العملة الموحّدة + شراء الشخصيات (خردة أو بطاقات)
===================================================================== */
.fz-cur { width:1.1em; height:1.1em; flex:none; vertical-align:-.16em; fill:currentColor }
.fz-cur.is-scrap { color:#ffd166 } .fz-cur.is-cards { color:#4dc3ff }
.fzd-cost .fzd-ci { width:20px; height:20px; filter:drop-shadow(0 0 6px currentColor) }
.fzd-cost.cards { border-color:#4dc3ff55 } .fzd-cost.cards b { color:#9fe2ff; text-shadow:0 0 12px #4dc3ff66 }
#czTabs [hidden] { display:none !important }
/* أزرار شراء الشخصية: سعرين جنب بعض (خردة = صبر، بطاقات = اختصار) */
.cbuy { display:flex; gap:8px; flex:1 1 220px; flex-wrap:wrap }
.cbuy .btn { flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:900 }
.cbuy .btn .fz-cur { width:18px; height:18px }
.cbuy .btn b { font-size:1.05rem; font-variant-numeric:tabular-nums } .cbuy .btn small { font-size:.72rem; opacity:.75; font-weight:700 }
.cbuy .cb-scrap { border-color:#ffd16677; background:linear-gradient(180deg,#3a2e14,#1a1408); color:#ffe7b0 }
.cbuy .cb-scrap.ok:hover { background:#ffd166; color:#111 } .cbuy .cb-scrap.ok:hover .fz-cur { color:#111 }
.cbuy .cb-cards { border-color:#4dc3ff77; background:linear-gradient(180deg,#123247,#081622); color:#bfe9ff }
.cbuy .cb-cards.ok:hover { background:#4dc3ff; color:#04121c } .cbuy .cb-cards.ok:hover .fz-cur { color:#04121c }
.cbuy .btn:not(.ok) { opacity:.6 } .cbuy .btn:not(.ok) small { color:#ff9a9a; opacity:1 }
#scr-custom .cs-acts .cbuy { flex:1 1 260px }
/* بكرت المتجر: صغيرة */
.cbuy.it-cb, .it-foot .cbuy { margin-top:4px; gap:6px; flex:none; width:100% }
.it-foot .cbuy .btn { padding:7px 6px; border-radius:9px; font-size:.82rem; flex-direction:row }
.it-foot .cbuy .btn small { display:none }
.si-foot .cbuy { flex:1 1 auto }
.shop-note { line-height:1.7 }
@media (max-height:520px) and (orientation:landscape) { .cbuy .btn small { display:none } .cbuy .btn { padding:8px 6px } }
#scr-custom .cs-acts .cbuy { flex-wrap:nowrap } #scr-custom .cs-acts .cbuy .cs-go { flex:1 1 0; min-width:0; margin:0 }
/* جولة 72: المطاردة متوقفة (np_cfg.chase) — تفضيل الدور يختفي، والبيركات «تذكار» */
.cz-souv { display: none; }
body.chase-off .cz-souv { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #ffd16614; border: 1px solid #ffd16644; color: #f1ece4; font-size: .88rem; line-height: 1.6; }
body.chase-off .cz-souv svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #ffd166; stroke-width: 2; }
body.chase-off .cz-pref { display: none !important; }
/* جولة 72: «شكر وتقدير» بصفحة «عن اللعبة» */
.thx { margin-top: 22px; padding-top: 16px; border-top: 1px solid #ffffff14; }
.thx-h { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 6px; color: #f1ece4; }
.thx-h svg { width: 18px; height: 18px; fill: none; stroke: #ff5a64; stroke-width: 2; }
.thx-intro { opacity: .8; margin: 0 0 12px; }
.thx-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.thx-p { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff12; min-width: 0; }
.thx-p b { font-size: 1rem; color: #f1ece4; overflow-wrap: anywhere; }
.thx-p span { font-size: .85rem; opacity: .75; }
.thx-p small a { font-size: .8rem; color: #ffd166; }
.thx-lh { font-size: .95rem; margin: 6px 0 6px; opacity: .85; }
.thx-lic { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .82rem; opacity: .85; text-align: left; }
.thx-lic li { overflow-wrap: anywhere; }
.thx-lic a { color: #ffd166; }
.lore-art { margin: 4px 0 0; font-size: .85rem; opacity: .7; }
/* جولة 74: ترتيب اللعبة لما المطاردة مطفية — كل قاعدة تتبع مفتاحها بالمحرك («طور المطاردة ← ترتيب اللعبة») */
body.tidy-cz #czRole [data-crole="awbad"], body.tidy-cz #czTabs [data-cz="perks"], body.tidy-cz .cz-body[data-czb="perks"] { display: none !important; }
body.tidy-cz #czRole { display: none !important; }
body.tidy-lore #loreStatsBox, body.tidy-lore #loreAbilityBox, body.tidy-lore #lorePerksBox, body.tidy-lore #scr-custom .cs-traits { display: none !important; }
body.tidy-set .dark-pv [data-dpv="a"] { display: none !important; }
/* ===== جولة 77: ما فيه شريط تمرير أبيض أبدًا — التمرير بالعجلة واللمس والسحب (ui-scroll.js) ===== */
html, body, html body * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, html body *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }
/* الشرائط الأفقية: حافة باهتة بالجهة اللي فيها باقي */
.rwx-track, [data-hscroll] { --fz-fs: 0px; --fz-fe: 0px; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fz-fs), #000 calc(100% - var(--fz-fe)), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 var(--fz-fs), #000 calc(100% - var(--fz-fe)), transparent 100%); }
.rwx-track.fz-more-s, [data-hscroll].fz-more-s { --fz-fs: 34px; } .rwx-track.fz-more-e, [data-hscroll].fz-more-e { --fz-fe: 34px; }
.fz-dragging { cursor: grabbing !important; scroll-behavior: auto !important; user-select: none; }
.fz-dragging * { pointer-events: none; }
/* ===== جولة 84: أزرار الزاوية (اليومية · الرسائل · البلاغات · التحديث) — أيقونة + اسم تحتها، وعلامات موحّدة ===== */
.tb-tools { gap: 6px; flex-wrap: nowrap; }
.tb-tools .ic-btn { width: auto; min-width: 60px; height: 52px; padding: 6px 8px 5px; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 2px;
background: linear-gradient(#11131a, #0b0c11); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s, background .15s, transform .1s; }
.tb-tools .ic-btn:hover, .tb-tools .ic-btn:focus-visible { border-color: var(--accent); background: linear-gradient(#171a23, #0e1016); outline: none; }
.tb-tools .ic-btn:active { transform: translateY(1px); }
.tb-tools .ic-btn svg { width: 19px; height: 19px; }
.tb-tools .ic-l { font-size: .68rem; line-height: 1; color: var(--muted, #9aa3b5); white-space: nowrap; font-weight: 600; }
.tb-tools .ic-btn:hover .ic-l { color: var(--text); }
.tb-tools .ic-btn[hidden] { display: none; }
/* العلامات: نقطة حمرا (فيه جديد) فوق يمين · العدد فوق يسار · الهدية الجاهزة نقطة صفرا تحت */
.tb-tools .ic-btn .dot { top: 5px; inset-inline-end: 9px; width: 9px; height: 9px; box-shadow: 0 0 0 2px #0b0c11, 0 0 8px var(--accent); }
.tb-tools #btnInbox .ib-badge { top: 3px; inset-inline-start: 4px; }
.tb-tools #btnInbox.has-rw::after { bottom: auto; top: 5px; inset-inline-end: 9px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px #0b0c11; }
@media (max-width: 1100px) { .tb-tools .ic-btn { min-width: 52px; padding-inline: 6px; } }
/* جولة 85: زر الراديو — الضغطة المطوّلة (تحطه بتايمر) تعبّي حلقة */
#btnPebble.hold::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid #ffd166; clip-path: inset(0 100% 0 0); animation: radHold .48s linear forwards; pointer-events: none; }
@keyframes radHold { to { clip-path: inset(0 0 0 0); } }