:root {
    --ink: #3d2a12; --s: 1;
    --font: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background: #0b1020; font-family: var(--font); color: #fff;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  }

  /* ===== خلفية الصفحة المتحركة ===== */
  .aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
  .blob {
    position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
    background: radial-gradient(circle, var(--c,#ff8a00) 0%, transparent 66%); opacity: .5; animation: drift 26s ease-in-out infinite alternate; will-change: transform;
  }
  .b1 { --c: #ff8a00; left: -18vmax; top: -24vmax; }
  .b2 { --c: #7c3aed; right: -22vmax; top: 6vmax; animation-duration: 24s; animation-delay: -8s; }
  .b3 { --c: #06b6d4; left: 4vmax; bottom: -34vmax; animation-duration: 28s; animation-delay: -14s; }
  @keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(9vmax, 5vmax) scale(1.15); }
    100% { transform: translate(-6vmax, 10vmax) scale(.92); }
  }
  .aurora::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  }

  /* ===== إطار اللعبة بتوهج دوّار ===== */
  @property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  #wrap { position: relative; z-index: 1; width: calc(400px * var(--s)); height: calc(600px * var(--s)); }
  #wrap::before, #wrap::after {
    content: ""; position: absolute; inset: calc(-3px * var(--s)); border-radius: calc(25px * var(--s));
    background: conic-gradient(from var(--ang), #ffb83d, #ff5e7e, #8b5cf6, #22d3ee, #4ade80, #ffb83d);
    animation: spin 7s linear infinite;
  }
  #wrap::after { filter: blur(28px); opacity: .5; z-index: -1; }
  @keyframes spin { to { --ang: 360deg; } }

  #stage {
    position: absolute; inset: 0; border-radius: calc(22px * var(--s)); overflow: hidden;
    background: #8fd8ea; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    touch-action: none; cursor: pointer; outline: none;
  }
  #game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  #ui {
    position: absolute; top: 0; left: 0; width: 400px; height: 600px;
    transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; color: #fff;
  }
  button { font-family: inherit; cursor: pointer; border: 0; pointer-events: auto; color: inherit; background: none; }
  button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; }

  .ol {
    text-shadow:
      0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink),
      2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
      0 5px 0 var(--ink);
  }
  svg.i { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .glass {
    background: rgba(15, 23, 42, .42); border: 1.5px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  }

  /* ===== الشاشات وانتقالاتها ===== */
  .screen {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transform: translateY(14px) scale(.97);
    transition: opacity .35s ease, transform .5s cubic-bezier(.2,1,.3,1), visibility 0s linear .5s;
  }
  .screen.show { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2,1,.3,1); }
  .scrim { background: linear-gradient(180deg, rgba(10,16,34,.10), rgba(10,16,34,.45)); }
  .row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }

  /* ===== الصفحة الرئيسية ===== */
  .logo { display: flex; gap: 12px; font-size: 66px; font-weight: 900; line-height: 1.15; }
  .logo span {
    display: inline-block; background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 14px 18px rgba(0,0,0,.25));
    animation: shine 4s linear infinite, bob 3s ease-in-out infinite;
  }
  .logo .w1 { background-image: linear-gradient(100deg, #ffffff 40%, #cfefff 50%, #ffffff 60%); }
  .logo .w2 { background-image: linear-gradient(100deg, #ffd23f 38%, #fff6c4 50%, #ffb21f 62%); animation-delay: -.6s, -.75s; }
  @keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  @keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
  #scrMenu.show .logo { animation: logoIn .8s cubic-bezier(.2,1.5,.4,1) both; }
  @keyframes logoIn { from { opacity: 0; transform: translateY(-40px) scale(.6); } to { opacity: 1; transform: none; } }

  .tagline {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px; border-radius: 999px;
    font-size: 14px; font-weight: 800; color: #fff;
    background: linear-gradient(90deg, rgba(255,138,0,.85), rgba(139,92,246,.85));
    box-shadow: 0 6px 18px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .tagline i { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; animation: blink 1.4s ease-in-out infinite; }
  .tagline i:last-child { animation-delay: .7s; }
  @keyframes blink { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
  #scrMenu.show .tagline { animation: rise .6s cubic-bezier(.2,1.3,.4,1) both .15s; }

  .menu-btns { position: absolute; top: 322px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .mbtn {
    position: relative; overflow: hidden; width: 292px; height: 68px; border-radius: 22px;
    display: flex; align-items: center; gap: 14px; padding: 0 14px 0 18px; text-align: right;
    transition: transform .15s, box-shadow .15s, filter .2s;
  }
  .mbtn .ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
  .mbtn .ico svg { width: 24px; height: 24px; }
  .mbtn .txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
  .mbtn .txt b { font-size: 21px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
  .mbtn .txt small { font-size: 12.5px; font-weight: 700; opacity: .9; }
  .mbtn .arr { width: 22px; height: 22px; opacity: .85; transition: transform .2s; }
  .mbtn:hover { filter: brightness(1.07); transform: translateY(-2px); }
  .mbtn:hover .arr { transform: translateX(-4px); }
  .mbtn:active { transform: translateY(4px); }
  .mbtn::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; width: 46px; left: -80px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); animation: sweep 3.6s ease-in-out infinite;
  }
  .mbtn.vs::after { animation-delay: 1.8s; }
  @keyframes sweep { 0%, 60% { left: -80px; } 100% { left: 360px; } }
  .mbtn.solo {
    background: linear-gradient(180deg, #ffb83d, #ff7a00);
    box-shadow: 0 6px 0 #c25400, 0 14px 26px rgba(255,122,0,.35), inset 0 2px 0 rgba(255,255,255,.35);
  }
  .mbtn.solo:active { box-shadow: 0 2px 0 #c25400, 0 6px 12px rgba(255,122,0,.3), inset 0 2px 0 rgba(255,255,255,.35); }
  .mbtn.vs {
    background: linear-gradient(180deg, #a78bfa, #7c3aed 70%, #6d28d9);
    box-shadow: 0 6px 0 #4c1d95, 0 14px 26px rgba(124,58,237,.45), inset 0 2px 0 rgba(255,255,255,.35);
  }
  .mbtn.vs:active { box-shadow: 0 2px 0 #4c1d95, 0 6px 12px rgba(124,58,237,.35), inset 0 2px 0 rgba(255,255,255,.35); }
  .mbtn .new {
    position: absolute; top: 8px; left: 46px; font-size: 10.5px; font-weight: 900; padding: 1px 8px; border-radius: 999px;
    background: #fde047; color: #4c1d95; animation: pulse 1.3s ease-in-out infinite;
  }
  #scrMenu.show .mbtn.solo { animation: rise .6s cubic-bezier(.2,1.3,.4,1) both .25s; }
  #scrMenu.show .mbtn.vs   { animation: rise .6s cubic-bezier(.2,1.3,.4,1) both .35s; }

  .menu-stats { position: absolute; top: 486px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
  .chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
    font-weight: 800; font-size: 13.5px; color: #fff;
  }
  .chip svg { width: 17px; height: 17px; }
  .chip b { font-size: 16px; direction: ltr; font-variant-numeric: tabular-nums; }
  .chip.gold svg { color: #fcd34d; }
  .chip.vio svg { color: #c4b5fd; }
  #scrMenu.show .menu-stats { animation: rise .6s ease both .45s; }
  .foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.8); }
  .foot kbd { font-size: 10.5px; padding: 0 6px; }
  #scrMenu.show .foot { animation: rise .6s ease both .55s; }

  kbd {
    font-family: inherit; font-size: 12px; font-weight: 800; background: #fff; color: var(--ink);
    border-radius: 6px; padding: 1px 8px; box-shadow: 0 2px 0 rgba(0,0,0,.3);
  }

  /* ===== اختيار الصعوبة ===== */
  .diff-head { position: absolute; top: 58px; left: 24px; right: 24px; display: flex; align-items: center; gap: 14px; }
  .diff-head h2 { font-size: 30px; font-weight: 900; line-height: 1.1; }
  .diff-head p { font-size: 13px; font-weight: 700; opacity: .9; }
  .back {
    width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; color: #fff;
    transition: transform .15s, background .2s;
  }
  .back:hover { background: rgba(15,23,42,.6); }
  .back:active { transform: scale(.9); }
  .back svg { width: 22px; height: 22px; }
  .diff-grid { position: absolute; top: 140px; left: 25px; right: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 110px; gap: 9px; }
  .dcard {
    --c: #22c55e; position: relative; height: 110px; border-radius: 18px; padding: 9px 11px 8px; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; text-align: right; color: #fff;
    background: linear-gradient(160deg, rgba(15,23,42,.62), rgba(15,23,42,.42));
    border: 1.5px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .2s cubic-bezier(.2,1.4,.4,1), border-color .2s, box-shadow .2s;
  }
  .dcard::before {
    content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; top: -70px; left: -50px;
    background: var(--c); filter: blur(40px); opacity: .45; transition: opacity .2s;
  }
  .dcard:hover { transform: translateY(-4px) scale(1.02); border-color: var(--c); box-shadow: 0 14px 30px rgba(0,0,0,.3), 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
  .dcard:hover::before { opacity: .75; }
  .dcard:active { transform: scale(.97); }
  .dcard > * { position: relative; }
  .meter { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-bottom: 4px; }
  .meter i { width: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
  .meter i:nth-child(1) { height: 4px; } .meter i:nth-child(2) { height: 7px; }
  .meter i:nth-child(3) { height: 10px; } .meter i:nth-child(4) { height: 14px; }
  .meter i:nth-child(5) { height: 18px; } .meter i:nth-child(6) { height: 22px; }
  .meter i.on { background: var(--c); box-shadow: 0 0 10px var(--c); }
  .dcard b { font-size: 20px; font-weight: 900; line-height: 1.05; }
  .dcard small { font-size: 10px; font-weight: 700; opacity: .88; line-height: 1.2; margin-top: 2px; }
  .dcard .rec {
    margin-top: auto; font-size: 10px; font-weight: 800; font-style: normal; padding: 1px 8px; border-radius: 999px;
    background: rgba(255,255,255,.14); display: inline-flex; gap: 6px; direction: rtl;
  }
  .dcard .key { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 900; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
  .dcard.imp { border-color: rgba(239,68,68,.55); animation: impGlow 1.8s ease-in-out infinite; }
  .dcard.expert { border-color: rgba(6,182,212,.48); }
  .dcard.legend { border-color: rgba(168,85,247,.55); box-shadow: 0 0 18px rgba(168,85,247,.14), inset 0 1px 0 rgba(255,255,255,.15); }
  .dcard.legend { background:linear-gradient(145deg,rgba(35,5,24,.94),rgba(8,3,18,.96)); border-color:rgba(218,70,112,.82); box-shadow:0 0 0 1px rgba(255,30,75,.15),0 0 22px rgba(190,12,54,.24),inset 0 1px 0 rgba(255,120,150,.2); }
  .dcard.legend::before { background:#d31342; opacity:.55; filter:blur(34px); }
  .dcard.legend b { color:#ffe4ec; text-shadow:0 0 10px rgba(255,20,65,.55); }
  .dcard.legend .meter i.on { background:#ff3158; box-shadow:0 0 9px #ff1748; }
  .dcard.legend .rec { background:rgba(255,35,76,.2); color:#ffd6df; }
  .dcard.legend .key { background:rgba(255,35,76,.2); color:#ffd6df; }
  @keyframes impGlow { 0%,100% { box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(239,68,68,.0); } 50% { box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 22px 2px rgba(239,68,68,.55); } }
  #scrDiff.show .diff-head { animation: rise .5s cubic-bezier(.2,1.3,.4,1) both; }
  #scrDiff.show .dcard { animation: cardIn .55s cubic-bezier(.2,1.4,.4,1) both; }
  #scrDiff.show .dcard:nth-child(2) { animation-delay: .07s; }
  #scrDiff.show .dcard:nth-child(3) { animation-delay: .14s; }
  #scrDiff.show .dcard:nth-child(4) { animation-delay: .21s; }
  #scrDiff.show .dcard:nth-child(5) { animation-delay: .28s; }
  #scrDiff.show .dcard:nth-child(6) { animation-delay: .35s; }
  #scrDiff.show .dcard.imp { animation: cardIn .55s cubic-bezier(.2,1.4,.4,1) both .28s, impGlow 1.8s ease-in-out infinite .9s; }
  @keyframes cardIn { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }
  .diff-rules {
    position: absolute; top: 518px; left: 25px; right: 25px; padding: 10px 14px; border-radius: 16px;
    font-size: 12.5px; font-weight: 700; line-height: 1.6; display: flex; gap: 10px; align-items: center;
  }
  .diff-rules svg { width: 22px; height: 22px; flex: none; color: #fde047; }
  #scrDiff.show .diff-rules { animation: rise .5s ease both .3s; }

  /* ===== الاستعداد والعد التنازلي ===== */
  .title { font-size: 42px; font-weight: 900; line-height: 1.2; }
  .hint {
    display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #fff;
    padding: 7px 14px; border-radius: 999px;
  }
  .hint svg { width: 17px; height: 17px; }
  #scrReady.show .title { animation: dropIn .5s cubic-bezier(.2,1.4,.4,1) both; }
  #scrReady.show .hint { animation: rise .5s ease both .15s, breathe 1.6s ease-in-out infinite .7s; }
  .tap-ring { position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); animation: ripple 1.4s ease-out infinite; }
  .tap-ring.r2 { animation-delay: .7s; }
  @keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

  .vs-banner { position: absolute; top: 74px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
  .vs-side { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; font-weight: 900; font-size: 16px; }
  .vs-side small { font-size: 11.5px; font-weight: 900; padding: 1px 8px; border-radius: 999px; background: var(--dc, #3b82f6); }
  .av { width: 30px; height: 30px; border-radius: 50%; position: relative; border: 2px solid var(--ink); flex: none; }
  .av::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; top: 5px; right: 4px; background: #fff; box-shadow: inset -3px 0 0 1px var(--ink); }
  .av.me  { background: radial-gradient(circle at 35% 30%, #fff27a, #ffcd2e 55%, #f39a14); }
  .av.bot { background: radial-gradient(circle at 35% 30%, #e9d5ff, #a78bfa 55%, #6d28d9); }
  .vs-x { font-size: 26px; font-weight: 900; color: #fde047; font-style: italic; }
  #scrCount.show .vs-side.me  { animation: slideR .55s cubic-bezier(.2,1.3,.4,1) both; }
  #scrCount.show .vs-side.bot { animation: slideL .55s cubic-bezier(.2,1.3,.4,1) both; }
  #scrCount.show .vs-x { animation: slam .5s cubic-bezier(.2,1.8,.4,1) both .3s; }
  @keyframes slideR { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
  @keyframes slideL { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
  @keyframes slam { from { opacity: 0; transform: scale(3) rotate(-20deg); } to { opacity: 1; transform: none; } }
  .cd-tip { position: absolute; top: 420px; left: 0; right: 0; text-align: center; }
  #scrCount.show .cd-tip .hint { animation: rise .5s ease both .4s; }

  #cd {
    position: absolute; top: 150px; left: 0; right: 0; text-align: center; font-size: 110px; font-weight: 900; line-height: 1.2;
    color: #fff; opacity: 0; pointer-events: none;
  }
  #cd.go { color: #fde047; font-size: 76px; }
  #cd.anim { animation: cdPop .74s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes cdPop {
    0% { opacity: 0; transform: scale(2.4); }
    25% { opacity: 1; transform: scale(1); }
    75% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.6) translateY(-20px); }
  }

  /* ===== شريط اللعب ===== */
  #score {
    position: absolute; top: 30px; left: 0; right: 0; text-align: center;
    font-size: 60px; font-weight: 900; line-height: 1.1; direction: ltr;
    font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s;
  }
  #score.on { opacity: 1; }
  #score.pop { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
  @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

  #vsBar {
    position: absolute; top: 532px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 8px;
    opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .4s cubic-bezier(.2,1.3,.4,1);
  }
  #vsBar.on { opacity: 1; transform: none; }
  .vp {
    display: flex; align-items: center; gap: 7px; min-width: 128px; height: 40px; padding: 0 12px; border-radius: 14px;
    font-weight: 800; font-size: 14px; background: rgba(61,42,18,.72); border: 2px solid rgba(255,255,255,.25);
    transition: transform .25s, box-shadow .25s, opacity .3s, filter .3s;
  }
  .vp b { font-size: 20px; font-weight: 900; direction: ltr; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
  .vp.bot b { margin-inline-start: 0; margin-inline-end: auto; }
  .vp .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; flex: none; }
  .vp.me .dot { background: #ffcd2e; }
  .vp.bot .dot { background: #8b5cf6; }
  .vp .crown { width: 16px; height: 16px; color: #fde047; display: none; }
  .vp.lead { transform: scale(1.06); box-shadow: 0 0 0 2px #fde047, 0 6px 16px rgba(253,224,71,.35); }
  .vp.lead .crown { display: block; }
  .vp.out { opacity: .55; filter: grayscale(.8); }
  .vs-mid { font-weight: 900; font-size: 14px; color: #3d2a12; }

  #toast {
    position: absolute; top: 112px; left: 50%; padding: 8px 18px; border-radius: 999px; white-space: nowrap;
    font-weight: 900; font-size: 15px; color: #fff; opacity: 0; transform: translate(-50%, -20px);
    background: linear-gradient(90deg, #7c3aed, #ec4899); box-shadow: 0 8px 22px rgba(124,58,237,.45);
  }
  #toast.anim { animation: toast 2.4s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes toast {
    0% { opacity: 0; transform: translate(-50%, -24px) scale(.8); }
    12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -12px) scale(.95); }
  }

  .hud-btns { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; direction: ltr; z-index: 5; }
  .dash-btn {
    --charge: 100%; position:absolute; right:14px; bottom:94px; z-index:7; width:116px; height:54px;
    display:flex; align-items:center; justify-content:center; gap:9px; padding:0 10px; border-radius:16px;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none;
    color:#fff; direction:rtl; opacity:0; pointer-events:none; transform:translateY(8px) scale(.94);
    border:1.5px solid rgba(255,255,255,.58);
    background:linear-gradient(145deg,rgba(9,20,38,.92),rgba(21,42,67,.82));
    box-shadow:0 5px 0 rgba(0,0,0,.34),0 9px 22px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.22);
    transition:opacity .18s,transform .2s,border-color .2s,filter .2s;
  }
  .dash-btn.on { opacity:1; pointer-events:auto; transform:none; }
  .dash-btn::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(90deg,rgba(255,190,70,.26) 0 var(--charge),transparent var(--charge) 100%); }
  .dash-btn.ready { border-color:#ffe28a; box-shadow:0 5px 0 #87480f,0 0 18px rgba(255,174,61,.35),inset 0 1px 0 rgba(255,255,255,.35); }
  .dash-btn.ready:not(:disabled) { animation:dashReady 1.35s ease-in-out infinite; }
  .dash-btn:disabled { filter:saturate(.55); cursor:default; }
  .dash-btn .dash-ico { width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:10px;
    color:#ffe08a;background:rgba(255,177,61,.16);box-shadow:inset 0 0 12px rgba(255,190,80,.16); }
  .dash-btn .dash-ico svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
  .dash-btn .dash-copy { display:flex;flex-direction:column;align-items:flex-start;line-height:1.12;white-space:nowrap; }
  .dash-btn .dash-copy b { font-size:15px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.28); }
  .dash-btn .dash-copy small { font-size:9.5px;font-weight:800;opacity:.88;margin-top:3px; }
  @keyframes dashReady { 0%,100% {filter:brightness(1)} 50% {filter:brightness(1.22)} }
  body.horror .dash-btn { background:linear-gradient(145deg,#230611,#090208);border-color:rgba(255,42,70,.7);box-shadow:0 5px 0 #35000d,0 0 18px rgba(220,0,38,.28); }
  body.horror .dash-btn .dash-ico { color:#ff526b;background:rgba(255,25,58,.16); }
  body.horror .dash-btn.ready { border-color:#ff526b;box-shadow:0 5px 0 #35000d,0 0 22px rgba(255,0,40,.5); }
  @media (max-height:560px) { .dash-btn { bottom:58px; } }
  @media (hover:none), (pointer:coarse) {
    .dash-btn { width:126px; height:60px; right:12px; bottom:100px; border-radius:18px; }
    .dash-btn .dash-ico { width:34px; height:34px; }
    .dash-btn .dash-copy b { font-size:16px; }
    .dash-btn .dash-copy small { font-size:10px; }
  }
  .icon-btn {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff;
    background: rgba(20,40,60,.30); border: 1.5px solid rgba(255,255,255,.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 3px 0 rgba(0,0,0,.15);
    transition: transform .12s, background .2s, opacity .2s;
  }
  .icon-btn:hover { background: rgba(20,40,60,.45); }
  .icon-btn:active { transform: scale(.9); }
  .icon-btn svg { width: 20px; height: 20px; }
  .icon-btn.hidden { opacity: 0; pointer-events: none; transform: scale(.8); }

  /* ===== الأزرار العامة ===== */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; border-radius: 16px;
    font-size: 20px; font-weight: 900; color: #fff;
    background: linear-gradient(180deg, #ffb83d, #ff7a00);
    box-shadow: 0 6px 0 #c25400, 0 12px 22px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35);
    text-shadow: 0 2px 0 rgba(0,0,0,.2); transition: transform .1s, box-shadow .1s, filter .2s;
  }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #c25400, 0 4px 10px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35); }
  .btn-primary svg { width: 22px; height: 22px; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 16px;
    font-size: 17px; font-weight: 900; color: #fff;
    box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .1s, box-shadow .1s, background .2s;
  }
  .btn-ghost:hover { background: rgba(15,23,42,.6); }
  .btn-ghost:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
  .btn-ghost svg { width: 20px; height: 20px; }

  /* ===== الإيقاف المؤقت ===== */
  #scrPause { background: rgba(10,20,35,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
  .pause-ico {
    width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.96); color: var(--ink);
    display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.25);
  }
  .pause-ico svg { width: 38px; height: 38px; }
  #scrPause.show .pause-ico { animation: dropIn .45s cubic-bezier(.2,1.4,.4,1) both; }
  .pause-btns { display: flex; flex-direction: column; align-items: center; gap: 14px; }

  /* ===== انتهت اللعبة ===== */
  #scrOver { display: flex; flex-direction: column; align-items: center; padding-top: 70px; background: linear-gradient(180deg, rgba(10,16,34,.25), rgba(10,16,34,.1)); }
  #overTitle { color: #ffefc9; font-size: 48px; }
  #scrOver.win #overTitle { color: #fde047; }
  #scrOver.lose #overTitle { color: #fecaca; }
  #scrOver.show #overTitle { animation: dropIn .5s cubic-bezier(.2,1.4,.4,1) both; }
  #scrOver.win.show #overTitle { animation: dropIn .5s cubic-bezier(.2,1.4,.4,1) both, wobble 1.6s ease-in-out infinite .6s; }
  @keyframes wobble { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-30px) scale(.9); } to { opacity: 1; transform: none; } }
  #overSub { margin-top: 6px; font-size: 13.5px; font-weight: 800; padding: 5px 14px; border-radius: 999px; }
  #overSub:empty { display: none; }
  #scrOver.show #overSub { animation: rise .5s ease both .1s; }
  .card {
    margin-top: 18px; width: 316px; color: var(--ink);
    background: linear-gradient(180deg, #fffaf0, #f4e5b8);
    border: 3px solid var(--ink); border-radius: 22px;
    box-shadow: 0 8px 0 rgba(61,42,18,.35), 0 18px 40px rgba(0,0,0,.3), inset 0 2px 0 #fff;
    display: flex; align-items: center; justify-content: space-between; padding: 16px 22px;
  }
  #scrOver.show .card { animation: rise .55s cubic-bezier(.2,1.3,.4,1) both .12s; }
  #scrOver.show .over-btns { animation: rise .55s cubic-bezier(.2,1.3,.4,1) both .26s; }
  #scrOver.show .over-hint { animation: rise .55s ease both .4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
  @keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  #cardSolo, #cardVs { display: none; }
  #scrOver.solo #cardSolo { display: flex; }
  #scrOver.vs #cardVs { display: flex; }

  .stats { display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 110px; }
  .lbl { font-size: 14px; font-weight: 800; color: #d9670a; display: flex; align-items: center; gap: 6px; }
  .stat { display: flex; flex-direction: column; align-items: center; }
  .stat b { font-size: 36px; font-weight: 900; line-height: 1.15; direction: ltr; font-variant-numeric: tabular-nums; color: #fff; }
  .badge {
    display: none; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
    background: #e5484d; color: #fff; padding: 2px 8px; border-radius: 999px;
  }
  .badge svg { width: 11px; height: 11px; }
  .badge.on { display: inline-flex; animation: pulse 1s ease-in-out infinite; }

  .medal-box { --m1: #ede5c4; --m2: #cbbf8f; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .medal-box.bronze   { --m1: #f6bd88; --m2: #a35a22; }
  .medal-box.silver   { --m1: #ffffff; --m2: #8e99a8; }
  .medal-box.gold     { --m1: #fff29e; --m2: #d68f00; }
  .medal-box.platinum { --m1: #f4fcff; --m2: #6f9bd1; }
  #medalSvg { width: 78px; height: 94px; overflow: visible; }
  .medal-box:not(.none) #medalSvg { animation: medalIn .7s cubic-bezier(.2,1.6,.4,1) both .5s; }
  @keyframes medalIn { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
  .medal-box.none .ribbon, .medal-box.none .star, .medal-box.none .sheen-g, .medal-box.none .tw { display: none; }
  .medal-box.none .disc { stroke: #b5a978; stroke-dasharray: 5 4; }
  .medal-box.none .ring { display: none; }
  .medal-name { font-size: 13px; font-weight: 800; color: var(--ink); }
  .medal-box.none .medal-name { color: #9a8d5c; font-size: 12px; }
  .sheen { animation: sheen 2.8s ease-in-out infinite 1.2s; }
  @keyframes sheen { 0% { transform: translateX(-50px) skewX(-20deg); } 55%, 100% { transform: translateX(120px) skewX(-20deg); } }
  .tw { transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite; }
  .tw.t2 { animation-delay: .9s; }
  @keyframes twinkle { 0%,100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }

  .vcol { display: flex; flex-direction: column; align-items: center; width: 92px; position: relative; }
  .vcol b { font-size: 44px; font-weight: 900; line-height: 1.1; direction: ltr; font-variant-numeric: tabular-nums; color: #fff; }
  .vcol .av { width: 34px; height: 34px; margin-bottom: 2px; }
  .vcol .crown { position: absolute; top: -26px; width: 30px; height: 30px; color: #f59e0b; display: none; filter: drop-shadow(0 2px 0 var(--ink)); }
  .vcol.win .crown { display: block; animation: crownIn .6s cubic-bezier(.2,1.6,.4,1) both .55s, floaty 2s ease-in-out infinite 1.2s; }
  @keyframes crownIn { from { opacity: 0; transform: translateY(-20px) scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .vmid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .vmid .vsx { font-size: 24px; font-weight: 900; color: #d9670a; font-style: italic; }
  .dpill { font-size: 12px; font-weight: 900; color: #fff; padding: 2px 10px; border-radius: 999px; background: var(--dc, #3b82f6); }
  .vrec { font-size: 11px; font-weight: 800; color: #8a6d3b; white-space: nowrap; }

  .over-btns { margin-top: 26px; display: flex; gap: 12px; align-items: center; }
  .over-hint { margin-top: 14px; }
  .hint.glass { background: rgba(15,23,42,.38); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; }
  }

  .blob { filter: none; will-change: transform; }
  body.playing .blob, body.playing #wrap::before, body.playing #wrap::after { animation-play-state: paused; }
  .menu-btns { top: 282px; gap: 10px; }
  .mbtn { height: 56px; }
  .mbtn.duo {
    background: linear-gradient(180deg, #5eead4, #14b8a6 70%, #0f766e);
    box-shadow: 0 6px 0 #115e59, 0 14px 26px rgba(20,184,166,.4), inset 0 2px 0 rgba(255,255,255,.35);
  }
  .mbtn.duo:active { box-shadow: 0 2px 0 #115e59, 0 6px 12px rgba(20,184,166,.3), inset 0 2px 0 rgba(255,255,255,.35); }
  .mbtn.duo::after { animation-delay: 2.6s; }
  body.duo .vp.bot .dot, body.duo .av.bot { background: #2dd4bf !important; }
  body.impossible { background:#240711 !important; color:#fff0f1; }
  body.impossible .blob { --c:#c51f3a; opacity:.46; }
  body.impossible #wrap::before, body.impossible #wrap::after {
    background:conic-gradient(from var(--ang),#ff8a7d,#a71935,#5c0b26,#ee4c55,#ffb08a) !important;
  }
  body.impossible #stage { background:#8d2e40; box-shadow:0 28px 80px rgba(0,0,0,.62),0 0 28px rgba(180,20,48,.2); }
  body.impossible .glass { background:rgba(55,5,18,.42); border-color:rgba(255,178,178,.26); }
  body.impossible .dash-btn { background:linear-gradient(145deg,#591126,#260713); border-color:rgba(255,135,145,.6); }
  body.impossible .dash-btn .dash-ico { color:#ffb4aa; background:rgba(255,75,83,.15); }
  body.impossible #score { color:#ffe1dc; text-shadow:0 0 9px rgba(255,60,70,.42),0 4px 0 #4b1020; }

  body.horror .blob { --c:#7f0000; opacity: .7; }
  body.horror #wrap::before, body.horror #wrap::after {
    background: conic-gradient(from var(--ang), #120008, #ff1538, #31000e, #7b001d, #050006, #ff1538) !important;
    animation: horrorBorder 2.6s ease-in-out infinite alternate !important;
  }
  @keyframes horrorBorder { 0% { filter: brightness(.72); opacity: .82; } 100% { filter: brightness(1.55); opacity: 1; } }
  body.horror { background: #030106 !important; color: #ffe4e8; }
  body.horror .aurora::after {
    background-image: radial-gradient(rgba(255,30,55,.14) 1px, transparent 1.5px);
    background-size: 22px 22px; opacity: .45;
  }
  body.horror #stage {
    background: #090208;
    box-shadow: 0 28px 90px rgba(0,0,0,.92), 0 0 34px rgba(155,0,28,.32), inset 0 0 28px rgba(0,0,0,.7);
  }
  body.horror #stage::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(8,0,8,.25) 62%, rgba(0,0,0,.82) 100%),
      repeating-linear-gradient(0deg, rgba(255,20,45,.035) 0 1px, transparent 1px 5px);
    box-shadow: inset 0 0 45px rgba(255,0,35,.15);
    animation: horrorVignette 4.5s ease-in-out infinite alternate;
  }
  body.horror #game { filter: contrast(1.13) saturate(.9) brightness(.88); }
  body.horror #ui { z-index: 2; }
  @keyframes horrorVignette { from { opacity: .72; } to { opacity: 1; } }
  body.horror .glass {
    background: rgba(16,0,9,.76) !important; border-color: rgba(255,48,75,.42) !important;
    box-shadow: inset 0 0 12px rgba(110,0,25,.18), 0 5px 18px rgba(0,0,0,.35);
  }
  body.horror .icon-btn, body.horror .btn-ghost {
    color: #ffe3e7; background: linear-gradient(145deg, #290713, #080207) !important;
    border: 1px solid rgba(255,50,77,.65); box-shadow: 0 4px 0 #35000d, 0 0 15px rgba(210,0,38,.22);
  }
  body.horror .icon-btn:hover, body.horror .btn-ghost:hover { background: linear-gradient(145deg, #4a0918, #10030a) !important; }
  body.horror .btn-primary {
    color: #fff0f2; background: linear-gradient(180deg, #a30b2b, #39000f 78%, #1b0008) !important;
    box-shadow: 0 6px 0 #170006, 0 12px 26px rgba(220,0,42,.3), inset 0 1px 0 rgba(255,140,155,.28);
    border: 1px solid rgba(255,80,100,.5);
  }
  body.horror .btn-primary:active { box-shadow: 0 2px 0 #170006, 0 4px 10px rgba(0,0,0,.4); }
  body.horror #score, body.horror #cd {
    color: #ff294b; text-shadow: 0 0 7px #ff002b, 0 0 20px rgba(255,0,35,.8), 0 4px 0 #140006;
  }
  body.horror #cd.go { color: #fff0f0; }
  body.horror .vp {
    background: linear-gradient(145deg, rgba(35,0,12,.94), rgba(7,0,7,.96));
    border-color: rgba(255,40,65,.48); color: #ffe3e7;
  }
  body.horror .vp.me .dot, body.horror .vp.bot .dot { background: #d80b31; box-shadow: 0 0 10px #ff1538; }
  body.horror .vp.lead { box-shadow: 0 0 0 2px #ff1e42, 0 0 22px rgba(255,0,40,.45); }
  body.horror .vs-mid { color: #ff4761; text-shadow: 0 0 9px #c0002b; }
  body.horror #toast {
    background: linear-gradient(90deg, #160008, #850019, #160008);
    border: 1px solid rgba(255,60,80,.6); box-shadow: 0 0 24px rgba(255,0,40,.38);
    color: #fff0f2;
  }
  body.horror #scrPause { background: rgba(4,0,6,.82); }
  body.horror .pause-ico {
    color: #ff3856; background: radial-gradient(circle at 35% 25%, #3d0718, #090208 72%);
    border: 2px solid #a20c2c; box-shadow: 0 0 28px rgba(255,0,40,.3), 0 6px 0 #050105;
  }
  body.horror #scrPause .title, body.horror #overTitle { color: #ff3856 !important; text-shadow: 0 0 12px rgba(255,0,40,.8), 0 4px 0 #090006; }
  body.horror #scrOver { background: linear-gradient(180deg, rgba(25,0,10,.7), rgba(4,0,6,.55)); }
  body.horror #scrOver .card {
    color: #ffe7eb; background: linear-gradient(160deg, #210711, #090308 82%);
    border: 2px solid #8e1230; box-shadow: 0 8px 0 #050105, 0 18px 38px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,110,130,.18);
  }
  body.horror #scrOver .lbl { color: #ff7185; }
  body.horror #scrOver .stat b, body.horror #scrOver .vcol b { color: #fff1f3; text-shadow: 0 0 9px rgba(255,0,45,.45); }
  body.horror #scrOver .medal-name { color: #ffc5cf; }
  body.horror #scrOver .dpill { background: #8e1230; }
  body.horror #scrOver .btn-ghost { color: #ffdce2; }
  body.horror .dcard.imp {
    background: linear-gradient(145deg, rgba(48,0,14,.95), rgba(5,0,7,.98));
    border-color: #ff2348; box-shadow: 0 0 0 1px rgba(255,30,60,.28), 0 0 26px rgba(255,0,40,.32);
  }
  body.horror .dcard.imp b, body.horror .dcard.imp small { color: #ffe0e5; }

  /* ===== متجر العصافير الفاخر ===== */
  .menu-btns { top: 258px; gap: 9px; }
  .menu-stats { top: 456px; }
  .mbtn.shop {
    position: absolute; top: 194px; left: 54px; width: 292px; height: 48px; border-radius: 18px;
    padding: 0 12px; gap: 10px; color: #fff;
    background: linear-gradient(110deg, #f5c95b 0%, #df8e25 38%, #b96b23 68%, #8c4d22 100%);
    border: 1px solid rgba(255,238,180,.58);
    box-shadow: 0 5px 0 #743d1d, 0 12px 24px rgba(218,139,42,.32), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .mbtn.shop .ico { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.2); }
  .mbtn.shop .ico svg { width: 21px; height: 21px; }
  .mbtn.shop .txt b { font-size: 16px; }
  .mbtn.shop .txt small { font-size: 10px; }
  .shop-short-wallet { display:flex; align-items:center; gap:3px; padding:4px 8px; border-radius:999px; background:rgba(50,25,8,.2); font-size:12px; font-weight:900; white-space:nowrap; }
  .shop-short-wallet b { direction:ltr; font-variant-numeric:tabular-nums; }
  #scrMenu.show .mbtn.shop { animation: rise .6s cubic-bezier(.2,1.3,.4,1) both .21s; }
  #scrShop { background: linear-gradient(180deg, rgba(10,18,38,.42), rgba(10,16,34,.72)); }
  .shop-head { position:absolute; top:30px; left:20px; right:20px; display:flex; align-items:center; gap:12px; }
  .shop-head h2 { font-size:25px; line-height:1.2; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.22); }
  .shop-head p { font-size:11.5px; font-weight:700; opacity:.86; margin-top:3px; }
  .shop-wallet { position:absolute; top:91px; left:20px; right:20px; height:43px; border-radius:15px; display:flex; align-items:center; gap:7px; padding:0 12px; }
  .wallet-coin { font-size:20px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
  #shopCoins { font-size:20px; font-weight:900; direction:ltr; font-variant-numeric:tabular-nums; color:#ffe18a; text-shadow:0 2px 0 rgba(0,0,0,.3); }
  .shop-wallet small { font-size:10px; font-weight:800; opacity:.85; }
  .wallet-hint { margin-inline-start:auto; font-size:10px; font-weight:700; opacity:.8; white-space:nowrap; }
  .shop-tabs { position:absolute; top:146px; left:18px; right:18px; height:39px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .shop-tab { border-radius:13px; font-size:12px; font-weight:900; color:#fff; border:1px solid rgba(255,255,255,.18); background:rgba(15,23,42,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.13); transition:transform .16s,filter .2s,background .2s; }
  .shop-tab:hover { filter:brightness(1.16); transform:translateY(-2px); }
  .shop-tab.active { color:#4b2c13; background:linear-gradient(180deg,#ffe69a,#f6b83e); border-color:#fff0b6; box-shadow:0 4px 0 #a96321,0 7px 15px rgba(247,177,49,.2),inset 0 1px 0 #fff; }
  .shop-grid { position:absolute; top:195px; left:16px; right:16px; bottom:55px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:137px; gap:10px; padding:3px 3px 12px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,219,125,.65) rgba(255,255,255,.08); pointer-events:auto; align-content:start; }
  .shop-card { min-width:0; position:relative; overflow:hidden; border-radius:17px; padding:9px; display:flex; flex-direction:column; gap:5px; background:linear-gradient(150deg,rgba(31,45,72,.92),rgba(13,22,42,.86)); border:1px solid rgba(255,255,255,.2); box-shadow:0 7px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.13); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .18s,border-color .2s,box-shadow .2s; }
  .shop-card::before { content:""; position:absolute; width:82px; height:82px; top:-42px; left:-25px; border-radius:50%; background:var(--glow,#f6bd4b); filter:blur(28px); opacity:.3; pointer-events:none; }
  .shop-card:hover { transform:translateY(-2px); border-color:rgba(255,225,145,.65); box-shadow:0 10px 20px rgba(0,0,0,.27),0 0 0 1px rgba(255,220,130,.12); }
  @keyframes shopCardIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
  .shop-card { animation:shopCardIn .38s cubic-bezier(.2,1.2,.35,1) both; }
  .shop-card:nth-child(2) { animation-delay:.035s; } .shop-card:nth-child(3) { animation-delay:.07s; }
  .shop-card:nth-child(4) { animation-delay:.105s; } .shop-card:nth-child(5) { animation-delay:.14s; }
  .shop-card:nth-child(6) { animation-delay:.175s; }
  .shop-card > * { position:relative; }
  .shop-card-top { display:flex; align-items:center; gap:7px; min-height:39px; }
  .shop-preview { position:relative; width:38px; height:38px; flex:none; border-radius:13px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.2); }
  .preview-bird::before { content:""; width:25px; height:21px; border-radius:55% 50% 48% 55%; background:radial-gradient(circle at 30% 24%,var(--c0),var(--c1) 55%,var(--c2)); box-shadow:inset -2px -3px 0 rgba(0,0,0,.12),0 3px 7px rgba(0,0,0,.2); transform:rotate(-7deg); }
  .preview-bird::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; right:7px; top:10px; box-shadow:inset -2px -1px 0 #382016; }
  .preview-trail::before { content:none; }
  .preview-jump::before { content:""; width:24px; height:24px; border:3px solid var(--accent,#ffd66b); border-radius:50%; box-shadow:0 0 9px var(--accent,#ffd66b),inset 0 0 5px var(--accent,#ffd66b); animation:storePulse 1.5s ease-out infinite; }
  @keyframes storeSpark { 0%,100%{transform:rotate(0) scale(.86)} 50%{transform:rotate(18deg) scale(1.12)} }
  @keyframes storePulse { 0%,100%{transform:scale(.8);opacity:.65} 50%{transform:scale(1.05);opacity:1} }
  .shop-card-copy { min-width:0; display:flex; flex-direction:column; gap:1px; }
  .shop-card-copy b { font-size:12px; font-weight:900; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .shop-card-copy small { font-size:9px; line-height:1.35; opacity:.78; font-weight:700; }
  .shop-card-desc { font-size:9px; font-weight:700; opacity:.75; line-height:1.3; min-height:22px; }
  .shop-card-foot { margin-top:auto; display:flex; align-items:center; gap:5px; justify-content:space-between; }
  .shop-price { font-size:10px; font-weight:900; color:#ffe39a; white-space:nowrap; }
  .shop-buy { position:relative; overflow:hidden; height:29px; min-width:76px; max-width:100%; padding:0 9px; border-radius:10px; font-size:10px; font-weight:900; color:#57300d; background:linear-gradient(180deg,#ffe89e,#f4b83d); border:1px solid rgba(255,255,255,.45); box-shadow:0 3px 0 #a96321,0 5px 10px rgba(0,0,0,.16),inset 0 1px 0 #fff; transition:transform .12s,filter .2s; white-space:nowrap; }
  .shop-buy::after { content:""; position:absolute; top:-40%; bottom:-40%; left:-55px; width:24px; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:shopShine 3.2s ease-in-out infinite; pointer-events:none; }
  @keyframes shopShine { 0%,65% { left:-55px; } 100% { left:130%; } }
  .shop-buy:hover { filter:brightness(1.1); transform:translateY(-1px); }
  .shop-buy:active { transform:translateY(2px); box-shadow:0 1px 0 #a96321; }
  .shop-buy.owned { color:#e9fff4; background:linear-gradient(180deg,#43c89b,#13896a); box-shadow:0 3px 0 #075b47,0 5px 10px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.35); }
  .shop-buy.equipped { color:#fff7d6; background:linear-gradient(180deg,#7d80a7,#45496c); box-shadow:0 3px 0 #292d4c; cursor:default; }
  .shop-buy:disabled { opacity:.92; }
  .shop-tip { position:absolute; left:18px; right:18px; bottom:11px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:9.5px; font-weight:800; color:#fff3d0; }
  body.horror #scrShop .shop-card { background:linear-gradient(150deg,rgba(38,5,18,.94),rgba(10,2,9,.94)); border-color:rgba(255,50,75,.32); }
  body.horror #scrShop .shop-tab.active { color:#fff0f2; background:linear-gradient(180deg,#9e1432,#4b071b); border-color:#ef4763; box-shadow:0 4px 0 #23000b,0 0 15px rgba(255,0,40,.24); }
  body.horror #scrShop .shop-buy { color:#ffe8ec; background:linear-gradient(180deg,#a31535,#4a071a); border-color:rgba(255,100,120,.45); box-shadow:0 3px 0 #24000b,0 0 10px rgba(255,0,40,.2); }
  @media (max-height:560px) { .shop-grid { bottom:48px; grid-auto-rows:124px; } .shop-card { padding:7px; } }


  /* ===== قائمة رئيسية موحدة + متجر مقروء ===== */
  .menu-btns { top:190px !important; gap:7px !important; }
  .menu-btns .mbtn { position:relative !important; top:auto !important; left:auto !important; width:292px !important; height:46px !important; min-height:46px; border-radius:16px; padding:0 12px; gap:10px; }
  .menu-btns .mbtn .ico { width:34px; height:34px; flex:none; }
  .menu-btns .mbtn .ico svg { width:21px; height:21px; }
  .menu-btns .mbtn .txt b { font-size:17px; line-height:1.2; }
  .menu-btns .mbtn .txt small { font-size:10px; line-height:1.2; }
  .menu-btns .mbtn.shop { background:linear-gradient(110deg,#f8d875,#e8a52e 42%,#c77b25); border:1px solid rgba(255,240,190,.7); box-shadow:0 4px 0 #80501c,0 9px 19px rgba(218,139,42,.25),inset 0 1px 0 rgba(255,255,255,.55); }
  .menu-btns .mbtn.updates { color:#fff; background:linear-gradient(110deg,#62b9f8,#397fda 52%,#3154b9); border:1px solid rgba(200,233,255,.55); box-shadow:0 4px 0 #203d85,0 9px 19px rgba(44,112,205,.3),inset 0 1px 0 rgba(255,255,255,.4); }
  .menu-btns .mbtn.updates:active { box-shadow:0 1px 0 #203d85,0 3px 8px rgba(44,112,205,.25); }
  .menu-btns .shop-short-wallet { display:flex; align-items:center; gap:4px; padding:3px 7px; border-radius:999px; background:rgba(70,42,8,.2); font-size:11px; font-weight:900; white-space:nowrap; }
  .shop-short-wallet svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .shop-short-wallet b { direction:ltr; font-size:12px; font-variant-numeric:tabular-nums; }
  #scrMenu.show .mbtn.shop { animation:rise .6s cubic-bezier(.2,1.3,.4,1) both .42s; }
  #scrMenu.show .mbtn.updates { animation:rise .6s cubic-bezier(.2,1.3,.4,1) both .49s; }
  .menu-stats { top:462px !important; }
  .foot { font-size:10.5px; }

  .shop-head { top:22px; }
  .shop-head h2 { font-size:29px; letter-spacing:-.3px; }
  .shop-head p { font-size:13px; }
  .shop-wallet { top:82px; height:48px; border-radius:16px; padding:0 14px; gap:9px; }
  .wallet-coin { width:25px; height:25px; flex:none; fill:none; stroke:#ffd66d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 4px rgba(255,198,70,.35)); }
  #shopCoins { font-size:25px; }
  .shop-wallet small { font-size:12px; }
  .wallet-hint { font-size:11px; }
  .shop-tabs { top:140px; height:43px; gap:8px; }
  .shop-tab { display:flex; align-items:center; justify-content:center; gap:5px; border-radius:13px; font-size:14px; font-weight:900; }
  .shop-tab svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .shop-grid { top:194px; bottom:53px; grid-auto-rows:232px; gap:11px; padding:4px 4px 14px; }
  .shop-card { border-radius:19px; padding:11px; gap:7px; }
  .shop-card-top { min-height:48px; gap:8px; }
  .shop-preview { width:46px; height:46px; border-radius:14px; }
  .shop-preview svg { width:29px; height:29px; fill:none; stroke:var(--accent,#ffe08a); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .shop-card-copy { gap:3px; }
  .shop-card-copy b { font-size:15px; line-height:1.35; white-space:normal; }
  .shop-card-copy small { font-size:11px; line-height:1.35; }
  .shop-card-desc { font-size:11px; line-height:1.4; min-height:27px; }
  .shop-price-options { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
  .shop-offer { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:51px; padding:5px 7px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.055); }
  .shop-offer-copy { min-width:0; display:flex; flex-direction:column; gap:1px; }
  .shop-offer-copy small { font-size:10px; font-weight:800; opacity:.83; white-space:nowrap; }
  .shop-offer-copy b { font-size:19px; line-height:1.1; color:#ffe39a; direction:ltr; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .shop-buy { height:37px; min-width:74px; padding:0 8px; border-radius:10px; font-size:11px; font-weight:900; }
  .shop-buy.permanent { color:#fff; background:linear-gradient(180deg,#7f83ef,#4c48bc); border-color:rgba(220,220,255,.5); box-shadow:0 3px 0 #302e80,0 5px 10px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.3); }
  .shop-buy.trial { color:#56300c; background:linear-gradient(180deg,#ffe99f,#efb538); }
  .shop-buy.owned { width:100%; height:39px; font-size:13px; }
  .shop-buy.equipped { width:100%; height:39px; font-size:13px; }
  .shop-state { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:900; color:#a8f4d6; }
  .shop-state svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .shop-tip { bottom:9px; height:36px; gap:8px; font-size:11px; padding:0 9px; }
  .shop-tip svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  body.horror #scrShop .shop-offer { background:rgba(255,20,55,.06); border-color:rgba(255,65,90,.22); }
  body.horror #scrShop .shop-offer-copy b { color:#ffb9c4; }
  body.horror #scrShop .shop-buy.permanent { background:linear-gradient(180deg,#66132a,#260711); box-shadow:0 3px 0 #120006,0 0 10px rgba(255,0,40,.2); }
  .preview-trail::before { content:none !important; }
  .preview-trail { background:radial-gradient(circle, color-mix(in srgb, var(--accent,#ffe08a) 28%, transparent), rgba(255,255,255,.035)) !important; box-shadow:inset 0 0 16px color-mix(in srgb, var(--accent,#ffe08a) 22%, transparent),0 0 12px color-mix(in srgb, var(--accent,#ffe08a) 28%, transparent); }
  .preview-trail svg { filter:drop-shadow(0 0 4px var(--accent,#ffe08a)) drop-shadow(0 0 9px var(--accent,#ffe08a)); stroke-width:2.35 !important; }
  .preview-trail svg, .preview-jump svg { animation:storeSpark 1.5s ease-in-out infinite; }

  /* ===== شاشة آخر التحديثات ===== */
  #scrUpdates { background:linear-gradient(180deg,rgba(10,18,38,.45),rgba(10,16,34,.82)); }
  .updates-head { position:absolute; top:24px; left:20px; right:20px; display:flex; align-items:center; gap:11px; }
  .updates-head h2 { font-size:27px; font-weight:900; line-height:1.2; }
  .updates-head p { font-size:12px; font-weight:700; opacity:.83; margin-top:3px; }
  .updates-version { margin-inline-start:auto; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:900; color:#eaf4ff; background:linear-gradient(120deg,#397bd1,#5b52bf); border:1px solid rgba(255,255,255,.25); white-space:nowrap; }
  .updates-body { position:absolute; top:108px; left:17px; right:17px; bottom:20px; display:flex; flex-direction:column; gap:11px; overflow-y:auto; padding:4px 3px 12px; scrollbar-width:thin; }
  .update-card { display:flex; align-items:flex-start; gap:11px; padding:13px 12px; min-height:91px; border-radius:17px; background:linear-gradient(145deg,rgba(27,43,70,.91),rgba(11,20,39,.91)); border:1px solid rgba(255,255,255,.17); box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12); animation:shopCardIn .38s cubic-bezier(.2,1.2,.35,1) both; }
  .update-icon { width:39px; height:39px; flex:none; border-radius:12px; display:grid; place-items:center; color:#ffe092; background:rgba(255,210,105,.12); border:1px solid rgba(255,225,150,.22); }
  .update-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .update-card b { display:block; font-size:15px; font-weight:900; line-height:1.35; margin-bottom:4px; }
  .update-card p { font-size:11.5px; line-height:1.55; font-weight:700; opacity:.82; }
  body.horror #scrUpdates .update-card { background:linear-gradient(145deg,rgba(42,5,18,.95),rgba(9,2,8,.95)); border-color:rgba(255,50,75,.3); }
  body.horror #scrUpdates .update-icon { color:#ff768d; background:rgba(255,0,45,.12); border-color:rgba(255,50,75,.28); }

  /* ===== احتفال النقاط بعد العشرة ===== */
  #scoreCelebrate { position:absolute; top:132px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:0; opacity:0; pointer-events:none; z-index:4; transform:translateY(12px) scale(.75); }
  #scoreCelebrate .celebrate-symbol { width:33px; height:33px; color:#fff0a8; filter:drop-shadow(0 0 8px rgba(255,209,74,.9)); }
  #scoreCelebrate .celebrate-symbol svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #scoreCelebrate b { font-size:34px; line-height:1; font-weight:900; color:#fff1a6; text-shadow:0 2px 0 #a75d12,0 0 18px rgba(255,204,70,.8); direction:ltr; font-variant-numeric:tabular-nums; }
  #scoreCelebrate small { margin-top:4px; font-size:12px; font-weight:900; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.45); }
  #scoreCelebrate.show { animation:scoreCelebrateIn .9s cubic-bezier(.2,1.4,.35,1) both; }
  #scoreCelebrate.show.major .celebrate-symbol { animation:celebrateSpin .85s ease-out both; }
  #scoreCelebrate.show.major b { color:#fff; text-shadow:0 0 10px #fff,0 0 25px #ffc83e,0 3px 0 #99520c; }
  @keyframes scoreCelebrateIn { 0%{opacity:0;transform:translateY(20px) scale(.5)} 18%{opacity:1;transform:translateY(-4px) scale(1.1)} 32%,70%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-24px) scale(.86)} }
  @keyframes celebrateSpin { from{transform:rotate(-45deg) scale(.4)} to{transform:rotate(0) scale(1.12)} }
  body.horror #scoreCelebrate b { color:#ffb4c0; text-shadow:0 0 14px rgba(255,0,45,.9),0 3px 0 #4b0012; }
  body.horror #scoreCelebrate .celebrate-symbol { color:#ff5775; }
  @media (max-height:560px) {
    .menu-btns { top:174px !important; gap:5px !important; }
    .menu-btns .mbtn { height:42px !important; min-height:42px; }
    .menu-stats { top:405px !important; }
    .shop-grid { bottom:48px; grid-auto-rows:205px; }
    .shop-card { padding:8px; }
    .shop-offer { min-height:46px; }
  }



  /* ===== تحسين المسافات والحجم: القائمة والمتجر ===== */
  .menu-btns {
    top:180px !important;
    gap:11px !important;
  }
  .menu-btns .mbtn {
    width:310px !important;
    height:51px !important;
    min-height:51px !important;
    padding:0 14px !important;
    gap:12px !important;
    border-radius:18px !important;
  }
  .menu-btns .mbtn .ico {
    width:38px !important;
    height:38px !important;
    border-radius:13px !important;
  }
  .menu-btns .mbtn .ico svg { width:23px !important; height:23px !important; }
  .menu-btns .mbtn .txt b { font-size:18px !important; line-height:1.2; }
  .menu-btns .mbtn .txt small { font-size:11px !important; line-height:1.2; }
  .menu-btns .mbtn .arr { width:23px; height:23px; }
  .menu-btns .shop-short-wallet { padding:4px 8px; gap:5px; }
  .menu-btns .shop-short-wallet b { font-size:13px; }
  .menu-stats { top:493px !important; }

  /* كروت المتجر بعرض كامل لتفادي تزاحم النصوص وأزرار الشراء */
  .shop-grid {
    top:194px !important;
    bottom:53px !important;
    left:14px !important;
    right:14px !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-rows:250px !important;
    gap:16px !important;
    padding:6px 5px 16px !important;
  }
  .shop-card {
    width:100%;
    min-width:0;
    min-height:240px;
    border-radius:21px !important;
    padding:14px 16px !important;
    gap:9px !important;
    overflow:visible;
    box-shadow:0 10px 23px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.16);
  }
  .shop-card-top { min-height:50px !important; gap:11px !important; }
  .shop-preview { width:50px !important; height:50px !important; border-radius:15px !important; }
  .shop-preview svg { width:30px !important; height:30px !important; }
  .shop-card-copy { min-width:0; gap:3px !important; }
  .shop-card-copy b { font-size:17px !important; line-height:1.3 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  .shop-card-copy small { font-size:12px !important; line-height:1.35 !important; }
  .shop-card-desc { font-size:12px !important; line-height:1.4 !important; min-height:27px !important; }
  .shop-price-options {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:10px !important;
    margin-top:auto !important;
    min-width:0;
  }
  .shop-offer {
    min-width:0;
    min-height:100px !important;
    padding:9px 10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    gap:7px !important;
    border-radius:15px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035)) !important;
  }
  .shop-offer-copy { min-width:0; width:100%; align-items:center; gap:3px !important; }
  .shop-offer-copy small { font-size:11px !important; line-height:1.3; text-align:center; white-space:normal !important; }
  .shop-offer-copy b { font-size:23px !important; line-height:1.12 !important; text-align:center; }
  .shop-buy {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:42px !important;
    min-height:42px;
    padding:0 10px !important;
    border-radius:13px !important;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:0;
    white-space:normal !important;
    line-height:1.15;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 4px 0 #a96321,0 7px 13px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.62);
  }
  .shop-buy.permanent { box-shadow:0 4px 0 #302e80,0 7px 13px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4) !important; }
  .shop-buy.trial { box-shadow:0 4px 0 #a96321,0 7px 13px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.65) !important; }
  .shop-price-options:has(.shop-state) {
    display:flex !important;
    flex-direction:column;
    gap:9px !important;
  }
  .shop-price-options:has(.shop-state) .shop-state { width:100%; font-size:12px !important; }
  .shop-price-options:has(.shop-state) .shop-buy { width:100% !important; height:43px !important; font-size:14px !important; }
  .shop-buy:focus-visible { outline:3px solid #fff2bd; outline-offset:3px; }
  .shop-offer:hover { border-color:rgba(255,224,145,.5) !important; background:rgba(255,255,255,.095) !important; }
  body.horror #scrShop .shop-offer { background:linear-gradient(145deg,rgba(255,20,55,.12),rgba(35,0,10,.2)) !important; }
  body.horror #scrShop .shop-buy { border-color:rgba(255,100,120,.55); }

  @media (max-height:560px) {
    .menu-btns { top:164px !important; gap:8px !important; }
    .menu-btns .mbtn { width:304px !important; height:45px !important; min-height:45px !important; }
    .menu-btns .mbtn .ico { width:34px !important; height:34px !important; }
    .menu-btns .mbtn .txt b { font-size:16px !important; }
    .menu-btns .mbtn .txt small { font-size:10px !important; }
    .menu-stats { top:431px !important; }
    .shop-grid { bottom:48px !important; grid-auto-rows:224px !important; gap:12px !important; }
    .shop-card { min-height:214px; padding:11px 13px !important; }
    .shop-offer { min-height:91px !important; padding:7px !important; }
    .shop-offer-copy b { font-size:20px !important; }
    .shop-buy { height:38px !important; min-height:38px; font-size:12px !important; }
  }

  /* ===== لمسة القائمة النهائية: زر تحديثات أيقوني وأزرار أكبر ===== */
  .menu-updates-icon {
    position:absolute !important;
    top:13px !important;
    right:14px !important;
    z-index:8 !important;
    width:48px !important;
    height:48px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:16px !important;
    color:#fff !important;
    background:linear-gradient(145deg,#7dd3fc 0%,#478ee8 48%,#6552d6 100%) !important;
    border:1.5px solid rgba(235,248,255,.72) !important;
    box-shadow:0 5px 0 #284c99,0 11px 22px rgba(41,93,190,.38),inset 0 1.5px 0 rgba(255,255,255,.55) !important;
    pointer-events:auto !important;
    transition:transform .16s ease,filter .2s ease,box-shadow .16s ease !important;
  }
  .menu-updates-icon svg { width:26px !important; height:26px !important; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
  .menu-updates-icon .updates-dot { position:absolute; width:9px; height:9px; top:7px; right:7px; border-radius:50%; background:#ff5e78; border:1.5px solid #fff; box-shadow:0 0 0 3px rgba(255,94,120,.18),0 0 10px rgba(255,94,120,.65); }
  .menu-updates-icon:hover { filter:brightness(1.12); transform:translateY(-2px); }
  .menu-updates-icon:active { transform:translateY(3px) scale(.97); box-shadow:0 2px 0 #284c99,0 5px 12px rgba(41,93,190,.28),inset 0 1px 0 rgba(255,255,255,.5) !important; }
  .menu-updates-icon:focus-visible { outline:3px solid #fff0a8; outline-offset:4px; }
  #scrMenu.show .menu-updates-icon { animation:rise .55s cubic-bezier(.2,1.3,.4,1) both .12s,updatesIconGlow 2.8s ease-in-out infinite .8s; }
  @keyframes updatesIconGlow { 0%,100% { filter:drop-shadow(0 0 0 rgba(125,211,252,0)); } 50% { filter:drop-shadow(0 0 8px rgba(125,211,252,.65)); } }

  .menu-btns {
    top:184px !important;
    gap:14px !important;
  }
  .menu-btns .mbtn {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:316px !important;
    height:57px !important;
    min-height:57px !important;
    padding:0 15px !important;
    gap:13px !important;
    border-radius:19px !important;
  }
  .menu-btns .mbtn .ico { width:40px !important; height:40px !important; border-radius:14px !important; }
  .menu-btns .mbtn .ico svg { width:25px !important; height:25px !important; }
  .menu-btns .mbtn .txt b { font-size:19px !important; line-height:1.22 !important; }
  .menu-btns .mbtn .txt small { font-size:11.5px !important; line-height:1.25 !important; }
  .menu-btns .mbtn .arr { width:24px !important; height:24px !important; }
  .menu-btns .shop-short-wallet { padding:5px 9px !important; font-size:12px !important; }
  .menu-btns .shop-short-wallet b { font-size:14px !important; }
  .menu-stats { top:493px !important; }
  #scrMenu.show .mbtn.solo { animation:rise .58s cubic-bezier(.2,1.3,.4,1) both .2s; }
  #scrMenu.show .mbtn.vs { animation:rise .58s cubic-bezier(.2,1.3,.4,1) both .29s; }
  #scrMenu.show .mbtn.duo { animation:rise .58s cubic-bezier(.2,1.3,.4,1) both .38s; }
  #scrMenu.show .mbtn.shop { animation:rise .58s cubic-bezier(.2,1.3,.4,1) both .47s; }

  @media (max-height:560px) {
    .menu-btns { top:160px !important; gap:10px !important; }
    .menu-btns .mbtn { width:310px !important; height:48px !important; min-height:48px !important; }
    .menu-btns .mbtn .ico { width:35px !important; height:35px !important; }
    .menu-btns .mbtn .txt b { font-size:17px !important; }
    .menu-btns .mbtn .txt small { font-size:10.5px !important; }
    .menu-stats { top:435px !important; }
    .menu-updates-icon { width:43px !important; height:43px !important; }
  }

  /* ===== إعدادات من القائمة الرئيسية + رصيد اللعب ===== */
  .menu-settings-icon {
    position:absolute; top:13px; left:14px; z-index:8; width:48px; height:48px;
    display:grid; place-items:center; border-radius:16px; color:#fff;
    background:linear-gradient(145deg,#ffcf70 0%,#f28b38 52%,#d6535d 100%);
    border:1.5px solid rgba(255,246,220,.78);
    box-shadow:0 5px 0 #98451f,0 11px 22px rgba(214,106,57,.32),inset 0 1.5px 0 rgba(255,255,255,.55);
    transition:transform .16s ease,filter .2s ease,box-shadow .16s ease; pointer-events:auto;
  }
  .menu-settings-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
  .menu-settings-icon:hover { filter:brightness(1.12); transform:translateY(-2px) rotate(12deg); }
  .menu-settings-icon:active { transform:translateY(3px) scale(.97); box-shadow:0 2px 0 #98451f,0 5px 12px rgba(214,106,57,.25); }
  #scrMenu.show .menu-settings-icon { animation:rise .55s cubic-bezier(.2,1.3,.4,1) both .12s,settingsIconGlow 2.8s ease-in-out infinite .8s; }
  @keyframes settingsIconGlow { 0%,100%{filter:drop-shadow(0 0 0 rgba(255,190,90,0))} 50%{filter:drop-shadow(0 0 9px rgba(255,190,90,.68))} }

  .game-wallet {
    position:absolute; top:14px; right:14px; z-index:5; height:38px; min-width:82px;
    display:flex; align-items:center; justify-content:center; gap:7px; padding:0 11px;
    border-radius:13px; color:#fff5d4; opacity:0; visibility:hidden; pointer-events:none;
    background:linear-gradient(145deg,rgba(45,35,18,.78),rgba(16,25,40,.78));
    border:1.4px solid rgba(255,220,125,.62);
    box-shadow:0 4px 13px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.19);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transform:translateY(-5px) scale(.94); transition:opacity .2s,transform .25s,visibility .2s;
  }
  .game-wallet.on { opacity:1; visibility:visible; transform:none; }
  .game-wallet svg { width:21px; height:21px; flex:none; fill:none; stroke:#ffd66d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(255,205,82,.7)); }
  .game-wallet b { font-size:16px; line-height:1; font-weight:900; direction:ltr; font-variant-numeric:tabular-nums; color:#ffe7a3; text-shadow:0 2px 4px rgba(0,0,0,.42); }
  .game-wallet.wallet-pop { animation:walletPop .42s cubic-bezier(.2,1.6,.35,1); }
  @keyframes walletPop { 0%{transform:scale(.92)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }
  body.horror .game-wallet { background:linear-gradient(145deg,rgba(42,4,15,.9),rgba(8,2,8,.9)); border-color:rgba(255,67,91,.7); color:#ffdce2; }
  body.horror .game-wallet svg { stroke:#ff637a; filter:drop-shadow(0 0 6px rgba(255,0,55,.8)); }
  body.horror .game-wallet b { color:#ffc1cb; }

  #scrSettings { background:linear-gradient(180deg,rgba(10,18,38,.44),rgba(10,16,34,.82)); }
  .settings-head { position:absolute; top:34px; left:20px; right:20px; display:flex; align-items:center; gap:12px; }
  .settings-head h2 { font-size:27px; font-weight:900; line-height:1.2; }
  .settings-head p { font-size:12px; font-weight:700; opacity:.83; margin-top:3px; }
  .settings-panel { position:absolute; top:155px; left:22px; right:22px; padding:17px; border-radius:21px; box-shadow:0 15px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12); }
  .settings-row { display:flex; align-items:center; gap:11px; min-height:57px; }
  .settings-symbol { width:43px; height:43px; flex:none; border-radius:14px; display:grid; place-items:center; color:#ffe49a; background:rgba(255,209,105,.13); border:1px solid rgba(255,225,150,.25); }
  .settings-symbol svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .settings-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .settings-copy b { font-size:16px; font-weight:900; }
  .settings-copy small { font-size:11px; font-weight:700; opacity:.78; }
  .settings-toggle { position:relative; min-width:89px; height:39px; padding:0 9px 0 36px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:900; background:linear-gradient(180deg,#35c99a,#138767); border:1px solid rgba(255,255,255,.3); box-shadow:0 4px 0 #075c45,0 7px 13px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25); transition:filter .18s,transform .12s,background .2s; }
  .settings-toggle-knob { position:absolute; left:7px; top:7px; width:25px; height:25px; border-radius:8px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .2s; }
  .settings-toggle[aria-pressed="true"] { padding:0 36px 0 9px; background:linear-gradient(180deg,#e27a83,#a83248); box-shadow:0 4px 0 #6e1a2b,0 7px 13px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25); }
  .settings-toggle[aria-pressed="true"] .settings-toggle-knob { transform:translateX(50px); }
  .settings-toggle:hover { filter:brightness(1.08); }
  .settings-toggle:active { transform:translateY(2px); }
  .settings-note { margin-top:13px; padding-top:12px; border-top:1px solid rgba(255,255,255,.13); font-size:11px; line-height:1.6; font-weight:700; opacity:.72; }
  body.horror #scrSettings .settings-panel { background:linear-gradient(145deg,rgba(42,5,18,.95),rgba(9,2,8,.95)); border-color:rgba(255,50,75,.32); }
  body.horror #scrSettings .settings-symbol { color:#ff8396; background:rgba(255,0,45,.12); border-color:rgba(255,50,75,.28); }
  @media (max-height:560px) { .settings-panel { top:126px; } .settings-head { top:18px; } }
  #scrSettings .settings-panel { top:126px; bottom:15px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,220,135,.5) transparent; }
  #scrSettings .settings-panel::-webkit-scrollbar { width:5px; }
  #scrSettings .settings-panel::-webkit-scrollbar-thumb { background:rgba(255,220,135,.45); border-radius:8px; }
  .settings-section-label { margin:0 0 8px; color:#ffe19a; font-size:12px; font-weight:900; letter-spacing:.2px; }
  .settings-section-spaced { margin-top:17px; }
  .settings-control-row { margin-top:5px; }
  .settings-select { max-width:112px; min-width:94px; height:36px; padding:0 8px; border-radius:10px; color:#fff; background:rgba(12,22,40,.78); border:1px solid rgba(255,255,255,.22); font:800 11px inherit; font-family:inherit; pointer-events:auto; }
  .settings-select option { color:#172033; background:#fff; }
  .settings-volume { margin-top:11px; padding:11px 12px; border-radius:14px; background:rgba(7,15,30,.24); border:1px solid rgba(255,255,255,.12); }
  .settings-volume-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:900; margin-bottom:8px; }
  .settings-volume-head output { color:#ffe19a; direction:ltr; font-variant-numeric:tabular-nums; }
  .settings-volume input { width:100%; accent-color:#ffc45b; pointer-events:auto; }
  .settings-advanced-btn { width:100%; margin-top:13px; padding:12px 13px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; text-align:right; color:#fff; background:linear-gradient(110deg,rgba(124,58,237,.72),rgba(37,99,235,.62)); border:1px solid rgba(255,255,255,.24); box-shadow:0 5px 13px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.2); }
  .settings-advanced-btn span { display:flex; flex-direction:column; gap:3px; }
  .settings-advanced-btn b { font-size:14px; font-weight:900; }
  .settings-advanced-btn small { font-size:10px; opacity:.82; font-weight:700; }
  .settings-advanced-btn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }
  .settings-advanced-row { min-height:48px; padding:7px 0; display:flex; align-items:center; justify-content:space-between; gap:9px; border-bottom:1px solid rgba(255,255,255,.09); }
  .settings-advanced-row > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .settings-advanced-row b { font-size:12px; font-weight:900; }
  .settings-advanced-row small { font-size:9.5px; font-weight:700; opacity:.68; }
  .settings-advanced-row .settings-toggle { min-width:78px; width:78px; height:33px; flex:none; font-size:10px; padding:0 36px 0 9px; background:linear-gradient(180deg,#e27a83,#a83248); box-shadow:0 3px 0 #6e1a2b,0 5px 10px rgba(0,0,0,.15); }
  .settings-advanced-row .settings-toggle-knob { width:21px; height:21px; top:5px; left:6px; border-radius:7px; transform:none; }
  .settings-advanced-row .settings-toggle[aria-pressed="true"] { padding:0 9px 0 36px; background:linear-gradient(180deg,#35c99a,#138767); box-shadow:0 3px 0 #075c45,0 5px 10px rgba(0,0,0,.15); }
  .settings-advanced-row .settings-toggle[aria-pressed="true"] .settings-toggle-knob { transform:translateX(42px); }
  .settings-preset-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }
  .settings-preset-row button { min-height:36px; border-radius:10px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font:800 10px inherit; font-family:inherit; }
  .settings-preset-row button:active, .settings-reset-btn:active { transform:translateY(2px); }
  .settings-reset-btn { width:100%; margin-top:9px; min-height:36px; border-radius:10px; color:#ffd8dc; background:rgba(190,36,58,.2); border:1px solid rgba(255,100,120,.3); font:800 11px inherit; font-family:inherit; }
  #settingsAdvanced[hidden], #settingsBasic[hidden] { display:none !important; }
  #perfHud { position:absolute; z-index:7; top:58px; left:13px; padding:4px 8px; border-radius:8px; color:#d1fae5; background:rgba(2,12,20,.72); border:1px solid rgba(167,243,208,.3); font:800 9px/1.2 ui-monospace,monospace; direction:ltr; pointer-events:none; opacity:0; transition:opacity .2s; }
  #perfHud.on { opacity:1; }
  body.performance-lite .blob { animation:none !important; filter:blur(42px) !important; opacity:.24 !important; }
  body.performance-lite .aurora::after { opacity:.45; }
  body.no-background-fx .blob { animation:none !important; opacity:.12 !important; filter:blur(35px) !important; }
  body.no-background-fx .aurora::after { opacity:.12; }
  body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  body.no-glow #game { filter:none !important; }
  body.horror #scrSettings .settings-advanced-btn { background:linear-gradient(110deg,rgba(145,12,42,.8),rgba(57,4,21,.8)); border-color:rgba(255,70,90,.28); }
  @media (max-height:560px) { #scrSettings .settings-panel { top:105px; bottom:8px; } .settings-head { top:12px; } }

  .preview-bird::before, .preview-bird::after { content:none !important; display:none !important; }
  .preview-bird svg { width:48px !important; height:43px !important; overflow:visible; filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); }



/* ===== v2.5: أداء أخف + تحسينات التصميم والحركة ===== */
#wrap::before { animation: none; }
#wrap::after { display: none; }
.glass, .dcard, .shop-card, .icon-btn, .game-wallet, #scrPause, .back { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.glass { background: rgba(15,23,42,.66); }
.icon-btn { background: rgba(20,40,60,.58); }
.game-wallet { background: linear-gradient(145deg,rgba(45,35,18,.92),rgba(16,25,40,.92)); }
body .blob { filter: none !important; }
body.playing .screen:not(.show) * { animation-play-state: paused !important; }
.logo span { filter: drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 10px 8px rgba(0,0,0,.22)); }
.dash-btn.ready:not(:disabled) { animation: none; }
.mbtn { will-change: transform; transition: transform .18s cubic-bezier(.2,1.3,.4,1), box-shadow .15s, filter .2s; }
.mbtn:hover { transform: translateY(-3px) scale(1.015); }
.dcard:hover { transform: translateY(-4px) scale(1.025); }
.shop-card > .shop-new { position: absolute; top: 10px; left: 12px; z-index: 2; font-size: 11px; font-weight: 900; padding: 2px 10px; border-radius: 999px; color: #4b2c13; background: linear-gradient(180deg,#ffe99f,#f4b83d); box-shadow: 0 2px 0 #a96321; }
.shop-card.is-new::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(255,226,140,.5); }
.shop-card.just-bought { animation: boughtPop .7s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes boughtPop { 0% { transform: scale(1); } 35% { transform: scale(1.045); box-shadow: 0 0 0 3px rgba(125,255,200,.7), 0 0 28px rgba(125,255,200,.5); } 100% { transform: scale(1); } }
.shop-tab:active, .btn-primary:active, .btn-ghost:active { transform: translateY(3px) scale(.98); }
.update-card:nth-child(1) { border-color: rgba(255,226,140,.5); }
.update-card:nth-child(2) { animation-delay: .06s; } .update-card:nth-child(3) { animation-delay: .12s; }
.update-card:nth-child(4) { animation-delay: .18s; } .update-card:nth-child(5) { animation-delay: .24s; }