/* هوية قائمة «اشترِ ألعاب»: جيم جواب (ذهبي/أزرق)، كيدز (ألوان وفقاعات)، ستيودنت (دفتر مدرسي)، مافيا (نوار ذهبي).
   المحدّد #bdrop#bdrop#bdrop#bdrop[data-ed] بيغلب أنماط الصفحات. التركيب: shop.js (data-ed + .bdart + .ico + .bdgames). */

/* ===== مشترك: هيكل مرتّب ===== */
html body #bdrop#bdrop#bdrop#bdrop[data-ed]{padding:18px 16px 16px;width:min(420px,calc(100vw - 16px));direction:rtl}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .bdh{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .bdh b{font-size:1.25rem;font-weight:800;line-height:1.3;margin:0;flex:1;min-width:0}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .bdart{width:46px;height:46px;flex:none;display:grid;place-items:center}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .bdart svg{width:100%;height:100%}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .rdm-btn{display:inline-block;width:auto;margin:0;flex:none;font:inherit;font-weight:800;font-size:.85rem;padding:8px 14px;cursor:pointer;border-radius:999px;border:2px solid currentColor;background:transparent}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts{display:flex;flex-direction:column;gap:10px;margin:0}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt{position:relative;display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"t p b";align-items:center;column-gap:12px;row-gap:3px;padding:12px;border-radius:18px;text-align:start}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .ico{grid-area:i;display:grid;place-items:center;width:64px;height:56px}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .ico svg{width:100%;height:100%;display:block;overflow:visible}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .t{grid-area:t;font-size:1.05rem;font-weight:800}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .p{grid-area:p;font-size:1.25rem;font-weight:800;white-space:nowrap}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .p s{font-size:.85rem;margin-inline-end:6px}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt small{display:none}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .sv{grid-area:sv;justify-self:start;margin:0;font-size:.74rem;font-weight:800;border-radius:999px;padding:2px 10px}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt button.ord{grid-area:b;margin:0;width:auto;min-width:76px;padding:11px 18px;font:inherit;font-weight:800;font-size:.98rem;border:0;cursor:pointer;border-radius:14px;transition:transform .12s,box-shadow .12s}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt button.ord:active{transform:translateY(2px)}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .badge{inset-inline-start:auto;width:auto;right:auto;top:-11px;inset-inline-end:14px;font-size:.72rem;font-weight:800;padding:2px 11px;border-radius:999px}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .cpn{display:flex;margin:14px 0 6px;gap:0;overflow:hidden}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .cpn input{flex:1;min-width:0;border:0;background:transparent;font:inherit;padding:11px 16px;text-align:start;direction:rtl;text-transform:none}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .cpn input:focus{outline:none}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .cpn button{border:0;font:inherit;font-weight:800;padding:0 20px;cursor:pointer}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #cpnmsg{min-height:0;margin:0;font-size:.85rem;text-align:center}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #cpnmsg:empty{display:none}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] .secure{margin:10px 0 0;font-size:.78rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .pp{fill:var(--pp,#ffd23f);stroke:var(--ps,#2a2540);stroke-width:1.3}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .pl{stroke:var(--pl,#1546d6);stroke-width:1.5;stroke-linecap:round;fill:none}
@keyframes bdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html body #bdrop#bdrop#bdrop#bdrop[data-ed]:not([hidden]) #opts .opt{animation:bdIn .35s ease both}
html body #bdrop#bdrop#bdrop#bdrop[data-ed]:not([hidden]) #opts .opt:nth-child(2){animation-delay:.05s}
html body #bdrop#bdrop#bdrop#bdrop[data-ed]:not([hidden]) #opts .opt:nth-child(3){animation-delay:.1s}
html body #bdrop#bdrop#bdrop#bdrop[data-ed]:not([hidden]) #opts .opt:nth-child(4){animation-delay:.15s}
@media(prefers-reduced-motion:reduce){html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt{animation:none!important}}
@media(max-width:400px){html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt{grid-template-columns:1fr auto;grid-template-areas:"t p" "b b"}html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .ico{width:52px}html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt button.ord{width:100%}}

/* ===== جيم جواب: نظيف ذهبي وأزرق ===== */
html body #bdrop#bdrop#bdrop#bdrop[data-ed=jj]{background:#fff;color:#2a2540;border-radius:26px;box-shadow:0 22px 56px rgba(42,37,64,.34)}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] .rdm-btn{color:#1546d6}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt{background:#fff;border:2px solid #efe6cf;box-shadow:0 3px 0 #efe6cf}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt.best{background:linear-gradient(135deg,#fff8dc,#ffeaa1);border-color:#ffd23f;box-shadow:0 3px 0 #e3b400}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt .p{color:#1546d6}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt .p s{color:#a09a8a}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt .sv{background:#2a2540;color:#ffd23f}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt button.ord{background:#1546d6;color:#fff;box-shadow:0 4px 0 #0e2f94}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .opt.best button.ord{background:#ffd23f;color:#2a2540;box-shadow:0 4px 0 #d9a400}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] #opts .badge{background:#2a2540;color:#ffd23f}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] .cpn{border:2px solid #efe6cf;border-radius:999px;background:#fffdf6}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] .cpn button{background:#2a2540;color:#fff}
#bdrop#bdrop#bdrop#bdrop[data-ed=jj] .secure{color:#8a8574}
/* بلاطات الألعاب الثلاث بآخر القائمة */
#bdrop .bdgames{margin-top:16px;padding-top:14px;border-top:2px dashed #efe6cf}
#bdrop .bdg-h{margin:0 0 10px;text-align:start}
#bdrop .bdg-h b{font-size:.95rem;font-weight:800;color:#6b6552}
#bdrop .bdg-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#bdrop .gt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1/.92;border-radius:20px;text-decoration:none;color:#fff;overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.22);transition:transform .15s,box-shadow .15s}
#bdrop .gt:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.22)}
#bdrop .gt-kids{background:linear-gradient(160deg,#20b27a,#0e7d57)}
#bdrop .gt-students{background:linear-gradient(160deg,#ff9a3d,#f0801f)}
#bdrop .gt-mafia{background:linear-gradient(160deg,#2b2b2b,#050505)}
#bdrop .gt-t{display:flex;flex-direction:column;align-items:center;gap:3px;width:78%}
#bdrop .gt-t img{width:70%;height:auto;max-height:34px;object-fit:contain;display:block}
#bdrop .gt-t .gt-l{width:92%;max-height:26px}
#bdrop .gt-mafia .gt-t img+img{width:96%;max-height:30px}
#bdrop .gt-c{position:absolute;bottom:5px;inset-inline-end:7px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.9);color:#2a2540;display:grid;place-items:center}
#bdrop .gt-c svg{width:11px;height:11px}

/* ===== كيدز: ملوّن مرح بفقاعات ونجوم ===== */
html body #bdrop#bdrop#bdrop#bdrop[data-ed=kids]{background:#fffdf3;color:#17325c;border:4px solid #17325c;border-radius:30px;box-shadow:0 8px 0 #17325c,0 22px 40px rgba(23,50,92,.3);font-family:Changa,Tahoma,sans-serif}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] .bdh b{font-size:1.4rem}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] .bdart{animation:kidsw 2.4s ease-in-out infinite}
@keyframes kidsw{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.06)}}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] .rdm-btn{color:#17325c;background:#fff;border-width:3px}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt{border:3px solid #17325c;box-shadow:0 5px 0 #17325c;border-radius:22px;background:#e8f7ff;--pp:#ffc933;--ps:#17325c}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt:nth-child(2){background:#ffecec}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt:nth-child(3){background:#eefbe7}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt:nth-child(4){background:#f2ebff}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt.best{background:#fff3c4}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt .ico svg .pp{stroke-width:1.6}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt .p{color:#e8503a}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt .p s{color:#8a99b3}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt .sv{background:#ff7a59;color:#fff;border:2px solid #17325c}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt button.ord{background:#22b573;color:#fff;border:3px solid #17325c;box-shadow:0 4px 0 #17325c;border-radius:999px;padding:9px 20px}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .opt:hover button.ord{animation:kidsb .6s ease}
@keyframes kidsb{30%{transform:scale(1.1) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] #opts .badge{background:#ff7a59;color:#fff;border:2px solid #17325c;transform:rotate(-4deg)}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] .cpn{border:3px solid #17325c;border-radius:999px;background:#fff}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] .cpn button{background:#ffc933;color:#17325c;border-inline-start:3px solid #17325c}
#bdrop#bdrop#bdrop#bdrop[data-ed=kids] .secure{color:#6b7da0}

/* ===== ستيودنت: ورقة دفتر مدرسي بخطوط وهامش أحمر ===== */
html body #bdrop#bdrop#bdrop#bdrop[data-ed=students]{background:#fdfbf2 repeating-linear-gradient(transparent 0 31px,#d9e4f5 31px 32px);color:#1b2b5c;border:1px solid #c9d4ea;border-radius:10px 22px 22px 10px;box-shadow:0 18px 44px rgba(16,37,96,.3);padding-inline-start:30px}
#bdrop#bdrop#bdrop#bdrop[data-ed=students]:before{content:"";position:absolute;inset-block:0;inset-inline-start:20px;width:2px;background:#e57373;opacity:.75;border-radius:2px}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] .bdh b{color:#102560;font-size:1.3rem}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] .rdm-btn{color:#1f3a8a;background:#fff}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt{background:#fff;border:1.5px solid #c9d4ea;border-radius:6px 16px 16px 6px;box-shadow:3px 3px 0 #dbe3f3;--pp:#fff;--ps:#1f3a8a;--pl:#e57373}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt .ico svg .pp{fill:#fff;stroke:#1f3a8a;stroke-width:1.5}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt:nth-child(odd) .ico svg .pp{fill:#e8eefc}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt.best{background:linear-gradient(transparent 55%,#fff3a6 55%,#fff3a6 92%,transparent 92%),#fff;border-color:#1f3a8a}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt .p{color:#1f3a8a}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt .p s{color:#9aa6c4}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt .sv{background:#e57373;color:#fff;border-radius:4px;transform:rotate(-2deg)}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .opt button.ord{background:#1f3a8a;color:#fff;border-radius:8px;box-shadow:0 3px 0 #102560}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] #opts .badge{background:#e57373;color:#fff;border-radius:4px;transform:rotate(-3deg)}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] .cpn{border:1.5px solid #c9d4ea;border-radius:8px;background:#fff}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] .cpn button{background:#1f3a8a;color:#fff}
#bdrop#bdrop#bdrop#bdrop[data-ed=students] .secure{color:#7a87aa}

/* ===== مافيا: نوار داكن بذهبي وأحمر ===== */
html body #bdrop#bdrop#bdrop#bdrop[data-ed=mafia]{background:linear-gradient(180deg,#17131b,#0b090d);color:#f0e6cf;border:1px solid #c9a24a;border-radius:22px;box-shadow:0 0 0 1px #000,0 22px 60px rgba(0,0,0,.7),0 0 34px rgba(201,162,74,.12)}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] .bdh b{color:#e9c76d;letter-spacing:.02em}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] .rdm-btn{color:#e9c76d}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt{background:linear-gradient(135deg,#1f1a24,#141017);border:1px solid #4a3d22;border-radius:14px;--pp:#c9a24a;--ps:#6b5420;--pl:#6b5420}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt .ico svg .pp{fill:#c9a24a;stroke:#3a2c0c}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt .ico svg .pl{stroke:#3a2c0c;stroke-dasharray:2 2}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt.best{border-color:#c9a24a;background:linear-gradient(135deg,#2a1519,#161015);box-shadow:0 0 22px rgba(163,22,33,.35)}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt.best .ico svg .pp{fill:#a31621;stroke:#e9c76d}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt .p{color:#e9c76d}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt .p s{color:#7a6c4a}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt .sv{background:#a31621;color:#fff}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .opt button.ord{background:linear-gradient(180deg,#e9c76d,#b88a2e);color:#17110a;box-shadow:0 3px 0 #6b5420;border-radius:10px}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] #opts .badge{background:#a31621;color:#fff;border:1px solid #e9c76d}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] .cpn{border:1px solid #4a3d22;border-radius:12px;background:#0f0c12}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] .cpn input{color:#f0e6cf}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] .cpn button{background:#c9a24a;color:#17110a}
#bdrop#bdrop#bdrop#bdrop[data-ed=mafia] .secure{color:#8a7c5a}
html body #bdrop#bdrop#bdrop#bdrop[data-ed] #opts .opt .t{color:inherit}
html body #bdrop#bdrop#bdrop#bdrop[data-ed=students] .bdh b{font-size:1.12rem}