/* ════════════════════════════════════════════════════════════ حبكة v5 — الترقية الكبيرة ⚡ الأداء · 👁️ العلامات · 📋 القوائم · 🏅 الشارات 🏆 الجوائز والدوري · 📅 اليوميات · 📊 قائمة المئة ════════════════════════════════════════════════════════════ */ /* ============================================================ ⚡ وضع الخفّة — data-perf="lite" على ------------------------------------------------------------ الموقع فيه ٢٥ ضبابية (backdrop-filter) وعشرات الحركات اللانهائية. على الجهاز القوي حلوة، وعلى غيره تخلّي كل تمرير وكل تنقّل يتقطّع. هنا نطفيها دفعة وحدة. ============================================================ */ :root[data-perf="lite"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-perf="lite"] #ambient { display: none !important; } :root[data-perf="lite"] .site-header, :root[data-perf="lite"] .bottom-nav, :root[data-perf="lite"] .modal, :root[data-perf="lite"] .modal-bg { background: var(--bg-2); } :root[data-perf="lite"] .title-card, :root[data-perf="lite"] .pk-card { box-shadow: none; } :root[data-perf="lite"] .title-card:hover, :root[data-perf="lite"] .pk-card:hover { transform: translateY(-3px); } /* الحركات مطفيّة */ :root[data-motion="off"] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .08s !important; } :root[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; } /* احترام إعداد النظام */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 📐 حجم البطاقة — يتحكّم فيه المستخدم من الإعدادات ============================================================ */ :root[data-card="sm"] .grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } :root[data-card="lg"] .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .grid-foot { display: flex; justify-content: center; margin-top: 20px; } .btn-more { padding: 11px 30px; border-radius: var(--r-full); border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--gold); font-weight: 700; cursor: pointer; } .btn-more:hover { background: var(--bg-3); border-color: var(--gold); } /* هيكل عظمي للصفوف بدل الفراغ */ .nf-skel { flex: none; width: 152px; height: 228px; border-radius: var(--r-md); background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%); background-size: 260% 100%; animation: skelSweep 1.5s linear infinite; } @keyframes skelSweep { to { background-position: -160% 0; } } :root[data-perf="lite"] .nf-skel { animation: none; background: var(--bg-2); } /* ============================================================ 👁️ علامات المتابعة على البطاقات ============================================================ */ .btn-list.on { color: var(--gold); border-color: var(--gold); background: rgba(217,176,100,.14); } .btn-list.list-watched.on { color: var(--r9); border-color: var(--r9); background: rgba(47,184,95,.14); } .btn-list.list-fav.on { color: #fb7185; border-color: #fb7185; background: rgba(251,113,133,.13); } .btn-list.list-dropped.on { color: var(--red); border-color: var(--red); background: rgba(239,68,68,.13); } .seen-tag, .rew-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); font-size: .64rem; font-weight: 800; letter-spacing: .2px; pointer-events: none; } .seen-tag { inset-block-start: 8px; inset-inline-start: 8px; background: rgba(47,184,95,.92); color: #04140a; } .rew-tag { inset-block-start: 8px; inset-inline-start: 76px; background: rgba(0,0,0,.72); color: var(--gold-soft); border: 1px solid var(--line-soft); } /* شريط العلامات في صفحة العمل */ .marks-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .marks-bar.hidden { display: none; } .mk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bg-2); font-size: .8rem; font-weight: 600; color: var(--tx-2); } .mk-seen { color: var(--r9); border-color: rgba(47,184,95,.4); } .mk-drop { color: var(--red); border-color: rgba(239,68,68,.35); } .mk-cd { color: var(--gold); border-color: var(--line-soft); } .mk-out { color: var(--gold-soft); background: rgba(217,176,100,.15); } .mk-btn { cursor: pointer; } .mk-btn:hover { border-color: var(--gold); color: var(--gold); } /* ============================================================ ⭐ اختيار التقييم بنصف نجمة ============================================================ */ .rate-pick-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .star-pick { display: flex; gap: 2px; } .sp-star { position: relative; display: block; width: 26px; height: 26px; line-height: 0; } .sp-star svg { position: absolute; inset: 0; margin: auto; } .sp-bg { color: var(--line); } .sp-fg { color: var(--sc); fill: currentColor; clip-path: inset(0 100% 0 0); transition: clip-path .16s var(--ease); } html[dir="rtl"] .sp-fg { clip-path: inset(0 0 0 100%); } .sp-star.half .sp-fg { clip-path: inset(0 50% 0 0); } html[dir="rtl"] .sp-star.half .sp-fg { clip-path: inset(0 0 0 50%); } .sp-star.full .sp-fg { clip-path: inset(0); } .sp-hit { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; cursor: pointer; padding: 0; } .sp-h1 { inset-inline-start: 0; } .sp-h2 { inset-inline-end: 0; } .sp-star:hover .sp-bg { color: var(--gold-soft); } .star-out { display: flex; align-items: baseline; gap: 8px; } .sp-num { font-size: 1.5rem; color: var(--rc); font-weight: 900; } .sp-word { font-size: .85rem; color: var(--tx-2); } .sp-clear { opacity: .5; } .sp-clear:hover { opacity: 1; } /* ============================================================ 📋 القوائم المخصّصة ============================================================ */ .lists-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .list-card { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: transform var(--fast), border-color var(--fast); animation: fadeUp .4s var(--ease-out) both; } .list-card:hover { transform: translateY(-3px); border-color: var(--gold); } .lc-ic { color: var(--gold); flex: none; } .list-card b { display: block; font-size: 1.02rem; } .lc-note { margin-top: 6px; line-height: 1.5; } .lc-acts { display: flex; flex-direction: column; gap: 4px; flex: none; } .list-items { display: flex; flex-direction: column; gap: 9px; } .li-row { display: flex; align-items: center; gap: 13px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: border-color var(--fast), background var(--fast); } .li-row:hover { border-color: var(--gold); background: var(--bg-3); } .li-row img, .li-row .ph { width: 46px; height: 66px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-3); display: grid; place-items: center; } .li-num { flex: none; min-width: 30px; text-align: center; font-family: var(--f-num); font-weight: 900; color: var(--tx-3); font-size: 1.05rem; } .li-row b { display: block; } .li-row.focus { border-color: var(--gold); } .li-row.flash { animation: liFlash 2.2s var(--ease) 2; } @keyframes liFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,176,100,0); } 50% { box-shadow: 0 0 0 4px rgba(217,176,100,.4); background: var(--bg-3); } } /* نافذة «أضف لقائمة» */ .al-work { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); background: var(--bg-3); } .al-work img { width: 44px; height: 64px; object-fit: cover; border-radius: var(--r-sm); } .al-lists { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; } .al-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-1); cursor: pointer; text-align: start; transition: border-color var(--fast); } .al-row:hover { border-color: var(--gold); } .al-row.on { border-color: var(--r9); background: rgba(47,184,95,.1); } .al-ic { color: var(--gold); flex: none; } .al-row b { display: block; } .al-new { display: flex; gap: 8px; align-items: center; } .al-new .input { flex: 1; } /* 🔔 التنبيه: العمل عندك في قائمة ثانية */ .where-box { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(217,176,100,.12), transparent); } .where-head { display: flex; align-items: center; gap: 7px; color: var(--gold); margin-bottom: 9px; font-size: .9rem; } .where-chips { display: flex; flex-wrap: wrap; gap: 7px; } .where-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-full); border: 1px solid var(--gold); background: rgba(217,176,100,.16); color: var(--gold-soft); font-weight: 700; font-size: .82rem; cursor: pointer; transition: background var(--fast), transform var(--fast); } .where-chip:hover { background: var(--gold); color: var(--bg-1); } .icon-pick { display: flex; flex-wrap: wrap; gap: 7px; } .icon-pick .ip { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-2); cursor: pointer; } .icon-pick .ip.on { border-color: var(--gold); color: var(--gold); background: rgba(217,176,100,.14); } /* ============================================================ 📅 اليوميات ============================================================ */ .heat { margin-bottom: 22px; } .heat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--gold); } .heat-grid { display: flex; gap: 3px; flex-wrap: wrap; } .heat-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--bg-3); border: 1px solid var(--line); } .heat-cell.l1 { background: rgba(217,176,100,.28); } .heat-cell.l2 { background: rgba(217,176,100,.5); } .heat-cell.l3 { background: rgba(217,176,100,.75); } .heat-cell.l4 { background: var(--gold); } .heat-key { display: flex; align-items: center; gap: 4px; margin-top: 9px; } .diary { display: flex; flex-direction: column; gap: 22px; } .dm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .dm-head b { font-size: 1.06rem; color: var(--gold-soft); } .dm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; } .dm { border-inline-start: 2px solid var(--line); padding-inline-start: 16px; } .dv { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: background var(--fast), border-color var(--fast); } .dv:hover { background: var(--bg-2); border-color: var(--line); } .dv img, .dv .ph { width: 40px; height: 58px; object-fit: cover; flex: none; border-radius: var(--r-sm); background: var(--bg-3); display: grid; place-items: center; } .dv-day { flex: none; min-width: 30px; text-align: center; font-family: var(--f-num); font-weight: 900; font-size: 1.15rem; color: var(--tx-3); } .dv b { display: block; } .dv-kind { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border-radius: var(--r-full); font-size: .74rem; font-weight: 700; background: var(--bg-3); color: var(--tx-2); } .dv-watched .dv-kind { color: var(--r9); } .dv-rated .dv-kind { color: var(--gold); } .dv-rewatch .dv-kind { color: var(--acc); } /* ============================================================ 🏅 الشارات والألقاب وتحليل الذوق ============================================================ */ .pf-titles { display: flex; flex-wrap: wrap; gap: 6px; } .pf-title-main, .pf-title-sub { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-full); font-size: .76rem; font-weight: 800; } .pf-title-main { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--bg-1); } .pf-title-sub { border: 1px solid var(--line-soft); color: var(--gold-soft); } .badge-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } .bg-item { padding: 14px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); text-align: center; opacity: .38; filter: grayscale(1); transition: opacity var(--fast), filter var(--fast), transform var(--fast); } .bg-item.on { opacity: 1; filter: none; border-color: var(--line-soft); } .bg-item.on:hover { transform: translateY(-3px); border-color: var(--gold); } .bg-ic { display: block; color: var(--gold); margin-bottom: 7px; } .bg-item b { display: block; font-size: .88rem; margin-bottom: 3px; } .bg-item .tiny { line-height: 1.45; } .taste-card { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); } .taste-line { display: flex; align-items: center; gap: 9px; font-size: 1rem; color: var(--gold-soft); margin-bottom: 16px; } .taste-line svg { color: var(--gold); flex: none; } .taste-bars { display: flex; flex-direction: column; gap: 11px; } .tb-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: .86rem; } .tb-pct { margin-inline-start: auto; color: var(--gold); font-weight: 800; } .tb-track { height: 8px; border-radius: var(--r-full); background: var(--bg-3); overflow: hidden; } .tb-track i { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--gold), var(--gold-soft)); } .taste-gap { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--tx-2); } /* ============================================================ 🏆 جوائز العضو ============================================================ */ .aw-cats { display: flex; flex-direction: column; gap: 18px; } .aw-cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--gold); } .aw-line { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .aw-slot { position: relative; flex: none; width: 108px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column; } .aw-slot.empty { min-height: 172px; align-items: center; justify-content: center; gap: 6px; color: var(--tx-3); border-style: dashed; cursor: pointer; } .aw-slot.empty:hover { border-color: var(--gold); color: var(--gold); } .aw-slot img, .aw-slot .ph { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--bg-3); display: grid; place-items: center; } .aw-pos { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-num); font-weight: 900; font-size: .82rem; background: rgba(0,0,0,.72); color: var(--tx-2); border: 1px solid var(--line); } .aw-slot.pos-1 .aw-pos { background: var(--gold); color: var(--bg-1); border-color: var(--gold); } .aw-slot.pos-2 .aw-pos { background: #c8ccd2; color: #16181b; } .aw-slot.pos-3 .aw-pos { background: #cd7f32; color: #1a0f04; } .aw-nm { padding: 8px; font-size: .78rem; font-weight: 700; line-height: 1.4; } .aw-x { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: var(--tx-2); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity var(--fast); } .aw-slot:hover .aw-x { opacity: 1; } .aw-x:hover { background: var(--red); color: #fff; } /* ============================================================ 👥 أعمال مشتركة · 📋 قوائمه · 🖼️ خلفية البروفايل ============================================================ */ .pf-head { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); } .pf-banner { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s var(--ease); } .pf-banner.on { opacity: .3; } .pf-head::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,11,15,.35), var(--bg-2) 94%); } .pf-head-in { position: relative; z-index: 2; display: flex; gap: 20px; align-items: flex-start; padding: 26px; flex-wrap: wrap; } .pf-acts { gap: 7px; flex: none; } .shared-card { padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--bg-2); margin-bottom: 12px; } .sh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; } .sh-head svg { color: var(--gold); flex: none; } .sh-head b { display: block; font-size: 1.1rem; } .pf-lists { gap: 9px; } .pf-list { flex: none; width: 152px; padding: 14px; text-align: start; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-1); cursor: pointer; transition: border-color var(--fast), transform var(--fast); } .pf-list:hover { border-color: var(--gold); transform: translateY(-3px); } .pf-list svg { color: var(--gold); display: block; margin-bottom: 8px; } .pf-list b { display: block; font-size: .9rem; margin-bottom: 3px; } /* ============================================================ 📤 الاقتراحات · ⏳ العد التنازلي ============================================================ */ .sug-rail, .cd-rail { gap: 11px; } .sug-card { position: relative; flex: none; width: 250px; display: flex; gap: 11px; padding: 11px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: linear-gradient(135deg, rgba(217,176,100,.1), var(--bg-2)); cursor: pointer; transition: transform var(--fast), border-color var(--fast); } .sug-card:hover { transform: translateY(-3px); border-color: var(--gold); } .sug-art { flex: none; width: 56px; height: 82px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-3); } .sug-art img { width: 100%; height: 100%; object-fit: cover; } .sug-tx { min-width: 0; } .sug-tx b { display: block; font-size: .9rem; margin-bottom: 6px; } .sug-who { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .sug-x { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: var(--tx-2); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity var(--fast); } .sug-card:hover .sug-x { opacity: 1; } .cd-card { flex: none; width: 168px; padding: 11px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: center; transition: transform var(--fast), border-color var(--fast); } .cd-card:hover { transform: translateY(-3px); border-color: var(--gold); } .cd-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 9px; } .cd-tx b { display: block; font-size: .88rem; margin-bottom: 6px; } .cd-days { display: flex; align-items: baseline; justify-content: center; gap: 5px; color: var(--gold); } .cd-days .num { font-size: 1.6rem; font-weight: 900; } .cd-out { display: inline-flex; align-items: center; gap: 5px; color: var(--r9); font-weight: 800; } .cd-card.out { border-color: var(--r9); } /* ============================================================ 📊 قائمة المئة ============================================================ */ .top-grid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .top-slot { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: transform var(--fast), border-color var(--fast); } .top-slot:hover { transform: translateY(-4px); border-color: var(--gold); } .top-slot.empty { min-height: 170px; display: grid; place-items: center; border-style: dashed; color: var(--tx-3); } .top-slot.empty:hover { color: var(--gold); } .top-slot img, .top-slot .ph { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: var(--bg-3); place-items: center; } .ts-num { position: absolute; inset-block-start: 7px; inset-inline-start: 7px; z-index: 2; min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--r-full); display: grid; place-items: center; font-family: var(--f-num); font-weight: 900; font-size: .85rem; background: rgba(0,0,0,.75); color: var(--tx-1); border: 1px solid var(--line); } .top-slot.medal-1 .ts-num { background: var(--gold); color: var(--bg-1); } .top-slot.medal-2 .ts-num { background: #c8ccd2; color: #16181b; } .top-slot.medal-3 .ts-num { background: #cd7f32; color: #1a0f04; } .ts-tx { padding: 9px; } .ts-tx b { display: block; font-size: .84rem; line-height: 1.4; } .ts-tools, .ts-admin { position: absolute; z-index: 3; display: flex; gap: 4px; opacity: 0; transition: opacity var(--fast); } .ts-tools { inset-block-start: 7px; inset-inline-end: 7px; flex-direction: column; } .ts-admin { inset-block-end: 7px; inset-inline-end: 7px; } .top-slot:hover .ts-tools, .top-slot:hover .ts-admin { opacity: 1; } /* ============================================================ 🏆 دوري الأعمال ============================================================ */ .lg-setup { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; } .lg-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--gold); } .lg-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-2); font-weight: 700; cursor: pointer; transition: all var(--fast); } .lg-chip:hover { border-color: var(--gold); color: var(--gold); } .lg-chip.on { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--bg-1); border-color: var(--gold); } .lg-start { align-self: flex-start; padding: 14px 34px; font-size: 1.05rem; } .lg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .lg-head h3 { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 1.2rem; } .lg-count { font-family: var(--f-num); font-weight: 800; color: var(--tx-2); } .lg-bar { flex: 1 1 160px; height: 6px; border-radius: var(--r-full); background: var(--bg-3); overflow: hidden; } .lg-bar i { display: block; height: 100%; background: var(--gold); transition: width .3s var(--ease); } .lg-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; } .lg-vs { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); font-weight: 900; font-size: .95rem; background: var(--bg-2); } .lg-card { display: block; width: 100%; padding: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: start; transition: transform .2s var(--ease), border-color var(--fast), box-shadow var(--fast); } .lg-card:hover { transform: translateY(-5px) scale(1.015); border-color: var(--gold); box-shadow: 0 16px 40px rgba(0,0,0,.5); } .lg-card.won { transform: scale(1.05); border-color: var(--r9); } .lg-art { position: relative; width: 100%; aspect-ratio: 2/3; background: var(--bg-3); } .lg-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .lg-art.big { max-width: 240px; margin: 0 auto 18px; border-radius: var(--r-lg); overflow: hidden; } .lg-rate { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-full); background: rgba(0,0,0,.75); color: var(--rc); font-family: var(--f-num); font-weight: 800; font-size: .78rem; } .lg-name { padding: 13px; } .lg-name b { display: block; font-size: 1rem; line-height: 1.4; } .lg-pick { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; background: var(--bg-3); color: var(--gold); font-weight: 800; font-size: .86rem; } .lg-card:hover .lg-pick { background: var(--gold); color: var(--bg-1); } .lg-path { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; justify-content: center; } .lg-step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; text-align: center; opacity: .75; } .lg-step img { width: 46px; height: 66px; object-fit: cover; border-radius: var(--r-sm); } .lg-final { display: block; } .lg-champ { text-align: center; padding: 26px 18px; animation: popIn .55s var(--ease-out) both; } .lg-crown { display: block; color: var(--gold); margin-bottom: 12px; animation: crownFloat 2.6s var(--ease) infinite; } @keyframes crownFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .lg-champ h2 { font-size: clamp(1.4rem, 5vw, 2.1rem); color: var(--gold-soft); } .pk-launch.arcade { border-color: var(--line-soft); background: linear-gradient(135deg, rgba(217,176,100,.1), var(--bg-2)); } @media (max-width: 700px) { .lg-board { grid-template-columns: 1fr; gap: 10px; } .lg-vs { justify-self: center; width: 44px; height: 44px; } .lg-art { aspect-ratio: 16/9; } .lg-art.big { aspect-ratio: 2/3; } } /* ============================================================ ⚙️ صفّ اختيارات الإعدادات ============================================================ */ .set-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .set-chip { padding: 8px 15px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-2); font-weight: 700; font-size: .84rem; cursor: pointer; transition: all var(--fast); } .set-chip:hover { border-color: var(--gold); color: var(--gold); } .set-chip.on { background: var(--gold); color: var(--bg-1); border-color: var(--gold); } /* اختيار العضو في نافذة الاقتراح */ .sg-people { display: flex; flex-wrap: wrap; gap: 8px; } .sg-person { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-1); cursor: pointer; transition: all var(--fast); } .sg-person:hover { border-color: var(--gold); } .sg-person.on { border-color: var(--gold); background: rgba(217,176,100,.16); }