/* ═══ KYO PAL — نظام تصميم عصري نظيف (minimal SaaS) — 2026-07-24 ═══ */
  :root{
    --bg:#f5f6f8;--bg2:#eceef2;--surface:#ffffff;--surface2:#fafbfc;--line:#e3e6eb;
    --text:#15171c;--muted:#636b78;
    /* — لون الهوية. الأسماء الصحيحة هي --accent*؛ و--gold/--gold-deep مرادفات
         محفوظة لأن ١٠٨ مرجع قائم في app.js/style.css يستخدمها (لا نكسرها وسط بطولة حيّة).
         الكود الجديد يستخدم --accent*. كل قيمة أدناه متحقَّق منها بحساب WCAG فعلي: — */
    --accent:#cb201f;         /* آمن في الاتجاهين: نص على أبيض 5.42:1 ✓AA، وكخلفية مع نص أبيض 5.42:1 ✓AA
                                 (كان #e13c3b = 4.16:1 ✗ وهو مستخدم لنص صغير مثل عمود النقاط) */
    --accent-btn:#cb201f;     /* خلفية الأزرار — نص أبيض = 5.42:1 ✓AA */
    --accent-strong:#b3282a;  /* النص الصغير على فاتح = 6.45:1 ✓AA */
    --accent-on:#ffffff;
    --gold:var(--accent);--gold-deep:var(--accent-strong);
    --purple:#6d5ef7;--pink:#f3a6c9;
    --danger:#dc2626;--good:#16a34a;
    /* — مراكز التتويج: مصدر واحد يوحّد جدول الترتيب ولوحة الشرف — */
    --rank1:#d4a72c;--rank2:#9aa3ad;--rank3:#b87333;
    /* — مقياس مسافات موحّد (بدل قيم يدوية عشوائية) — */
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
    --radius:14px;--radius-sm:10px;--radius-lg:18px;
    /* ظلال هادئة بطبقتين: خط تلامس دقيق + انتشار واسع خفيف — عمق بلا ضجيج */
    --shadow-soft:0 1px 2px rgba(16,24,40,.04), 0 6px 18px -10px rgba(16,24,40,.10);
    --shadow-tile:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.14);
    --shadow:0 2px 6px -2px rgba(16,24,40,.08), 0 18px 40px -18px rgba(16,24,40,.18);
    /* "المسرح": سطح داكن مقصود يشتغل في الوضعين — عليه يقعد الهيرو ورأس الكونسل.
       الفايدة: الأحمر يرجع يكون إشارة (زر/بثّ مباشر) مش خلفية كاملة. */
    --stage-1:#20232b;--stage-2:#14161c;--stage-line:rgba(255,255,255,.10);
    --disp:"Sora","Tajawal",system-ui,sans-serif;
  }
  html[data-theme="dark"]{
    --bg:#0b0c0f;--bg2:#131418;--surface:#17181c;--surface2:#1d1f24;--line:#2a2c33;
    --text:#f1f2f5;--muted:#9aa0ac;
    /* على الداكن تنقلب المنطق: "الأقوى" = الأفتح (تباين أعلى فوق خلفية داكنة) */
    --accent:#ff6a64;         /* نص/أيقونة على سطح داكن = 6.33:1 ✓AA */
    --accent-btn:#cb201f;     /* خلفية زر + نص أبيض = 5.42:1 ✓AA (كان 2.80 ✗) */
    --accent-strong:#ff8a85;  /* النص الصغير على داكن = 7.79:1 ✓AA */
    --accent-on:#ffffff;
    --gold:var(--accent);--gold-deep:var(--accent-strong);
    --purple:#8b7bff;--pink:#e58a98;
    --danger:#f87171;--good:#34d399;
    --rank1:#e0b84a;--rank2:#aab2bd;--rank3:#cd8f4e;
    --stage-1:#20232b;--stage-2:#14161c;--stage-line:rgba(255,255,255,.10);
    --shadow-soft:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -10px rgba(0,0,0,.5);
    --shadow-tile:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6);
    --shadow:0 2px 6px -2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7);
  }
  html.midnight{ --bg:#000000; --bg2:#0a0a0b; --surface:#101012; --surface2:#161618; --line:#242428;
                 --stage-1:#17191f;--stage-2:#0d0e12; }
  /* واجهة هادئة: الضباب والبتلات مطفيّة — الوضوح أهم من الحركة.
     (.felt مستثنى: صار طبقة الحُبيبات في طبقة "الدرجة العالمية" أسفل الملف —
      ولو ضل هون بـ!important ما رح تقدر أي قاعدة لاحقة تشغّله) */
  .aurora,.sakura-field{display:none!important}
  html[data-theme="dark"] header.top{background:rgba(11,12,15,.86)}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{overflow-x:hidden;overflow-x:clip}
  body{margin:0;background:var(--bg);
       color:var(--text);font-family:"Tajawal",system-ui,sans-serif;min-height:100vh;min-height:100dvh;line-height:1.6;-webkit-tap-highlight-color:transparent}
  button,a,input,select,textarea,[role="button"]{touch-action:manipulation}
  h1,h2,h3,.disp{font-family:"Tajawal",sans-serif;font-weight:800}
  .wrap{max-width:760px;margin:0 auto;padding:18px 16px calc(84px + env(safe-area-inset-bottom,0px))}
  /* ===== أمان الجوال: منع تجاوز الشاشة أفقيًّا ===== */
  html,body{overflow-x:clip}                                  /* لا تمرير أفقي، لا يكسر العناصر اللاصقة */
  *{min-width:0}                                              /* السماح لعناصر فلكس بالانكماش بدل تمديد الصفحة */
  img,canvas,svg,video{max-width:100%}
  .wrap,header.top,.brand,.tabbar-in,.modal,.card{box-sizing:border-box}
  .modal,.card{max-width:100%}
  .modal{max-width:min(440px,calc(100vw - 24px))}
  /* أسماء/نصوص طويلة تلتفّ بدل تمديد الصفحة */
  .n,.nm,.lpname,.eyebrow,.dkname,.lead-row .nm,td,h2.t,.note{overflow-wrap:anywhere;word-break:break-word}
  @media (max-width:560px){
    .brand{flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
    .wrap{padding-left:12px;padding-right:12px}
    .modal{max-width:calc(100vw - 18px)}
  }
  header.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);
             backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
  .brand{display:flex;align-items:center;gap:8px;max-width:760px;margin:0 auto;padding:11px 14px}
  .brand h1{font-size:19px;margin:0;letter-spacing:0;white-space:nowrap}.brand .sub{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
  .brand .logo{width:40px;height:40px;border-radius:11px;object-fit:cover}
  .badge{font-size:11px;font-weight:700;border-radius:99px;padding:4px 11px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
  #authBox{margin-inline-start:auto;flex:none}
  .brand .more-wrap{margin-inline-start:2px}
  .badge.live{color:var(--good);border-color:var(--good)}
  .badge.ended{color:var(--danger);border-color:var(--danger)}
  .eyebrow{font-size:12px;letter-spacing:2px;color:var(--gold-deep);font-weight:700}
  h2.t{font-size:22px;margin:4px 0 14px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-soft)}
  .card>h3:first-child{position:relative;padding-inline-start:13px}
  .card>h3:first-child::before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:3px;background:var(--gold)}
  /* ===== مكوّنات الواجهة العصرية (hero / دوائر فئات / رؤوس أقسام) ===== */
  .sechead{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 12px;gap:10px}
  .sechead h3{margin:0;font-family:var(--disp);font-weight:800;font-size:18px;color:var(--text)}
  .sechead .viewall{font-size:13px;font-weight:700;color:var(--gold);cursor:pointer;background:none;border:none;padding:4px}
  .hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:24px 22px;margin-bottom:18px;background:var(--gold);color:#fff;box-shadow:var(--shadow-tile)}
  .hero::after{display:none}
  .hero .hero-k{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;opacity:.85}
  .hero .hero-t{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.18;margin-top:6px}
  .hero .hero-s{font-size:14px;opacity:.92;margin-top:8px;line-height:1.5}
  .hero .hero-btn{display:inline-block;margin-top:14px;background:#fff;color:var(--gold-deep);font-weight:800;border:none;border-radius:var(--radius-sm);padding:11px 20px;cursor:pointer;font-family:var(--disp);font-size:14px}
  .hero .hero-btn:active{transform:scale(.96)}
  .hero-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
  .hero-actions .hero-btn{margin-top:0;flex:1;min-width:120px;text-align:center}
  .hero .hero-btn.ghost{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.4)}
  /* رأس الكونسل العصري المضغوط */
  .chero{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:17px 18px;margin-bottom:14px;background:var(--gold-deep);color:#fff;box-shadow:var(--shadow-tile)}
  .chero::after{display:none}
  .chero-k{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:1.5px;opacity:.85}
  .chero-t{font-family:var(--disp);font-weight:800;font-size:21px;line-height:1.2;margin-top:4px;word-break:break-word}
  .tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media(max-width:420px){.tile-grid{gap:8px}}
  .tile{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
  .tile .circ{width:100%;aspect-ratio:1;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-soft);transition:transform .15s ease,box-shadow .15s ease}
  .tile:active .circ{transform:scale(.93)}
  .tile.accent .circ{background:var(--gold);color:#fff;border-color:transparent}
  .tile .circ svg{width:22px;height:22px}
  .tile .tlabel{font-size:12px;font-weight:600;color:var(--muted);text-align:center;line-height:1.25}
  .btn{appearance:none;cursor:pointer;border-radius:var(--radius-sm);font-family:"Tajawal";font-weight:700;font-size:15px;touch-action:manipulation;
       padding:12px 18px;border:1px solid transparent;transition:transform .12s,filter .2s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}
  .btn-gold{background:var(--accent-btn);color:var(--accent-on)}
  .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
  .btn-block{width:100%}.btn-sm{padding:8px 12px;font-size:13px;border-radius:9px}
  input,select,textarea{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);
               padding:12px 14px;font-family:"Tajawal";font-size:16px;outline:none;width:100%;transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
  input:focus,select:focus,textarea:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(225,60,59,.16);background:var(--surface)}
  input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
  .field{display:flex;gap:8px}.field .btn{flex:0 0 auto}
  label.lbl{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .spacer{flex:1}
  .muted{color:var(--muted)}.sm{font-size:12px}.err{color:var(--danger)}.ok{color:var(--good)}
  .note{font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:14px}
  .note code{background:var(--bg2);padding:1px 6px;border-radius:6px;color:var(--gold);font-size:11px}

  /* player rows */
  .prow{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:7px;font-size:14px;content-visibility:auto;contain-intrinsic-size:auto 44px}
  .prow .st{font-size:11px;border-radius:99px;padding:2px 9px;border:1px solid var(--line);color:var(--muted)}
  .prow .st.j{color:var(--good);border-color:var(--good)}
  .prow .lk{margin-inline-start:auto;display:flex;gap:6px}
  .iconbtn{background:var(--surface2);border:1px solid var(--line);color:var(--gold);border-radius:9px;padding:6px 9px;font-size:12px;font-weight:700;cursor:pointer;touch-action:manipulation;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}

  /* timer */
  .clock{font-family:"Tajawal";font-size:64px;line-height:1;text-align:center;letter-spacing:2px}
  .clock,.tv-clock,.lp-big,.lp-big2{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  .clock.warn{color:#f0a35e}.clock.done{color:var(--danger);animation:flash 1s infinite}
  @keyframes flash{50%{opacity:.4}}
  .timer-card{text-align:center}
  .sticky-timer{position:sticky;top:54px;z-index:9;padding:10px 14px;box-shadow:0 8px 22px rgba(190,80,70,.18)}

  /* match */
  .match{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px}
  .match.dispute{border-color:var(--danger)}
  .pair{display:flex;align-items:center;gap:8px;font-weight:700}
  .pair .vs{color:var(--muted);font-size:12px}
  .pair .nm{flex:1}.pair .nm.b{text-align:start}
  .res{display:flex;gap:6px;margin-top:9px}
  .res button{flex:1;border:1px solid var(--line);background:var(--surface2);color:var(--muted);border-radius:9px;padding:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:"Tajawal"}
  .res button.sel{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#fff;border-color:transparent}
  .res button.dl.sel{background:var(--danger);color:#fff}
  .mstat{font-size:11px;margin-top:7px}

  .stand-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  table.stand .tb2{font-size:11px;color:var(--muted)}
  @keyframes dealIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
  .dkres{animation:dealIn .3s cubic-bezier(.2,.8,.3,1) both}
  .dkres:nth-child(2){animation-delay:.03s}
  .dkres:nth-child(3){animation-delay:.06s}
  .dkres:nth-child(4){animation-delay:.09s}
  .dkres:nth-child(5){animation-delay:.12s}
  .dkres:nth-child(6){animation-delay:.15s}
  .dkres:nth-child(7){animation-delay:.18s}
  .dkres:nth-child(8){animation-delay:.21s}
  .cimgbig{animation:dealIn .34s cubic-bezier(.2,.8,.3,1) both}
  @media (prefers-reduced-motion: reduce){.dkres,.cimgbig{animation:none}}
  .snapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
  .snapc{position:relative;border-radius:6px;overflow:hidden;background:var(--surface2);aspect-ratio:59/86}
  .snapc img{width:100%;height:100%;object-fit:cover;display:block}
  .snapnoimg{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;opacity:.6}
  .snapn{position:absolute;bottom:2px;inset-inline-end:2px;background:rgba(0,0,0,.78);color:#fff;font-size:11px;font-weight:800;padding:1px 5px;border-radius:6px}
  table.stand{width:100%;border-collapse:collapse;font-size:13px}
  table.stand th,table.stand td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:center}
  table.stand th{color:var(--muted);font-size:11px;font-weight:700}
  table.stand td.n{text-align:start;font-weight:700}
  table.stand tr:first-child td{color:var(--text)}
  table.stand .pts{font-family:"Tajawal";color:var(--gold);font-weight:800}
  table.stand tr.me td{background:rgba(225,60,59,.08);color:var(--gold-deep);font-weight:700}
  .announce-bar{background:var(--gold);color:#fff;border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:12px;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:flex-start}
  .histrow{display:flex;gap:8px;font-size:13px;padding:7px 2px;border-bottom:1px solid var(--line)}
  .histrow .rr{margin-inline-start:auto;font-weight:700}
  .rank-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);color:var(--gold);border-radius:99px;padding:5px 14px;font-weight:800;font-family:"Tajawal"}
  /* لوحة الشرف */
  .lead{display:flex;flex-direction:column;gap:7px}
  .lead-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);transition:transform .12s ease}
  .lead-row .lead-rank{font-family:"Tajawal";font-weight:800;min-width:30px;text-align:center;font-size:16px;color:var(--muted)}
  .lead-row .lead-name{flex:1;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .lead-row .lead-pts{font-family:"Tajawal";font-weight:800;color:var(--gold);font-size:18px}
  .lead-row.podium{color:var(--text)}
  .lead-row.p1{border-color:#e8c765}
  .lead-row.p2{border-color:#b9c1cc}
  .lead-row.p3{border-color:#cf9c6c}
  .lead-row.podium .lead-pts{color:var(--gold)}
  .lead-row.me{outline:2px solid var(--gold);outline-offset:1px}
  .badge-chip{font-size:15px;line-height:1}
  .lead-badges{display:inline-flex;gap:3px;align-items:center}
  /* لمسات أناقة عامة */
  .btn{transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease}
  .btn:active{transform:scale(.95)}
  .btn:active{transform:translateY(1px)}
  .btn-gold{box-shadow:none}
  .btn-gold:hover{filter:brightness(1.04)}
  .card{border-radius:var(--radius)}
  input,select{border-radius:var(--radius-sm)}
  .theme-btn{background:var(--surface2);border:1px solid var(--line);color:var(--text);width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .theme-btn:active{transform:scale(.92)}
  .brand-wm{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;flex:none}
  .brand-tt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.12}
  .brand-name{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--text);letter-spacing:.5px}
  .brand-sub{font-size:10.5px;color:var(--gold);font-weight:800;letter-spacing:1.5px}
  .more-wrap{position:relative;display:inline-flex;flex:none}
  .more-menu{position:absolute;top:42px;inset-inline-end:0;display:none;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow-soft);z-index:30}
  .more-menu.open{display:flex}
  @media(max-width:380px){.brand-sub{display:none}}
  #langBtn{width:auto;padding:0 11px;border-radius:99px;font-weight:800;font-size:13px;margin-inline-start:auto}
  #authBox button{width:auto;padding:0 10px;height:32px;border-radius:99px;font-size:12px;font-weight:800;font-family:var(--disp)}
  #authBox .authname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #authBox .authup{background:#b62f2b;color:#fff;border-color:#b62f2b}
  .authtabs{display:flex;gap:6px;background:var(--bg2);border-radius:13px;padding:4px}
  .authtabs button{flex:1;border:none;background:none;padding:10px;border-radius:10px;font-weight:800;font-family:var(--disp);color:var(--muted);cursor:pointer;font-size:14px}
  .authtabs button.on{background:var(--gold);color:#fff}
  /* شاشة العرض (تلفاز) */
  .tv-mode{max-width:1200px}
  .tv-head{text-align:center;margin-bottom:8px}
  .tv-name{font-size:34px;font-weight:800;color:var(--gold);letter-spacing:.5px;text-shadow:0 2px 14px rgba(225,60,59,.22)}
  .tv-qr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px}
  .tv-qr{width:min(320px,60vw);aspect-ratio:1;background:#fff;border-radius:20px;padding:18px;box-shadow:0 20px 50px -14px rgba(225,60,59,.4), 0 0 0 6px rgba(225,60,59,.12)}
  .tv-qr svg{width:100%;height:100%;display:block}
  .ckqr{width:min(220px,60vw);aspect-ratio:1;background:#fff;border-radius:16px;padding:14px;margin:0 auto}
  .ckqr svg{width:100%;height:100%;display:block}
  .tv-qr-cap{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--text)}
  .tv-round{color:var(--muted);font-size:17px;margin-top:3px}
  .tv-clock{font-family:"Tajawal";font-weight:800;font-size:84px;text-align:center;line-height:1;margin:10px 0 20px}
  .tv-clock.warn{color:#f0a35e}
  .tv-clock.done{color:var(--danger)}
  .tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  .tv-match{background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-soft)}
  .tv-tbl{font-size:13px;color:var(--gold);font-weight:800;margin-bottom:8px}
  .tv-vs{display:flex;align-items:center;gap:10px}
  .tv-p{flex:1;font-size:21px;font-weight:700}
  .tv-p.b{text-align:start}
  .tv-mid{color:var(--muted);font-weight:800}
  .tv-res{margin-top:10px;font-size:15px;color:var(--good);font-weight:700;text-align:center}
  .tv-lp{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;font-family:var(--disp);font-weight:800;font-size:16px}
  .tv-lp-v{color:var(--gold)}
  .tv-lp-v::before{content:"❤️ "}
  .tv-lp-v.b::before{content:""}
  .tv-lp-v.b::after{content:" ❤️"}
  .tv-lp-mid{color:var(--muted);font-weight:600;font-size:13px}
  .tv-fs{display:block;margin:16px auto 0}
  /* شجرة التصفيات */
  .bracket{display:flex;gap:14px;align-items:stretch;overflow-x:auto;padding:6px 2px 12px;-webkit-overflow-scrolling:touch}
  .br-col{flex:1;min-width:132px;display:flex;flex-direction:column}
  .br-title{text-align:center;font-family:var(--disp);font-weight:800;font-size:12px;color:var(--gold);margin-bottom:8px;white-space:nowrap}
  .br-list{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:10px}
  .br-m{background:var(--surface2);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-soft)}
  .br-p{padding:8px 10px;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .br-p+.br-p{border-top:1px solid var(--line)}
  .br-w{color:var(--gold);background:rgba(225,60,59,.10)}
  .br-l{opacity:.5}
  .br-tick{font-size:11px}
  .br-champ{border-color:var(--gold);box-shadow:0 0 0 2px rgba(225,60,59,.25), var(--shadow-soft)}
  .tv-mode .bracket{max-width:1100px;margin:0 auto}
  /* أشرطة إحصائيات المتجر */
  .statbar-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px}
  .statbar-lbl{flex:0 0 96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
  .statbar-track{flex:1;height:10px;background:var(--bg2);border-radius:6px;overflow:hidden}
  .statbar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--purple));border-radius:6px}

  .toast{position:fixed;inset-inline:0;bottom:24px;display:flex;justify-content:center;pointer-events:none;z-index:99}
  .toast>div{background:var(--surface2);border:1px solid var(--gold-deep);padding:10px 18px;border-radius:99px;font-weight:700;font-size:14px;transform:translateY(20px);opacity:0;transition:.25s}
  .toast.show>div{transform:none;opacity:1}
  .credit{text-align:center;color:var(--muted);font-size:12px;padding:18px 20px 26px;margin-top:22px;position:relative}
  .credit::before{content:"";display:block;width:40px;height:2px;border-radius:2px;background:var(--line);opacity:.55;margin:0 auto 14px}
  .credit b{color:var(--gold);font-family:"Tajawal"}
  .center{text-align:center}
  .big-link{word-break:break-all;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:8px;font-size:11px;color:var(--gold)}
  /* player game tools */
  .lp-big{font-family:"Tajawal";font-weight:800;font-size:46px;line-height:1;text-align:center;color:var(--gold)}
  .lp-big.low{color:var(--danger)}
  .lp-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
  .lp-chips button{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:13px;padding:11px 13px;min-width:46px;min-height:46px;font-size:15px;font-weight:800;cursor:pointer;font-family:"Tajawal";box-shadow:var(--shadow-soft);transition:transform .1s ease,box-shadow .15s ease}
  .lp-chips button:active{transform:scale(.9)}
  .lp-chips button.m{color:#ff8095}.lp-chips button.p{color:var(--good)}
  .lp-custom{display:flex;gap:6px;justify-content:center;margin-top:8px}
  .lp-custom input{max-width:140px;text-align:center}
  .lp-custom button{width:44px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface2);border-radius:9px;font-size:20px;font-weight:800;cursor:pointer;color:var(--gold)}
  .lp2{display:flex;align-items:center;gap:8px;justify-content:center}
  .lpcol{flex:1;text-align:center;border:2px solid var(--line);border-radius:18px;padding:13px 6px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .12s;min-width:0;position:relative;overflow:visible;background:linear-gradient(160deg,var(--surface2),var(--surface));box-shadow:var(--shadow-soft)}
  .lpcol.sel{border-color:var(--gold);background:linear-gradient(160deg,rgba(225,60,59,.13),rgba(225,60,59,.04));box-shadow:0 8px 20px -6px rgba(225,60,59,.42)}
  .lpcol:active{transform:scale(.985)}
  .lpname{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lp-big2{font-family:var(--disp);font-weight:800;font-size:40px;line-height:1.05;color:var(--gold);margin-top:4px}
  .lp-big2.low{color:var(--danger)}
  .lp-big.crit,.lp-big2.crit{color:var(--danger);animation:lpFlash 1s ease-in-out infinite}
  @keyframes lpFlash{0%,100%{text-shadow:none;transform:scale(1)}50%{text-shadow:0 0 16px rgba(225,60,59,.95),0 0 28px rgba(225,60,59,.45);transform:scale(1.045)}}
  .felt.felt-pulse{animation:feltPulse 1.15s ease-out}
  @keyframes feltPulse{0%{box-shadow:inset 0 0 0 0 rgba(225,60,59,0)}28%{box-shadow:inset 0 0 130px 22px rgba(225,60,59,.28)}100%{box-shadow:inset 0 0 0 0 rgba(225,60,59,0)}}
  @media (prefers-reduced-motion: reduce){.lp-big.crit,.lp-big2.crit{animation:none}.felt.felt-pulse{animation:none}}
  .lpvs{flex:0 0 auto;font-size:22px;opacity:.7}
  .lphist{margin-top:10px;display:flex;flex-direction:column;gap:4px;max-height:120px;overflow:auto;-webkit-overflow-scrolling:touch}
  .lphist .h{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);background:var(--bg2);border-radius:8px;padding:5px 9px}
  .drawcalc{display:flex;gap:8px}
  .drawcalc label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:700;text-align:center}
  .drawcalc input{text-align:center;font-weight:800;font-family:var(--disp)}
  .drawout{margin-top:12px;text-align:center}
  .dcbig{font-family:var(--disp);font-weight:800;font-size:38px;color:var(--gold);line-height:1}
  .dltext{width:100%;min-height:180px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:12px;font-family:monospace;font-size:14px;background:var(--bg2);color:var(--text)}
  .dlview{white-space:pre-wrap;word-break:break-word;background:var(--bg2);border-radius:12px;padding:12px;font-size:14px;max-height:50vh;overflow:auto;-webkit-overflow-scrolling:touch;font-family:monospace;margin:0}
  .votesel{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--text);font-size:15px;font-weight:700}
  .modal.dkb{max-width:600px}
  .distwrap{margin:8px 0 4px}
  .distbar{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--bg2);gap:2px}
  .distbar span{display:block}
  .distleg{display:flex;gap:14px;justify-content:center;margin-top:7px;font-size:12px;font-weight:700;color:var(--muted)}
  .distleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
  .lvcurve{display:flex;gap:5px;align-items:flex-end;justify-content:center;padding:4px 0}
  .lvbar{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:20px}
  .lvbar b{font-size:10px;font-weight:800;color:var(--gold)}
  .lvbar .lvfill{width:14px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-radius:4px 4px 0 0}
  .lvbar span{font-size:10px;color:var(--muted);font-weight:700}
  .dkdecks{display:flex;gap:8px;margin-bottom:6px;align-items:center;background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow-soft)}
  .dkdecks .votesel{flex:1}
  .dkdeckbtns{display:flex;gap:4px;flex:none}
  .dkdeckbtns button{padding:8px 9px}
  .dksearch{display:flex;gap:8px;margin-bottom:10px}
  /* 🔍 شريط البحث داخل بنّاء التشكيلة يبقى ظاهرًا دائمًا أثناء التمرير (sticky أعلى النافذة) */
  .modal.dkb .dksearch{position:sticky;top:-22px;z-index:7;background:var(--surface);margin:0 -22px 10px;padding:10px 22px 8px;border-bottom:1px solid var(--line)}  /* top:-22px = يلاصق الحافة المرئية تمامًا (تعويض padding النافذة) */
  .dkfilters{display:flex;gap:6px;margin:-2px 0 10px;flex-wrap:wrap}
  .dkfilters .votesel{flex:1;min-width:90px;font-size:12px;padding:7px 8px}
  .dksearch input{flex:1}
  .dkresults{display:flex;flex-direction:column;gap:6px;max-height:314px;overflow:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px}  /* ~٥ صفوف ظاهرة والباقي بالتمرير */
  /* 🃏 نافذة بنّاء التشكيلة لا تغطي شريط التبويبات السفلي — يبقى ظاهرًا وقابلًا للنقر */
  .modal-back.dkb-back{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .modal-back.dkb-back .modal{max-height:100%}
  .dkres{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:10px;padding:6px 8px}
  .dkres img{width:34px;height:auto;aspect-ratio:59/86;border-radius:4px;flex:none}
  .dknoimg{width:34px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:4px;flex:none}
  .dkresn{flex:1;font-size:13px;font-weight:700;min-width:0}
  .dkresb{display:flex;gap:4px;flex:none}
  .dkresb button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--gold);color:#fff;font-weight:800;font-size:18px;cursor:pointer}
  .dkresb button.ghost{background:var(--surface2);color:var(--gold);font-size:13px}
  .dksum{font-size:13px;font-weight:800;font-family:var(--disp);text-align:center;background:var(--bg2);border-radius:10px;padding:8px;margin-bottom:8px}
  .dksec{margin-bottom:10px}
  .dkhead{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--gold);margin-bottom:4px;display:flex;align-items:center;gap:6px}
  .dkcount{background:var(--gold);color:#fff;border-radius:99px;font-size:11px;padding:1px 8px}
  .dkrow{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
  .dkrow.over{background:rgba(225,60,59,.08);border-radius:8px;padding:4px 6px}
  .dkimg{width:28px;height:auto;aspect-ratio:59/86;border-radius:4px;flex:none}
  .dkname{flex:1;font-size:13px;font-weight:700;min-width:0}
  .dkqty{display:flex;align-items:center;gap:8px;flex:none}
  .dkqty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--gold);font-weight:800;font-size:16px;cursor:pointer}
  .banb{display:inline-block;color:#fff;border-radius:6px;font-size:10px;font-weight:800;padding:1px 6px;margin-inline-start:4px;vertical-align:middle}
  .dkrar{display:inline-block;font-size:10px;font-weight:700;color:var(--muted);background:var(--surface2);border-radius:6px;padding:1px 6px;margin-inline-start:4px;vertical-align:middle}
  .dkprice{display:inline-block;font-size:11px;font-weight:800;color:var(--gold);margin-inline-start:4px;vertical-align:middle}
  .dkprices{font-size:12px;font-weight:700;text-align:center;background:var(--bg2);border-radius:10px;padding:8px;margin-bottom:8px}
  .dkres{position:relative;overflow:hidden}
  /* أداء: تأجيل رسم الصفوف خارج الشاشة في القوائم الطويلة */
  .dkrow{content-visibility:auto;contain-intrinsic-size:auto 46px}
  .dkres{content-visibility:auto;contain-intrinsic-size:auto 58px}
  .match,.prow,.logitem{contain:content}
  .dkres::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none}
  .dkres:hover::after{transform:translateX(120%)}
  .dctools{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
  .dcunit{display:flex;flex-direction:column;align-items:center;gap:10px}
  .dcres{font-family:var(--disp);font-weight:800;font-size:18px;min-width:84px;text-align:center;color:var(--gold)}
  .dice3d{width:64px;height:64px;perspective:340px;display:inline-block}
  .dice-cube{width:64px;height:64px;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.3,1);transform:rotateX(-22deg) rotateY(22deg)}
  .dface{position:absolute;width:64px;height:64px;background:linear-gradient(145deg,#ffffff,#f1e7e3);border:1px solid #e6d4cd;border-radius:13px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px;box-sizing:border-box;box-shadow:inset 0 0 7px rgba(0,0,0,.08)}
  html[data-theme="dark"] .dface{background:linear-gradient(145deg,#2c231f,#221b17);border-color:#3c2f29}
  .dface .pip{width:12px;height:12px;border-radius:50%;background:var(--gold);align-self:center;justify-self:center;box-shadow:0 1px 2px rgba(0,0,0,.35)}
  .dface.front{transform:translateZ(32px)} .dface.back{transform:rotateY(180deg) translateZ(32px)}
  .dface.right{transform:rotateY(90deg) translateZ(32px)} .dface.left{transform:rotateY(-90deg) translateZ(32px)}
  .dface.top{transform:rotateX(90deg) translateZ(32px)} .dface.bottom{transform:rotateX(-90deg) translateZ(32px)}
  .coin3d{width:64px;height:64px;perspective:340px;display:inline-block}
  .coin-inner{width:64px;height:64px;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.3,1)}
  .coin-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:26px;color:#7a5230;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid #d9a93c;background:radial-gradient(circle at 35% 30%,#ffe7a0,#e8b84b 62%,#c9952f);box-shadow:inset 0 0 8px rgba(0,0,0,.18)}
  .coin-t{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#ffd98a,#d9a93c 62%,#b8862a)}
  @media (prefers-reduced-motion: reduce){.dice-cube,.coin-inner{transition:none}}
  .lpghost{position:absolute;left:0;right:0;top:38%;text-align:center;font-family:var(--disp);font-weight:800;font-size:22px;pointer-events:none;z-index:3;animation:lpFloat .9s ease-out forwards}
  .lpghost.dmg{color:var(--danger)} .lpghost.heal{color:var(--good)}
  @keyframes lpFloat{0%{opacity:0;transform:translateY(8px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translateY(-28px) scale(1.05)}}
  .scanback{align-items:stretch;justify-content:stretch;padding:0;background:#000}
  .scanwrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
  #scanVid,#ckVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .scanframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:76%;aspect-ratio:59/86;max-width:86%;border:3px solid var(--gold);border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.5);pointer-events:none}
  .scanband{position:absolute;left:0;right:0;border:2px dashed rgba(255,215,120,.9);box-sizing:border-box}
  .scanband.name{top:4.5%;left:5%;right:18%;height:7.5%;border-radius:6px}
  .scanband.code{bottom:2.5%;left:4%;right:4%;height:7.5%;border-radius:6px}
  .scanband span{position:absolute;top:2px;inset-inline-start:6px;font-size:10px;font-weight:800;color:rgba(255,225,150,.95);letter-spacing:1px}
  .scanhint{position:absolute;left:0;right:0;top:50%;text-align:center;color:#fff;font-size:13px;padding:0 18px;text-shadow:0 1px 3px #000}
  .scanbar{position:absolute;left:0;right:0;bottom:28px;display:flex;gap:10px;justify-content:center;z-index:2}
  .scanmsg{position:absolute;left:0;right:0;bottom:92px;text-align:center;color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 3px #000;padding:0 18px}
  .scanguide{overflow:hidden}
  .scanline{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 12px var(--gold);animation:scanSweep 1.8s ease-in-out infinite}
  @keyframes scanSweep{0%{top:4%}50%{top:92%}100%{top:4%}}
  .scanresult{display:none;position:absolute;left:0;right:0;bottom:0;max-height:74%;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border-radius:20px 20px 0 0;padding:16px;box-shadow:0 -20px 50px -10px rgba(0,0,0,.6);animation:sheetUp .28s cubic-bezier(.2,.9,.3,1.1);z-index:3}
  @keyframes sheetUp{from{transform:translateY(60px);opacity:0}}
  .scancrops{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
  .cropbox{flex:1;min-width:120px;text-align:center}
  .cropbox span{display:block;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:1px;margin-bottom:3px}
  .cropbox img{width:100%;height:auto;border-radius:6px;border:1px solid var(--line);background:#fff}
  #scanAuto.on{background:var(--gold);color:#fff;border-color:var(--gold)}
  .cimg{position:relative;display:inline-block;line-height:0;border-radius:5px;flex:none;overflow:hidden;transition:transform .12s ease}
  .cimg.fx-mon{box-shadow:0 0 0 1px rgba(224,176,74,.55),0 0 11px -2px rgba(224,176,74,.55)}
  .cimg.fx-spell{box-shadow:0 0 0 1px rgba(58,160,208,.55),0 0 11px -2px rgba(58,160,208,.55)}
  .cimg.fx-trap{box-shadow:0 0 0 1px rgba(208,80,111,.6),0 0 11px -2px rgba(208,80,111,.55)}
  .cimg.holo::after,.cimg.holo2::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.6) 48%,transparent 66%);animation:sheen 2.8s ease-in-out infinite}
  .cimg.holo2::after{background:linear-gradient(115deg,transparent 18%,rgba(255,120,170,.55) 36%,rgba(120,200,255,.55) 50%,rgba(180,255,170,.55) 64%,transparent 82%);animation-duration:2.3s}
  .cimg.cimgbig{border-radius:10px;will-change:transform}
  @keyframes sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
  @media (prefers-reduced-motion: reduce){.cimg.holo::after,.cimg.holo2::after{animation:none;opacity:0}}
  .scancard{display:flex;gap:14px;align-items:flex-start}
  .scanimg{width:96px;height:auto;aspect-ratio:59/86;border-radius:8px;flex:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
  .scaninfo{flex:1;min-width:0}
  .scanname{font-family:var(--disp);font-weight:800;font-size:18px;line-height:1.2}
  .scanmeta{margin-top:6px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
  .scanaltrow{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
  .scanalt{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:5px 8px;margin:3px 4px 0 0;cursor:pointer;font-size:12px;font-weight:700;color:var(--text);max-width:100%}
  .scanalt img{width:24px;height:auto;aspect-ratio:59/86;border-radius:3px;flex:none}
  .predict{font-size:12px;color:var(--gold);font-weight:700;text-align:center;margin:2px 0;opacity:.85}
  .absent{font-size:12px;color:var(--danger);font-weight:800;text-align:center;margin:4px 0;animation:pulse 1.4s infinite}
  .rivalry{font-size:11.5px;color:#e08a3c;font-weight:700;text-align:center;margin:2px 0;opacity:.9}
  .pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--bg2);color:var(--muted)}
  .pill.live{background:var(--danger);color:#fff;animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
  /* ===== لمسات شكلية إضافية ===== */
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,60,59,.16)}
  .btn-gold{position:relative;overflow:hidden}
  .btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .5s ease}
  .btn-gold:hover::after{left:120%}
  .logo-hero{animation:floaty 4.5s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .felt{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;background-image:repeating-linear-gradient(45deg,rgba(120,70,60,.022) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(120,70,60,.022) 0 2px,transparent 2px 5px)}
  html[data-theme="dark"] .felt{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px)}
  html.theme-anim, html.theme-anim body, html.theme-anim *{transition:background-color .4s ease,color .35s ease,border-color .4s ease,box-shadow .4s ease !important}
  .lead-row.podium.p1{box-shadow:inset 0 0 0 1px rgba(224,176,32,.4)}
  .lead-row.podium.p2{box-shadow:inset 0 0 0 1px rgba(150,156,166,.4)}
  .lead-row.podium.p3{box-shadow:inset 0 0 0 1px rgba(189,123,75,.4)}
  .avatar,.av{transition:transform .15s ease}
  .lead-row:hover .av,.lead-row:hover .avatar{transform:scale(1.08)}
  .card{transition:box-shadow .25s ease,transform .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease}
  /* 🌗 انتقال ناعم عند تبديل الثيم (لايت/دارك/Midnight) — بدل القفزة الفجائيّة بالألوان */
  body,.modal,.modal-back,header.top,.tabbar{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
  @media (prefers-reduced-motion: reduce){ .card,body,.modal,.modal-back,header.top,.tabbar{transition:none} }
  /* ===== تفاعلات دقيقة ===== */
  .btn{position:relative;overflow:hidden}
  .ripple{position:absolute;border-radius:50%;background:rgba(225,60,59,.28);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:rippleA .6s ease-out forwards}
  .btn-gold .ripple,.btn-gold.ripple,.btn-gold>.ripple{background:rgba(255,255,255,.45)}
  @keyframes rippleA{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
  .shake{animation:shakeX .45s cubic-bezier(.36,.07,.19,.97)}
  @keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
  .oktick{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:okFade 1.15s ease forwards}
  @keyframes okFade{0%{opacity:0}12%{opacity:1}78%{opacity:1}100%{opacity:0}}
  .oktick svg{width:104px;height:104px}
  .oktick .okc{fill:none;stroke:var(--good);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:okCircle .5s ease forwards;filter:drop-shadow(0 4px 12px rgba(40,160,106,.4))}
  .oktick .okk{fill:none;stroke:var(--good);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:46;stroke-dashoffset:46;animation:okCheck .35s .42s ease forwards}
  @keyframes okCircle{to{stroke-dashoffset:0}} @keyframes okCheck{to{stroke-dashoffset:0}}
  .pulse-imp{animation:pulseImp 2.2s ease-in-out infinite}
  @keyframes pulseImp{0%,100%{box-shadow:0 6px 16px rgba(225,60,59,.26)}50%{box-shadow:0 6px 26px rgba(225,60,59,.6),0 0 0 4px rgba(225,60,59,.12)}}
  /* ===== خلفية Aurora متحركة ===== */
  .aurora{position:fixed;inset:-12%;z-index:0;pointer-events:none;overflow:hidden;filter:blur(54px);opacity:.5;contain:strict}
  html[data-theme="dark"] .aurora{opacity:.42}
  html.midnight .aurora{opacity:.5}
  .aurora span{position:absolute;width:48vmax;height:48vmax;border-radius:50%;will-change:transform}
  .aurora span:nth-child(1){background:radial-gradient(circle,rgba(225,60,59,.55),transparent 60%);top:-12%;left:-8%;animation:aur1 22s ease-in-out infinite}
  .aurora span:nth-child(2){background:radial-gradient(circle,rgba(247,179,192,.55),transparent 60%);bottom:-14%;right:-10%;animation:aur2 26s ease-in-out infinite}
  .aurora span:nth-child(3){background:radial-gradient(circle,rgba(239,111,108,.45),transparent 60%);top:28%;left:38%;animation:aur3 30s ease-in-out infinite}
  @keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,11%) scale(1.16)}}
  @keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-11%,-7%) scale(1.22)}}
  @keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,9%) scale(1.12)}}
  /* ===== نجوم Midnight ===== */
  .stars{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
  html.midnight .stars{display:block}
  .stars i{position:absolute;background:#fff;border-radius:50%;opacity:var(--o,.6);box-shadow:0 0 4px rgba(255,255,255,.55);animation:twinkle 3.6s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:var(--o,.6)}50%{opacity:.08}}
  /* ⚡ سلاسة الجوّال: أوقف حركة الـaurora الثقيلة (blur ضخم) على الشاشات الصغيرة واللمسيّة — تبقى الخلفيّة ثابتة بلا تكلفة إطار */
  @media (max-width:760px){
    .aurora{filter:blur(38px);opacity:.38}
    .aurora span{animation:none!important}
    .sakura:nth-child(n+7){display:none}   /* أقلّ بتلات على الجوّال */
  }
  @media (prefers-reduced-motion: reduce){
    .aurora span,.sakura,.sakura i,.logo-hero,.stars i,.hero::after{animation:none!important}
  }
  /* ===== بتلات اللمس ===== */
  .tap-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
  .tap-petal{position:fixed;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity;animation:tapFloat .9s ease-out forwards;filter:drop-shadow(0 2px 3px rgba(190,80,70,.3))}
  @keyframes tapFloat{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-30px))) scale(1) rotate(var(--rot,90deg))}}

  .planner{display:flex;gap:8px;align-items:flex-end}
  .planner label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:700}
  .planner input{text-align:center;font-weight:800;font-family:var(--disp)}
  .qs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .qs>div{background:var(--bg2);border-radius:10px;padding:9px 11px;display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:8px}
  .qs>div span{color:var(--muted);font-weight:600}
  .qs>div b{font-family:var(--disp);font-weight:800}
  .achgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .ach{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:7px 9px;opacity:.42;filter:grayscale(1)}
  .ach.on{opacity:1;filter:none;border-color:rgba(224,176,32,.45);box-shadow:0 2px 10px -6px rgba(224,176,32,.5)}
  .achic{font-size:18px;flex:none}.achnm{font-size:11.5px;font-weight:700;line-height:1.2}
  .potw{background:linear-gradient(160deg,rgba(224,176,32,.12),var(--surface));border-color:rgba(224,176,32,.35)}
  .donut{width:168px;height:168px;border-radius:50%;margin:6px auto;position:relative}
  .donut::after{content:"";position:absolute;inset:24%;background:var(--surface);border-radius:50%}
  .tools3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .toolb{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--text);font-family:"Tajawal";line-height:1.9;text-align:center}
  .toolb span{display:block;color:var(--gold);font-size:18px;font-weight:800}
  /* ===== KYO PAL — طبقة بصرية عصرية نظيفة ===== */
  body{ background:var(--bg); animation:pageInFade .4s ease both; }
  /* ⚠️ لا transform على body أبدًا — يكسر position:fixed لكل العناصر (الشريط السفلي، التوست، المودالات) على الجوال */
  @keyframes pageInFade{from{opacity:0}to{opacity:1}}
  main.wrap{animation:pageInSlide .4s ease both}
  @keyframes pageInSlide{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  header.top{backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
  .brand h1{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:0;color:var(--text)}
  .brand .logo{box-shadow:0 0 0 1px var(--line)}
  h1,h2,h3{font-family:var(--disp);font-weight:800}
  h2.t{font-size:23px;line-height:1.22;margin:6px 0 16px;letter-spacing:0}
  html[dir="ltr"] h2.t{letter-spacing:-.3px}
  .eyebrow{font-family:var(--disp);color:var(--muted);font-weight:700;font-size:11px}
  html[dir="ltr"] .eyebrow{letter-spacing:2px;text-transform:uppercase}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
  .btn{font-family:var(--disp);font-weight:700;border-radius:var(--radius-sm)}
  html[dir="ltr"] .btn{letter-spacing:.1px}
  html[dir="rtl"] .btn{font-family:"Tajawal",sans-serif}
  .btn-gold{background:var(--accent-btn);color:var(--accent-on);box-shadow:none}
  .btn-gold:hover{filter:brightness(1.06)}
  .btn-gold:active{transform:translateY(0) scale(.97)}
  .btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
  input,select{border-radius:var(--radius-sm);transition:border-color .2s, box-shadow .2s, background .2s}
  input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,60,59,.14);background:var(--surface)}
  .badge{font-weight:700}
  html[dir="ltr"] .badge{font-family:var(--disp);letter-spacing:.3px}
  .badge.live{color:#fff;background:var(--good);border-color:transparent}
  .clock{font-family:var(--disp);font-weight:800;font-size:66px;letter-spacing:1px}
  .clock.warn{color:#ef8a3c}
  .sticky-timer{box-shadow:var(--shadow-soft)}
  .prow{background:var(--surface);border-radius:var(--radius-sm);box-shadow:none}
  .iconbtn{border-radius:9px;transition:background .15s,color .15s,border-color .15s}
  .iconbtn:hover{border-color:var(--gold);color:var(--gold)}
  table.stand .pts,.rank-chip,.lp-big,.lead-row .lead-rank,.lead-row .lead-pts{font-family:var(--disp)}
  .lead-row{border-radius:var(--radius-sm);box-shadow:none;border:1px solid var(--line);transition:box-shadow .2s ease, transform .15s ease}
  .lead-row .lead-pts{font-size:19px}
  .lead-row.p1{background:var(--surface);border-color:#e8c765}
  .lead-row.p2{background:var(--surface);border-color:#b9c1cc}
  .lead-row.p3{background:var(--surface);border-color:#cf9c6c}
  .theme-btn{transition:transform .12s, border-color .15s, color .15s}
  .theme-btn:hover{border-color:var(--gold);color:var(--gold)}
  #langBtn{font-family:var(--disp)}
  .announce-bar{box-shadow:none}
  .tv-name{font-family:var(--disp)}
  .tv-clock{font-family:var(--disp);font-weight:800}
  .tv-match{border-radius:var(--radius);box-shadow:var(--shadow-soft)}
  .credit b{font-family:var(--disp)}
  ::selection{background:rgba(225,60,59,.22)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
  /* bottom tab navigation (mobile-first) */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-top:1px solid var(--line);box-shadow:none;padding:6px 8px calc(6px + env(safe-area-inset-bottom));transform:translateZ(0);will-change:transform;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
  body.kb-open .tabbar{transform:translateY(130%)}  /* أخفِ الشريط عند فتح الكيبورد حتى لا يغطي نصف الشاشة */
  html[data-theme="dark"] .tabbar{background:rgba(11,12,15,.92)}
  .tabbar-in{display:flex;justify-content:space-around;gap:4px;max-width:760px;margin:0 auto;width:100%}
  .tabbar button{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:14px;color:var(--muted);font-family:var(--disp);font-weight:700;font-size:10.5px;transition:background .15s,color .15s,transform .1s;min-width:0}
  .tabbar button .ic{font-size:21px;line-height:1}
  .tabbar button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar button:active{transform:scale(.92)}
  .tabbar button.on{color:var(--gold);background:rgba(225,60,59,.12)}
  .wrap{padding-bottom:104px}
  /* sakura petals + elegant loader */
  .wrap{position:relative;z-index:1}
  .sakura-field{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:layout paint style}
  .sakura{position:absolute;top:-14vh;will-change:transform;animation:sFall linear infinite}
  .sakura i{display:block;font-style:normal;will-change:transform;animation:sSway ease-in-out infinite alternate;filter:drop-shadow(0 2px 3px rgba(190,80,70,.2))}
  @keyframes sFall{to{transform:translateY(130vh) rotate(400deg)}}
  @keyframes sSway{from{transform:translateX(-15px)}to{transform:translateX(15px)}}
  .sakura:nth-child(1){left:5%;font-size:16px;opacity:.5;animation-duration:14s;animation-delay:0s}
  .sakura:nth-child(2){left:16%;font-size:22px;opacity:.42;animation-duration:11s;animation-delay:-3s}
  .sakura:nth-child(3){left:27%;font-size:13px;opacity:.4;animation-duration:16s;animation-delay:-6s}
  .sakura:nth-child(4){left:39%;font-size:20px;opacity:.5;animation-duration:12s;animation-delay:-1.5s}
  .sakura:nth-child(5){left:50%;font-size:15px;opacity:.4;animation-duration:15s;animation-delay:-8s}
  .sakura:nth-child(6){left:61%;font-size:24px;opacity:.38;animation-duration:10.5s;animation-delay:-4s}
  .sakura:nth-child(7){left:72%;font-size:14px;opacity:.5;animation-duration:17s;animation-delay:-2.5s}
  .sakura:nth-child(8){left:82%;font-size:19px;opacity:.42;animation-duration:13s;animation-delay:-7s}
  .sakura:nth-child(9){left:90%;font-size:16px;opacity:.4;animation-duration:12.5s;animation-delay:-5s}
  .sakura:nth-child(10){left:45%;font-size:12px;opacity:.36;animation-duration:18s;animation-delay:-10s}
  .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:55vh}
  .loader-ring{width:52px;height:52px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--gold);animation:spin .85s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* Splash (يظهر عند الفتح ثم يتلاشى تلقائيًّا) */
  #splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%, var(--bg2), var(--bg));pointer-events:none;transition:opacity .55s ease,visibility .55s ease;animation:splashOut .7s ease 8s forwards}
  #splash.hide{opacity:0;visibility:hidden}
  html.no-fx .aurora, html.no-fx .sakura-field, html.no-fx .stars, html.no-fx .felt{display:none!important}
  .sp-in{text-align:center;animation:spIn .85s cubic-bezier(.2,.9,.3,1.2)}
  .sp-ring{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;border:3px solid var(--gold);border-top-color:transparent;animation:spin 1s linear infinite}
  .sp-brand{font-family:var(--disp);font-weight:800;font-size:42px;letter-spacing:3px;color:var(--gold);text-shadow:0 8px 34px rgba(225,60,59,.45)}
  .sp-sub{font-size:12px;color:var(--muted);letter-spacing:5px;margin-top:8px;text-transform:uppercase}
  @keyframes splashOut{to{opacity:0;visibility:hidden}}
  @keyframes spIn{from{transform:scale(.82) translateY(12px);opacity:0}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion: reduce){#splash{animation:none;display:none}}
  /* بريق الكروت النادرة جدًّا */
  .cimg.holo2::before{content:"✦";position:absolute;top:7%;right:9%;font-size:11px;line-height:1;color:#fff;text-shadow:0 0 6px #fff,0 0 12px var(--gold),-34px 56px 3px rgba(255,255,255,.85),6px 92px 3px rgba(255,210,140,.8),-54px 20px 2px rgba(190,225,255,.85),-20px 120px 2px rgba(255,255,255,.7);animation:twinkle 1.7s ease-in-out infinite;pointer-events:none;z-index:2}
  .cimg.holo2::after{will-change:transform}
  @keyframes twinkle{0%,100%{opacity:.2;transform:scale(.65) rotate(0deg)}50%{opacity:1;transform:scale(1.25) rotate(20deg)}}
  @media (prefers-reduced-motion: reduce){.cimg.holo2::before{animation:none;opacity:.6}}
  /* انتقال ناعم بين الصفحات (تلاشٍ آمن لا يكسر الشريط الثابت) */
  #app.pagein{animation:pageIn .3s ease}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion: reduce){#app.pagein{animation:none}}
  @keyframes secIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
  [data-sec].sec-in{animation:secIn .26s cubic-bezier(.2,.8,.3,1)}
  @media (prefers-reduced-motion: reduce){[data-sec].sec-in{animation:none}}
  .tabbar .ic .tic{width:22px;height:22px;display:block}
  .tic{vertical-align:middle}
  .skrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .skav{width:40px;height:40px;border-radius:50%;flex:none}
  #fabTop{position:fixed;inset-inline-end:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.2);display:none;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,opacity .2s ease}
  #fabTop:active{transform:scale(.9)}
  #fabTop svg{display:block}
  /* سحب للتحديث */
  #ptr{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-42px);z-index:150;width:40px;height:40px;border-radius:50%;background:var(--surface);box-shadow:0 8px 22px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;pointer-events:none}
  .ptr-spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--gold)}
  #ptr.ready .ptr-spin{border-top-color:var(--good)}
  #ptr.spinning .ptr-spin{animation:spin .7s linear infinite}
  @media (prefers-reduced-motion: reduce){#ptr{display:none}}
  .loader-brand{font-family:var(--disp);font-weight:800;letter-spacing:2px;color:var(--gold);font-size:18px;animation:lpulse 1.6s ease-in-out infinite}
  @keyframes lpulse{50%{opacity:.45}}
  .av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;font-family:var(--disp);font-weight:800;font-size:12px;flex:none;box-shadow:0 2px 6px -2px rgba(0,0,0,.3);vertical-align:middle;margin-inline-end:7px;line-height:1}
  .lead-name .av{width:30px;height:30px;font-size:13px;margin-inline-end:9px}
  table.stand td.n .av{width:24px;height:24px;font-size:11px;margin-inline-end:6px}
  /* extra UI polish */
  .match{border-radius:var(--radius);box-shadow:none;transition:border-color .18s ease}
  .match:hover{border-color:rgba(225,60,59,.3)}
  .pair .nm{font-weight:800}
  .pair .vs{font-family:var(--disp);font-weight:800;font-size:11px;background:var(--bg2);color:var(--muted);padding:2px 8px;border-radius:99px;letter-spacing:.5px}
  table.stand tr.me td{background:rgba(225,60,59,.08)}
  table.stand td.n{font-weight:800}
  table.stand tr:not(:first-child):hover td{background:rgba(0,0,0,.03)}
  html[data-theme="dark"] table.stand tr:not(:first-child):hover td{background:rgba(255,255,255,.04)}
  .rank-chip{background:var(--surface2);box-shadow:none}
  .lead-name{font-weight:800}
  .badge-chip{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
  h3{letter-spacing:-.2px}
  .note{border-radius:13px}
  /* circular countdown ring */
  .clock-ring{--p:100;width:172px;height:172px;border-radius:50%;margin:8px auto 4px;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%), var(--line) 0)}
  .clock-ring.warn{background:conic-gradient(#ef8a3c calc(var(--p)*1%), var(--line) 0)}
  .clock-ring.done{background:conic-gradient(var(--danger) calc(var(--p)*1%), var(--line) 0)}
  .clock-hole{width:144px;height:144px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:inset 0 2px 10px rgba(0,0,0,.06)}
  .clock-ring .clock{font-size:42px;letter-spacing:1px}
  @media (max-width:380px){.clock-ring{width:150px;height:150px}.clock-hole{width:126px;height:126px}.clock-ring .clock{font-size:36px}}
  /* victory celebration */
  .celebrate{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
  .celebrate span{position:absolute;top:-9vh;will-change:transform,opacity;opacity:0;animation:celebFall ease-in forwards;filter:drop-shadow(0 3px 4px rgba(190,80,70,.25))}
  @keyframes celebFall{0%{transform:translateY(-9vh) rotate(0);opacity:0}12%{opacity:1}100%{transform:translateY(115vh) rotate(var(--rot,360deg));opacity:.85}}
  .logo-hero{width:104px;height:104px;border-radius:50%;display:inline-block;box-shadow:0 12px 34px -10px rgba(225,60,59,.55);animation:halo 3s ease-in-out infinite}
  @keyframes halo{50%{box-shadow:0 16px 44px -8px rgba(225,60,59,.75)}}
  /* player profile modal */
  .rbann{position:fixed;inset:0;z-index:89;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle at center,rgba(20,10,8,.55),rgba(10,6,5,.78));animation:rbFade 2.1s ease forwards}
  .rbann-in{text-align:center;animation:rbIn .6s cubic-bezier(.2,.9,.3,1.2)}
  .rbann-sub{font-family:var(--disp);font-weight:800;font-size:5vmin;letter-spacing:8px;color:var(--gold);opacity:.9}
  .rbann-n{font-family:var(--disp);font-weight:800;font-size:30vmin;line-height:1;color:#fff;text-shadow:0 12px 50px rgba(225,60,59,.7),0 2px 10px rgba(0,0,0,.6)}
  .rbann-sub2{font-family:var(--disp);font-weight:700;font-size:4vmin;color:#fff;opacity:.85;margin-top:6px}
  @keyframes rbFade{0%{opacity:0}14%{opacity:1}82%{opacity:1}100%{opacity:0}}
  @keyframes rbIn{from{transform:scale(.7) translateY(18px);opacity:0}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion: reduce){.rbann{display:none}}
  .cd321{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(10,6,5,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .cd321n{font-family:var(--disp);font-weight:800;font-size:34vmin;line-height:1;color:var(--gold);text-shadow:0 10px 44px rgba(225,60,59,.6),0 2px 8px rgba(0,0,0,.55);animation:cdpop .78s ease-out}
  .cd321n.go{font-size:20vmin;color:#fff;text-shadow:0 10px 44px rgba(224,176,32,.7),0 2px 8px rgba(0,0,0,.55)}
  @keyframes cdpop{0%{transform:scale(.2);opacity:0}28%{transform:scale(1.12);opacity:1}68%{transform:scale(1)}100%{transform:scale(1.55);opacity:0}}
  @media (prefers-reduced-motion: reduce){.cd321{display:none}}
  .modal-back{position:fixed;inset:0;background:rgba(15,17,20,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .2s}
  body.modal-open{overflow:hidden}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  @keyframes fadein{from{opacity:0}}
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;max-width:380px;width:100%;max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow);animation:popin .22s cubic-bezier(.2,.9,.3,1.3)}
  @keyframes popin{from{transform:scale(.9);opacity:0}}
  .modal .av{width:64px;height:64px;font-size:26px;margin:0 auto}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .pcell{background:var(--bg2);border-radius:14px;padding:14px 10px;text-align:center}
  .pcell .n{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--gold)}
  .pcell .l{font-size:12px;color:var(--muted);margin-top:3px}
  .lead-row{transition:background .15s}
  .lead-row:hover{background:rgba(225,60,59,.06)}
  .logbox{max-height:50vh;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px}
  .logrow{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;background:var(--bg2);border-radius:10px;font-size:13px}
  .logtxt{font-weight:600}
  .logtm{color:var(--muted);font-size:11px;white-space:nowrap;flex:none}
  /* loading skeletons */
  .sk{position:relative;overflow:hidden;background:var(--bg2);border-radius:10px}
  .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 1.3s infinite}
  html[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
  @keyframes shimmer{100%{transform:translateX(100%)}}
  .sk-row{height:46px;margin:8px 0}
  .sk-line{height:14px;margin:10px 0;width:60%}
  /* connection indicator */
  .netbar{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(180deg,#ef9a4c,#ec8434);color:#3a2410;text-align:center;font-size:12px;font-weight:800;padding:7px 10px;transform:translateY(-110%);transition:transform .25s ease;font-family:var(--disp);box-shadow:0 4px 14px -6px rgba(190,110,40,.6)}
  .netbar.show{transform:none}
  .netbar{display:flex;align-items:center;justify-content:center;gap:8px}
  .netbar.ok{background:linear-gradient(180deg,#46c98a,#33b277);color:#06351f;box-shadow:0 4px 14px -6px rgba(40,160,90,.6)}
  .nb-dot{width:9px;height:9px;border-radius:50%;background:#7a3a10;animation:nbpulse 1.1s ease-in-out infinite;flex:none}
  .netbar.ok .nb-check{font-weight:900}
  @keyframes nbpulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  @media (prefers-reduced-motion: reduce){.nb-dot{animation:none}}
  /* تكبير الخط/الوصولية */
  html.fs-lg{zoom:1.12}
  html.fs-xl{zoom:1.25}
  #fsBtn{width:auto;padding:0 9px;font-size:13px}
  /* تنقّل لوحة المفاتيح — حلقة تركيز واضحة */
  :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .tabbar button:focus-visible{outline-offset:-3px}
  :focus:not(:focus-visible){outline:none}
  /* تباين أعلى عند طلب النظام */
  @media (prefers-contrast: more){
    a{text-decoration:underline}
    :focus-visible{outline-width:4px}
    .btn,.card,input,select,textarea,table.stand td,table.stand th{border-color:var(--text)}
    .muted,.sub,.sm.muted{color:var(--text)}
  }
  html[dir="rtl"] .netbar{font-family:"Tajawal",sans-serif}
  /* مطالبة تثبيت غير حاجبة: تبقى الصفحة قابلة للاستخدام في أول زيارة */
  .install-nudge{position:fixed;z-index:76;inset-inline-start:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));width:min(430px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--text);box-shadow:0 18px 50px -16px rgba(0,0,0,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  .install-nudge.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .install-nudge-icon{font-size:24px;line-height:1}
  .install-nudge-copy{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
  .install-nudge-copy b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .install-nudge-copy span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .install-nudge-go{border:0;border-radius:10px;background:var(--gold);color:#fff;font:800 12px var(--disp);padding:9px 12px;cursor:pointer}
  .install-nudge-close{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--surface2);color:var(--muted);font-size:21px;line-height:1;cursor:pointer}
  body.kb-open .install-nudge{display:none}
  @media(max-width:440px){
    .brand{padding-inline:10px;gap:6px;flex-wrap:nowrap;justify-content:flex-start}
    .brand .logo{width:40px;height:40px}
    .brand h1{font-size:17px}
    .brand h1 span{display:none}
    .brand .sub{display:none}
    .brand-wm{gap:8px}
    #authBox{gap:4px!important}
    #authBox button{padding-inline:8px;font-size:11px}
    .brand .more-wrap{margin-inline-start:0}
    .install-nudge{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
    .install-nudge-close{grid-column:3;grid-row:1;position:absolute;inset-inline-end:-7px;top:-9px;width:27px;height:27px;background:var(--surface)}
    .install-nudge-go{grid-column:3;grid-row:1;padding:8px 10px}
    .brand.has-signed-auth{flex-wrap:wrap}
    .brand.has-signed-auth .brand-wm{flex:1}
    .brand.has-signed-auth .more-wrap{order:2}
    .brand.has-signed-auth #authBox{order:3;width:100%;justify-content:flex-end;margin-inline-start:0}
  }
  .swapnm{cursor:pointer;border:1px dashed var(--gold-deep);border-radius:9px;padding:4px 8px;transition:background .15s}
  .swapnm:hover{background:rgba(225,60,59,.08)}
  .swapnm.sel{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#fff;border-style:solid;border-color:transparent}
  .celebrate-burst{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:130px;pointer-events:none;animation:burstPop 1.5s ease-out forwards;filter:drop-shadow(0 8px 20px rgba(225,60,59,.5))}
  @keyframes burstPop{0%{transform:scale(.2) rotate(-15deg);opacity:0}30%{transform:scale(1.15) rotate(0);opacity:1}72%{opacity:1}100%{transform:scale(1.35);opacity:0}}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.sakura-field{display:none}.aurora{display:none}.stars i{animation:none}.celebrate{display:none}header.top,.tabbar{backdrop-filter:none;-webkit-backdrop-filter:none}}
  /* ═══════════════════════ ✨ طبقة التلميع الاحترافية (2026-07-11) ═══════════════════════
     كلها transform/opacity/box-shadow فقط (صديقة للأداء)، وقاعدة prefers-reduced-motion أعلاه تعطّلها تلقائيًا */

  /* — دخول متدرّج أنيق للبطاقات والصفوف — */
  @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .card{animation:riseIn .38s cubic-bezier(.2,.8,.3,1) both}
  .card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}
  .card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}
  .match{animation:riseIn .32s cubic-bezier(.2,.8,.3,1) both}
  .match:nth-child(2){animation-delay:.04s}.match:nth-child(3){animation-delay:.08s}
  .match:nth-child(4){animation-delay:.12s}.match:nth-child(5){animation-delay:.16s}.match:nth-child(6){animation-delay:.2s}
  .prow{animation:riseIn .3s cubic-bezier(.2,.8,.3,1) both}
  .prow:nth-child(2){animation-delay:.03s}.prow:nth-child(3){animation-delay:.06s}
  .prow:nth-child(4){animation-delay:.09s}.prow:nth-child(5){animation-delay:.12s}

  /* — أزرار أفخم: رفعة عند التمرير + توهّج للذهبي + لمعة تمرّ عند الضغط — */
  .btn{position:relative;overflow:hidden}
  @media(hover:hover){
    .btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
    .btn-gold:hover:not(:disabled){filter:brightness(1.06)}
    .card:hover{box-shadow:var(--shadow);transition:box-shadow .25s ease}
    .match:hover{border-color:rgba(225,60,59,.3);transition:border-color .2s ease}
    .tile:hover .circ{transform:translateY(-2px);box-shadow:var(--shadow-tile)}
  }
  .btn-gold{box-shadow:none}

  /* — منصّة التتويج بالترتيب: ذهبي/فضي/برونزي لأول ٣ مراكز — */
  /* (تمييز المراكز الأولى انتقل لأصناف .r1/.r2/.r3 في الطبقة أسفل الملف —
      nth-child كان يعتمد ضمنًا على وجود صف الرأس فينكسر لو تغيّر بناء الجدول) */
  @media(hover:hover){table.stand tr:hover td{background:rgba(0,0,0,.02)}}

  /* — نافذة أنعم + خلفية أعمق — */
  .modal-back{backdrop-filter:blur(6px) saturate(1.15);-webkit-backdrop-filter:blur(6px) saturate(1.15)}
  @keyframes popinX{0%{opacity:0;transform:scale(.92) translateY(16px)}60%{opacity:1}100%{opacity:1;transform:none}}
  .modal{animation:popinX .3s cubic-bezier(.2,.9,.3,1.2)}

  /* — عدّاد الوقت: نبض تحذيري أوضح — */
  @keyframes warnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
  .clock.warn{animation:warnPulse 1.2s ease-in-out infinite}

  /* — التبويب النشط: نبضة ترحيب بالأيقونة — */
  @keyframes tabPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
  .tabbar button.on .ic{animation:tabPop .32s cubic-bezier(.3,1.4,.5,1)}
  .tabbar button.on{box-shadow:inset 0 0 0 1px rgba(225,60,59,.25)}

  /* — تنبيه (توست) بقفزة مرنة — */
  @keyframes toastSpring{0%{opacity:0;transform:translateY(24px) scale(.9)}70%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
  .toast.show>div{animation:toastSpring .38s cubic-bezier(.2,.9,.3,1.2)}

  /* — شريط تمرير أنيق داخل القوائم — */
  .dkresults::-webkit-scrollbar,.modal::-webkit-scrollbar{width:8px}
  .dkresults::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{background:rgba(225,60,59,.3);border-radius:99px}
  .dkresults::-webkit-scrollbar-thumb:hover,.modal::-webkit-scrollbar-thumb:hover{background:rgba(225,60,59,.5)}
  .dkresults::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track{background:transparent}

  /* — تحديد النص بلون الهوية — */
  ::selection{background:rgba(225,60,59,.25)}

  /* — عناوين أكبر حضورًا — */
  h2.t{font-size:24px;letter-spacing:-.2px}
  .hero .hero-t{font-size:28px}
  .sechead h3{font-size:20px}

  /* — شارة LIVE تتنفّس — */
  @keyframes liveBreath{0%,100%{box-shadow:0 0 0 0 rgba(40,160,106,.35)}50%{box-shadow:0 0 0 5px rgba(40,160,106,0)}}
  .badge.live{animation:liveBreath 2s ease-in-out infinite}

  /* — 🛡️ أنيميشن الدخول للتحميل الأول فقط: الشاشات تُعاد رسمها مع كل تحديث مباشر (نقاط حياة/نتائج)،
       وإعادة تشغيل الدخول كل مرة = وميض مزعج — بعد أول ثانية ونصف تُعطَّل (تفاعلات الأزرار/التوست تبقى) — */
  body.anim-done .card,body.anim-done .match,body.anim-done .prow{animation:none}

  /* ═══════ 📱 راحة الجوال في بنّاء التشكيلة (2026-07-13) — صفوف أرحب وأهداف لمس أكبر ═══════ */
  .dkres{padding:9px 10px;gap:11px;min-height:60px}
  .dkres img{width:42px}
  .dknoimg{width:42px;height:60px}
  .dkresn{font-size:13.5px;line-height:1.55}
  .dkresb{gap:7px}
  .dkresb button{width:42px;height:42px;border-radius:10px}
  .dkres{contain-intrinsic-size:auto 72px}
  .dkresults{max-height:min(390px,46vh)}                         /* ~٥ صفوف بالحجم الأرحب */
  .dkrow{padding:8px 0;gap:10px}
  .dkrow .dkimg,.dkrow .cimg img{width:40px}
  .dkqty{gap:9px}
  .dkqty button{width:40px;height:40px;border-radius:10px;font-size:18px}
  .dkrow{contain-intrinsic-size:auto 58px}
  .dkhead{font-size:14.5px;margin-bottom:6px}
  .dksum{padding:10px;font-size:13.5px}
  .dktools{display:flex;justify-content:center;gap:8px;margin:2px 0 10px}
  @media (max-width:560px){
    .modal.dkb{padding:16px 14px}
    .modal.dkb .dksearch{margin:0 -14px 10px;padding:10px 14px 8px;top:-16px}
    .dkfilters .votesel{min-width:31%}
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ✦ طبقة "الهدوء المتقن" (2026-07-28) — تُضاف آخر الملف عن قصد لتحسم أي تعارض
       مع القواعد المكرّرة الأقدم.

       ثلاث قواعد يمشي عليها كل شي:
       ١) الأحمر إشارة، مو ديكور. يظهر فقط في: الزر الأساسي، البثّ المباشر،
          صفّك أنت، والجولة الحالية. أي استخدام غيرها ضعّف معناه.
       ٢) الهرمية من الخط والمسافة — لا من الحدود السميكة ولا الظلال الثقيلة.
       ٣) السطح الداكن ("المسرح") يحمل الهيرو في الوضعين، فيبقى المحتوى هو البطل.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ── الطباعة: مقياس واضح، وأرقام جدوليّة في كل مكان فيه أرقام تُقارن ── */
  h1,h2,h3,.disp{font-weight:800;letter-spacing:-.2px}
  h2.t{font-size:23px;line-height:1.25;margin:2px 0 16px}
  .sechead h3{font-size:17px;letter-spacing:-.1px}
  .eyebrow{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1.4px}
  html[dir="ltr"] .eyebrow{text-transform:uppercase}
  table.stand,.lead-row .lead-pts,.lead-row .lead-rank,.clock,.tv-clock,.lp-big,.lp-big2,.pcell .n,.dcbig,.dksum
    {font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

  /* ── البطاقة: خط شعري + عمق خفيف. لا تدرّجات. ── */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
        box-shadow:var(--shadow-soft);padding:var(--sp-4)}
  .card>h3:first-child{padding-inline-start:0;font-size:16px;margin-top:0}
  .card>h3:first-child::before{display:none}   /* الشريط الأحمر الصغير كان يستهلك معنى الأحمر بلا داعي */

  /* ── الهيرو = "مسرح" داكن. الأحمر بس للبثّ المباشر وزر الإجراء. ── */
  .hero,.chero{background:linear-gradient(165deg,var(--stage-1),var(--stage-2));
        border:1px solid var(--stage-line);border-radius:var(--radius-lg);
        box-shadow:var(--shadow-tile);color:#fff;overflow:hidden}
  .hero{padding:26px 22px}
  .chero{padding:18px 20px}
  .hero::after,.chero::after{display:block;content:"";position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.07), transparent 60%);animation:none}
  /* ⚠️ لا تستخدم .hero>* هنا. العنصر الرئيسي على الصفحة الرئيسية صنفه "studio-home hero"،
     فمُحدِّد الأبناء العام كان يفرض position:relative على دوائر التوهّج الزخرفية
     (.studio-glow) الي لازم تكون absolute — فدخلت في تدفّق الصفحة وأضافت
     ~٦٠٠px فراغ وهمي داخل الهيرو على الجوّال، وكمان z-index:1 غطّى z-index:-1 تبعها.
     الهدف الأصلي كان رفع محتوى الهيرو فوق القرص الأحمر (::before) — فنُحدّده بدقّة: */
  .hero>.hero-k,.hero>.hero-t,.hero>.hero-s,.hero>.hero-actions,
  .chero>.chero-k,.chero>.chero-t{position:relative;z-index:1}
  .hero .hero-k,.chero-k{font-size:11px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,.62);opacity:1}
  .hero .hero-t{font-size:27px;font-weight:800;line-height:1.22;margin-top:8px;letter-spacing:-.4px}
  .chero-t{font-size:20px;font-weight:800;line-height:1.25;margin-top:5px;letter-spacing:-.3px}
  .hero .hero-s{font-size:14px;color:rgba(255,255,255,.72);margin-top:9px}
  .hero-actions{margin-top:18px;gap:9px}
  /* الزر الأساسي أبيض على المسرح — أعلى تباين وأنظف من أحمر على داكن */
  .hero .hero-btn{background:#fff;color:#15171c;border:1px solid transparent;border-radius:var(--radius-sm);
        font-weight:800;font-size:14px;padding:11px 18px;box-shadow:none;transition:transform .12s,background .15s}
  .hero .hero-btn:active{transform:scale(.975)}
  .hero .hero-btn.ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.22)}
  @media(hover:hover){
    .hero .hero-btn:hover{background:#f0f0f2}
    .hero .hero-btn.ghost:hover{background:rgba(255,255,255,.15)}
  }
  /* نقطة "مباشر" نابضة — المكان الوحيد الي فيه حركة مستمرة، لأنها تنقل حالة فعلية */
  .hero .hero-k{display:inline-flex;align-items:center;gap:7px}

  /* ── الأزرار ── */
  .btn{border-radius:var(--radius-sm);font-weight:700;font-size:14.5px;padding:12px 18px;
       border:1px solid transparent;box-shadow:none;transition:transform .12s,background .15s,border-color .15s}
  .btn:active:not(:disabled){transform:scale(.975)}
  .btn-gold{background:var(--accent-btn);color:var(--accent-on)}
  .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
  .btn-sm{padding:8px 13px;font-size:13px;border-radius:9px}
  @media(hover:hover){
    .btn-gold:hover:not(:disabled){filter:brightness(1.07)}
    .btn-ghost:hover:not(:disabled){border-color:var(--muted)}
    .card:hover{box-shadow:var(--shadow-soft)}
  }
  .btn-gold::after{display:none}   /* لا لمعة زجاجية */

  /* ── الحقول: هادئة، وحلقة تركيز واضحة بلون الهوية ── */
  input,select,textarea,.votesel,.dltext{background:var(--surface);border:1px solid var(--line);
        border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}
  input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,60,59,.14)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* ── الهيدر والشريط السفلي: شبه شفاف مع ضباب — يوحي بالطبقات بلا خطوط ثقيلة ── */
  /* لون صريح أولًا كخطّة بديلة: لو المتصفّح ما بيدعم color-mix يبقى السطح معتمًا لا شفافًا */
  header.top{background:var(--surface);
        background:color-mix(in srgb,var(--surface) 82%,transparent);
        backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
        border-bottom:1px solid var(--line)}
  .brand .logo{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);box-shadow:none;animation:none}
  .brand h1{font-size:18px;font-weight:800;letter-spacing:-.2px}
  .brand .sub{color:var(--muted);font-weight:600}
  .theme-btn{border:1px solid var(--line);background:var(--surface)}
  .badge{border:1px solid var(--line);font-weight:700;font-size:11px}
  /* "مباشر" يأخذ لون الهوية: في هذا النظام الأحمر = حالة/إجراء، وهو المعنى الصح لبثّ جارٍ.
     (أبيض على الأخضر كان 3.30:1 — راسب في WCAG أصلًا) */
  .badge.live{color:#fff;background:var(--accent-btn);border-color:transparent;animation:none}
  /* "انتهت" تُخفَّض نبرتها — ما في داعي تصرخ بالأحمر بعد ما تخلص البطولة،
     وكمان يمنع تضارب المعنى مع شارة "مباشر" الحمراء */
  .badge.ended{color:var(--muted);background:transparent;border-color:var(--line)}
  .tabbar{background:var(--surface);
        background:color-mix(in srgb,var(--surface) 86%,transparent);
        backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
        border-top:1px solid var(--line);box-shadow:none}
  .tabbar button{font-weight:700;font-size:10.5px;color:var(--muted);border-radius:var(--radius-sm)}
  .tabbar button.on{color:var(--accent);background:rgba(225,60,59,.10);box-shadow:none}
  .more-menu{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

  /* ── صفوف اللاعبين والمباريات ── */
  .prow{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:none;padding:10px 12px}
  .match{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:13px}
  .match.dispute{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
  .pair .nm{font-weight:700}
  .pair .vs{background:var(--bg2);color:var(--muted);border:0;font-weight:700;font-size:11px}
  .res button{border:1px solid var(--line);background:var(--surface);color:var(--muted);
        border-radius:9px;font-weight:700;padding:9px}
  .res button.sel{background:var(--accent-btn);color:#fff;border-color:transparent}
  .res button.dl.sel{background:var(--danger);color:#fff;border-color:transparent}
  .iconbtn{border:1px solid var(--line);background:var(--surface)}

  /* ── جدول الترتيب: قلب التطبيق. رأس خفيف، صفوف مفصولة بخط شعري،
        وأول ٣ مراكز بشريط لون رقيق (نفس ألوان لوحة الشرف — مصدر واحد). ── */
  table.stand{border:0;font-size:13.5px}
  table.stand th{background:transparent;color:var(--muted);font-size:10.5px;font-weight:700;
        letter-spacing:.6px;padding:8px 6px;border-bottom:1px solid var(--line);text-transform:uppercase}
  table.stand td{padding:11px 6px;border-bottom:1px solid var(--line)}
  table.stand tr:last-child td{border-bottom:0}
  table.stand td:first-child{color:var(--muted);font-weight:700;width:34px}
  table.stand td.n{font-weight:600;color:var(--text)}
  table.stand .pts{font-weight:800;color:var(--text)}
  table.stand .tb2{color:var(--muted);font-size:12px}
  /* المراكز الأولى: شريط لون رقيق فقط — الرقم يبقى ظاهرًا في كل الصفوف حتى يبقى
     العمود الرقمي متراصفًا ومقروءًا. الأوسمة (🥇🥈🥉) تُستخدم في لوحة الشرف حيث فيها مساحة.
     الأصناف r1/r2/r3 صريحة من app.js بدل nth-child الهشّ. */
  table.stand tr.r1 td:first-child{box-shadow:inset 3px 0 0 var(--rank1)}
  table.stand tr.r2 td:first-child{box-shadow:inset 3px 0 0 var(--rank2)}
  table.stand tr.r3 td:first-child{box-shadow:inset 3px 0 0 var(--rank3)}
  html[dir="rtl"] table.stand tr.r1 td:first-child{box-shadow:inset -3px 0 0 var(--rank1)}
  html[dir="rtl"] table.stand tr.r2 td:first-child{box-shadow:inset -3px 0 0 var(--rank2)}
  html[dir="rtl"] table.stand tr.r3 td:first-child{box-shadow:inset -3px 0 0 var(--rank3)}
  table.stand tr.r1 td.n{font-weight:800}
  /* صفّك أنت: الأحمر هنا يعني "هذا أنت" */
  table.stand tr.me td{background:rgba(225,60,59,.07)}
  table.stand tr.me td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
  html[dir="rtl"] table.stand tr.me td:first-child{box-shadow:inset -3px 0 0 var(--accent)}
  table.stand tr.me td.n{color:var(--accent-strong);font-weight:800}
  @media(hover:hover){table.stand tr:not(:first-child):hover td{background:color-mix(in srgb,var(--text) 4%,transparent)}}

  /* ── لوحة الشرف: نفس لغة المراكز حرفيًّا ── */
  .lead-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
        box-shadow:none;padding:11px 13px}
  .lead-row.p1,.lead-row.p2,.lead-row.p3{background:var(--surface)}
  .lead-row.p1{box-shadow:inset 3px 0 0 var(--rank1)}
  .lead-row.p2{box-shadow:inset 3px 0 0 var(--rank2)}
  .lead-row.p3{box-shadow:inset 3px 0 0 var(--rank3)}
  html[dir="rtl"] .lead-row.p1{box-shadow:inset -3px 0 0 var(--rank1)}
  html[dir="rtl"] .lead-row.p2{box-shadow:inset -3px 0 0 var(--rank2)}
  html[dir="rtl"] .lead-row.p3{box-shadow:inset -3px 0 0 var(--rank3)}
  .lead-row.podium{color:var(--text)}
  .lead-row .lead-rank{color:var(--muted);font-weight:800;font-size:15px}
  .lead-row .lead-name{font-weight:700}
  .lead-row .lead-pts{color:var(--text);font-weight:800;font-size:18px}
  .lead-row.podium .lead-pts{color:var(--text)}
  .lead-row.me{border-color:var(--accent);outline:none}
  .av{border:0;box-shadow:none}

  /* ── الشارات ── */
  .pill,.rank-chip{border:1px solid var(--line);font-weight:700}
  .rank-chip{background:var(--surface2);color:var(--accent);box-shadow:none}
  .pill.live{background:var(--accent-btn);color:#fff;border-color:transparent}
  .ach{border:1px solid var(--line);border-radius:var(--radius-sm)}
  .ach.on{border-color:color-mix(in srgb,var(--rank1) 55%,var(--line));box-shadow:none}
  .prow .st{border:1px solid var(--line);font-weight:700}

  /* ── الإعلان: شريط تنبيه واضح بلا صراخ ── */
  .announce-bar{background:var(--surface);color:var(--text);border:1px solid var(--line);
        border-inline-start:3px solid var(--accent);border-radius:var(--radius-sm);
        box-shadow:var(--shadow-soft);font-weight:600}

  /* ── التوست ── */
  .toast>div{background:var(--surface);color:var(--text);border:1px solid var(--line);
        border-radius:12px;box-shadow:var(--shadow);font-weight:600;padding:11px 16px}
  .toast>div::before,.toast>div::after{display:none}

  /* ── النوافذ ── */
  .modal{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px}
  .modal-back{background:rgba(15,17,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .authtabs{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
  .authtabs button{font-weight:700;border-radius:8px}
  .authtabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-soft)}
  .pcell{background:var(--bg2);border:0;border-radius:var(--radius-sm)}
  .pcell .n{color:var(--text);font-weight:800}
  .logrow{background:var(--bg2);border:0}

  /* ── مربّعات الرئيسية ── */
  .tile .circ{background:var(--surface);border:1px solid var(--line);border-radius:15px;
        box-shadow:var(--shadow-soft);font-size:21px}
  .tile:active .circ{transform:scale(.94)}
  .tile.accent .circ{background:var(--accent-btn);color:#fff;border-color:transparent}
  .tile .tlabel{font-weight:600;color:var(--muted);font-size:12px}

  /* ── العدّادات وأرقام الحياة ── */
  .clock{font-weight:800;font-size:60px;letter-spacing:-1px;color:var(--text)}
  .clock.warn{color:#e08a3c}
  .clock.done{color:var(--danger)}
  .clock-ring{border:0}
  .clock-hole{border:0;background:var(--surface);box-shadow:none}
  .sticky-timer{border:1px solid var(--line);box-shadow:var(--shadow-soft)}
  .lpcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
  .lpcol.sel{border-color:var(--accent);background:rgba(225,60,59,.06);box-shadow:0 0 0 1px var(--accent)}
  .lp-big,.lp-big2{color:var(--text);font-weight:800;letter-spacing:-1px}
  .lp-big.low,.lp-big2.low,.lp-big.crit,.lp-big2.crit{color:var(--danger)}
  .lp-chips button,.lp-custom button{border:1px solid var(--line);background:var(--surface);
        font-weight:700;box-shadow:none}

  /* ── العناصر الي كانت مبالغ فيها: هدوء بدل الوهج ── */
  .tv-qr{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-tile)}
  .ckqr{border:1px solid var(--line);border-radius:var(--radius-sm)}
  .tv-match{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
  .tv-name{color:var(--text);font-weight:800;text-shadow:none;letter-spacing:-.5px}
  .rbann{background:rgba(12,13,16,.82)}
  .rbann-n{font-size:17vmin;text-shadow:none;color:#fff}
  .rbann-sub{color:var(--accent);letter-spacing:5px;font-size:3.4vmin}
  .rbann-sub2{font-size:3vmin}
  .cd321n{font-size:20vmin;text-shadow:none;color:#fff}
  .cd321n.go{font-size:14vmin;color:var(--accent);text-shadow:none}
  .cimg.holo::after,.cimg.holo2::after{opacity:.4}
  .cimg.holo2::before{display:none}    /* البريق المتلألئ كان تشويشًا بصريًّا بحتًا */
  .celebrate-burst{filter:none}
  .statbar-track{border:0;background:var(--bg2)}
  .statbar-track i{background:var(--accent)}
  .lvbar .lvfill{background:var(--accent);border:0}
  .distbar{border:0}
  .toolb{border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:700}
  .swapnm{border:1px dashed var(--muted);border-radius:8px}
  .swapnm.sel{background:var(--accent-btn);color:#fff;border-style:solid;border-color:transparent}
  .install-nudge{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .install-nudge-go{border:0;font-weight:800;background:var(--accent-btn)}
  .netbar{border:0;font-weight:700}
  .loader-ring,.sp-ring{border-width:3px;border-color:var(--line);border-top-color:var(--accent)}
  .sp-brand{text-shadow:none;color:var(--accent);font-size:38px;letter-spacing:1px}
  .logo-hero{box-shadow:var(--shadow-tile);animation:none}
  .br-m{border:1px solid var(--line);box-shadow:none}
  .br-w{color:var(--accent);background:rgba(225,60,59,.07)}
  .br-champ{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .note{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}

  /* ── بنّاء التشكيلة ── */
  .dkres{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
  .dkres::after{display:none}
  .dkrow{border:0;border-bottom:1px solid var(--line)}
  .dkresb button{background:var(--accent-btn);color:#fff;border:0;font-weight:800}
  .dkresb button.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--line)}
  .dkqty button{background:var(--surface);border:1px solid var(--line);color:var(--text);font-weight:700}
  .dksum,.dkprices{background:var(--bg2);border:0;font-weight:700}
  .dkcount{background:var(--accent-btn);color:#fff}
  .dkhead{font-weight:800;color:var(--text)}
  .dkdecks{background:var(--surface);border:1px solid var(--line);box-shadow:none}
  .modal.dkb .dksearch{border-bottom:1px solid var(--line)}

  /* ── الجوّال: أعمدة كسر التعادل تتجمّع خلف زر (الجدول كان ٧ أعمدة على ٣٧٥px) ── */
  .stand-tools{display:none;justify-content:center;margin:0 0 10px}
  @media (max-width:560px){
    .stand-tools{display:flex}
    html:not(.stand-full) table.stand th.tbh,
    html:not(.stand-full) table.stand td.tb2{display:none}
    table.stand td{padding:11px 5px}
    .hero{padding:22px 18px}
    .hero .hero-t{font-size:24px}
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ✨ طبقة المؤثّرات (2026-07-28) — "رائعة بلا كلفة"

     قاعدة حديدية واحدة تحكم كل سطر تحت: **كل حركة هي transform أو opacity فقط.**
     هدول الاثنان بس بينفّذهم المتصفّح على الـGPU (compositor) بلا إعادة حساب
     تخطيط ولا إعادة رسم. لهيك ممنوع نهائيًّا في هذه الطبقة تحريك:
        width/height/top/left/margin/padding  → تعيد حساب التخطيط (layout)
        box-shadow/background/border/filter   → تعيد الرسم (paint)، والـblur الأغلى
     وممنوع كذلك أنيميشن لا نهائي على عناصر كثيرة (استهلاك بطارية بلا مقابل):
     في الملف كله عنصران فقط فيهم حركة مستمرة، وكلاهما ينقل حالة حقيقية.

     التوقيت: مؤثّرات الدخول تعمل مرّة واحدة عند أول تحميل (بوّابة body.anim-done
     الي بتنضاف بعد ١.٥ ثانية) — لأن شاشات هذا التطبيق تُعاد رسمها مع كل تحديث
     مباشر من Firestore، وأي أنيميشن دخول غير مقيّد بيرجع يشتغل كوميض مزعج
     مع كل نتيجة تُسجَّل. الإحساس المستمر مصدره التفاعل، لا إعادة الرسم.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ── ١) دخول متدرّج أنيق (أول تحميل فقط) ── */
  @keyframes fxRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  .card,.match,.prow,.lead-row{animation:fxRise .42s cubic-bezier(.22,.85,.3,1) both}
  .card:nth-child(1){animation-delay:.02s}  .card:nth-child(2){animation-delay:.07s}
  .card:nth-child(3){animation-delay:.12s}  .card:nth-child(4){animation-delay:.17s}
  .card:nth-child(5){animation-delay:.22s}  .card:nth-child(n+6){animation-delay:.26s}
  .match:nth-child(1){animation-delay:.02s} .match:nth-child(2){animation-delay:.06s}
  .match:nth-child(3){animation-delay:.1s}  .match:nth-child(4){animation-delay:.14s}
  .match:nth-child(n+5){animation-delay:.18s}
  .lead-row:nth-child(1){animation-delay:.02s} .lead-row:nth-child(2){animation-delay:.05s}
  .lead-row:nth-child(3){animation-delay:.08s} .lead-row:nth-child(4){animation-delay:.11s}
  .lead-row:nth-child(n+5){animation-delay:.14s}
  /* البوّابة: بعد أول ١.٥ ثانية تتوقّف تمامًا فما تتكرّر مع تحديثات Firestore */
  body.anim-done .card,body.anim-done .match,body.anim-done .prow,body.anim-done .lead-row{animation:none}

  /* ── ٢) ردّ فعل اللمس: كل عنصر قابل للنقر ينخسف قليلًا (transform فقط) ── */
  .btn,.hero-btn,.iconbtn,.theme-btn,.tile .circ,.res button,.lp-chips button,.lp-custom button,
  .dkresb button,.dkqty button,.toolb,.authtabs button,.tabbar button,.lead-row,.card{
    transition:transform .16s cubic-bezier(.22,.85,.3,1), opacity .16s ease,
               background-color .16s ease, border-color .16s ease, color .16s ease}
  .btn:active:not(:disabled),.hero-btn:active,.iconbtn:active,.theme-btn:active,
  .res button:active,.dkresb button:active,.dkqty button:active,.toolb:active,
  .lp-chips button:active,.lp-custom button:active{transform:scale(.955)}
  .tile:active .circ{transform:scale(.93)}
  .lpcol:active{transform:scale(.985)}
  .tabbar button:active{transform:scale(.9)}

  /* ── ٣) هوفر (أجهزة الماوس فقط — ما بيمسّ الجوّال إطلاقًا) ── */
  @media(hover:hover){
    .card:hover{transform:translate3d(0,-2px,0)}
    .match:hover{transform:translate3d(0,-1px,0)}
    .lead-row:hover{transform:translate3d(0,-1px,0)}
    .tile:hover .circ{transform:translate3d(0,-3px,0)}
    .btn:hover:not(:disabled){transform:translate3d(0,-1px,0)}
    .prow:hover{transform:translate3d(0,-1px,0)}
  }

  /* ── ٤) الهيرو: بقعة ضوء تمرّ ببطء. عنصر واحد، transform+opacity فقط ──
        (وليس background-position — تحريكه يعيد الرسم في كل إطار) */
  /* ملاحظة: left فيزيائي مقصود (لا inset-inline-start) — الـtransform فيزيائي دائمًا،
     فلو صارت البداية منطقيّة لانقلبت في RTL وطلعت البقعة خارج الشاشة فورًا.
     بقعة الضوء ما إلها اتجاه قراءة، فمرورها يسار→يمين صحيح في الوضعين. */
  .hero::before{content:"";position:absolute;top:-60%;left:-35%;
        width:70%;height:220%;pointer-events:none;z-index:0;
        background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
        transform:translate3d(-60%,0,0) rotate(8deg);
        animation:fxSweep 13s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes fxSweep{
    0%{transform:translate3d(-60%,0,0) rotate(8deg);opacity:0}
    12%{opacity:1}
    58%{opacity:1}
    72%,100%{transform:translate3d(240%,0,0) rotate(8deg);opacity:0}}

  /* ── ٥) نقطة "بثّ مباشر" نابضة — الحركة المستمرة الثانية والأخيرة ──
        عنصر واحد صغير، حالة حقيقية (البطولة جارية الآن) */
  .hero .hero-k.live{color:#fff}
  .hero .hero-k .livedot{position:relative;display:inline-block;width:8px;height:8px;
        border-radius:50%;background:#ff5d57;flex:none}
  .hero .hero-k .livedot::after{content:"";position:absolute;inset:0;border-radius:50%;
        background:#ff5d57;animation:fxPing 1.9s cubic-bezier(.3,0,.7,1) infinite}
  @keyframes fxPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}

  /* ── ٦) النوافذ: قفزة ناعمة + تعتيم متدرّج ── */
  @keyframes fxPop{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}to{opacity:1;transform:none}}
  .modal{animation:fxPop .26s cubic-bezier(.22,.9,.3,1.05)}
  @keyframes fxFade{from{opacity:0}to{opacity:1}}
  .modal-back{animation:fxFade .18s ease both}

  /* ── ٧) التوست: قفزة مرنة من الأسفل ── */
  @keyframes fxToast{0%{opacity:0;transform:translate3d(0,22px,0) scale(.96)}
        62%{transform:translate3d(0,-3px,0) scale(1.01)}100%{opacity:1;transform:none}}
  /* الانتقال الأصلي مقصود إبقاؤه: الأنيميشن يتولّى الدخول، والـtransition يتولّى
     الخروج لمّا ينشال .show — لو ألغيناه بيختفي التوست بقفزة مفاجئة */
  .toast.show>div{animation:fxToast .34s cubic-bezier(.22,.9,.3,1.1) both}

  /* ── ٨) التبويب النشط: نبضة ترحيب بالأيقونة (مرّة عند التنشيط) ──
        آمنة من التكرار لأن شريط التبويبات مُخزَّن (_lastHTML) فما يُعاد رسمه بلا داعي */
  @keyframes fxTabPop{0%{transform:scale(1)}42%{transform:scale(1.2)}100%{transform:scale(1)}}
  .tabbar button.on .ic{animation:fxTabPop .34s cubic-bezier(.3,1.5,.5,1)}

  /* ── ٩) حلقة التركيز تظهر بلطف (للوحة المفاتيح) ── */
  :focus-visible{transition:outline-offset .12s ease}

  /* ── ١٠) عدّاد الوقت عند التحذير: نبضة قياس فقط، وبحالة التحذير حصرًا ── */
  @keyframes fxWarn{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  .clock.warn{animation:fxWarn 1.3s ease-in-out infinite}
  .clock.done{animation:fxWarn .7s ease-in-out infinite}

  /* (١١ سابقًا: نبضة على صفّك أنت — أُسقطت عن قصد. transform على <tr> سلوكه غير
      موثوق بين محرّكات المتصفّحات وقد يزحلق حدود الجدول، والمكسب البصري ضعيف.
      تمييز صفّك يبقى بالشريط الأحمر واللون، وهو أوضح وأرخص.) */

  /* ── ١١) هيكل التحميل (skeleton): لمعة تمرّ — transform فقط ── */
  .sk::after{animation:fxShimmer 1.25s linear infinite}
  @keyframes fxShimmer{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}

  /* ── ١٣) شعار البداية: ظهور واحد هادئ ── */
  @keyframes fxLogo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  .logo-hero{animation:fxLogo .5s cubic-bezier(.22,.9,.3,1.05) both}

  /* ── تنظيف أداء: ما منخلّي will-change دائمًا على الشريط السفلي —
        translateZ(0) لحاله كافي لترقية الطبقة، وwill-change الدائم يحجز
        ذاكرة GPU طوال الجلسة بلا داعي ── */
  .tabbar{will-change:auto}

  /* ── احترام تقليل الحركة: القاعدة العامة أعلى الملف تلغي كل شي بـ!important،
        وهذه إضافة صريحة للعناصر الي تحمل حالة ثابتة ── */
  @media (prefers-reduced-motion: reduce){
    .hero::before{display:none}
    .hero .hero-k .livedot::after{display:none}
  }

  /* ═══ إصلاح أداء لأنيميشنات قديمة كانت تكلّف تخطيطًا/رسمًا في كل إطار ═══
     اكتُشفت بفحص برمجي لكل الـ@keyframes في الملف (٥٨ إطارًا) وتصنيف الخصائص
     الي تحرّكها. هدول الثلاثة كانوا فعليًّا يشتغلون على الشاشة. */

  /* ١) خطّ الماسح كان يحرّك top — وهذا يجبر إعادة حساب التخطيط ٦٠ مرّة بالثانية
        طول ما الكاميرا مفتوحة (أسوأ نوع). صار transform على الـGPU. */
  .scanline{top:0;animation:fxScan 1.9s ease-in-out infinite}
  @keyframes fxScan{0%{transform:translate3d(0,3vh,0)}
                    50%{transform:translate3d(0,70vh,0)}
                    100%{transform:translate3d(0,3vh,0)}}

  /* ٢) نقاط الحياة الحرجة: كانت تحرّك text-shadow (إعادة رسم لنصّ ضخم كل إطار).
        صارت نبضة قياس فقط — نفس الإحساس بلا كلفة. اللون الأحمر ثابت. */
  .lp-big.crit,.lp-big2.crit{color:var(--danger);animation:fxCrit 1s ease-in-out infinite}
  @keyframes fxCrit{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

  /* ٣) زر "مهم": كان يحرّك box-shadow (إعادة رسم). صار نبضة transform. */
  .pulse-imp{animation:fxImp 2.1s ease-in-out infinite}
  @keyframes fxImp{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}

  @media (prefers-reduced-motion: reduce){
    .scanline,.lp-big.crit,.lp-big2.crit,.pulse-imp{animation:none}
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ✦ KYO PAL Signature — طبقة العرض الفاخرة (2026-08-02)
     ترفع الإحساس من "لوحة أدوات" إلى منتج حيّ بمستوى منصّات الشركات الكبيرة،
     مع إبقاء الحركة خفيفة ومحصورة في transform/opacity حتى لا تتأثر البطولة.
     ═══════════════════════════════════════════════════════════════════════════ */
  html.midnight body,
  html[data-theme="dark"] body{
    background:
      radial-gradient(900px 520px at 84% -12%,rgba(225,60,59,.16),transparent 62%),
      radial-gradient(760px 460px at -12% 24%,rgba(109,94,247,.10),transparent 64%),
      linear-gradient(180deg,#07080b 0%,#0d0f14 48%,#090a0d 100%);
  }
  html.midnight body::before,
  html[data-theme="dark"] body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.27;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);
  }
  html:not([data-theme="dark"]) body{
    background:radial-gradient(880px 460px at 92% -12%,rgba(225,60,59,.08),transparent 60%),var(--bg);
  }
  .wrap{max-width:980px;padding-top:26px}
  header.top{
    background:rgba(10,11,14,.76);
    border-bottom-color:rgba(255,255,255,.08);
    box-shadow:0 10px 36px rgba(0,0,0,.16);
  }
  header.top::after{content:"";display:block;height:1px;margin:0 auto;max-width:980px;
    background:linear-gradient(90deg,transparent,rgba(255,106,100,.8),rgba(255,255,255,.16),transparent);
    opacity:.7}
  html:not([data-theme="dark"]) header.top{
    background:rgba(255,255,255,.78);border-bottom-color:rgba(20,23,28,.10)
  }
  .brand{max-width:980px;padding:13px 18px}
  .brand .logo{width:42px;height:42px;border-radius:13px;border-color:rgba(255,255,255,.16);
    box-shadow:0 8px 22px rgba(225,60,59,.22)}
  .brand h1{font-family:var(--disp);font-size:19px;letter-spacing:.3px}
  .brand .sub{font-size:10px;letter-spacing:.65px}
  .hero,.chero{
    border-color:rgba(255,255,255,.14);
    background:
      radial-gradient(520px 220px at 92% -18%,rgba(255,106,100,.32),transparent 68%),
      radial-gradient(420px 240px at 4% 120%,rgba(109,94,247,.20),transparent 70%),
      linear-gradient(138deg,#171a23 0%,#101217 57%,#18151c 100%);
    box-shadow:0 22px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.09);
  }
  .hero{min-height:230px;padding:34px 32px;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center}
  .hero::after,.chero::after{
    background:linear-gradient(125deg,transparent 8%,rgba(255,255,255,.055) 50%,transparent 92%),
      radial-gradient(240px 150px at 10% 0%,rgba(255,255,255,.06),transparent 72%);
  }
  .hero::after{opacity:.78}
  .hero .hero-k,.chero-k{color:rgba(255,255,255,.72);letter-spacing:2px}
  .hero .hero-t{font-size:clamp(30px,4vw,48px);max-width:760px;letter-spacing:-1.2px;line-height:1.08;text-wrap:balance}
  .hero .hero-s{max-width:650px;font-size:15px;color:rgba(255,255,255,.68)}
  .hero-actions{max-width:560px;gap:12px;margin-top:22px}
  .hero .hero-btn{min-height:48px;border-radius:12px;padding:12px 22px;background:var(--accent-btn);color:#fff;
    box-shadow:0 12px 28px -14px rgba(225,60,59,.9),inset 0 1px 0 rgba(255,255,255,.18)}
  .hero .hero-btn.ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);box-shadow:none}
  @media(hover:hover){.hero .hero-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
    .hero .hero-btn.ghost:hover{background:rgba(255,255,255,.13)}}
  .chero{padding:24px 26px;margin-bottom:18px;min-height:116px}
  .chero-t{font-size:clamp(22px,3vw,32px);letter-spacing:-.6px}
  .card{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:color-mix(in srgb,var(--line) 80%,transparent);
    box-shadow:0 12px 34px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.035)}
  html:not([data-theme="dark"]) .card{box-shadow:0 14px 32px -24px rgba(16,24,40,.32),inset 0 1px 0 rgba(255,255,255,.8)}
  @media(hover:hover){.card:hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
    box-shadow:0 18px 42px -28px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent)}}
  .sechead{margin-top:28px}
  .sechead h3{font-family:var(--disp);font-size:18px;letter-spacing:-.3px}
  .tile-grid{gap:16px}
  .tile .circ{border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--surface2));
    box-shadow:0 14px 28px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .22s cubic-bezier(.22,.85,.3,1),border-color .2s,box-shadow .2s}
  .tile.accent .circ{background:linear-gradient(145deg,var(--accent),var(--accent-strong));box-shadow:0 14px 28px -16px rgba(225,60,59,.75)}
  @media(hover:hover){.tile:hover .circ{border-color:color-mix(in srgb,var(--accent) 44%,var(--line));box-shadow:0 18px 34px -18px rgba(225,60,59,.42),inset 0 1px 0 rgba(255,255,255,.12)}}
  .announce-bar{box-shadow:0 14px 32px -24px rgba(0,0,0,.65);background:linear-gradient(110deg,var(--surface),color-mix(in srgb,var(--surface) 84%,var(--accent)))}
  .tabbar{background:rgba(10,11,14,.84);border-top-color:rgba(255,255,255,.10);box-shadow:0 -12px 34px -26px rgba(0,0,0,.8)}
  html:not([data-theme="dark"]) .tabbar{background:rgba(255,255,255,.88);border-top-color:rgba(20,23,28,.10)}
  .tabbar button.on{background:linear-gradient(145deg,rgba(225,60,59,.2),rgba(225,60,59,.08));box-shadow:inset 0 0 0 1px rgba(255,106,100,.24),0 8px 22px -16px rgba(225,60,59,.7)}
  .credit{opacity:.7;letter-spacing:.15px}
  @media(max-width:560px){
    .wrap{padding-top:16px}
    .hero{min-height:224px;padding:27px 20px;border-radius:20px}
    .hero .hero-t{font-size:30px;letter-spacing:-.8px}
    .hero .hero-s{font-size:13.5px}
    .hero-actions{gap:8px;margin-top:18px}
    .hero .hero-btn{min-height:46px;padding:11px 14px}
    .chero{padding:20px 18px;min-height:104px}
    .tile-grid{gap:10px}
  }
  @media(prefers-reduced-motion:reduce){
    .tile .circ,.hero .hero-btn{transition:none}
  }

  /* ═══ Homepage Signature — منتج فخم، لا مجرد شاشة بطولة ═══ */
  .landing-intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:center;
    min-height:274px;padding:26px 8px 30px;margin-bottom:14px;overflow:hidden}
  .landing-intro::before{content:"";position:absolute;inset:16px 0;border-radius:28px;pointer-events:none;
    background:radial-gradient(600px 260px at 8% 0%,rgba(225,60,59,.13),transparent 65%),
      linear-gradient(135deg,rgba(255,255,255,.035),transparent 48%);border:1px solid rgba(255,255,255,.055)}
  .landing-intro-copy,.landing-emblem{position:relative;z-index:1}
  .landing-intro-copy{padding:16px 24px}
  .landing-intro-copy h2{font-family:var(--disp);font-size:clamp(32px,5vw,58px);line-height:1.04;letter-spacing:-1.9px;max-width:700px;margin:13px 0 14px;color:var(--text);text-wrap:balance}
  .landing-intro-copy p{font-size:16px;line-height:1.75;color:var(--muted);max-width:620px;margin:0}
  .landing-signals{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
  .landing-signals span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:99px;background:color-mix(in srgb,var(--surface) 74%,transparent);font-size:12px;font-weight:700;color:var(--muted)}
  .landing-signals i{color:var(--accent);font-style:normal;font-size:15px}
  .landing-emblem{min-height:224px;display:grid;place-items:center;isolation:isolate}
  .landing-emblem::before{content:"";position:absolute;width:182px;height:182px;border-radius:50%;background:rgba(225,60,59,.16);filter:blur(26px);z-index:-2}
  .landing-emblem .logo-hero{width:124px;height:124px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 54px -14px rgba(225,60,59,.85),0 0 0 10px rgba(225,60,59,.06);animation:signatureFloat 5s ease-in-out infinite}
  .emblem-orbit{position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;transform:rotate(-22deg);pointer-events:none}
  .orbit-one{width:190px;height:112px;border-left-color:rgba(255,106,100,.72);border-right-color:rgba(109,94,247,.5);animation:signatureOrbit 18s linear infinite}
  .orbit-two{width:154px;height:194px;border-top-color:rgba(255,255,255,.35);border-bottom-color:rgba(255,106,100,.4);transform:rotate(32deg);animation:signatureOrbitReverse 22s linear infinite}
  .emblem-star{position:absolute;top:29px;inset-inline-end:28px;color:#ff8a85;font-size:18px;text-shadow:0 0 18px rgba(255,106,100,.85);animation:signaturePulse 2.8s ease-in-out infinite}
  @keyframes signatureFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes signatureOrbit{to{transform:rotate(338deg)}}
  @keyframes signatureOrbitReverse{to{transform:rotate(-328deg)}}
  @keyframes signaturePulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.14)}}
  .landing-proof{margin:4px 0 28px}
  .proof-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 4px 12px}
  .proof-heading h2{font-family:var(--disp);font-size:22px;line-height:1.2;margin:5px 0 0;letter-spacing:-.5px}
  .proof-line{height:1px;flex:1;max-width:260px;margin-bottom:7px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55}
  .proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .proof-card{position:relative;display:flex;gap:13px;min-height:126px;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface2) 88%,transparent));box-shadow:0 16px 34px -28px rgba(0,0,0,.85);overflow:hidden;transition:transform .22s ease,border-color .2s ease,box-shadow .2s ease}
  .proof-card::after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;top:-42px;inset-inline-end:-28px;background:rgba(225,60,59,.13);filter:blur(4px)}
  .proof-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 22px 42px -28px rgba(225,60,59,.35)}
  .proof-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:rgba(225,60,59,.13);color:var(--accent);font-size:19px;font-weight:800}
  .proof-card h3{font-family:var(--disp);font-size:14px;margin:1px 0 5px;letter-spacing:-.2px}
  .proof-card p{font-size:12px;color:var(--muted);line-height:1.65;margin:0}
  @media(max-width:700px){
    .landing-intro{grid-template-columns:minmax(0,1fr) 118px;gap:10px;min-height:248px;padding:20px 0 24px}
    .landing-intro-copy{padding:14px 9px 14px 16px}
    .landing-intro-copy h2{font-size:34px;letter-spacing:-1.1px;margin-top:10px}
    .landing-intro-copy p{font-size:13px;line-height:1.6}
    .landing-signals{gap:6px;margin-top:14px}
    .landing-signals span{font-size:10px;padding:6px 8px}
    .landing-emblem{min-height:176px;transform:scale(.82);transform-origin:center}
    .proof-grid{grid-template-columns:1fr;gap:9px}
    .proof-card{min-height:94px;padding:14px}
    .proof-line{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .landing-emblem .logo-hero,.orbit-one,.orbit-two,.emblem-star{animation:none}
    .proof-card{transition:none}
  }

  /* ═══ Duel Arena — مساحة مبارزات بدل قسم التعريف التقليدي ═══ */
  .landing-arena{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);gap:22px;align-items:stretch;margin:4px 0 30px;padding:24px;border:1px solid rgba(255,255,255,.13);border-radius:20px;overflow:hidden;background:
    radial-gradient(300px 180px at 94% 8%,rgba(225,60,59,.17),transparent 74%),
    radial-gradient(300px 180px at 4% 100%,rgba(109,94,247,.12),transparent 72%),
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:0 20px 48px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
  .landing-arena::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(135deg,#000,transparent 80%)}
  .arena-copy,.arena-visual{position:relative;z-index:1}
  .arena-copy{padding:11px 10px}
  .arena-copy h2{font-family:var(--disp);font-size:clamp(25px,3vw,38px);letter-spacing:-.9px;line-height:1.1;margin:10px 0 10px}
  .arena-copy p{color:var(--muted);font-size:13.5px;line-height:1.7;max-width:520px;margin:0}
  .arena-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
  .arena-stats span{display:flex;align-items:baseline;gap:6px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.16)}
  .arena-stats b{font-family:var(--disp);font-size:16px;color:var(--text)}
  .arena-stats small{font-size:10px;color:var(--muted);font-weight:700}
  .arena-visual{min-height:194px;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:
    radial-gradient(130px 100px at 50% 40%,rgba(225,60,59,.16),transparent 74%),linear-gradient(145deg,rgba(4,5,8,.8),rgba(23,20,30,.75));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 18px 34px -24px rgba(0,0,0,.9);overflow:hidden}
  .arena-visual::before,.arena-visual::after{content:"";position:absolute;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);opacity:.5}
  .arena-visual::before{top:32%}.arena-visual::after{bottom:28%}
  .arena-scan{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);transform:translateX(-110%);animation:arenaSweep 7s ease-in-out infinite;pointer-events:none}
  .arena-topline,.arena-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;font-family:var(--disp);font-weight:800;letter-spacing:1.2px}
  .arena-topline i{font-style:normal;color:#ff8a85;letter-spacing:.4px}
  .arena-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:44px 0 22px;text-align:center;font-family:var(--disp);font-size:13px;font-weight:800;color:var(--text)}
  .arena-versus b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:10px;color:#fff;background:linear-gradient(145deg,var(--accent),var(--accent-strong));box-shadow:0 0 0 5px rgba(225,60,59,.1),0 8px 22px -10px rgba(225,60,59,.8)}
  .arena-hp{display:grid;gap:6px;margin:0 0 10px}.arena-hp i{display:block;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--accent),#ff8a85);box-shadow:0 0 14px rgba(255,106,100,.35)}.arena-hp i+ i{justify-self:end;background:linear-gradient(90deg,#8b7bff,var(--purple));box-shadow:0 0 14px rgba(109,94,247,.35)}
  .arena-foot{letter-spacing:.5px}.arena-foot span:first-child,.arena-foot span:last-child{color:var(--text);font-size:14px}.arena-foot span:last-child{text-align:end}
  @keyframes arenaSweep{0%,18%{transform:translateX(-110%);opacity:0}35%,68%{opacity:1}85%,100%{transform:translateX(110%);opacity:0}}
  @media(max-width:700px){
    .landing-arena{grid-template-columns:1fr;gap:14px;padding:17px;margin-bottom:22px}
    .arena-copy{padding:7px 3px}.arena-copy h2{font-size:26px}.arena-copy p{font-size:12.5px}.arena-stats{margin-top:14px}
    .arena-visual{min-height:174px}.arena-versus{margin:34px 0 17px}
  }
  @media(prefers-reduced-motion:reduce){.arena-scan{animation:none}}

  /* ═══ Organizer Command Deck — ملخص سريع للحكم قبل التفاصيل ═══ */
  .console-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 16px}
  .console-metrics>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 98%,transparent),color-mix(in srgb,var(--surface2) 86%,transparent));box-shadow:0 12px 26px -24px rgba(0,0,0,.85)}
  .console-metrics span{grid-row:1 / span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(225,60,59,.13);color:var(--accent);font-weight:900}
  .console-metrics b{font-family:var(--disp);font-size:18px;line-height:1}.console-metrics small{color:var(--muted);font-size:10px;font-weight:700}.console-metrics .metric-alert span{background:rgba(240,163,94,.15);color:#e08a3c}.console-metrics .metric-alert b{color:#e08a3c}
  @media(max-width:560px){.console-metrics{gap:6px}.console-metrics>div{padding:9px 7px;column-gap:5px}.console-metrics span{width:24px;height:24px;font-size:12px}.console-metrics b{font-size:15px}.console-metrics small{font-size:9px}}

  /* ═══ Public Duel Board — شاشة المشاهدة تبدو كساحة، لا كجدول عادي ═══ */
  .tv-mode{max-width:1280px;padding-top:28px}
  .tv-mode .tv-head{padding:18px 20px 16px;margin:0 auto 14px;max-width:1100px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(135deg,rgba(225,60,59,.14),rgba(109,94,247,.1) 52%,rgba(255,255,255,.025));box-shadow:0 18px 44px -30px rgba(0,0,0,.9)}
  .tv-mode .tv-name{font-size:clamp(24px,4vw,44px);letter-spacing:-.9px;color:var(--text)}
  .tv-mode .tv-round{font-family:var(--disp);font-size:12px;letter-spacing:1px;text-transform:uppercase}
  .tv-mode .tv-clock{font-size:clamp(64px,9vw,124px);letter-spacing:-4px;color:var(--text);text-shadow:0 0 30px rgba(255,255,255,.08)}
  .tv-mode .tv-grid{max-width:1100px;margin:0 auto;gap:12px}
  .tv-mode .tv-match{border-color:rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));box-shadow:0 18px 38px -28px rgba(0,0,0,.9)}
  .tv-mode .tv-tbl{color:#ff8a85;letter-spacing:1px}.tv-mode .tv-mid{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(225,60,59,.16);color:#ff8a85;font-size:10px}
  @media(prefers-reduced-motion:reduce){.tv-mode .tv-clock{text-shadow:none}}

  /* ═══ Comic Premium × Tournament Broadcast ═══ */
  .landing-intro,.landing-arena,.hero,.chero,.tv-head,.tv-match{isolation:isolate}
  .landing-intro{border:2px solid rgba(255,255,255,.15);border-radius:10px 28px 10px 28px;box-shadow:8px 8px 0 rgba(225,60,59,.16),0 24px 54px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
  .landing-intro::before{inset:0;border-radius:inherit;background-image:radial-gradient(rgba(255,255,255,.08) .7px,transparent .8px),radial-gradient(rgba(225,60,59,.12) .7px,transparent .8px),linear-gradient(135deg,rgba(255,255,255,.045),transparent 52%);background-size:11px 11px,17px 17px,auto;background-position:0 0,6px 5px,0 0;opacity:.8}
  .landing-intro::after{content:"KYO PAL / DUELIST SERIES";position:absolute;top:12px;inset-inline-end:22px;padding:5px 9px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(0,0,0,.22);color:rgba(255,255,255,.6);font:800 9px/1 var(--disp);letter-spacing:1.4px;transform:rotate(3deg)}
  .landing-intro-copy h2{font-weight:900;text-shadow:2px 2px 0 rgba(225,60,59,.24)}
  .landing-signals span{border-radius:4px;transform:skewX(-5deg);box-shadow:3px 3px 0 rgba(225,60,59,.12)}
  .landing-emblem .logo-hero{border:2px solid rgba(255,255,255,.28);box-shadow:0 20px 54px -14px rgba(225,60,59,.9),0 0 0 8px rgba(225,60,59,.08),6px 6px 0 rgba(109,94,247,.22)}
  .landing-arena{border:2px solid rgba(255,255,255,.17);border-radius:26px 10px 26px 10px;box-shadow:-7px 7px 0 rgba(109,94,247,.13),10px 10px 0 rgba(225,60,59,.11),0 24px 60px -38px rgba(0,0,0,.95)}
  .landing-arena::after{content:"ROUND // LIVE";position:absolute;top:13px;inset-inline-end:20px;color:#ff8a85;font:900 9px/1 var(--disp);letter-spacing:1.8px;transform:rotate(-3deg);opacity:.85}
  .arena-copy h2{font-weight:900;text-shadow:2px 2px 0 rgba(109,94,247,.2)}
  .arena-stats span{border-radius:4px;transform:skewX(-4deg)}
  .arena-visual{border:2px solid rgba(255,255,255,.18);border-radius:6px 18px 6px 18px;box-shadow:5px 5px 0 rgba(225,60,59,.14),inset 0 0 0 1px rgba(255,255,255,.035),0 18px 34px -24px rgba(0,0,0,.9)}
  .arena-visual::after{background:linear-gradient(90deg,transparent,#ff6a64,transparent);height:2px;opacity:.48}
  .arena-versus b{border-radius:5px;transform:rotate(-8deg);box-shadow:4px 4px 0 rgba(109,94,247,.28),0 0 0 5px rgba(225,60,59,.1)}
  .hero{border:2px solid rgba(255,255,255,.17);border-radius:10px 25px 10px 25px;box-shadow:7px 7px 0 rgba(225,60,59,.17),-5px 5px 0 rgba(109,94,247,.11),0 24px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
  .hero::after{background-image:radial-gradient(rgba(255,255,255,.12) .7px,transparent .8px),linear-gradient(125deg,transparent 8%,rgba(255,255,255,.055) 50%,transparent 92%),radial-gradient(240px 150px at 10% 0%,rgba(255,255,255,.06),transparent 72%);background-size:13px 13px,auto,auto;opacity:.55}
  .hero .hero-k{padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:4px;background:rgba(0,0,0,.2);transform:skewX(-6deg);width:max-content}
  .hero .hero-t{font-weight:900;text-shadow:3px 3px 0 rgba(225,60,59,.22)}
  .hero .hero-btn{border-radius:5px;box-shadow:4px 4px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18)}
  .hero .hero-btn.ghost{box-shadow:3px 3px 0 rgba(109,94,247,.16)}
  .chero{border:2px solid rgba(255,255,255,.17);border-radius:10px 24px 10px 24px;box-shadow:6px 6px 0 rgba(225,60,59,.15),0 22px 54px -34px rgba(0,0,0,.95)}
  .console-metrics>div{border-radius:5px;box-shadow:3px 3px 0 rgba(225,60,59,.08)}
  .tv-mode .tv-head{border:2px solid rgba(255,255,255,.17);border-radius:8px 20px 8px 20px;box-shadow:6px 6px 0 rgba(225,60,59,.14),0 18px 44px -30px rgba(0,0,0,.9)}
  .tv-mode .tv-match{border-width:2px;border-radius:7px 16px 7px 16px;box-shadow:4px 4px 0 rgba(109,94,247,.11),0 18px 38px -28px rgba(0,0,0,.9)}
  .tv-mode .tv-p{font-weight:900;text-shadow:1px 1px 0 rgba(225,60,59,.16)}
  @media(max-width:700px){
    .landing-intro::after{top:9px;inset-inline-end:12px;font-size:7px;letter-spacing:1px}
    .landing-intro{box-shadow:5px 5px 0 rgba(225,60,59,.14),0 20px 45px -30px rgba(0,0,0,.9)}
    .landing-arena{box-shadow:-4px 4px 0 rgba(109,94,247,.12),5px 5px 0 rgba(225,60,59,.10),0 18px 44px -30px rgba(0,0,0,.9)}
    .hero{box-shadow:5px 5px 0 rgba(225,60,59,.14),-3px 3px 0 rgba(109,94,247,.1),0 18px 45px -28px rgba(0,0,0,.9)}
  }
  @media(prefers-reduced-motion:reduce){.arena-scan,.landing-emblem .logo-hero,.orbit-one,.orbit-two,.emblem-star{animation:none}}
  .cloud-backup-note{margin-top:10px;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:10px;color:var(--muted);font-size:11px;line-height:1.6;background:color-mix(in srgb,var(--accent) 5%,transparent)}

  /* ═══ أكبر بند أداء في الملف: حقل نجوم ثيم midnight ═══
     buildStars() يولّد ٥٥ عنصر <i>، وقاعدة `.stars i{animation:twinkle infinite}`
     كانت تشغّل أنيميشن لا نهائي على كلّهم — أي ٥٥ طبقة GPU تتحدّث في كل إطار،
     طول الجلسة. وmidnight هو الثيم الافتراضي لأي زائر جديد، فالكلفة كانت تصيب
     أغلب الأجهزة (استهلاك بطارية وحرارة على جوّال متوسط أثناء بطولة).

     الحل: نبقّي الـ٥٥ نجمة مرسومة (الشكل ما بيتغيّر) بس نخلّي القليل منها
     يلمع فعليًّا. بصريًّا أطبع وأصدق — سماء فيها نجوم ثابتة وقليل منها يلمع
     أوقع من ٥٥ نجمة تلمع كلها بنفس الوقت. وما لمسنا الـJS. */
  .stars i{animation:none;opacity:var(--o,.6)}
  .stars i:nth-child(4n+1):nth-child(-n+48){animation:twinkle 3.6s ease-in-out infinite}
  /* على الجوّال نقلّلها أكثر */
  @media (max-width:760px){
    .stars i:nth-child(4n+1):nth-child(n+25){animation:none}
  }
  @media (prefers-reduced-motion: reduce){ .stars i{animation:none} }

  /* ═══════════════════════════════════════════════════════════════════════════
     ◆ طبقة "الدرجة العالمية" (2026-07-28)

     شو الي فعليًّا بيفرّق موقع عالمي عن موقع عادي؟ مش الألوان — أربع تفاصيل:
       ١) إيقاع خط متدرّج ومضبوط (modular scale + tracking على الأحجام الكبيرة)
       ٢) عمق مُضاء من فوق: حافّة ضوء داخلية 1px فوق كل سطح مرتفع
       ٣) حُبيبات (grain) خفيفة جدًّا — الي بتعطي إحساس "مطبوع" بدل "رقمي مسطّح"
       ٤) منحنى حركة واحد مشترك، فكل شي بالموقع يتحرّك بنفس "الشخصية"

     وكلها بلا كلفة إطارات: الحُبيبات صورة ثابتة، والحواف ظلال داخلية ثابتة،
     والحركة الوحيدة المرتبطة بالتمرير هي transform على عنصر واحد.
     ═══════════════════════════════════════════════════════════════════════════ */

  :root{
    /* منحنيات الحركة المشتركة — "شخصية" واحدة لكل التطبيق */
    --ease:cubic-bezier(.22,.85,.3,1);          /* الأساسي: خروج سريع، استقرار ناعم */
    --ease-spring:cubic-bezier(.22,.9,.3,1.1);  /* ارتداد خفيف للعناصر الي تظهر */
    --ease-out:cubic-bezier(.16,1,.3,1);        /* للمسافات الطويلة */
    /* حافّة الضوء العلوية — أقوى أثر بصري مقابل صفر كلفة */
    --edge:inset 0 1px 0 rgba(255,255,255,.55);
    --grain-o:.030;
  }
  html[data-theme="dark"]{
    --edge:inset 0 1px 0 rgba(255,255,255,.06);
    --grain-o:.055;
  }

  /* ── ١) الحُبيبات: نعيد استخدام عنصر .felt الموجود (بلا HTML جديد ولا طلب شبكة) ──
        صورة SVG مضمّنة تُرسم مرّة واحدة؛ position:fixed + طبقة GPU مستقلّة
        حتى لا يُعاد رسمها أثناء التمرير. */
  .aurora,.sakura-field{display:none!important}
  /* لازم نطابق تخصيص القاعدة الداكنة القديمة (html[data-theme] .felt) وإلا رجع
     نقش الخطوط المائل القديم بدل الحُبيبات — نفس الفخّ انلقط قبل هيك */
  .felt,html[data-theme="dark"] .felt,html.midnight .felt{
        display:block;position:fixed;inset:0;z-index:0;pointer-events:none;
        opacity:var(--grain-o);transform:translateZ(0);
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size:140px 140px}
  html.no-fx .felt{display:none!important}

  /* ── ٢) إيقاع الخط: مقياس مرن بـclamp + تضييق التتبّع كل ما كبر الحجم ── */
  h2.t{font-size:clamp(22px,5.2vw,30px);line-height:1.16;letter-spacing:-.5px;font-weight:800}
  .hero .hero-t{font-size:clamp(25px,6.4vw,38px);line-height:1.14;letter-spacing:-.9px;font-weight:800}
  .chero-t{font-size:clamp(19px,4.6vw,26px);line-height:1.18;letter-spacing:-.5px}
  .sechead h3{font-size:clamp(16px,3.6vw,19px);letter-spacing:-.3px}
  .hero .hero-s{font-size:clamp(13.5px,3.4vw,15.5px);line-height:1.55}
  .lead-row .lead-pts,table.stand .pts{letter-spacing:-.3px}
  .eyebrow,.hero .hero-k,.chero-k{letter-spacing:1.8px}

  /* رؤوس الأقسام: خط فاصل متدرّج يتلاشى — تفصيلة تحريريّة صغيرة بأثر كبير */
  .sechead{position:relative;padding-bottom:10px;margin-bottom:14px}
  .sechead::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1px;
        background:linear-gradient(to right,var(--line),transparent)}
  html[dir="rtl"] .sechead::after{background:linear-gradient(to left,var(--line),transparent)}

  /* ── ٣) العمق: حافّة ضوء علويّة على كل سطح مرتفع ── */
  .card,.modal,.lead-row,.match,.prow,.tv-match,.more-menu,.install-nudge,.toast>div,.lpcol{
        box-shadow:var(--shadow-soft),var(--edge)}
  .modal{box-shadow:var(--shadow),var(--edge)}
  .tile .circ{box-shadow:var(--shadow-soft),var(--edge)}

  /* ── ٤) الهيرو: تدرّج شبكي (mesh) + حُبيبات + حافّة داخلية ──
        كلها طبقات ثابتة — صفر كلفة في كل إطار */
  .hero,.chero{
        background:
          radial-gradient(120% 90% at 12% 0%, rgba(225,60,59,.32), transparent 58%),
          radial-gradient(90% 80% at 95% 8%, rgba(109,94,247,.20), transparent 62%),
          radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.42), transparent 70%),
          linear-gradient(165deg,var(--stage-1),var(--stage-2));
        box-shadow:var(--shadow-tile), inset 0 1px 0 rgba(255,255,255,.13)}
  .hero::after,.chero::after{
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size:140px 140px;opacity:.06;animation:none}
  .hero .hero-k,.chero-k{color:rgba(255,255,255,.70)}
  .hero .hero-k.live{color:#fff}

  /* الزر الأساسي داخل الهيرو: حافّة مضيئة + ظل ملوّن خفيف */
  .hero .hero-btn{box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -8px rgba(0,0,0,.5)}
  .hero .hero-btn.ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}

  /* ── ٥) الأزرار: حافّة داخلية + ظل ملوّن بلون الزر نفسه (توقيع المواقع الراقية) ── */
  .btn-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -8px rgba(225,60,59,.55)}
  @media(hover:hover){
    .btn-gold:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -8px rgba(225,60,59,.65)}
    .card:hover{box-shadow:var(--shadow),var(--edge)}
  }

  /* ── ٦) شريط تقدّم التمرير: عنصر واحد، transform فقط، يقوده متغيّر CSS ── */
  #scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
        background:linear-gradient(90deg,var(--accent),var(--purple));
        transform:scaleX(var(--sp,0));transform-origin:0 50%;
        opacity:0;transition:opacity .3s var(--ease)}
  html[dir="rtl"] #scrollbar{transform-origin:100% 50%}
  html.scrolled #scrollbar{opacity:1}

  /* ── ٧) الهيدر يتفاعل مع التمرير: ظل يظهر + الشعار ينكمش (transform لا أبعاد) ── */
  header.top{transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
  html.scrolled header.top{box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(0,0,0,.55)}
  .brand .logo{transition:transform .3s var(--ease)}
  html.scrolled .brand .logo{transform:scale(.86)}

  /* ── ٨) توحيد منحنى الحركة: كل شي يتحرّك بنفس الشخصية ── */
  .btn,.hero-btn,.card,.match,.prow,.lead-row,.tile .circ,.iconbtn,.theme-btn,
  .res button,.tabbar button,.dkresb button,.dkqty button{transition-timing-function:var(--ease)}
  .modal{animation:fxPop .32s var(--ease-spring)}
  .card,.match,.prow,.lead-row{animation-timing-function:var(--ease-out)}

  /* ── ٩) تفاصيل صغيرة تُحسّ ── */
  .stand-wrap{border-radius:var(--radius-sm);overflow:hidden}
  table.stand th{background:color-mix(in srgb,var(--text) 3%,transparent)}
  .tabbar button.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
  .av{box-shadow:var(--edge)}
  .badge.live{box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px -3px rgba(225,60,59,.6)}
  ::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}
  .modal-back{background:rgba(10,11,14,.58)}

  /* الروابط والأزرار النصّية: خط سفلي يكبر من الوسط */
  .sechead .viewall{position:relative}
  .sechead .viewall::after{content:"";position:absolute;left:4px;right:4px;bottom:1px;height:1.5px;
        background:currentColor;transform:scaleX(0);transform-origin:50% 50%;
        transition:transform .28s var(--ease)}
  @media(hover:hover){.sechead .viewall:hover::after{transform:scaleX(1)}}

  @media (prefers-reduced-motion: reduce){
    #scrollbar{display:none}
    html.scrolled .brand .logo{transform:none}
  }

  /* Live Duel Center — public broadcast layer */
  .live-center{position:relative;margin:16px auto;max-width:1100px;padding:20px;border:2px solid rgba(255,255,255,.14);border-radius:8px 22px 8px 22px;background:linear-gradient(135deg,rgba(225,60,59,.14),rgba(109,94,247,.1) 52%,rgba(255,255,255,.025));box-shadow:6px 6px 0 rgba(225,60,59,.12),0 22px 55px -38px rgba(0,0,0,.92);overflow:hidden}
  .live-center:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(rgba(255,255,255,.34) .7px,transparent .8px);background-size:6px 6px;mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}
  .live-center-head,.live-center-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .live-center-head h2{margin:2px 0 3px;font-family:var(--disp);font-size:clamp(21px,3vw,30px);letter-spacing:-.5px}
  .live-center-head p{margin:0;color:var(--muted);font-size:13px}
  .live-center-pill{flex:none;border:1px solid rgba(255,111,107,.45);background:rgba(225,60,59,.14);border-radius:999px;padding:7px 11px;color:#ff908c;font:800 11px var(--disp);letter-spacing:1px}
  .live-center-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
  .live-duel-card{border:1px solid rgba(255,255,255,.14);border-radius:7px 15px 7px 15px;background:rgba(8,10,15,.52);padding:13px;box-shadow:3px 3px 0 rgba(109,94,247,.13)}
  .live-duel-top{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font:800 10px var(--disp);letter-spacing:1px}.live-duel-top i{font-style:normal;color:#ff8a85}
  .live-duel-names{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;margin:14px 0 10px}.live-duel-names b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 14px var(--disp)}.live-duel-names b:last-child{text-align:end}.live-duel-names em{font-style:normal;color:#ff8a85;font:900 11px var(--disp)}
  .live-duel-lp{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:7px;font:800 11px var(--disp)}.live-duel-lp>span:last-child{text-align:end}.live-duel-lp>div{display:grid;gap:3px}.live-duel-lp i{display:block;height:5px;border-radius:99px;background:linear-gradient(90deg,#ff716b,#cb201f);box-shadow:0 0 10px rgba(225,60,59,.26)}.live-duel-lp i:last-child{justify-self:end;background:linear-gradient(90deg,#8778ff,#6d5ef7)}
  .live-center-foot{font-size:12px;color:var(--muted);flex-wrap:wrap}.live-center-foot>div{display:flex;gap:7px;flex-wrap:wrap}
  .live-empty{grid-column:1/-1;padding:25px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}

  /* Venue Mode — readable from across a shop */
  .venue-mode .wrap{max-width:1440px;padding:18px 24px 42px}.venue-mode .top,.venue-mode .credit,.venue-mode #globalTabbar{display:none}.venue-shell{max-width:1380px;margin:0 auto}.venue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px;border:2px solid rgba(255,255,255,.16);border-radius:8px 24px 8px 24px;background:linear-gradient(120deg,rgba(225,60,59,.22),rgba(109,94,247,.15) 62%,rgba(255,255,255,.04));box-shadow:7px 7px 0 rgba(225,60,59,.14)}.venue-kicker{color:#ff958f;font:800 11px var(--disp);letter-spacing:1.5px}.venue-head h1{margin:5px 0 4px;font:800 clamp(28px,4vw,52px) var(--disp);letter-spacing:-1px}.venue-head p{margin:0;color:var(--muted);font-size:15px}.venue-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.venue-live{padding:8px 12px;border:1px solid rgba(255,111,107,.5);border-radius:999px;color:#ff9a95;font:900 12px var(--disp);letter-spacing:1px}.venue-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.venue-stats span{display:grid;gap:2px;padding:14px 15px;border:1px solid var(--line);border-radius:8px 14px 8px 14px;background:rgba(255,255,255,.035)}.venue-stats b{font:900 clamp(22px,3vw,32px) var(--disp)}.venue-stats small{color:var(--muted);font-size:12px}.venue-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.7fr);gap:14px}.venue-grid>section,.venue-side-card,.venue-qr{border:1px solid var(--line);border-radius:8px 18px 8px 18px;background:rgba(255,255,255,.035);padding:18px}.venue-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.venue-section-title h2,.venue-side-card h2{margin:0;font:800 20px var(--disp)}.venue-section-title span{color:var(--good);font:800 11px var(--disp);letter-spacing:1px}.venue-matches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.venue-match{padding:15px;border:1px solid rgba(255,255,255,.14);border-radius:7px 15px 7px 15px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:4px 4px 0 rgba(109,94,247,.11)}.venue-match.done{border-color:rgba(80,209,146,.3)}.venue-match.bye{display:flex;align-items:center;gap:10px}.venue-table{color:#ff8f89;font:900 10px var(--disp);letter-spacing:1px}.venue-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:18px 0 12px}.venue-pair b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 clamp(15px,2vw,21px) var(--disp)}.venue-pair b:last-child{text-align:end}.venue-pair em{font-style:normal;color:#ff8a85;font:900 11px var(--disp)}.venue-result{color:var(--muted);font-size:12px}.venue-match.done .venue-result{color:var(--good);font-weight:800}.venue-grid aside{display:grid;align-content:start;gap:14px}.venue-rank{display:grid;grid-template-columns:24px 32px 1fr auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}.venue-rank strong{color:#ffb44d;font:900 16px var(--disp)}.venue-rank span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.venue-rank b{font:900 15px var(--disp)}.venue-qr{text-align:center}.venue-qr>div{max-width:150px;margin:0 auto;background:#fff;border-radius:10px;padding:8px}.venue-qr svg{display:block;width:100%;height:auto}.venue-qr span{display:block;color:var(--muted);font-size:12px;margin-top:8px}.venue-note p{margin:8px 0 0;color:var(--muted);line-height:1.7}.venue-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;color:var(--muted);font-size:12px}.tv-controls{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
  @media(max-width:720px){.live-center{padding:15px}.live-center-grid{grid-template-columns:1fr}.live-center-head{align-items:flex-start}.venue-mode .wrap{padding:10px 10px 28px}.venue-head{padding:16px;display:block}.venue-head-actions{justify-content:flex-start;margin-top:13px}.venue-stats{grid-template-columns:repeat(2,1fr)}.venue-grid{grid-template-columns:1fr}.venue-matches{grid-template-columns:1fr}.venue-pair b{font-size:16px}.venue-foot{display:block;text-align:center}.venue-foot .btn{margin-bottom:7px}}
  @media(prefers-reduced-motion:reduce){.live-center,.venue-head,.venue-match{box-shadow:none}.live-duel-lp i{transition:none}}

  /* Tournament operations utilities */
  .notif-btn{position:relative}.notif-btn #notifCount{display:none;position:absolute;top:-3px;inset-inline-end:-3px;min-width:15px;height:15px;padding:0 3px;align-items:center;justify-content:center;border-radius:99px;background:var(--accent);color:#fff;font:800 9px var(--disp);box-shadow:0 0 0 2px var(--bg)}
  .notice-list{max-height:52vh;overflow:auto}.notice-row{display:grid;grid-template-columns:28px 1fr;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}.notice-row:last-child{border-bottom:0}.notice-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(225,60,59,.13)}.notice-row b,.notice-row small,.notice-row time{display:block}.notice-row b{font-size:13px}.notice-row small{margin-top:2px;color:var(--muted);font-size:12px}.notice-row time{margin-top:4px;color:var(--muted);font-size:10px}
  .table-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:55vh;overflow:auto}.map-table{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:8px 14px 8px 14px;background:var(--bg2);color:var(--text);text-align:start;cursor:pointer}.map-table:hover{border-color:var(--accent)}.map-table small{grid-column:1/-1;color:var(--muted);font:800 10px var(--disp);letter-spacing:1px}.map-table b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.map-table span{grid-column:1/-1;color:var(--accent-strong);font:900 10px var(--disp);text-align:center}.map-table em{font-style:normal;color:var(--good);font-size:11px}.map-table.live em{color:#ff928b}.map-table.bye{cursor:default;opacity:.72}
  .directory-search{width:100%;margin-bottom:10px}.directory-list{max-height:54vh;overflow:auto}.directory-row{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.directory-row b,.directory-row small{display:block}.directory-row b{font-size:13px}.directory-row small{margin-top:2px;color:var(--muted);font-size:11px}.directory-row em{font-style:normal;color:var(--good);font-size:11px}
  .checkin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}.checkin-summary span{display:grid;gap:2px;padding:10px 6px;text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}.checkin-summary b{font:900 22px var(--disp)}.checkin-summary small{color:var(--muted);font-size:10px}.checkin-list{max-height:40vh;overflow:auto}.checkin-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}.checkin-row>span{display:flex;align-items:center;gap:6px;min-width:0}.checkin-row .av{width:25px;height:25px;font-size:10px}.checkin-row b{font-size:11px;white-space:nowrap}
  .store-page{max-width:860px;margin:0 auto;padding-bottom:30px}.store-hero{padding:24px;border:2px solid rgba(255,255,255,.14);border-radius:8px 22px 8px 22px;background:linear-gradient(135deg,rgba(225,60,59,.18),rgba(109,94,247,.1) 60%,rgba(255,255,255,.025));box-shadow:6px 6px 0 rgba(225,60,59,.12);margin-bottom:14px}.store-hero h1{margin:4px 0;font:900 clamp(28px,5vw,46px) var(--disp)}.store-hero p{margin:0;color:var(--muted);max-width:620px;line-height:1.7}.store-section{padding:16px;border:1px solid var(--line);border-radius:10px 18px 10px 18px;background:rgba(255,255,255,.035);margin-bottom:12px}.store-event{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.store-event:last-child{border-bottom:0}.store-event>span{width:7px;height:38px;border-radius:99px;flex:none}.store-event b,.store-event small{display:block}.store-event small{margin-top:3px;color:var(--muted);font-size:11px}.store-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
  @media(max-width:520px){.table-map{grid-template-columns:1fr}.checkin-summary b{font-size:19px}.store-hero{padding:18px}}
  .challenge-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px auto;padding:16px 18px;border:1px solid rgba(224,176,32,.32);border-radius:9px 18px 9px 18px;background:linear-gradient(135deg,rgba(224,176,32,.12),rgba(225,60,59,.06));box-shadow:4px 4px 0 rgba(224,176,32,.1)}.challenge-card h3{margin:3px 0 3px;font:800 20px var(--disp)}.challenge-card p{margin:0;color:var(--muted);font-size:12px}.challenge-progress{height:7px;margin-top:10px;width:min(380px,60vw);background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}.challenge-progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e0b020,#e13c3b)}.challenge-card small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.challenge-star{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(224,176,32,.35);border-radius:10px;background:rgba(224,176,32,.08);color:var(--text);cursor:pointer;text-align:start}.challenge-star span,.challenge-star b{display:block}.challenge-star span{color:var(--muted);font-size:10px}.challenge-star b{margin-top:2px;color:var(--gold);font:800 13px var(--disp)}.sponsor-line{color:var(--gold)!important}@media(max-width:620px){.challenge-card{display:block}.challenge-star{margin-top:12px}.challenge-progress{width:100%}}

  /* Card request marketplace */
  .card-requests-modal{max-width:620px}.card-req-list{display:grid;gap:8px;max-height:58vh;overflow:auto}.card-req-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;padding:12px;text-align:start;color:var(--text);border:1px solid var(--line);border-radius:9px 15px 9px 15px;background:var(--bg2);cursor:pointer;transition:border-color .2s var(--ease),transform .2s var(--ease)}.card-req-row:hover{border-color:var(--accent);transform:translateY(-1px)}.card-req-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--accent) 15%,transparent);font-size:17px}.card-req-main{min-width:0}.card-req-main b,.card-req-main small,.card-req-meta b,.card-req-meta em{display:block}.card-req-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.card-req-main small{margin-top:3px;color:var(--muted);font-size:10px}.card-req-meta{text-align:end}.card-req-meta em{font-style:normal;font:800 10px var(--disp);white-space:nowrap}.card-req-meta b{margin-top:4px;font:900 12px var(--disp);white-space:nowrap}.empty-requests{text-align:center;padding:28px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}.empty-requests>div{font-size:30px;margin-bottom:5px}.empty-requests b,.empty-requests small{display:block}.empty-requests b{color:var(--text);font-size:14px}.empty-requests small{margin-top:4px;font-size:11px}.request-preview{margin-top:10px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);max-height:180px;overflow:auto}.request-preview-row{display:grid;grid-template-columns:28px 1fr auto;gap:7px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--line);font-size:12px}.request-preview-row:last-child{border-bottom:0}.request-preview-row>span{color:var(--muted);font:800 10px var(--disp)}.request-preview-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-preview-row em{font-style:normal;color:var(--accent);font:800 11px var(--disp)}.request-preview-row small{grid-column:2/-1;color:var(--muted);font-size:10px;margin-top:-4px}.card-req-detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:14px 0 10px}.card-req-detail-head h3{margin:3px 0;font:900 20px var(--disp)}.card-req-detail-head small{color:var(--muted);font-size:11px}.request-status{padding:5px 8px;border:1px solid;border-radius:99px;font:800 10px var(--disp);white-space:nowrap}.request-items,.quote-items{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2)}.request-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid var(--line)}.request-item:last-child,.quote-item:last-child{border-bottom:0}.request-item-no{color:var(--muted);font:800 10px var(--disp)}.request-item b,.request-item small{display:block}.request-item b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-item small{margin-top:2px;color:var(--muted);font-size:10px}.request-item strong{font:900 12px var(--disp);color:var(--accent);white-space:nowrap}.quote-panel{margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:10px 16px 10px 16px;background:color-mix(in srgb,var(--accent) 5%,var(--bg2))}.quote-panel h4{margin:0 0 4px;font:900 16px var(--disp)}.quote-item{display:flex;align-items:center;gap:7px;padding:8px;border-bottom:1px solid var(--line)}.quote-item>div b,.quote-item>div small{display:block}.quote-item>div b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quote-item>div small{margin-top:2px;color:var(--muted);font-size:10px}.quote-item select,.quote-item input{width:auto;min-width:72px;padding:7px 6px;font-size:11px}.quote-item input{max-width:92px}.quote-availability{font:800 11px var(--disp);white-space:nowrap}.quote-availability.yes{color:var(--good)}.quote-availability.no{color:var(--danger)}.quote-total{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:13px}.quote-total b{font:900 19px var(--disp);color:var(--gold)}
  @media(max-width:520px){.card-req-row{grid-template-columns:30px 1fr auto;gap:7px;padding:10px}.card-req-icon{width:28px;height:28px;font-size:14px}.card-req-meta b{font-size:11px}.card-req-detail-head{display:block}.request-status{display:inline-block;margin-top:8px}.quote-item{flex-wrap:wrap}.quote-item>div{min-width:calc(100% - 8px)}.quote-item select,.quote-item input{flex:1;min-width:0;max-width:none}.card-requests-modal{padding:16px}}
  .quote-availability.pending{color:var(--gold)}
  .card-req-searchbar{display:flex;gap:8px}.card-req-searchbar input{flex:1}.card-req-search-results{display:grid;gap:6px;max-height:34vh;overflow:auto;margin-top:8px}.card-req-search-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;width:100%;padding:8px;text-align:start;color:var(--text);border:1px solid var(--line);border-radius:8px 13px 8px 13px;background:var(--bg2);cursor:pointer}.card-req-search-row:hover{border-color:var(--accent)}.card-req-search-row img,.card-req-search-noimg{width:32px;height:46px;border-radius:4px;object-fit:cover;background:var(--surface2);display:grid;place-items:center}.card-req-search-row b,.card-req-search-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-req-search-row b{font-size:12px}.card-req-search-row small{margin-top:3px;color:var(--muted);font-size:10px}.card-req-search-row strong{color:var(--accent);font-size:20px}.card-req-selected{display:grid;gap:6px;margin-top:8px;max-height:34vh;overflow:auto}.card-req-selected-row{display:grid;grid-template-columns:34px 1fr 58px auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:8px 13px 8px 13px;background:var(--bg2)}.card-req-selected-thumb{width:32px;height:46px;display:grid;place-items:center;border-radius:4px;overflow:hidden;background:var(--surface2)}.card-req-selected-thumb img{width:100%;height:100%;object-fit:cover}.card-req-selected-name{min-width:0}.card-req-selected-name b,.card-req-selected-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-req-selected-name b{font-size:12px}.card-req-selected-name small{margin-top:2px;color:var(--muted);font-size:10px}.card-req-selected-name select{margin-top:5px;width:100%;padding:6px;font-size:11px}.card-req-selected-row>input{width:58px;padding:7px 5px}.card-req-decision-actions{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:7px}.card-req-decision-actions .btn{flex:1;min-width:115px}.card-req-decision-final{width:100%;margin-top:7px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--good) 30%,var(--line));border-radius:7px;color:var(--good);font:800 11px var(--disp)}.request-item-thumb{width:32px;height:46px;border-radius:4px;object-fit:cover;flex:none}
  @media(max-width:520px){.card-req-selected-row{grid-template-columns:30px 1fr 48px auto;gap:6px}.card-req-selected-thumb{width:28px;height:40px}.card-req-selected-row>input{width:48px}.card-req-searchbar{display:grid;grid-template-columns:1fr auto}.card-req-decision-actions .btn{min-width:0;font-size:11px}}
  /* Keep confirmation actions readable over the modal backdrop. */
  .modal .btn-gold,#confOk{background:#941f1d!important;color:#fff!important;border-color:#941f1d!important;filter:none!important}
  .card-req-toolbar{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0}.card-req-toolbar select{width:auto;min-width:145px}.card-req-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0 12px}.card-req-stats span{display:grid;gap:2px;padding:9px 6px;text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}.card-req-stats b{font:900 17px var(--disp)}.card-req-stats small{font-size:10px;color:var(--muted)}.card-req-detail-actions{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}.card-req-filters{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:8px}.card-req-fav-filter{display:flex;align-items:center;gap:5px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;white-space:nowrap}.card-req-fav-filter input{width:auto}.card-req-fav{border:0;background:none;color:var(--gold);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px}.card-req-search-row{grid-template-columns:34px 1fr auto auto}.card-req-timeline-wrap,.card-req-activity{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}.card-req-timeline-wrap h4,.card-req-activity h4{margin:0 0 9px;font:900 15px var(--disp)}.card-req-timeline{display:grid;gap:0;margin:0;padding:0;list-style:none}.card-req-timeline li{position:relative;display:flex;gap:9px;min-height:39px;color:var(--muted)}.card-req-timeline li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:5px;top:13px;bottom:-1px;width:2px;background:var(--line)}.card-req-timeline i{position:relative;z-index:1;width:12px;height:12px;margin-top:2px;border:2px solid var(--line);border-radius:50%;background:var(--bg2);flex:none}.card-req-timeline li.done{color:var(--text)}.card-req-timeline li.done i{border-color:var(--good);background:var(--good)}.card-req-timeline li.done:not(:last-child)::after{background:color-mix(in srgb,var(--good) 55%,var(--line))}.card-req-timeline b,.card-req-timeline small{display:block}.card-req-timeline b{font-size:11px}.card-req-timeline small{margin-top:2px;font-size:10px;color:var(--muted)}.card-req-finance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.card-req-finance-grid label{display:grid;gap:4px;font-size:10px;color:var(--muted)}.card-req-finance-grid input,.card-req-finance-grid select{width:100%;font-size:11px}.card-req-total-breakdown{display:grid;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:12px}.card-req-total-breakdown span{display:flex;justify-content:space-between;gap:8px}.card-req-total-breakdown b{font:900 15px var(--disp);color:var(--gold)}.card-req-attachment{display:grid;gap:6px;margin-top:10px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg2)}.card-req-attachment img{width:min(220px,100%);max-height:200px;object-fit:contain;border-radius:7px}.card-req-activity .activity-list{display:grid;gap:6px}.card-req-activity .activity-list>div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:11px}.card-req-activity .activity-list small{color:var(--muted)}.card-req-rating{margin-top:12px;padding:10px;text-align:center;border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--gold) 7%,var(--bg2))}.card-preview-modal{display:grid;place-items:center;gap:8px;text-align:center}.card-preview-image{width:min(330px,78vw);max-height:68vh;object-fit:contain;border-radius:9px}.request-tracking-page{max-width:620px;margin:0 auto;padding:24px 0}.request-tracking-page h1{margin:4px 0;font:900 clamp(28px,6vw,46px) var(--disp)}.request-track-status{display:inline-block;margin-top:10px;padding:6px 10px;border:1px solid currentColor;border-radius:99px;font:900 12px var(--disp)}.track-total{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);display:flex;justify-content:space-between}.track-total b{color:var(--gold);font:900 19px var(--disp)}
  @media(max-width:620px){.card-req-toolbar,.card-req-filters{grid-template-columns:1fr}.card-req-stats b{font-size:15px}.card-req-finance-grid{grid-template-columns:1fr 1fr}.request-tracking-page{padding:16px 0}}
  .card-req-profit{margin-top:10px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--good) 32%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--good) 7%,var(--bg2));color:var(--good);font-size:12px}.card-req-profit b{font:900 16px var(--disp)}
  .card-req-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:5px}.card-req-choice-grid select{margin-top:0!important;font-size:10px!important}.card-req-delivery-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-top:10px}.card-req-delivery-grid label{display:grid;gap:4px}.card-req-admin-tools{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}.card-req-supplier-extra{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}.card-req-supplier-info,.card-req-tracking-extra{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--accent) 6%,var(--bg2));font-size:11px}.card-req-price-history{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.card-req-price-history summary{cursor:pointer;font:800 11px var(--disp);color:var(--accent)}.card-req-price-history>div{display:grid;gap:4px;margin-top:7px}.card-req-price-history>div>div{display:flex;justify-content:space-between;gap:8px;font-size:11px}.card-req-price-history small{color:var(--muted)}.card-req-waitlist{margin-top:9px}.card-req-reward-badge{margin:8px 0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--gold) 8%,var(--bg2));color:var(--gold);font:800 11px var(--disp)}.card-req-messages{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}.card-req-messages h4{margin:0 0 8px;font:900 15px var(--disp)}.card-req-message-list{display:grid;gap:6px;max-height:260px;overflow:auto}.card-req-message{display:grid;gap:2px;max-width:88%;padding:7px 9px;border-radius:9px 9px 9px 2px;background:var(--surface2);font-size:11px}.card-req-message.mine{margin-inline-start:auto;border-radius:9px 9px 2px 9px;background:color-mix(in srgb,var(--accent) 15%,var(--surface2))}.card-req-message b{font-size:10px;color:var(--accent)}.card-req-message small{color:var(--muted);font-size:9px}.card-req-message-compose{display:flex;gap:7px;margin-top:8px;align-items:flex-end}.card-req-message-compose textarea{flex:1;min-height:42px}.card-req-message-compose button{flex:none}.card-req-tracking-extra{margin-top:10px}
  @media(max-width:520px){.card-req-choice-grid{grid-template-columns:1fr}.card-req-delivery-grid{grid-template-columns:1fr}.card-req-admin-tools{grid-column:auto}.card-req-message{max-width:96%}}
  .card-req-composer-tools{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.card-req-composer-tools .btn{flex:1;min-width:130px}.saved-card-lists{display:grid;gap:7px}.saved-card-list-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg2)}.saved-card-list-row b,.saved-card-list-row small{display:block}.saved-card-list-row b{font-size:12px}.saved-card-list-row small{margin-top:2px;color:var(--muted);font-size:10px}.card-req-filters input{min-width:0}.analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}.analytics-grid span{display:grid;gap:3px;padding:9px 6px;text-align:center;border:1px solid var(--line);border-radius:9px;background:var(--bg2)}.analytics-grid b{font:900 17px var(--disp);color:var(--gold)}.analytics-grid small{font-size:10px;color:var(--muted)}.popular-card-list{display:grid;gap:5px}.popular-card-list>div{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px}.popular-card-list b{color:var(--accent)}.reward-summary{display:grid;justify-items:center;gap:5px;padding:16px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--gold) 8%,var(--bg2))}.reward-summary strong{font:900 36px var(--disp);color:var(--gold)}.reward-summary small{color:var(--muted);font-size:10px}.reward-progress{width:100%;height:8px;overflow:hidden;border-radius:99px;background:var(--surface2)}.reward-progress i{display:block;height:100%;border-radius:inherit;background:var(--gold)}.support-list{display:grid;gap:7px;max-height:48vh;overflow:auto}.support-ticket-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);cursor:pointer}.support-ticket-row:hover{border-color:var(--accent)}.support-ticket-row b,.support-ticket-row small{display:block}.support-ticket-row b{font-size:12px}.support-ticket-row small{margin-top:3px;color:var(--muted);font-size:10px}.support-ticket-detail{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);margin-bottom:9px}.support-ticket-detail p{margin:9px 0;white-space:pre-wrap;font-size:12px}.card-req-tracking-extra{justify-content:center}
@media(max-width:520px){.analytics-grid{grid-template-columns:repeat(2,1fr)}.card-req-composer-tools .btn{min-width:100px;font-size:10px}.saved-card-list-row{grid-template-columns:1fr auto auto}}

/* ===== Requests Hub: مستقل عن الإشعارات ===== */
#cardRequestsModal{position:fixed;inset:0;z-index:120}
#cardRequestsModal .requests-backdrop{display:flex;align-items:stretch;justify-content:center;padding:clamp(10px,3vw,30px);overflow:auto;background:rgba(15,16,20,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#cardRequestsModal .requests-app{display:grid;grid-template-columns:236px minmax(0,1fr);width:min(1180px,100%);max-width:none!important;height:min(900px,calc(100dvh - 20px));max-height:none!important;padding:0!important;overflow:hidden!important;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))!important;border-radius:26px!important;background:var(--surface)!important;box-shadow:0 38px 100px -44px rgba(0,0,0,.78)!important}
#cardRequestsModal .requests-rail{display:flex;flex-direction:column;gap:15px;min-width:0;padding:25px 14px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 56%,color-mix(in srgb,var(--gold) 7%,var(--surface)));border-inline-end:1px solid var(--line)}
.requests-rail-brand{display:flex;align-items:center;gap:9px;padding:4px 8px}.requests-rail-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-size:19px;box-shadow:0 10px 20px -13px var(--accent)}.requests-rail-brand b,.requests-rail-brand small{display:block}.requests-rail-brand b{font:900 13px var(--disp);letter-spacing:.5px}.requests-rail-brand small{margin-top:2px;color:var(--accent);font:900 8px var(--disp);letter-spacing:1px}.requests-rail-mode{padding:8px 10px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:8px;color:var(--accent);font:900 9px var(--disp);letter-spacing:1.5px;text-align:center}
.requests-rail-nav{display:grid;gap:5px}.requests-rail-nav button{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:10px 9px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:800 11px var(--disp);text-align:start;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}.requests-rail-nav button span{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:12px}.requests-rail-nav button b{min-width:20px;padding:2px 5px;border-radius:99px;background:var(--bg2);color:var(--muted);font:900 10px var(--disp);text-align:center}.requests-rail-nav button:hover,.requests-rail-nav button.active{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-strong);transform:translateX(-2px)}.requests-rail-nav button.active b{background:var(--accent);color:#fff}
.requests-rail-new{margin-top:2px;padding:11px;border:0;border-radius:9px;background:var(--accent);color:#fff;font:900 11px var(--disp);cursor:pointer;box-shadow:0 12px 22px -16px var(--accent);transition:transform .2s ease,box-shadow .2s ease}.requests-rail-new:hover{transform:translateY(-2px);box-shadow:0 16px 26px -16px var(--accent)}.requests-rail-note{margin-top:auto;padding:11px;border-top:1px solid var(--line);color:var(--muted)}.requests-rail-note b,.requests-rail-note small{display:block}.requests-rail-note b{color:var(--text);font:900 11px var(--disp)}.requests-rail-note small{margin-top:5px;font-size:10px;line-height:1.6}
#cardRequestsModal .requests-workspace{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}#cardRequestsModal .requests-workspace>.row{flex:none;padding:27px 32px 0}#cardRequestsModal #cardReqBody{min-height:0;overflow:auto;margin-top:0!important;padding:19px 32px 32px}#cardRequestsModal #cardReqBody>.card-req-list{padding-bottom:4px}#cardRequestsModal .card-requests-modal .iconbtn{flex:none}
#cardRequestsModal .card-req-list{max-height:none;overflow:visible}.requests-app .card-req-toolbar{position:sticky;top:0;z-index:2;padding:8px 0;background:var(--surface)}.requests-app .card-req-row{min-height:65px;padding:13px 14px;border-radius:12px;background:color-mix(in srgb,var(--bg2) 70%,var(--surface))}.requests-app .card-req-row:hover{transform:translateX(-3px);box-shadow:var(--shadow-soft)}.requests-app .card-req-stats{grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 12px}.requests-app .card-req-stats span{padding:12px 8px;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--bg2))}.requests-app .card-req-detail-head{margin-top:14px}.requests-app .quote-panel,.requests-app .card-req-timeline-wrap,.requests-app .card-req-activity,.requests-app .card-req-messages{border-radius:14px}.requests-app .card-req-composer-tools{padding-top:5px}
@media(max-width:760px){#cardRequestsModal .requests-backdrop{padding:0}#cardRequestsModal .requests-app{grid-template-columns:1fr;height:100dvh;max-height:none;border-radius:0!important;border-inline:0!important}#cardRequestsModal .requests-rail{display:block;padding:12px 12px 9px;border-inline-end:0;border-bottom:1px solid var(--line);background:var(--surface)}.requests-rail-brand{display:inline-flex;padding:0}.requests-rail-brand .requests-rail-mark{width:30px;height:30px}.requests-rail-mode{display:none}.requests-rail-nav{display:flex;gap:5px;margin-top:10px;overflow:auto}.requests-rail-nav button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:max-content;padding:8px 9px;border-radius:99px;font-size:10px}.requests-rail-nav button span{width:18px;height:18px}.requests-rail-nav button b{min-width:17px}.requests-rail-new{position:absolute;inset-inline-end:13px;top:12px;margin:0;padding:9px 10px}.requests-rail-note{display:none}#cardRequestsModal .requests-workspace>.row{padding:17px 16px 0}#cardRequestsModal #cardReqBody{padding:14px 16px 26px}.requests-app .card-req-toolbar{position:static}.requests-app .card-req-stats{grid-template-columns:repeat(3,1fr)}}

  /* ═══ Holographic Card Lab × Tournament Broadcast — الهوية الجديدة ═══ */
  html.midnight{--bg:#06070b;--bg2:#0c0f16;--surface:#111621;--surface2:#171d2a;--line:rgba(164,184,215,.18);--text:#f7f9ff;--muted:#9da9bd;--stage-1:#171c29;--stage-2:#0b0e16}
  body{background:radial-gradient(900px 420px at 50% -140px,rgba(109,94,247,.16),transparent 68%),radial-gradient(720px 360px at 100% 20%,rgba(225,60,59,.12),transparent 72%),linear-gradient(180deg,var(--bg),#030407 78%);}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(162,183,214,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(162,183,214,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,#000,transparent 75%)}
  header.top{background:rgba(7,9,14,.74)!important;border-bottom:1px solid rgba(164,184,215,.16);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
  .brand{max-width:1080px;padding:12px 18px}.brand .logo{width:42px;height:42px;border-radius:13px;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 24px -12px rgba(255,106,100,.8)}.brand h1{font-family:var(--disp);letter-spacing:-.6px}.brand .sub{letter-spacing:.7px;color:#aeb9cc}.theme-btn{border-color:rgba(164,184,215,.18);background:rgba(255,255,255,.035)}
  .wrap{max-width:1120px;padding-top:28px}
  .landing-intro{grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);gap:18px;min-height:330px;padding:32px 28px;margin:0 0 18px;border:1px solid rgba(164,184,215,.22)!important;border-radius:26px!important;background:radial-gradient(420px 240px at 82% 35%,rgba(109,94,247,.18),transparent 72%),radial-gradient(440px 300px at 4% 100%,rgba(225,60,59,.16),transparent 75%),linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.018) 52%,rgba(89,104,145,.04))!important;box-shadow:0 28px 70px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12)!important}
  .landing-intro::before{inset:0!important;border:0!important;border-radius:inherit!important;background-image:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.09) 42%,transparent 58%),radial-gradient(rgba(164,184,215,.22) .65px,transparent .8px)!important;background-size:auto,18px 18px!important;opacity:.34!important;mix-blend-mode:screen}
  .landing-intro::after{content:"KYO PAL / HOLO SYSTEM"!important;top:18px!important;inset-inline-end:24px!important;border:1px solid rgba(164,184,215,.24)!important;border-radius:999px!important;background:rgba(4,6,10,.35)!important;color:#b9c6db!important;transform:none!important;font-size:9px!important;letter-spacing:1.8px!important}
  .landing-intro-copy{padding:12px 8px}.landing-intro-copy h2{font-size:clamp(38px,5.6vw,72px)!important;line-height:.98!important;letter-spacing:-2.8px!important;text-shadow:none!important;max-width:720px}.landing-intro-copy h2::first-line{color:#fff}.landing-intro-copy p{max-width:590px;font-size:15px;line-height:1.7;color:#aab5c8}.landing-signals{gap:8px;margin-top:22px}.landing-signals span{border:1px solid rgba(164,184,215,.21);border-radius:999px!important;background:rgba(7,10,17,.45);box-shadow:none!important;transform:none!important;color:#c2ccdc}.landing-signals i{color:#7fcbff}
  .landing-emblem{min-height:250px}.landing-emblem::before{width:210px;height:210px;background:conic-gradient(from 180deg,rgba(255,106,100,.28),rgba(127,203,255,.18),rgba(109,94,247,.24),rgba(255,106,100,.28));filter:blur(34px);opacity:.75}.landing-emblem .logo-hero{width:148px;height:148px;border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 0 0 10px rgba(127,203,255,.05),0 0 60px rgba(225,60,59,.48),0 24px 48px -20px rgba(0,0,0,.9)!important}.emblem-orbit{border-color:rgba(164,184,215,.28)}.orbit-one{width:220px;height:130px;border-left-color:#ff837c;border-right-color:#7fcbff}.orbit-two{width:170px;height:220px;border-top-color:#b8c6ff;border-bottom-color:#8b7bff}.emblem-star{color:#7fcbff;text-shadow:0 0 18px rgba(127,203,255,.9);top:22px;inset-inline-end:18px}
  .hero{border:1px solid rgba(255,255,255,.18)!important;border-radius:20px!important;padding:30px 28px!important;background:radial-gradient(500px 240px at 10% 0%,rgba(255,255,255,.1),transparent 72%),linear-gradient(118deg,#9f2528,#3e1c31 56%,#151a2b)!important;box-shadow:0 26px 64px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.16)!important}
  .hero::after{background-image:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.08) 48%,transparent 68%),radial-gradient(rgba(255,255,255,.18) .7px,transparent .8px)!important;background-size:auto,16px 16px!important;opacity:.32!important}.hero .hero-k{border:1px solid rgba(255,255,255,.25)!important;border-radius:999px!important;background:rgba(0,0,0,.2)!important;transform:none!important;letter-spacing:1.8px}.hero .hero-t{font-size:clamp(30px,5vw,54px)!important;line-height:1.02!important;text-shadow:none!important}.hero .hero-s{color:rgba(255,255,255,.76)}.hero .hero-btn{border-radius:12px!important;box-shadow:0 12px 24px -14px rgba(0,0,0,.7)!important}.hero .hero-btn.ghost{border-color:rgba(255,255,255,.3)!important;box-shadow:none!important}
  .live-center{border:1px solid rgba(164,184,215,.22)!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(127,203,255,.08),rgba(109,94,247,.09) 50%,rgba(255,255,255,.025))!important;box-shadow:0 24px 60px -44px rgba(0,0,0,.95)!important}.live-center:before{opacity:.13}.live-center-pill{border-color:rgba(255,127,120,.55);background:rgba(225,60,59,.16);box-shadow:0 0 18px rgba(255,106,100,.18)}.live-duel-card{border:1px solid rgba(164,184,215,.2)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}.live-duel-card:hover{border-color:rgba(127,203,255,.55)!important;transform:translateY(-2px)}
  .landing-arena{margin:4px 0 24px;padding:22px;border:1px solid rgba(164,184,215,.22)!important;border-radius:22px!important;background:radial-gradient(340px 190px at 92% 8%,rgba(127,203,255,.12),transparent 75%),radial-gradient(340px 190px at 4% 100%,rgba(225,60,59,.12),transparent 72%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;box-shadow:0 24px 60px -44px rgba(0,0,0,.95)!important}.landing-arena::after{content:"DUEL FEED / LIVE"!important;transform:none!important;top:16px!important;color:#8fd4ff!important}.landing-arena::before{opacity:.14}.arena-copy h2{font-size:clamp(26px,3vw,42px)!important;text-shadow:none!important}.arena-stats span{border:1px solid rgba(164,184,215,.2);border-radius:12px!important;background:rgba(5,8,14,.38);transform:none!important}.arena-visual{border:1px solid rgba(164,184,215,.26)!important;border-radius:18px!important;background:radial-gradient(150px 120px at 50% 38%,rgba(127,203,255,.13),transparent 74%),linear-gradient(145deg,rgba(3,5,10,.82),rgba(24,21,40,.8))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 20px 38px -28px rgba(0,0,0,.9)!important}.arena-versus b{border-radius:50%!important;transform:none!important;box-shadow:0 0 0 5px rgba(255,106,100,.1),0 0 22px rgba(255,106,100,.45)}
  .tabbar{background:rgba(7,9,14,.82)!important;border-top:1px solid rgba(164,184,215,.2)!important;box-shadow:0 -18px 40px -30px rgba(0,0,0,.95)!important;backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}.tabbar button{border-radius:12px!important}.tabbar button.on{background:linear-gradient(145deg,rgba(127,203,255,.16),rgba(225,60,59,.12))!important;color:#8fd4ff!important;box-shadow:inset 0 0 0 1px rgba(127,203,255,.28)!important}
  @media(max-width:700px){.wrap{padding-top:16px}.landing-intro{grid-template-columns:minmax(0,1fr) 105px;gap:2px;min-height:258px;padding:23px 10px 22px}.landing-intro-copy{padding:16px 6px 12px 9px}.landing-intro-copy h2{font-size:34px!important;letter-spacing:-1.4px!important}.landing-intro-copy p{font-size:12.5px;line-height:1.55}.landing-signals{margin-top:14px;gap:5px}.landing-signals span{font-size:9px;padding:6px 7px}.landing-emblem{min-height:185px;transform:scale(.84)}.landing-emblem .logo-hero{width:118px;height:118px}.hero{padding:23px 18px!important}.hero .hero-t{font-size:30px!important}.live-center{padding:15px!important}.landing-arena{padding:17px!important}}
  @media(prefers-reduced-motion:reduce){.landing-intro,.hero,.live-center,.landing-arena,.live-duel-card{transition:none!important}.arena-scan{display:none}}

  /* ═══ Red Championship × Tournament Broadcast — الهوية الحمراء والبيضاء ═══
     هذه الطبقة تستبدل الهوية الداكنة/النيونية السابقة بواجهة متجر احترافية:
     أبيض واضح، أحمر كإشارة البطولة، وأسود للحروف والبيانات. */
  :root{
    --bg:#f7f7f5;--bg2:#eeeeeb;--surface:#ffffff;--surface2:#fbfbfa;
    --line:#deded9;--text:#171719;--muted:#68686b;
    --accent:#e13c3b;--accent-btn:#e13c3b;--accent-strong:#8e1721;--accent-on:#fff;
    --gold:#e13c3b;--gold-deep:#8e1721;--purple:#5b6270;--pink:#dca0a4;
    --stage-1:#e13c3b;--stage-2:#74151d;--stage-line:rgba(255,255,255,.26);
    --shadow-soft:0 2px 5px rgba(24,24,24,.05),0 12px 26px -18px rgba(35,35,35,.18);
    --shadow-tile:0 3px 8px rgba(35,25,25,.08),0 20px 38px -25px rgba(110,25,32,.28);
    --shadow:0 5px 12px rgba(30,30,30,.07),0 24px 50px -28px rgba(80,20,24,.2);
  }
  html[data-theme="dark"]{
    --bg:#191719;--bg2:#241e20;--surface:#2b2526;--surface2:#332b2d;--line:#514246;
    --text:#fffaf8;--muted:#c2b6b5;--accent:#e0444d;--accent-btn:#c72c37;--accent-strong:#ff7a80;
    --gold:#e0444d;--gold-deep:#ff7a80;--stage-1:#e13c3b;--stage-2:#5e1620;
  }
  html.midnight{--bg:#191719;--bg2:#241e20;--surface:#2b2526;--surface2:#332b2d;--line:#514246;--text:#fffaf8;--muted:#c2b6b5;--accent:#e0444d;--accent-btn:#c72c37;--accent-strong:#ff7a80;--gold:#e0444d;--gold-deep:#ff7a80;--stage-1:#e13c3b;--stage-2:#5e1620}
  html:not([data-theme="dark"]):not(.midnight) body{background:var(--bg);color:var(--text)}
  html[data-theme="dark"] body,html.midnight body{background:linear-gradient(180deg,#191719,#120f10 80%);color:var(--text)}
  body{background-color:var(--bg);background-image:linear-gradient(180deg,rgba(225,60,59,.035),transparent 300px)!important}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(90deg,rgba(225,60,59,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000,transparent 70%)!important}
  header.top{background:rgba(255,255,255,.92)!important;border-bottom:1px solid #deded9!important;backdrop-filter:blur(14px) saturate(1.05)!important;-webkit-backdrop-filter:blur(14px) saturate(1.05)!important}
  html[data-theme="dark"] header.top,html.midnight header.top{background:rgba(35,28,30,.93)!important;border-bottom-color:#514246!important}
  .brand{max-width:1120px;padding:13px 20px}.brand .logo{width:43px;height:43px;border-radius:12px;box-shadow:0 4px 0 rgba(142,23,33,.2),0 8px 24px -12px rgba(225,60,59,.5)}.brand h1{font-weight:900;letter-spacing:-.4px}.brand .sub{color:var(--muted)}
  .theme-btn{border-color:var(--line)!important;background:var(--surface)!important;color:var(--text)!important;box-shadow:none!important}
  .wrap{max-width:1120px;padding:26px 24px calc(94px + env(safe-area-inset-bottom,0px))}
  .eyebrow{color:var(--accent-strong)!important;font-weight:900;letter-spacing:1.7px}
  .card,.prow,.match,.proof-card,.tv-match{background:var(--surface)!important;border-color:var(--line)!important;box-shadow:var(--shadow-soft)!important}
  .card{border-radius:14px}.card>h3:first-child::before{background:var(--accent)!important}
  .btn-gold,.btn-red{background:var(--accent-btn)!important;color:#fff!important;border-color:var(--accent-btn)!important;box-shadow:0 6px 16px -10px rgba(225,60,59,.65)!important}
  .btn-ghost{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
  .btn-gold:hover,.btn-red:hover{filter:brightness(.95);transform:translateY(-1px)}
  input,select,textarea{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important}input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(225,60,59,.13)!important}
  /* الصفحة الرئيسية: لوحة تحريرية بيضاء مع خط بطولة أحمر */
  .landing-intro{grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:26px;min-height:300px;padding:30px 30px;margin-bottom:18px;border:1px solid #d8d8d2!important;border-radius:18px!important;background:linear-gradient(108deg,#fff 0%,#fff 65%,#fff8f7 100%)!important;box-shadow:var(--shadow)!important}
  .landing-intro::before{inset:0!important;border:0!important;border-inline-start:7px solid var(--accent);border-radius:inherit!important;background:linear-gradient(145deg,rgba(225,60,59,.05),transparent 47%)!important;opacity:1!important}
  .landing-intro::after{content:"KYO PAL / CHAMPIONSHIP"!important;top:18px!important;inset-inline-end:24px!important;padding:6px 10px!important;border:1px solid rgba(225,60,59,.22)!important;border-radius:4px!important;background:#fff!important;color:var(--accent-strong)!important;transform:none!important;font:900 9px/1 var(--disp)!important;letter-spacing:1.4px!important}
  .landing-intro-copy{padding:12px 12px 12px 20px}.landing-intro-copy h2{font-size:clamp(34px,5vw,64px)!important;line-height:1.02!important;letter-spacing:-2.4px!important;color:#171719!important;text-shadow:none!important;max-width:690px}.landing-intro-copy p{max-width:590px;color:#69696b!important;font-size:15px;line-height:1.7}
  .landing-signals{gap:8px;margin-top:20px}.landing-signals span{padding:7px 10px;border:1px solid #deded9!important;border-radius:5px!important;background:#fff!important;color:#57575a!important;box-shadow:2px 2px 0 rgba(225,60,59,.08)!important;transform:skewX(-4deg)}.landing-signals i{color:var(--accent)!important}
  .landing-emblem{min-height:230px}.landing-emblem::before{width:190px;height:190px;background:rgba(225,60,59,.12)!important;filter:blur(22px)!important}.landing-emblem .logo-hero{width:138px;height:138px;border:7px solid #fff!important;box-shadow:0 0 0 2px var(--accent),0 16px 36px -18px rgba(225,60,59,.65)!important;animation:signatureFloat 5s ease-in-out infinite}.emblem-orbit{border-color:rgba(225,60,59,.23)!important}.orbit-one{border-left-color:var(--accent)!important;border-right-color:rgba(225,60,59,.18)!important}.orbit-two{border-top-color:rgba(225,60,59,.3)!important;border-bottom-color:var(--accent)!important}.emblem-star{color:var(--accent)!important;text-shadow:none!important}
  .hero{border:0!important;border-radius:14px!important;padding:28px 30px!important;background:linear-gradient(112deg,#e13c3b 0%,#a51c26 55%,#791620 100%)!important;box-shadow:var(--shadow-tile),inset 0 1px 0 rgba(255,255,255,.18)!important}.hero::after{background-image:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.12) 48%,transparent 62%),repeating-linear-gradient(-28deg,rgba(255,255,255,.06) 0 1px,transparent 1px 13px)!important;background-size:auto,auto!important;opacity:.5!important}.hero .hero-k{border:1px solid rgba(255,255,255,.35)!important;border-radius:4px!important;background:rgba(124,20,19,.28)!important;transform:skewX(-5deg)!important;color:#fff!important}.hero .hero-t{font-size:clamp(29px,4.7vw,51px)!important;line-height:1.05!important;text-shadow:none!important}.hero .hero-s{color:rgba(255,255,255,.82)}.hero .hero-btn{border-radius:6px!important;box-shadow:3px 3px 0 rgba(65,4,8,.25)!important}.hero .hero-btn.ghost{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.42)!important;box-shadow:none!important}
  .live-center{border:1px solid #d8d8d2!important;border-radius:14px!important;background:#fff!important;box-shadow:var(--shadow-soft)!important}.live-center:before{opacity:.06!important;background:repeating-linear-gradient(-45deg,rgba(225,60,59,.13) 0 1px,transparent 1px 12px)!important}.live-center-head{border-bottom:1px solid #e7e7e3}.live-center-pill{border-color:rgba(225,60,59,.3)!important;background:rgba(225,60,59,.08)!important;color:var(--accent-strong)!important;box-shadow:none!important}.live-duel-card{border:1px solid #deded9!important;border-radius:10px!important;background:#fff!important;box-shadow:0 5px 16px -12px rgba(50,30,30,.35)!important}.live-duel-card:hover{border-color:rgba(225,60,59,.5)!important;transform:translateY(-2px)}.live-duel-top i{color:var(--accent-strong)!important}.live-duel-names em{color:var(--accent)!important;background:rgba(225,60,59,.08)!important}
  .live-duel-lp i{background:linear-gradient(90deg,#ff7379,var(--accent))!important;box-shadow:none!important}.live-duel-lp i:last-child{background:linear-gradient(90deg,#e8b2b5,#a9202b)!important}
  .landing-arena{grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);margin:4px 0 30px;padding:24px;border:1px solid #d8d8d2!important;border-radius:14px!important;background:#fff!important;box-shadow:var(--shadow)!important}.landing-arena::before{opacity:.25!important;background-image:linear-gradient(rgba(225,60,59,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(225,60,59,.06) 1px,transparent 1px)!important}.landing-arena::after{content:"DUEL FEED / LIVE"!important;top:16px!important;color:var(--accent-strong)!important;transform:none!important}.arena-copy h2{font-size:clamp(26px,3vw,42px)!important;text-shadow:none!important}.arena-stats span{border:1px solid #deded9!important;border-radius:6px!important;background:#fff!important;transform:skewX(-4deg);box-shadow:2px 2px 0 rgba(225,60,59,.07)}.arena-visual{border:1px solid #4b2529!important;border-radius:10px!important;background:linear-gradient(145deg,#25191b,#481d23)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 15px 28px -22px rgba(100,20,25,.55)!important;color:#fff!important}.arena-visual::before,.arena-visual::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)!important}.arena-topline i{color:#ff9a9e!important}.arena-versus{color:#fff!important}.arena-versus b{background:var(--accent)!important;box-shadow:0 0 0 5px rgba(225,60,59,.16)!important}.arena-hp i{background:linear-gradient(90deg,#ff8a8e,var(--accent))!important;box-shadow:none!important}.arena-hp i+i{background:linear-gradient(90deg,#fff,#d8a1a4)!important;box-shadow:none!important}.arena-foot span:first-child,.arena-foot span:last-child{color:#fff!important}
  .proof-line{background:linear-gradient(90deg,transparent,var(--accent),transparent)!important}.proof-card::after{background:rgba(225,60,59,.13)!important}.proof-icon{background:rgba(225,60,59,.1)!important;color:var(--accent)!important}
  .tv-mode .tv-head{border:1px solid #d8d8d2!important;border-radius:14px!important;background:#fff!important;box-shadow:var(--shadow-soft)!important}.tv-mode .tv-clock{color:var(--accent-strong)!important;text-shadow:none!important}.tv-mode .tv-match{border:1px solid #deded9!important;background:#fff!important;box-shadow:var(--shadow-soft)!important}.tv-mode .tv-tbl{color:var(--accent-strong)!important}.tv-mode .tv-mid{background:rgba(225,60,59,.1)!important;color:var(--accent-strong)!important}
  .tabbar{background:rgba(255,255,255,.95)!important;border-top:1px solid #d8d8d2!important;box-shadow:0 -12px 28px -24px rgba(70,20,24,.25)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}.tabbar button{border-radius:8px!important}.tabbar button.on{background:rgba(225,60,59,.1)!important;color:var(--accent-strong)!important;box-shadow:inset 0 0 0 1px rgba(225,60,59,.24)!important}
  html[data-theme="dark"] .landing-intro,html.midnight .landing-intro,html[data-theme="dark"] .live-center,html.midnight .live-center,html[data-theme="dark"] .landing-arena,html.midnight .landing-arena,html[data-theme="dark"] .tv-mode .tv-head,html.midnight .tv-mode .tv-head{background:var(--surface)!important;border-color:var(--line)!important}.landing-intro-copy h2,html[data-theme="dark"] .landing-intro-copy h2,html.midnight .landing-intro-copy h2{color:var(--text)!important}.landing-intro-copy p{color:var(--muted)!important}
  html[data-theme="dark"] .tabbar,html.midnight .tabbar{background:rgba(35,28,30,.96)!important;border-top-color:var(--line)!important}
  @media(max-width:700px){.wrap{padding:17px 13px calc(94px + env(safe-area-inset-bottom,0px))}.landing-intro{grid-template-columns:minmax(0,1fr) 108px;gap:4px;min-height:252px;padding:21px 10px}.landing-intro-copy{padding:14px 6px 12px 14px}.landing-intro-copy h2{font-size:34px!important;letter-spacing:-1.4px!important}.landing-intro-copy p{font-size:12.5px;line-height:1.55}.landing-intro::after{top:10px!important;inset-inline-end:12px!important;font-size:7px!important;padding:5px 7px!important}.landing-signals{gap:5px;margin-top:14px}.landing-signals span{font-size:9px;padding:6px 7px}.landing-emblem{min-height:182px;transform:scale(.84)}.landing-emblem .logo-hero{width:118px;height:118px}.hero{padding:23px 18px!important}.hero .hero-t{font-size:30px!important}.live-center{padding:15px!important}.landing-arena{grid-template-columns:1fr;gap:14px;padding:17px!important}.arena-visual{min-height:174px}}
  @media(prefers-reduced-motion:reduce){.landing-emblem .logo-hero,.orbit-one,.orbit-two,.emblem-star,.arena-scan{animation:none!important}}

  /* ═══ KYO PAL Opening Sequence — شاشة دخول سينمائية خفيفة ═══ */
  #splash{isolation:isolate;overflow:hidden;background:#fff!important;color:#171719!important;contain:layout paint;will-change:opacity,visibility;animation:none!important;transition:opacity .8s cubic-bezier(.22,.85,.3,1),visibility .8s ease!important}
  #splash::before{content:"";position:absolute;inset:-30%;z-index:-2;background:radial-gradient(circle at 50% 43%,rgba(225,60,59,.14),transparent 23%),radial-gradient(circle at 50% 45%,rgba(225,60,59,.06),transparent 47%),linear-gradient(135deg,#fff 0%,#fff8f7 52%,#fff 100%);animation:spAtmosphere 5s ease-in-out infinite alternate}
  #splash::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.28;background-image:linear-gradient(90deg,rgba(225,60,59,.08) 1px,transparent 1px),linear-gradient(rgba(225,60,59,.06) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%)}
  .sp-in{position:relative;width:min(560px,92vw);text-align:center;animation:spIn 1.2s cubic-bezier(.16,1,.3,1) both;contain:layout paint}
  .sp-stage{position:relative;width:310px;height:270px;margin:0 auto 8px;display:grid;place-items:center;isolation:isolate;contain:layout paint;will-change:transform}
  .sp-stage::before{content:"";position:absolute;width:215px;height:215px;border-radius:50%;background:rgba(225,60,59,.15);filter:blur(28px);z-index:-2;animation:spPulse 3.4s ease-in-out infinite}
  .sp-stage::after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(225,60,59,.18);border-radius:50%;transform:rotate(17deg);box-shadow:0 0 0 18px rgba(225,60,59,.035),inset 0 0 0 1px rgba(225,60,59,.05);animation:spOrbit 11s linear infinite}
  .sp-seal{position:relative;z-index:3;width:146px;height:146px;display:grid;place-items:center;border-radius:50%;background:#fff;border:6px solid #fff;box-shadow:0 0 0 2px var(--accent),0 24px 54px -18px rgba(225,60,59,.6);animation:spSeal 4.6s ease-in-out infinite}
  .sp-seal img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
  .sp-seal-glow{position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(225,60,59,.42);animation:spSpinReverse 12s linear infinite}
  .sp-ring{position:absolute;z-index:2;width:225px;height:225px;margin:0;border-radius:50%;border:2px solid rgba(225,60,59,.22);border-top-color:var(--accent);border-right-color:transparent;animation:spSpin 2.6s cubic-bezier(.5,.1,.4,.9) infinite}
  .sp-trace{position:absolute;z-index:1;width:380px;height:2px;background:linear-gradient(90deg,transparent,rgba(225,60,59,.45),transparent);transform:rotate(-24deg);opacity:.7;animation:spSweep 4s ease-in-out infinite}
  .sp-trace-b{transform:rotate(28deg);animation-delay:-1.4s;opacity:.42}
  .sp-card{position:absolute;z-index:4;display:grid;place-items:center;width:52px;height:74px;border-radius:6px;background:linear-gradient(145deg,#fff,#f6e9e9);border:1px solid rgba(225,60,59,.4);color:var(--accent-strong);font:900 21px/1 var(--disp);box-shadow:6px 9px 0 rgba(142,23,33,.12),0 14px 22px -12px rgba(225,60,59,.45);transform:rotate(-18deg);animation:spCardA 5.5s ease-in-out infinite;contain:layout paint;will-change:transform,opacity}
  .sp-card-b{width:45px;height:64px;inset-inline-end:18px;top:52px;transform:rotate(22deg);animation-name:spCardB;animation-delay:-1.4s}.sp-card-c{width:40px;height:57px;inset-inline-start:18px;bottom:36px;transform:rotate(-33deg);font-size:15px;color:#fff;background:var(--accent);border-color:var(--accent);animation-name:spCardC;animation-delay:-2.3s}
  .sp-brand{position:relative;font:900 clamp(40px,10vw,56px)/1 var(--disp);letter-spacing:3px;color:var(--accent)!important;text-shadow:0 8px 26px rgba(225,60,59,.2)!important;animation:spBrand 1.35s .25s cubic-bezier(.16,1,.3,1) both}
  .sp-sub{font-size:11px!important;letter-spacing:4px!important;color:#6d6364!important;margin-top:10px!important;text-transform:uppercase}
  .sp-progress{width:min(290px,72vw);height:5px;margin:25px auto 0;overflow:hidden;border-radius:99px;background:#eee1e1}.sp-progress i{display:block;width:40%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8e1721,#e0444d,#8e1721);animation:spProgress 1.8s cubic-bezier(.2,.75,.3,1) infinite}
  .sp-status{margin-top:10px;color:#8d7b7d;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;animation:spStatus 1.8s ease-in-out infinite}
  @keyframes spAtmosphere{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.08) rotate(3deg)}}
  @keyframes spPulse{0%,100%{transform:scale(.82);opacity:.5}50%{transform:scale(1.08);opacity:1}}
  @keyframes spOrbit{to{transform:rotate(377deg)}}
  @keyframes spSpin{to{transform:rotate(360deg)}}
  @keyframes spSpinReverse{to{transform:rotate(-360deg)}}
  @keyframes spSweep{0%,15%{transform:translateX(-40%) rotate(-24deg);opacity:0}35%,70%{opacity:.8}100%{transform:translateX(40%) rotate(-24deg);opacity:0}}
  @keyframes spSeal{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
  @keyframes spCardA{0%,100%{transform:translate(-18px,7px) rotate(-18deg)}50%{transform:translate(-28px,-9px) rotate(-11deg)}}
  @keyframes spCardB{0%,100%{transform:translate(16px,-4px) rotate(22deg)}50%{transform:translate(27px,8px) rotate(30deg)}}
  @keyframes spCardC{0%,100%{transform:translate(-8px,4px) rotate(-33deg)}50%{transform:translate(-2px,-12px) rotate(-24deg)}}
  @keyframes spBrand{from{opacity:0;transform:translateY(10px);letter-spacing:12px}to{opacity:1;transform:none;letter-spacing:3px}}
  @keyframes spProgress{0%{transform:translateX(-170%)}100%{transform:translateX(300%)}}
  @keyframes spStatus{0%,100%{opacity:.48}50%{opacity:1}}
  html[data-theme="dark"] #splash,html.midnight #splash{background:#191719!important;color:#fffaf8!important}html[data-theme="dark"] #splash::before,html.midnight #splash::before{background:radial-gradient(circle at 50% 43%,rgba(224,68,77,.2),transparent 23%),linear-gradient(135deg,#191719,#2b2526 52%,#191719)}html[data-theme="dark"] #splash::after,html.midnight #splash::after{background-image:linear-gradient(90deg,rgba(224,68,77,.12) 1px,transparent 1px),linear-gradient(rgba(224,68,77,.08) 1px,transparent 1px)}html[data-theme="dark"] .sp-card,html.midnight .sp-card{background:linear-gradient(145deg,#3a2c2e,#261e20);color:#ff858b;border-color:rgba(255,133,139,.5)}html[data-theme="dark"] .sp-sub,html.midnight .sp-sub{color:#c8b8b9!important}
  @media(max-width:520px){.sp-stage{width:255px;height:225px}.sp-seal{width:118px;height:118px}.sp-ring{width:190px;height:190px}.sp-stage::after{width:225px;height:225px}.sp-card{width:42px;height:60px}.sp-card-b{width:36px;height:51px;inset-inline-end:4px}.sp-card-c{width:33px;height:47px}.sp-trace{width:300px}}
  @media(prefers-reduced-motion:reduce){#splash{display:none!important}.sp-in,.sp-stage::before,.sp-stage::after,.sp-seal,.sp-seal-glow,.sp-ring,.sp-trace,.sp-card,.sp-brand,.sp-progress i,.sp-status{animation:none!important}}

  /* Yu-Gi-Oh! card art in the opening sequence. The red wash keeps the cards
     legible while the image itself stays recognizable on slow connections. */
  .sp-card{font-size:0!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;overflow:hidden}
  .sp-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(225,60,59,.18) 48%,rgba(30,8,10,.3));mix-blend-mode:soft-light;pointer-events:none}
  .sp-card-a{background-image:linear-gradient(145deg,rgba(255,255,255,.06),rgba(225,60,59,.12)),url("https://images.ygoprodeck.com/images/cards_small/31425736.jpg")!important}
  .sp-card-b{background-image:linear-gradient(145deg,rgba(255,255,255,.06),rgba(225,60,59,.12)),url("https://images.ygoprodeck.com/images/cards_small/89631139.jpg")!important}
  .sp-card-c{background-image:linear-gradient(145deg,rgba(255,255,255,.05),rgba(225,60,59,.18)),url("https://images.ygoprodeck.com/images/cards_small/90681088.jpg")!important}
  html[data-theme="dark"] .sp-card::after,html.midnight .sp-card::after{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(224,68,77,.2) 48%,rgba(0,0,0,.46))}

  /* Permanent round archive */
  .round-history{border-color:rgba(207,59,55,.28);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,247,.94));}
  .round-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
  .round-history-head h3{margin:2px 0 0;font-size:17px;color:var(--ink)}
  .round-history-lock{font-size:11px;font-weight:800;color:var(--good);border:1px solid rgba(41,140,96,.28);background:rgba(41,140,96,.08);border-radius:999px;padding:5px 9px;white-space:nowrap}
  .round-history-list{display:grid;gap:8px}
  .round-history-row{border:1px solid rgba(90,74,68,.15);border-radius:12px;background:rgba(255,255,255,.68);overflow:hidden}
  .round-history-row summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;cursor:pointer;list-style:none}
  .round-history-row summary::-webkit-details-marker{display:none}
  .round-history-row summary>span:first-child{display:flex;align-items:baseline;gap:9px;min-width:0}
  .round-history-row summary b{font-size:14px;color:var(--ink)}
  .round-history-row summary small{font-size:11px;color:var(--muted);font-weight:700}
  .round-history-status{font-size:11px;font-weight:800;color:var(--gold-deep);white-space:nowrap}
  .round-history-matches{padding:0 10px 10px;display:grid;gap:5px}
  .round-history-match{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:8px;border-top:1px solid rgba(90,74,68,.1);padding:8px 2px;font-size:12px}
  .round-history-table{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase}
  .round-history-pair{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .round-history-pair b{color:var(--danger);font-size:10px;margin:0 4px}
  .round-history-result{font-weight:800;color:var(--good);white-space:nowrap;text-align:end}
  html[data-theme="dark"] .round-history,html.midnight .round-history{background:linear-gradient(145deg,rgba(43,31,33,.96),rgba(31,25,26,.96));border-color:rgba(255,133,139,.26)}
  html[data-theme="dark"] .round-history-row,html.midnight .round-history-row{background:rgba(24,19,20,.7);border-color:rgba(255,255,255,.12)}
  html[data-theme="dark"] .round-history-head h3,html.midnight .round-history-head h3,html[data-theme="dark"] .round-history-pair,html.midnight .round-history-pair{color:#fffaf8}
  @media(max-width:520px){.round-history-head{display:block}.round-history-lock{display:inline-block;margin-top:8px}.round-history-match{grid-template-columns:54px minmax(0,1fr);}.round-history-result{grid-column:2;text-align:start;margin-top:-4px}}
  .match-detail-trigger{margin-top:8px;width:100%;justify-content:center;font-size:11px}
  .match-detail-card{display:grid;gap:10px}.match-detail-hero{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}.match-detail-hero b{color:var(--gold);font:800 12px var(--disp)}
  .match-detail-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:15px 10px;border-radius:12px;background:linear-gradient(135deg,rgba(225,60,59,.1),rgba(224,176,32,.08));text-align:center}.match-detail-versus strong{font:900 16px var(--disp);overflow:hidden;text-overflow:ellipsis}.match-detail-versus em{font-style:normal;color:var(--danger);font-weight:900}.match-detail-status{text-align:center;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg2)}.match-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.match-detail-report{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);font-size:12px}.match-detail-report b{color:var(--gold);font:900 17px var(--disp)}
  .replay-select{width:100%;margin-top:4px}.replay-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);font-size:11px;color:var(--muted)}.replay-list{display:grid;gap:5px;margin-top:8px;max-height:48vh;overflow:auto}.replay-match{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:7px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);text-align:start;color:var(--text);cursor:pointer}.replay-match span{font-size:10px;color:var(--muted);font-weight:800}.replay-match b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.replay-match em{font-style:normal;color:var(--good);font:900 12px var(--disp)}
  body.player-compact .card[data-sec="standings"],body.player-compact [data-sec="history"]{opacity:.75}body.player-compact [data-sec="standings"] .btn-ghost:not(:last-child),body.player-compact .challenge-card{display:none}body.player-compact .note{font-size:11px;padding:7px 9px}
  @media(max-width:520px){.match-detail-versus strong{font-size:13px}.match-detail-grid{grid-template-columns:1fr}.replay-match{grid-template-columns:48px 1fr}.replay-match em{grid-column:2;text-align:start;margin-top:-4px}}
  /* Live Duel Radar */
  .live-radar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);font-weight:800;margin-bottom:10px}.live-radar-head b{color:var(--gold);font:900 18px var(--disp)}
  .live-radar-grid{display:grid;gap:7px;max-height:56vh;overflow:auto}.live-radar-row{display:grid;grid-template-columns:62px minmax(0,1fr) 120px 56px;align-items:center;gap:8px;width:100%;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);text-align:start}.live-radar-row.live{border-color:rgba(207,59,55,.35)}.live-radar-row.done{opacity:.8}.live-radar-row.bye{grid-template-columns:62px 1fr auto}.live-radar-row:not(.bye){cursor:pointer}.live-radar-row:hover{border-color:var(--gold)}.live-radar-table{font-size:10px;color:var(--muted);font-weight:900;white-space:nowrap}.live-radar-duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;min-width:0}.live-radar-duel b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.live-radar-duel i{font-style:normal;color:var(--danger);font-size:10px;font-weight:900}.live-radar-lp{display:grid;grid-template-columns:38px 1fr 38px;gap:5px;align-items:center;font:800 11px var(--disp)}.live-radar-lp>span:last-child{text-align:end}.live-radar-lp>i{display:grid;gap:3px}.live-radar-lp u{display:block;height:4px;border-radius:5px;background:var(--gold);text-decoration:none}.live-radar-lp u+u{background:var(--accent)}.live-radar-row>em{font-style:normal;font-size:10px;font-weight:900;color:var(--good);text-align:end;white-space:nowrap}.live-radar-row.done>em{color:var(--muted)}
  .directory-row[role="button"]{cursor:pointer}.directory-row[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  @media(max-width:560px){.live-radar-row{grid-template-columns:52px minmax(0,1fr) 52px;gap:6px}.live-radar-lp{grid-column:2 / -1;grid-row:2}.live-radar-row>em{grid-column:3;grid-row:1}.live-radar-row.bye{grid-template-columns:52px 1fr auto}.live-radar-row.bye>em{grid-column:auto;grid-row:auto}}
  /* Control tower + refined KYO PAL palette */
  :root{--bg:#f3f5f7;--bg2:#e9edf1;--surface:#ffffff;--surface2:#f9fafb;--line:#dce2e8;--text:#171b22;--muted:#657180;--accent:#b8323b;--accent-btn:#b8323b;--accent-strong:#8f202b;--gold:#c8872d;--gold-deep:#9b641f;--good:#16845b;--danger:#c73946;--stage-1:#252b34;--stage-2:#171b22}
  html[data-theme="dark"]{--bg:#0b0f14;--bg2:#121821;--surface:#171e27;--surface2:#1e2732;--line:#303b48;--text:#f5f7fa;--muted:#a9b5c2;--accent:#f05d67;--accent-btn:#c93945;--accent-strong:#ff9298;--gold:#e7ae55;--gold-deep:#ffc66c;--good:#35c98c;--danger:#ff737c;--stage-1:#222a34;--stage-2:#11161d}
  html:not([data-theme="dark"]):not(.midnight) body{background:radial-gradient(circle at 8% -8%,rgba(225,60,59,.07),transparent 30%),linear-gradient(180deg,#f7f8fa 0%,var(--bg) 72%)}
  html[data-theme="dark"] body,html.midnight body{background:radial-gradient(circle at 90% -12%,rgba(240,93,103,.10),transparent 32%),linear-gradient(180deg,#0b0f14 0%,var(--bg) 72%)}
  .control-tower{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:18px;padding:16px;margin:0 0 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));box-shadow:var(--shadow-soft)}
  .control-tower-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.control-tower-head h3{font:800 19px var(--disp);margin:2px 0 3px}.control-tower-head p{margin:0;color:var(--muted);font-size:12px}.control-tower-status{font-size:11px;font-weight:900;color:var(--good);border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));padding:6px 9px;border-radius:999px;white-space:nowrap}
  .control-tower-grid{display:grid;gap:8px}.control-action{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,var(--bg2));}.control-action-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--bg2);font-size:16px}.control-action b{display:block;font-size:13px}.control-action small{display:block;margin-top:2px;color:var(--muted);font-size:11px}.control-action.danger{border-color:color-mix(in srgb,var(--danger) 40%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--surface))}.control-action.warn{border-color:color-mix(in srgb,var(--gold) 42%,var(--line));background:color-mix(in srgb,var(--gold) 7%,var(--surface))}.control-action.good{border-color:color-mix(in srgb,var(--good) 32%,var(--line));background:color-mix(in srgb,var(--good) 6%,var(--surface))}
  .hero{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 73%,#64131e))!important}.hero .hero-btn{color:var(--accent-strong)}.live-center-pill{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
  @supports not (color-mix(in srgb,red 10%,white)){.control-tower{border-color:var(--line);background:var(--surface)}.control-action{background:var(--surface)}.control-action.danger,.control-action.warn,.control-action.good{background:var(--surface)}}
  @media(max-width:560px){.control-tower{padding:13px;border-radius:15px}.control-tower-head{display:block}.control-tower-status{display:inline-block;margin-top:8px}.control-action{grid-template-columns:28px minmax(0,1fr);}.control-action .btn{grid-column:2;justify-self:start;margin-top:2px}}
  /* Duel Arena Broadcast visual pass */
  main.wrap{max-width:1180px;padding-top:28px}
  header.top{box-shadow:0 10px 32px -28px rgba(20,25,34,.65);border-bottom-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
  .brand{max-width:1180px;padding:13px 20px}.brand .logo{width:44px;height:44px;border-radius:14px}.brand h1{font-size:20px;letter-spacing:-.45px}.brand .sub{font-size:10px;letter-spacing:1.2px}
  .landing-intro{min-height:410px;padding:34px 34px!important;grid-template-columns:minmax(0,1fr) 300px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:24px!important;background:radial-gradient(circle at 88% 22%,rgba(240,93,103,.26),transparent 28%),linear-gradient(124deg,#121820 0%,#202b37 63%,#68252d 100%)!important;box-shadow:0 28px 70px -46px rgba(20,25,34,.95),inset 0 1px 0 rgba(255,255,255,.12)!important;color:#fff}
  .landing-intro::before{background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px)!important;background-size:34px 34px!important;mask-image:linear-gradient(135deg,#000,transparent 78%)!important;opacity:.55!important}
  .landing-intro::after{background:rgba(0,0,0,.18)!important;border-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.68)!important}
  .landing-intro-copy{padding:10px 0!important}.landing-intro-copy .eyebrow{color:#ffb0b5}.landing-intro-copy h2{color:#fff!important;font-size:clamp(38px,5.2vw,70px)!important;letter-spacing:-2.8px!important;max-width:760px!important;text-shadow:0 12px 34px rgba(0,0,0,.32)!important}.landing-intro-copy p{color:rgba(255,255,255,.72)!important;max-width:600px;font-size:16px}.landing-signals span{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.16)!important;color:rgba(255,255,255,.88)!important;backdrop-filter:blur(8px)}.landing-signals span i{color:#ff8790!important}
  .landing-emblem{filter:drop-shadow(0 25px 45px rgba(0,0,0,.34))}.landing-emblem .logo-hero{width:150px;height:150px;border:6px solid rgba(255,255,255,.82);box-shadow:0 0 0 10px rgba(255,255,255,.07),0 30px 70px -20px rgba(240,93,103,.9)!important}
  .hero{background:linear-gradient(130deg,#b8323b 0%,#8d2732 58%,#641e2b 100%)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:20px!important;box-shadow:0 24px 58px -36px rgba(137,25,38,.85)!important;min-height:220px}.hero .hero-t{font-size:clamp(30px,4vw,48px)!important;letter-spacing:-1.4px!important}.hero .hero-s{color:rgba(255,255,255,.78)!important}.hero .hero-btn{border-radius:11px!important;box-shadow:0 8px 20px -14px rgba(0,0,0,.8)}
  .live-center{border-radius:20px!important;border-color:color-mix(in srgb,var(--accent) 23%,var(--line))!important;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 4%,var(--surface)))!important;box-shadow:0 18px 48px -36px rgba(20,25,34,.45)!important}.live-center-head h2{font-size:clamp(23px,3vw,32px)!important;letter-spacing:-.8px}.live-duel-card{border-radius:14px!important;background:var(--surface)!important;box-shadow:0 12px 24px -22px rgba(20,25,34,.7)!important}.live-duel-card:hover{border-color:var(--accent)!important;transform:translateY(-2px)}
  .landing-arena{border-radius:20px!important;border-color:rgba(255,255,255,.15)!important;background:linear-gradient(130deg,#121820,#202b37 68%,#7b2831)!important;box-shadow:0 24px 60px -42px rgba(20,25,34,.95)!important}.landing-arena .eyebrow{color:#ffacb2}.landing-arena h2{color:#fff!important}.landing-arena p{color:rgba(255,255,255,.7)!important}.arena-stats span{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.07)!important}.arena-stats b{color:#fff!important}.arena-stats small{color:rgba(255,255,255,.6)!important}.arena-visual{border-color:rgba(255,255,255,.18)!important;background:rgba(8,11,15,.42)!important}
  .card{border-radius:16px!important;box-shadow:0 12px 34px -28px rgba(20,25,34,.45),inset 0 1px 0 rgba(255,255,255,.55)!important}.card>h3:first-child::before{width:4px;height:18px;border-radius:8px;background:var(--accent)}.sechead h3{letter-spacing:-.4px}.btn,.hero-btn,.iconbtn{border-radius:10px!important}.btn-gold{background:var(--accent-btn)!important;color:#fff!important}.btn-ghost:hover,.iconbtn:hover{border-color:var(--accent)!important;color:var(--accent)!important}
  .tabbar{border-top-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important;box-shadow:0 -18px 40px -32px rgba(20,25,34,.8)!important}.tabbar button.on{color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)!important}.tabbar button .ic{filter:drop-shadow(0 3px 5px color-mix(in srgb,var(--accent) 20%,transparent))}
  @media(hover:hover){.card:not(.modal):hover{transform:translateY(-1px)}.hero .hero-btn:hover{transform:translateY(-2px)} }
  @media(max-width:700px){main.wrap{padding-top:16px}.landing-intro{min-height:350px;padding:25px 18px!important;grid-template-columns:minmax(0,1fr) 92px!important;gap:8px!important}.landing-intro-copy h2{font-size:35px!important;letter-spacing:-1.5px!important}.landing-intro-copy p{font-size:13px;line-height:1.6}.landing-emblem .logo-hero{width:106px;height:106px;border-width:4px}.landing-signals{display:grid!important;grid-template-columns:1fr!important;gap:5px!important}.landing-signals span{font-size:10px!important}.hero{min-height:214px}.hero .hero-t{font-size:29px!important}.landing-arena{padding:18px!important}}
  @media(prefers-reduced-motion:reduce){.card:not(.modal):hover,.live-duel-card:hover,.hero .hero-btn:hover{transform:none!important}}
  /* Broadcast hero — new home structure */
  .broadcast-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:34px;align-items:center;min-height:470px;margin-bottom:22px;padding:42px 44px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:radial-gradient(circle at 82% 24%,rgba(240,93,103,.28),transparent 30%),linear-gradient(126deg,#10161e 0%,#202c38 62%,#712832 100%);color:#fff;box-shadow:0 34px 82px -50px rgba(8,12,18,.9),inset 0 1px 0 rgba(255,255,255,.12)}
  .broadcast-gridline{position:absolute;inset:0;z-index:-1;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(110deg,#000,transparent 72%);pointer-events:none}.broadcast-copy{position:relative;z-index:2;max-width:680px}.broadcast-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.74);font:800 10px/1 var(--disp);letter-spacing:1.5px}.broadcast-live-dot{width:8px;height:8px;border-radius:50%;background:#87919d;box-shadow:0 0 0 4px rgba(255,255,255,.06)}.broadcast-live-dot.on{background:#ff6874;box-shadow:0 0 0 4px rgba(255,104,116,.14),0 0 16px rgba(255,104,116,.8)}
  .broadcast-copy h2{margin:18px 0 13px;max-width:730px;font:900 clamp(42px,5.8vw,78px)/.98 var(--disp);letter-spacing:-3px;color:#fff;text-wrap:balance}.broadcast-copy p{max-width:610px;margin:0;color:rgba(255,255,255,.7);font-size:16px;line-height:1.75}.broadcast-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.broadcast-primary,.broadcast-secondary{min-height:46px;padding:11px 16px;border-radius:11px;font:800 13px var(--disp);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.broadcast-primary{border:1px solid rgba(255,255,255,.1);background:#fff;color:#8f202b;box-shadow:0 14px 26px -18px rgba(0,0,0,.8)}.broadcast-secondary{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#fff}.broadcast-primary:hover,.broadcast-secondary:hover{transform:translateY(-2px)}.broadcast-facts{display:flex;gap:8px;margin-top:28px;max-width:480px}.broadcast-facts span{display:flex;flex-direction:column;gap:2px;min-width:96px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06)}.broadcast-facts b{font:900 21px var(--disp);color:#fff}.broadcast-facts small{font-size:10px;color:rgba(255,255,255,.58);font-weight:700}
  .broadcast-stage{position:relative;min-height:330px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.13),transparent 26%),rgba(4,8,12,.34);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 24px 54px -35px rgba(0,0,0,.8)}.broadcast-stage-label{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.62);font:800 9px var(--disp);letter-spacing:1.2px;text-transform:uppercase}.broadcast-stage-label b{color:#ff9da4}.broadcast-ring{position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%;transform:rotate(-18deg)}.broadcast-ring.ring-a{width:240px;height:240px;box-shadow:0 0 0 14px rgba(240,93,103,.05),inset 0 0 0 1px rgba(240,93,103,.18);animation:broadcastOrbit 12s linear infinite}.broadcast-ring.ring-b{width:180px;height:180px;border-style:dashed;border-color:rgba(255,196,108,.23);animation:broadcastOrbit 9s linear infinite reverse}.broadcast-core{position:relative;z-index:3}.broadcast-core .logo-hero{width:112px;height:112px;border-radius:50%;border:4px solid rgba(255,255,255,.85);box-shadow:0 0 0 8px rgba(255,255,255,.06),0 24px 55px -14px rgba(240,93,103,.9);animation:broadcastFloat 4.5s ease-in-out infinite}.broadcast-card{position:absolute;z-index:4;width:49px;height:70px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:7px;background:linear-gradient(145deg,#fff,#f5d7d9);color:#b8323b;font:900 22px var(--disp);box-shadow:0 16px 26px -14px rgba(0,0,0,.8)}.broadcast-card.card-left{left:15%;top:29%;transform:rotate(-19deg);animation:broadcastCardA 4.5s ease-in-out infinite}.broadcast-card.card-right{right:14%;bottom:29%;transform:rotate(22deg);animation:broadcastCardB 4.8s ease-in-out infinite}
  .broadcast-vs{position:absolute;z-index:5;left:11%;right:11%;bottom:49px;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(7,10,14,.5);backdrop-filter:blur(8px);font-size:10px}.broadcast-vs b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}.broadcast-vs b:last-child{text-align:end}.broadcast-vs i{font-style:normal;color:#ff9da4;font:900 10px var(--disp)}.broadcast-lp{position:absolute;left:11%;right:11%;bottom:23px;display:grid;grid-template-columns:34px 1fr 34px;gap:7px;align-items:center;color:rgba(255,255,255,.72);font:900 9px var(--disp)}.broadcast-lp span:last-child{text-align:end}.broadcast-lp div{display:grid;gap:3px}.broadcast-lp i{display:block;height:3px;border-radius:4px;background:#ff737c}.broadcast-lp i+i{background:#f1b452}.broadcast-stage-foot{position:absolute;bottom:8px;left:14px;right:14px;display:flex;justify-content:space-between;color:rgba(255,255,255,.46);font:800 8px var(--disp);letter-spacing:1px}
  @keyframes broadcastOrbit{to{transform:rotate(342deg)}}@keyframes broadcastFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes broadcastCardA{0%,100%{transform:translate(-5px,3px) rotate(-19deg)}50%{transform:translate(-12px,-9px) rotate(-11deg)}}@keyframes broadcastCardB{0%,100%{transform:translate(4px,-2px) rotate(22deg)}50%{transform:translate(12px,8px) rotate(29deg)}}
  @media(max-width:760px){.broadcast-hero{grid-template-columns:1fr;gap:22px;min-height:0;padding:27px 19px 20px;border-radius:21px}.broadcast-copy h2{font-size:43px;letter-spacing:-1.8px}.broadcast-copy p{font-size:13px;line-height:1.6}.broadcast-facts{margin-top:19px}.broadcast-stage{min-height:260px}.broadcast-core .logo-hero{width:90px;height:90px}.broadcast-ring.ring-a{width:195px;height:195px}.broadcast-ring.ring-b{width:145px;height:145px}.broadcast-vs{bottom:46px}.broadcast-lp{bottom:20px}}
  @media(prefers-reduced-motion:reduce){.broadcast-ring,.broadcast-core .logo-hero,.broadcast-card{animation:none!important}.broadcast-primary:hover,.broadcast-secondary:hover{transform:none}}
  /* Card Vault + Editorial Luxury */
  .vault-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:42px;align-items:center;min-height:500px;margin-bottom:22px;padding:44px 48px;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,#fff 0%,#fbfbfa 58%,#f1e8e6 100%);box-shadow:0 24px 70px -50px rgba(30,35,44,.5),inset 0 1px 0 #fff}.vault-hero::before{content:"";position:absolute;inset:auto -14% -48% 38%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(225,60,59,.14),transparent 65%);pointer-events:none}.vault-copy,.vault-gallery{position:relative;z-index:1}.vault-mark{display:flex;align-items:baseline;gap:10px;margin-bottom:30px}.vault-mark span{font:900 12px var(--disp);letter-spacing:3px;color:var(--accent)}.vault-mark i{font-style:normal;font:800 9px var(--disp);letter-spacing:1px;color:var(--muted)}.vault-kicker{font:900 11px var(--disp);letter-spacing:2px;color:var(--accent-strong)}.vault-copy h2{max-width:700px;margin:14px 0 16px;font:900 clamp(45px,6vw,82px)/.94 var(--disp);letter-spacing:-4px;color:var(--text);text-wrap:balance}.vault-copy p{max-width:590px;margin:0;color:var(--muted);font-size:16px;line-height:1.8}.vault-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}.vault-primary,.vault-secondary{min-height:46px;padding:11px 17px;border-radius:10px;font:800 13px var(--disp);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.vault-primary{border:0;background:var(--accent-btn);color:#fff;box-shadow:0 12px 24px -16px rgba(164,26,25,.85)}.vault-secondary{border:1px solid var(--line);background:rgba(255,255,255,.72);color:var(--text)}.vault-primary:hover,.vault-secondary:hover{transform:translateY(-2px)}.vault-stats{display:flex;gap:8px;margin-top:30px}.vault-stats span{min-width:96px;padding:10px 12px;border-top:2px solid var(--accent);background:rgba(255,255,255,.55)}.vault-stats b{display:block;font:900 21px var(--disp);color:var(--text)}.vault-stats small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:700}.vault-gallery{min-height:380px;display:flex;align-items:center;justify-content:center}.vault-gallery-caption{position:absolute;top:5px;left:0;right:0;display:flex;justify-content:space-between;color:var(--muted);font:800 9px var(--disp);letter-spacing:1.5px}.vault-gallery-caption b{color:var(--accent)}.vault-card{position:absolute;width:142px;height:200px;overflow:hidden;border:7px solid #fff;border-radius:11px;background:#eee;box-shadow:0 24px 42px -22px rgba(24,28,35,.62)}.vault-card img{display:block;width:100%;height:100%;object-fit:cover}.vault-card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 34%,rgba(225,60,59,.16));pointer-events:none}.vault-card-one{transform:translate(-70px,20px) rotate(-15deg);z-index:1}.vault-card-two{transform:translate(0,-12px) rotate(2deg);z-index:3}.vault-card-three{transform:translate(70px,20px) rotate(15deg);z-index:2}.vault-gallery-seal{position:absolute;z-index:5;bottom:18px;right:2px;display:flex;align-items:center;gap:7px;padding:7px 9px;background:#fff;border:1px solid var(--line);color:var(--accent);font:900 8px/1.15 var(--disp);letter-spacing:1px;box-shadow:0 10px 23px -15px rgba(20,25,34,.5)}.vault-gallery-seal img{width:27px;height:27px;border-radius:50%;object-fit:cover}.vault-pulse{margin-bottom:24px;padding:25px 27px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-soft)}.vault-pulse-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:17px}.vault-section-label{font:900 10px var(--disp);letter-spacing:1.7px;color:var(--accent)}.vault-pulse-head h3{margin:5px 0 0;font:900 clamp(24px,3vw,34px)/1 var(--disp);letter-spacing:-1px;color:var(--text)}.vault-text-link{padding:3px 0;border:0;background:none;color:var(--accent);font:800 12px var(--disp);cursor:pointer}.vault-text-link:hover{text-decoration:underline}.vault-match-list{display:grid;gap:8px}.vault-match{display:grid;grid-template-columns:45px minmax(0,1fr) 150px 52px;align-items:center;gap:12px;padding:13px 12px;border-top:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(225,60,59,.035),transparent)}.vault-match-index{font:900 12px var(--disp);color:var(--accent)}.vault-match-names{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;min-width:0}.vault-match-names b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.vault-match-names b:last-child{text-align:end}.vault-match-names i{font-style:normal;color:var(--muted);font:900 10px var(--disp)}.vault-match-lp{display:grid;grid-template-columns:36px 1fr 36px;gap:6px;align-items:center;font:900 10px var(--disp);color:var(--muted)}.vault-match-lp span:last-child{text-align:end}.vault-match-lp div{display:grid;gap:3px}.vault-match-lp i{height:4px;border-radius:4px;background:var(--accent);display:block}.vault-match-lp i+i{background:var(--gold)}.vault-match>em{font-style:normal;text-align:end;color:var(--good);font:900 9px var(--disp)}.vault-empty{display:flex;flex-direction:column;gap:4px;padding:22px 4px;color:var(--muted);text-align:center}.vault-empty b{font:900 17px var(--disp);color:var(--text)}.vault-pulse-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:17px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.vault-feature-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.vault-feature-tags i{font-style:normal;padding:5px 8px;border:1px solid var(--line);color:var(--muted);font:800 9px var(--disp);white-space:nowrap}
  html[data-theme="dark"] .vault-hero,html.midnight .vault-hero{background:linear-gradient(135deg,#151b23,#202832 60%,#342027);border-color:#303b48}.vault-hero::before{background:radial-gradient(circle,rgba(240,93,103,.18),transparent 65%)}html[data-theme="dark"] .vault-copy h2,html.midnight .vault-copy h2,html[data-theme="dark"] .vault-stats b,html.midnight .vault-stats b{color:#f5f7fa}html[data-theme="dark"] .vault-secondary,html.midnight .vault-secondary{background:rgba(255,255,255,.05);color:#f5f7fa;border-color:#303b48}html[data-theme="dark"] .vault-stats span,html.midnight .vault-stats span{background:rgba(255,255,255,.04)}html[data-theme="dark"] .vault-gallery-seal,html.midnight .vault-gallery-seal{background:#171e27;border-color:#303b48}.vault-pulse{background:var(--surface)}
  @media(max-width:760px){.vault-hero{grid-template-columns:1fr;gap:22px;min-height:0;padding:27px 19px 22px;border-radius:19px}.vault-mark{margin-bottom:22px}.vault-copy h2{font-size:46px;letter-spacing:-2.2px}.vault-copy p{font-size:13px;line-height:1.65}.vault-stats{margin-top:21px}.vault-gallery{min-height:275px}.vault-card{width:104px;height:147px;border-width:5px}.vault-card-one{transform:translate(-53px,14px) rotate(-15deg)}.vault-card-three{transform:translate(53px,14px) rotate(15deg)}.vault-card-two{transform:translate(0,-8px) rotate(2deg)}.vault-gallery-seal{bottom:7px;right:0}.vault-pulse{padding:20px 15px;border-radius:15px}.vault-pulse-head{align-items:flex-start;display:block}.vault-text-link{margin-top:10px}.vault-match{grid-template-columns:34px minmax(0,1fr) 46px;gap:8px}.vault-match-lp{grid-column:2 / -1;grid-row:2}.vault-match>em{grid-column:3;grid-row:1}.vault-pulse-footer{display:block}.vault-feature-tags{justify-content:flex-start;margin-top:10px}}

/* ===== KYO PAL / Studio rebuild =====
   A complete visual shell with motion limited to transform/opacity so the app stays responsive. */
:root{--studio-red:#e13c3b;--studio-red-deep:#a41a19;--studio-ink:#17181c;--studio-paper:#fffdf9;--studio-sand:#f1e9e2;--studio-border:rgba(29,30,34,.12);--studio-shadow:0 24px 70px -42px rgba(41,20,22,.45)}
html[data-theme="dark"]{--studio-paper:#17181c;--studio-sand:#282125;--studio-ink:#f8f4f1;--studio-border:rgba(255,255,255,.14);--studio-shadow:0 26px 72px -42px rgba(0,0,0,.75)}
.wrap{max-width:1120px;padding:30px 24px calc(100px + env(safe-area-inset-bottom,0px))}
header.top{z-index:50;border-bottom:1px solid var(--studio-border);box-shadow:0 10px 30px -28px rgba(80,26,32,.7)}
.brand{max-width:1120px;padding:12px 24px;gap:14px}
.brand-wm{transition:transform .22s ease}.brand-wm:hover{transform:translateY(-1px)}
.top-nav{display:flex;align-items:center;gap:4px;margin-inline:auto;min-width:0}
.top-nav-link{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:999px;font:800 11px var(--disp);cursor:pointer;transition:color .2s ease,background .2s ease,transform .2s ease}
.top-nav-link:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);transform:translateY(-1px)}
.top-nav-link.is-active{color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.studio-home{position:relative;isolation:isolate;overflow:hidden;min-height:650px;margin:0 0 24px;padding:55px 56px 24px;border:1px solid var(--studio-border);border-radius:30px;background:linear-gradient(135deg,var(--studio-paper) 0%,var(--studio-paper) 47%,var(--studio-sand) 100%);box-shadow:var(--studio-shadow)}
.studio-home::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 54%,rgba(225,60,59,.065) 54.2%,transparent 54.7%);pointer-events:none;z-index:-1}
.studio-home::after{content:"";position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:22px;pointer-events:none;z-index:-1}
.studio-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;opacity:.55}
.studio-glow-a{width:360px;height:360px;top:-150px;right:10%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 21%,transparent),transparent 68%);animation:studioDrift 12s ease-in-out infinite alternate}
.studio-glow-b{width:240px;height:240px;bottom:-110px;left:5%;background:radial-gradient(circle,rgba(212,166,73,.2),transparent 70%);animation:studioDrift 15s ease-in-out infinite alternate-reverse}
.studio-main{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:46px;align-items:center;position:relative;z-index:1}
.studio-copy{max-width:670px}.studio-eyebrow,.studio-section-kicker{display:flex;align-items:center;gap:8px;color:var(--accent-strong);font:900 10px var(--disp);letter-spacing:1.7px;text-transform:uppercase}
.studio-live-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 5px color-mix(in srgb,var(--muted) 10%,transparent)}
.studio-live-dot.is-live{background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.13);animation:studioPulse 1.8s ease-in-out infinite}
.studio-copy h2{max-width:680px;margin:19px 0 18px;color:var(--studio-ink);font:900 clamp(48px,7vw,92px)/.94 var(--disp);letter-spacing:-5px;text-wrap:balance}
.studio-copy p{max-width:560px;margin:0;color:var(--muted);font-size:16px;line-height:1.8}
.studio-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}.studio-btn{min-height:47px;padding:12px 17px;border-radius:9px;font:900 12px var(--disp);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease}.studio-btn:hover{transform:translateY(-3px)}.studio-btn-primary{border:1px solid var(--studio-red);background:var(--studio-red);color:#fff;box-shadow:0 15px 27px -18px rgba(164,26,25,.95)}.studio-btn-light{border:1px solid color-mix(in srgb,var(--accent) 32%,var(--studio-border));background:color-mix(in srgb,var(--accent) 8%,var(--studio-paper));color:var(--accent-strong)}.studio-btn-quiet{border:1px solid var(--studio-border);background:transparent;color:var(--muted)}
.studio-proof{display:flex;gap:8px;margin-top:34px}.studio-proof span{display:flex;align-items:baseline;gap:5px;padding:9px 12px;border-top:2px solid var(--accent);background:color-mix(in srgb,var(--studio-paper) 64%,transparent);color:var(--muted);font-size:10px;font-weight:800}.studio-proof b{color:var(--studio-ink);font:900 20px var(--disp)}
.studio-deck-scene{position:relative;min-height:420px;display:grid;place-items:center;isolation:isolate}.studio-scene-label,.studio-scene-note{position:absolute;left:0;right:0;display:flex;justify-content:space-between;color:var(--muted);font:900 9px var(--disp);letter-spacing:1.8px}.studio-scene-label{top:7px}.studio-scene-label b,.studio-scene-note b{color:var(--accent)}.studio-scene-note{bottom:12px;justify-content:center;gap:5px}
.studio-deck-card{position:absolute;width:174px;height:246px;overflow:hidden;border:8px solid #fff;border-radius:13px;background:#eee;box-shadow:0 30px 48px -26px rgba(25,19,20,.72);transform-origin:center bottom;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}.studio-deck-card::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.45),transparent 32%,rgba(225,60,59,.12));pointer-events:none}.studio-deck-card img{display:block;width:100%;height:100%;object-fit:cover}.studio-card-a{transform:translate(-86px,27px) rotate(-16deg);animation:studioCardA 7s ease-in-out infinite}.studio-card-b{z-index:3;transform:translateY(-13px) rotate(1deg);animation:studioCardB 7s ease-in-out .2s infinite}.studio-card-c{transform:translate(86px,27px) rotate(16deg);animation:studioCardC 7s ease-in-out .4s infinite}.studio-deck-card:hover{z-index:8;transform:translateY(-20px) rotate(0deg) scale(1.04);box-shadow:0 34px 58px -26px rgba(25,19,20,.82);animation:none}
.studio-deck-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:50%;pointer-events:none}.studio-deck-orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);top:-4px;left:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)}.orbit-a{width:330px;height:180px;transform:rotate(-28deg);animation:studioOrbit 12s linear infinite}.orbit-b{width:260px;height:300px;transform:rotate(38deg);opacity:.55;animation:studioOrbit 18s linear infinite reverse}.studio-deck-core{z-index:5;display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--studio-border);background:color-mix(in srgb,var(--studio-paper) 88%,transparent);color:var(--accent);font:900 8px/1.1 var(--disp);letter-spacing:1px;box-shadow:0 14px 28px -18px rgba(25,19,20,.8);animation:studioFloat 4.5s ease-in-out infinite}.studio-deck-core img{width:34px;height:34px;object-fit:cover;border-radius:50%}
.studio-strip{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-top:38px;position:relative;z-index:2}.studio-strip-card{min-height:125px;padding:18px;border:1px solid var(--studio-border);background:color-mix(in srgb,var(--studio-paper) 78%,transparent);box-shadow:0 12px 24px -22px rgba(28,20,22,.55);transition:transform .25s ease,border-color .25s ease}.studio-strip-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--studio-border))}.studio-strip-event{background:var(--studio-red);color:#fff;border-color:transparent}.studio-strip-kicker{display:block;font:900 9px var(--disp);letter-spacing:1.6px;opacity:.75}.studio-strip-card b{display:block;margin-top:10px;font:900 18px/1.2 var(--disp)}.studio-strip-card small{display:block;margin-top:8px;color:var(--muted);font-size:11px;line-height:1.55}.studio-strip-event small{color:rgba(255,255,255,.75)}.studio-strip-link{margin-top:13px;padding:0;border:0;background:none;color:inherit;font:900 11px var(--disp);cursor:pointer}.studio-strip-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);font-size:18px}
.studio-pulse{margin:0 0 26px;padding:28px 30px;border:1px solid var(--studio-border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-soft)}.studio-pulse-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}.studio-pulse-head h3{margin:7px 0 4px;color:var(--text);font:900 clamp(25px,3vw,38px)/1 var(--disp);letter-spacing:-1.4px}.studio-pulse-head p{margin:0;color:var(--muted);font-size:12px}.studio-text-link{padding:5px 0;border:0;background:none;color:var(--accent);font:900 12px var(--disp);cursor:pointer}.studio-text-link:hover{text-decoration:underline}.studio-pulse-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(235px,.75fr);gap:16px}.studio-match-stack{display:grid;gap:8px}.studio-match-stack .vault-match{display:grid;grid-template-columns:38px minmax(0,1fr) 170px 50px;align-items:center;gap:10px;padding:14px 12px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 55%);transition:transform .22s ease,border-color .22s ease,background .22s ease}.studio-match-stack .vault-match:hover{transform:translateX(-4px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.studio-next-card{display:flex;flex-direction:column;justify-content:center;padding:21px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));border-radius:14px}.studio-next-label{color:var(--accent);font:900 9px var(--disp);letter-spacing:1.5px}.studio-next-card strong{margin-top:12px;color:var(--text);font:900 18px/1.25 var(--disp)}.studio-next-card p{margin:10px 0 18px;color:var(--muted);font-size:12px;line-height:1.7}.studio-next-button{align-self:flex-start;padding:10px 12px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);font:900 11px var(--disp);cursor:pointer;transition:background .22s ease,color .22s ease,transform .22s ease}.studio-next-button:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}.studio-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;padding:20px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted)}.studio-empty b{color:var(--text);font:900 17px var(--disp)}.studio-empty span{margin-top:5px;font-size:12px}
@keyframes studioRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes studioFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes studioDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(18px,12px,0)}}@keyframes studioOrbit{to{transform:rotate(398deg)}}@keyframes studioPulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.22)}}@keyframes studioCardA{0%,100%{transform:translate(-86px,27px) rotate(-16deg)}50%{transform:translate(-92px,19px) rotate(-13deg)}}@keyframes studioCardB{0%,100%{transform:translateY(-13px) rotate(1deg)}50%{transform:translateY(-21px) rotate(0deg)}}@keyframes studioCardC{0%,100%{transform:translate(86px,27px) rotate(16deg)}50%{transform:translate(92px,19px) rotate(13deg)}}
.studio-copy>*{animation:studioRise .65s cubic-bezier(.2,.75,.25,1) both}.studio-copy>*:nth-child(2){animation-delay:.06s}.studio-copy>*:nth-child(3){animation-delay:.12s}.studio-copy>*:nth-child(4){animation-delay:.18s}.studio-copy>*:nth-child(5){animation-delay:.24s}.studio-deck-scene{animation:studioRise .8s .14s cubic-bezier(.2,.75,.25,1) both}.studio-strip-card{animation:studioRise .6s .35s cubic-bezier(.2,.75,.25,1) both}.studio-strip-card:nth-child(2){animation-delay:.42s}.studio-strip-card:nth-child(3){animation-delay:.49s}.studio-pulse{animation:studioRise .65s .2s cubic-bezier(.2,.75,.25,1) both}
html.no-fx .studio-copy>*,html.no-fx .studio-deck-scene,html.no-fx .studio-strip-card,html.no-fx .studio-pulse{animation:none!important}.no-fx .studio-deck-card,.no-fx .studio-deck-core,.no-fx .studio-glow-a,.no-fx .studio-glow-b,.no-fx .studio-deck-orbit,.no-fx .studio-live-dot.is-live{animation:none!important}
@media(max-width:860px){.top-nav{display:none}.studio-home{padding:38px 30px 22px}.studio-main{grid-template-columns:1fr;gap:18px}.studio-copy{max-width:none}.studio-deck-scene{min-height:330px}.studio-strip{margin-top:20px}}
@media(max-width:640px){.wrap{padding:18px 14px calc(94px + env(safe-area-inset-bottom,0px))}.brand{padding-inline:14px}.studio-home{min-height:0;padding:31px 19px 18px;border-radius:21px}.studio-home::after{inset:9px;border-radius:15px}.studio-copy h2{font-size:48px;letter-spacing:-2.8px}.studio-copy p{font-size:13px;line-height:1.7}.studio-actions{margin-top:22px;gap:7px}.studio-btn{min-height:43px;padding:10px 12px;font-size:11px}.studio-proof{gap:5px;margin-top:24px}.studio-proof span{padding:8px 8px;font-size:9px}.studio-proof b{font-size:17px}.studio-deck-scene{min-height:278px;margin-top:6px}.studio-deck-card{width:111px;height:157px;border-width:5px}.studio-card-a{transform:translate(-55px,17px) rotate(-16deg)}.studio-card-b{transform:translateY(-9px) rotate(1deg)}.studio-card-c{transform:translate(55px,17px) rotate(16deg)}.studio-card-a{animation-name:studioCardASmall}.studio-card-b{animation-name:studioCardBSmall}.studio-card-c{animation-name:studioCardCSmall}.studio-deck-orbit{transform:scale(.74)}.studio-scene-label{font-size:8px}.studio-strip{grid-template-columns:1fr;margin-top:16px}.studio-strip-card{min-height:auto;padding:15px}.studio-strip-card b{font-size:16px}.studio-pulse{padding:20px 14px;border-radius:16px}.studio-pulse-head{display:block}.studio-text-link{margin-top:12px}.studio-pulse-grid{grid-template-columns:1fr}.studio-next-card{padding:17px}.studio-match-stack .vault-match{grid-template-columns:32px minmax(0,1fr) 45px;gap:7px}.studio-match-stack .vault-match .vault-match-lp{grid-column:2 / -1;grid-row:2}.studio-match-stack .vault-match>em{grid-column:3;grid-row:1}.studio-match-stack .vault-match-names{font-size:12px}}
@keyframes studioCardASmall{0%,100%{transform:translate(-55px,17px) rotate(-16deg)}50%{transform:translate(-59px,12px) rotate(-13deg)}}@keyframes studioCardBSmall{0%,100%{transform:translateY(-9px) rotate(1deg)}50%{transform:translateY(-15px) rotate(0)}}@keyframes studioCardCSmall{0%,100%{transform:translate(55px,17px) rotate(16deg)}50%{transform:translate(59px,12px) rotate(13deg)}}
@media(prefers-reduced-motion:reduce){.studio-copy>*,.studio-deck-scene,.studio-strip-card,.studio-pulse,.studio-deck-card,.studio-deck-core,.studio-glow-a,.studio-glow-b,.studio-deck-orbit,.studio-live-dot.is-live{animation:none!important;transition:none!important}}
.studio-home.hero{color:var(--studio-ink)!important;background:linear-gradient(135deg,var(--studio-paper) 0%,var(--studio-paper) 47%,var(--studio-sand) 100%)!important;border:1px solid var(--studio-border)!important;border-radius:30px!important;box-shadow:var(--studio-shadow)!important;padding:55px 56px 24px!important;min-height:650px}
.studio-home.hero::before{background:linear-gradient(115deg,transparent 0 54%,rgba(225,60,59,.065) 54.2%,transparent 54.7%)!important;opacity:1!important}
.studio-home.hero::after{inset:14px!important;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)!important;border-radius:22px!important;background:none!important;opacity:1!important}
html[data-theme="dark"] .studio-home.hero,html.midnight .studio-home.hero{background:linear-gradient(135deg,#17181c 0%,#17181c 47%,#282125 100%)!important}
@media(max-width:860px){.studio-home.hero{padding:38px 30px 22px!important}}
@media(max-width:640px){.studio-home.hero{padding:31px 19px 18px!important;border-radius:21px!important;min-height:0}.studio-home.hero::after{inset:9px!important;border-radius:15px!important}}
.studio-deck-core{display:none!important}
.studio-deck-card{border:7px solid rgba(255,255,255,.96);border-radius:16px;box-shadow:0 30px 52px -27px rgba(22,17,18,.72),0 0 0 1px rgba(225,60,59,.13);backface-visibility:hidden;transform-style:preserve-3d}
.studio-deck-card::before{content:"";position:absolute;inset:-28%;z-index:2;background:linear-gradient(116deg,transparent 37%,rgba(255,255,255,.56) 48%,transparent 59%);transform:translateX(-75%) rotate(11deg);opacity:0;pointer-events:none;mix-blend-mode:screen;animation:studioFoil 6.8s ease-in-out infinite}
.studio-card-b::before{animation-delay:1.2s}.studio-card-c::before{animation-delay:2.4s}.studio-deck-card img{position:relative;z-index:1}
.studio-card-b{box-shadow:0 34px 58px -26px rgba(22,17,18,.8),0 0 0 1px rgba(225,60,59,.2);transform:translateY(-13px) rotate(1deg) scale(1.035)}
 .studio-card-b{animation-name:studioCardBEnhanced}
@keyframes studioCardBEnhanced{0%,100%{transform:translateY(-13px) rotate(1deg) scale(1.035)}50%{transform:translateY(-21px) rotate(0deg) scale(1.06)}}
@keyframes studioFoil{0%,24%{opacity:0;transform:translateX(-75%) rotate(11deg)}38%{opacity:.72}58%,100%{opacity:0;transform:translateX(75%) rotate(11deg)}}
@media(max-width:640px){.studio-deck-card{border-width:5px;border-radius:12px}.studio-card-b{transform:translateY(-9px) rotate(1deg) scale(1.045);animation-name:studioCardBEnhancedSmall}}
@keyframes studioCardBEnhancedSmall{0%,100%{transform:translateY(-9px) rotate(1deg) scale(1.045)}50%{transform:translateY(-15px) rotate(0deg) scale(1.07)}}
html.no-fx .studio-deck-card::before,.no-fx .studio-deck-card::before{animation:none!important;opacity:0!important}
  @media(prefers-reduced-motion:reduce){.vault-primary:hover,.vault-secondary:hover{transform:none}}

/* Organizer request launcher */
.organizer-requests-launch{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:17px;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface) 68%);box-shadow:var(--shadow-soft);transition:transform .22s ease,box-shadow .22s ease}
.organizer-requests-launch:hover{transform:translateY(-2px);box-shadow:var(--shadow-tile)}
.organizer-requests-launch-copy{display:flex;align-items:center;gap:12px;min-width:0}
.organizer-requests-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;background:var(--accent);color:#fff;font-size:24px;box-shadow:0 15px 26px -18px var(--accent)}
.organizer-requests-launch h3{margin:2px 0 4px;font:900 18px var(--disp);color:var(--text)}
.organizer-requests-launch p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}
.organizer-requests-launch .eyebrow{font-size:8px;letter-spacing:1.4px;color:var(--accent)}
@media(max-width:620px){.organizer-requests-launch{align-items:flex-start;display:block;padding:15px}.organizer-requests-launch-copy{align-items:flex-start}.organizer-requests-launch .btn{width:100%;margin-top:13px}.organizer-requests-icon{width:40px;height:40px;font-size:20px}.organizer-requests-launch h3{font-size:16px}.organizer-requests-launch p{font-size:10px}}

/* Automatic quote and fulfilment clarity */
.card-req-delivery-hint{display:block;margin-top:6px;color:var(--muted);font-size:10px;line-height:1.5}
#cardRequestsModal #cardReqAddress:required:invalid{border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
#cardRequestsModal #cardReqShipping:disabled{opacity:.55;cursor:not-allowed;background:color-mix(in srgb,var(--muted) 8%,var(--surface))}
.card-req-auto-total{margin-top:14px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));box-shadow:0 16px 30px -28px var(--accent);animation:cardReqTotalIn .35s ease both}
.card-req-total-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}.card-req-total-heading span{font-weight:800}.card-req-total-heading b{color:var(--accent);font:900 21px var(--disp)}
.card-req-total-lines{display:grid;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);color:var(--muted);font-size:10px}.card-req-total-lines span{display:flex;justify-content:space-between;gap:10px}.card-req-total-lines b{color:var(--text)}.card-req-auto-total small{display:block;margin-top:9px;color:var(--muted);font-size:9px;line-height:1.55}
@keyframes cardReqTotalIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* Lightweight card motion: transform-only for smooth scrolling */
.studio-deck-scene{perspective:1100px;transform-style:preserve-3d}
.studio-deck-card{will-change:transform;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease}
.studio-card-a{animation-name:studioCardAFlow;animation-duration:8.4s}.studio-card-b{animation-name:studioCardBFlow;animation-duration:7.2s}.studio-card-c{animation-name:studioCardCFlow;animation-duration:8.8s}
.studio-card-a::after,.studio-card-b::after,.studio-card-c::after{opacity:.75;transition:opacity .35s ease}.studio-deck-card:hover::after{opacity:1}
@keyframes studioCardAFlow{0%,100%{transform:translate3d(-86px,27px,0) rotate(-16deg) rotateY(-2deg)}50%{transform:translate3d(-94px,13px,10px) rotate(-12deg) rotateY(4deg)}}
@keyframes studioCardBFlow{0%,100%{transform:translate3d(0,-13px,12px) rotate(1deg) rotateY(0deg) scale(1.035)}50%{transform:translate3d(0,-25px,28px) rotate(-1deg) rotateY(-3deg) scale(1.07)}}
@keyframes studioCardCFlow{0%,100%{transform:translate3d(86px,27px,0) rotate(16deg) rotateY(2deg)}50%{transform:translate3d(94px,13px,10px) rotate(12deg) rotateY(-4deg)}}
@media(max-width:640px){.studio-card-a{animation-name:studioCardAFlowSmall}.studio-card-b{animation-name:studioCardBFlowSmall}.studio-card-c{animation-name:studioCardCFlowSmall}}
@keyframes studioCardAFlowSmall{0%,100%{transform:translate3d(-55px,17px,0) rotate(-16deg)}50%{transform:translate3d(-61px,9px,5px) rotate(-12deg)}}
@keyframes studioCardBFlowSmall{0%,100%{transform:translate3d(0,-9px,8px) rotate(1deg) scale(1.045)}50%{transform:translate3d(0,-17px,14px) rotate(-1deg) scale(1.075)}}
@keyframes studioCardCFlowSmall{0%,100%{transform:translate3d(55px,17px,0) rotate(16deg)}50%{transform:translate3d(61px,9px,5px) rotate(12deg)}}
html.no-fx .studio-deck-card,.no-fx .studio-deck-card{will-change:auto;animation:none!important}
@media(prefers-reduced-motion:reduce){.studio-deck-card,.card-req-auto-total{animation:none!important;transition:none!important}}
.card-req-cancel-action{border-color:color-mix(in srgb,var(--danger) 32%,var(--line));background:color-mix(in srgb,var(--danger) 5%,transparent);font-weight:800}.card-req-cancel-action:hover{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border-color:var(--danger)}
#cardRequestsModal #cardReqInternalDeliveryFee:disabled{opacity:.5;cursor:not-allowed;background:color-mix(in srgb,var(--muted) 8%,var(--surface))}
.card-req-total-lines span b{font-variant-numeric:tabular-nums}
.card-req-delivery-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:11px 0 2px}.delivery-choice{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);text-align:start;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.delivery-choice span{grid-row:span 2;font-size:18px}.delivery-choice b{font-size:11px}.delivery-choice small{color:var(--muted);font-size:9px;line-height:1.4}.delivery-choice:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}.delivery-choice.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:0 10px 22px -20px var(--accent)}
.card-req-close-action{border-color:color-mix(in srgb,var(--danger) 32%,var(--line));background:color-mix(in srgb,var(--danger) 5%,transparent);font-weight:800}.card-req-close-action:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface))}.card-req-closed-note{margin:10px 0;font-weight:800}
@media(max-width:560px){.card-req-delivery-compare{grid-template-columns:1fr}.delivery-choice{min-height:54px}}
.card-req-alternative{display:block;margin-top:5px;color:var(--accent);font-size:10px;line-height:1.45}.card-req-auto-total+.card-req-alternative{font-weight:700}
#cardRequestsModal .quote-item input[data-card-alternative]{grid-column:1 / -1;width:100%;margin-top:7px;padding:7px 9px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--accent) 4%,var(--surface));color:var(--text);font-size:10px}

  /* ═══════════════════════════════════════════════════════════════════════════
     🌸 طبقة الهوية — الواجهة مبنيّة من شعار KYO PAL نفسه (2026-07-28)

     الألوان مسحوبة من ملف الشعار فعليًّا (فكّ ترميز PNG وعدّ البكسلات)، مش تخمينًا:
        الأحمر  #e13c3b  = ٧٢٪ من الشعار   |  الأبيض #fefefd = ١٧٪
        ولمسات ساكورا     #f7dfde / #f0c1c1 / #eba3a3  (نفس درجة اللون تمامًا)

     المبدأ الأهم: **الشعار قرص أحمر على أبيض — مش مستطيل أحمر.**
     فبنينا الواجهة بنفس التركيب: صفحة بيضاء، أقراص حمراء، وبتلات ساكورا.
     وهاض مش بس أوفى للهوية — كمان بيحلّ التباين طبيعيًّا لأن النص بيقعد على أبيض
     (أبيض على #e13c3b = 4.2:1 وهو راسب للنص الصغير؛ على أبيض بنستخدم #cb201f = 5.5:1 ✓).
     ═══════════════════════════════════════════════════════════════════════════ */

  :root{
    --brand:#e13c3b;        /* أحمر الشعار — للأقراص والأشكال الكبيرة */
    --brand-ink:#cb201f;    /* للنص الصغير والأزرار — أبيض عليه 5.50:1 ✓AA */
    --sakura-1:#f7dfde; --sakura-2:#f0c1c1; --sakura-3:#eba3a3;
    --bg:#faf7f6; --bg2:#f4eeed; --surface:#fefefd; --surface2:#fbf8f7;
    --line:#eadddc; --text:#1a1416; --muted:#6e5f61;
    --accent:var(--brand-ink); --accent-btn:var(--brand-ink); --accent-strong:#a41a19;
    --gold:var(--accent); --gold-deep:var(--accent-strong);
    --rank1:#c8971b; --rank2:#8e949c; --rank3:#a86a35;
    --grain-o:.028;
    --edge:inset 0 1px 0 rgba(255,255,255,.7);
    --shadow-soft:0 1px 2px rgba(90,40,40,.05), 0 6px 18px -10px rgba(90,40,40,.14);
    --shadow-tile:0 1px 2px rgba(90,40,40,.06), 0 12px 28px -14px rgba(90,40,40,.20);
    --shadow:0 2px 6px -2px rgba(90,40,40,.10), 0 20px 44px -20px rgba(90,40,40,.26);
  }
  html[data-theme="dark"]{
    --brand:#e13c3b;
    --brand-ink:#ec6a6a;    /* على الداكن ينعكس المنطق: الأفتح = تباين أعلى (5.78:1 ✓) */
    --sakura-1:#4a3234; --sakura-2:#6b4245; --sakura-3:#8c5356;
    --bg:#141011; --bg2:#1b1617; --surface:#1c1719; --surface2:#231d1f; --line:#332a2c;
    --text:#f7f1f0; --muted:#a89a9c;
    --accent:var(--brand-ink); --accent-btn:#c31f1e; --accent-strong:#f19392;
    --rank1:#dcae3c; --rank2:#a3aab3; --rank3:#c08850;
    --grain-o:.05;
    --edge:inset 0 1px 0 rgba(255,255,255,.05);
    --shadow-soft:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.55);
    --shadow-tile:0 1px 2px rgba(0,0,0,.45), 0 12px 28px -14px rgba(0,0,0,.65);
    --shadow:0 2px 6px -2px rgba(0,0,0,.5), 0 20px 44px -20px rgba(0,0,0,.75);
  }
  html.midnight{ --bg:#0a0708; --bg2:#120e0f; --surface:#151011; --surface2:#1c1617; --line:#2a2224; }

  /* ── الهيرو: قرص أحمر على سطح أبيض — نفس تركيب الشعار ── */
  .hero,.chero{background:var(--surface);color:var(--text);
        border:1px solid var(--line);box-shadow:var(--shadow-tile),var(--edge);
        position:relative;overflow:hidden}
  .hero{padding:30px 24px 26px}
  .chero{padding:20px}
  /* القرص: يطلع من الزاوية العليا مثل شمس مشرقة */
  .hero::before,.chero::before{content:"";position:absolute;border-radius:50%;
        background:var(--brand);opacity:.12;pointer-events:none;z-index:0;animation:none;
        width:min(340px,64vw);aspect-ratio:1;top:-40%;inset-inline-end:-16%;
        transform:none;left:auto;height:auto}
  html[data-theme="dark"] .hero::before,html[data-theme="dark"] .chero::before{opacity:.20}
  /* الغصن + البتلات: زخرفة الشعار نفسها، خفيفة جدًّا */
  .hero::after,.chero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
        opacity:1;background-image:none;animation:none;
        background:radial-gradient(circle at 88% 6%, color-mix(in srgb,var(--brand) 10%,transparent), transparent 42%)}
  /* (نفس السبب الموضّح أعلى الملف: .hero>* كان يكسر .studio-glow المطلقة
     ويضيف ~٦٠٠px فراغ وهمي على الجوّال — نُحدّد محتوى الهيرو بدقّة بدل الأبناء كلهم) */
  .hero>.hero-k,.hero>.hero-t,.hero>.hero-s,.hero>.hero-actions,
  .chero>.chero-k,.chero>.chero-t{position:relative;z-index:1}
  .hero .hero-k,.chero-k{color:var(--brand-ink);font-weight:800;font-size:11.5px;letter-spacing:2px}
  .hero .hero-k.live{color:var(--brand-ink)}
  .hero .hero-t{color:var(--text);font-weight:800}
  .chero-t{color:var(--text);font-weight:800}
  .hero .hero-s{color:var(--muted)}
  .hero .hero-btn{background:var(--brand-ink);color:#fff;border:1px solid transparent;
        box-shadow:0 6px 16px -8px rgba(203,32,31,.55), inset 0 1px 0 rgba(255,255,255,.22)}
  .hero .hero-btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none}
  @media(hover:hover){
    .hero .hero-btn:hover{filter:brightness(1.07)}
    .hero .hero-btn.ghost:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
  }
  /* نقطة البثّ المباشر بأحمر الشعار */
  .hero .hero-k .livedot{background:var(--brand)}
  .hero .hero-k .livedot::after{background:var(--brand)}

  /* ── بتلات الساكورا: شكل الشعار الحقيقي (٥ بتلات) بدل الإيموجي ──
        نستخدم mask حتى نتحكّم باللون من CSS، والحركة transform فقط. */
  .sakura-field{display:block!important;position:fixed;inset:0;overflow:hidden;
        pointer-events:none;z-index:0;contain:layout paint style}
  /* ملاحظة: ممنوع font-size:0 هون — قياس البتلة 1em والحجم موروث من .sakura
     (كل بتلة إلها font-size خاص فيها)، فتصفير الخط بيخلّي البتلة 0×0.
     إخفاء الإيموجي يصير بـcolor:transparent فقط، والقناع هو الي بيرسم الشكل. */
  .sakura i{display:block;color:transparent;
        width:1em;height:1em;background-color:var(--sakura-2);
        -webkit-mask-image:var(--petal);mask-image:var(--petal);
        -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
        -webkit-mask-size:contain;mask-size:contain;
        filter:none}
  .sakura{--petal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M50 53C42 39 42 22 50 11C58 22 58 39 50 53Z'/%3E%3Cpath d='M50 53C42 39 42 22 50 11C58 22 58 39 50 53Z' transform='rotate(72 50 50)'/%3E%3Cpath d='M50 53C42 39 42 22 50 11C58 22 58 39 50 53Z' transform='rotate(144 50 50)'/%3E%3Cpath d='M50 53C42 39 42 22 50 11C58 22 58 39 50 53Z' transform='rotate(216 50 50)'/%3E%3Cpath d='M50 53C42 39 42 22 50 11C58 22 58 39 50 53Z' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='5.5'/%3E%3C/g%3E%3C/svg%3E")}
  .sakura:nth-child(2n) i{background-color:var(--sakura-3)}
  .sakura:nth-child(3n) i{background-color:var(--sakura-1)}
  html.no-fx .sakura-field{display:none!important}
  /* على الجوّال ٦ بتلات بس — الحركة المستمرة تكلّف بطارية */
  @media (max-width:760px){ .sakura:nth-child(n+7){display:none} }

  /* ── الأقراص: شكل الشعار الأساسي. المربّعات ترجع دوائر ── */
  .tile .circ{border-radius:50%;background:var(--surface);border:1px solid var(--line)}
  .tile.accent .circ{background:var(--brand);color:#fff;border-color:transparent;
        box-shadow:0 8px 20px -10px rgba(225,60,59,.6)}
  .av{border-radius:50%}
  .logo-hero{border-radius:50%}
  .brand .logo{border-radius:50%;border:1px solid var(--line)}

  /* ── الأزرار والحالات ── */
  .btn-gold{background:var(--brand-ink);color:#fff;
        box-shadow:0 6px 16px -8px rgba(203,32,31,.5), inset 0 1px 0 rgba(255,255,255,.2)}
  .badge.live{background:var(--brand-ink);color:#fff;border-color:transparent}
  .tabbar button.on{color:var(--brand-ink);background:color-mix(in srgb,var(--brand) 12%,transparent)}
  #scrollbar{background:linear-gradient(90deg,var(--brand),var(--sakura-3))}
  table.stand tr.me td{background:color-mix(in srgb,var(--brand) 8%,transparent)}
  table.stand tr.me td.n{color:var(--brand-ink)}
  .lead-row.me{border-color:var(--brand-ink)}
  .rank-chip{color:var(--brand-ink)}
  .res button.sel{background:var(--brand-ink);color:#fff}
  .dkresb button{background:var(--brand-ink)}
  .announce-bar{border-inline-start-color:var(--brand)}
  ::selection{background:color-mix(in srgb,var(--brand) 24%,transparent)}
  .loader-ring,.sp-ring{border-top-color:var(--brand)}
  .sp-brand{color:var(--brand)}
  .credit b{color:var(--brand-ink)}

  /* ── لمسة الكاتاكانا من الشعار: キョパル ── */
  .credit::after{content:"キョパル";display:block;margin-top:8px;
        font-size:11px;letter-spacing:4px;color:var(--muted);opacity:.65}

  @media (prefers-reduced-motion: reduce){ .sakura-field{display:none!important} }

  /* ═══════════════════════════════════════════════════════════════════════════
     🌸 ضبط الهوية على نظام Studio — الطبقة الحاسمة (2026-07-28)

     مهم للي بيقرأ الملف لاحقًا: هذا الملف تراكمت فيه عدّة أنظمة تصميم فوق بعض،
     والنظام الفعّال حاليًّا هو "Studio rebuild" — وعناصره تستخدم أصنافًا مركّبة
     مثل `.studio-home.hero` (تخصيص 0,2,0)، فأي قاعدة `.hero` مفردة (0,1,0)
     بتخسر مهما كانت متأخّرة في الملف. لهيك الضبط هون بيشتغل على مستوى
     **توكنات Studio نفسها** + الأصناف المركّبة، مش بطبقة جديدة فوقها.

     الألوان مسحوبة من ملف الشعار: الأحمر #e13c3b، الأبيض #fefefd،
     والساكورا #f7dfde / #f0c1c1 / #eba3a3 (نفس درجة اللون بالضبط).
     ═══════════════════════════════════════════════════════════════════════════ */

  :root{
    --studio-red:#e13c3b;          /* أحمر الشعار نفسه */
    --studio-red-deep:#a41a19;     /* نفس الدرجة، أغمق — للنصوص والحدود */
    --studio-paper:#fefefd;        /* أبيض الشعار */
    --studio-sand:#fbeceb;         /* رمل مائل للساكورا بدل البيج المحايد */
    --studio-border:rgba(225,60,59,.14);
    --studio-shadow:0 24px 70px -42px rgba(120,40,40,.42);
  }
  html[data-theme="dark"]{
    --studio-paper:#1a1416;
    --studio-sand:#2a1e20;
    --studio-ink:#f8f4f1;
    --studio-border:rgba(255,255,255,.12);
    --studio-shadow:0 26px 72px -42px rgba(0,0,0,.78);
  }

  /* القطر الأحمر المائل في الهيرو: يصير أوضح وبلون الشعار */
  .studio-home::before{background:linear-gradient(115deg,transparent 0 54%,
        color-mix(in srgb,var(--studio-red) 9%,transparent) 54.2%,transparent 54.7%)}
  .studio-home::after{border-color:color-mix(in srgb,var(--studio-red) 18%,transparent)}

  /* التوهّج الثاني كان ذهبيًّا (خارج الهوية) — صار ساكورا */
  .studio-glow-b{background:radial-gradient(circle,rgba(240,193,193,.34),transparent 70%)}
  .studio-glow-a{background:radial-gradient(circle,color-mix(in srgb,var(--studio-red) 22%,transparent),transparent 68%)}

  /* نقطة "مباشر": بأحمر الهوية بدل الأخضر — الأحمر في هذا النظام يعني حالة/إجراء */
  .studio-live-dot.is-live{background:var(--studio-red);
        box-shadow:0 0 0 5px color-mix(in srgb,var(--studio-red) 16%,transparent)}

  /* الأزرار */
  .studio-btn-primary{border-color:var(--studio-red);background:var(--studio-red);color:#fff;
        box-shadow:0 15px 27px -18px rgba(164,26,25,.9)}
  .studio-btn-primary:hover{background:var(--studio-red-deep);border-color:var(--studio-red-deep)}

  /* ── قرص الشعار: نضيفه كعنصر بصري داخل الهيرو عبر .studio-copy
        (البسيدو الاثنين محجوزين للقطر والإطار) ── */
  .studio-home .studio-main{position:relative}
  .studio-home .studio-main::before{content:"";position:absolute;z-index:-1;pointer-events:none;
        width:min(300px,52vw);aspect-ratio:1;border-radius:50%;
        top:-16%;inset-inline-end:-6%;
        background:var(--studio-red);opacity:.10}
  html[data-theme="dark"] .studio-home .studio-main::before{opacity:.18}

  /* بتلات الساكورا فوق لوح الهيرو نفسه — تكرار شكل الشعار */
  .studio-home .studio-copy{position:relative}

  /* الترويسة والتبويبات بلون الهوية */
  /* ملاحظة: لا تستخدم --studio-red-deep كلون نصّ — هو أحمر غامق مناسب للخلفيات
     الفاتحة فقط، وعلى الترويسة الداكنة بينزل التباين لـ1.54:1 (غير مقروء).
     --accent متغيّر حسب الثيم أصلًا (فاتح #cb201f / داكن #ec6a6a) وهو الصحيح هنا. */
  .top-nav-link.is-active,.top-nav-link:hover{color:var(--accent)}
  header.top{border-bottom-color:var(--studio-border)}

  /* شريط تقدّم التمرير + شارة مباشر */
  #scrollbar{background:linear-gradient(90deg,var(--studio-red),#eba3a3)}
  .badge.live{background:var(--studio-red);color:#fff;border-color:transparent}

  @media (prefers-reduced-motion: reduce){
    .studio-glow-a,.studio-glow-b{animation:none}
    .studio-live-dot.is-live{animation:none}
  }

  /* ── تصحيح تباين: أحمر الشعار الصافي #e13c3b مع نص أبيض = 4.28:1 وهو راسب
        للنص الصغير (زر الإجراء 12px). الحل مش تغيير الهوية — الحل فصل الدورين:
          • #e13c3b  يبقى للأقراص والتوهّج والنقطة والمساحات الكبيرة (هوية بصريّة)
          • #cb201f  (نفس درجة اللون بالضبط، أغمق) للأزرار الي عليها نص أبيض = 5.50:1 ✓AA
        العين ما بتفرّق بينهم تقريبًا، بس الفرق بيخلّي الزر مقروءًا للجميع. ── */
  :root{ --studio-red-btn:#cb201f }
  html[data-theme="dark"]{ --studio-red-btn:#c31f1e }
  .studio-btn-primary{background:var(--studio-red-btn);border-color:var(--studio-red-btn)}
  .studio-btn-primary:hover{background:var(--studio-red-deep);border-color:var(--studio-red-deep)}

  /* ── إصلاح جوّال: زرّ الإعدادات (⋯) كان مقطوعًا خارج الشاشة على 375px ──
     نظام Studio ضبط .brand{padding:12px 24px} وهذا تجاوز قاعدة الجوّال الأقدم،
     فصار مجموع (لوجو + الاسم + أزرار الحساب + زر ⋯) أوسع من الشاشة بـ10px،
     والزر انقصّ بـoverflow-x:clip — يعني قائمة اللغة/الثيم/حجم الخط صعبة الضغط.
     تقليل الحشو والفجوة على الشاشات الصغيرة يرجّعه كاملًا داخل الشاشة. */
  @media (max-width:480px){
    .brand{padding-inline:12px;gap:8px}
    .wrap{padding-left:16px;padding-right:16px}
    #authBox{gap:4px}
    #authBox button{padding-inline:9px}
  }
  @media (max-width:360px){
    .brand{padding-inline:8px;gap:6px}
    .wrap{padding-left:12px;padding-right:12px}
  }

  /* ═══ أهداف اللمس والنصوص الصغيرة (فحص فعلي على 375px) ═══
     المعيار: WCAG 2.5.8 يطلب ٢٤×٢٤ كحدّ أدنى، وإرشادات آبل/جوجل توصي بـ٤٤×٤٤.
     القياس أظهر روابط بارتفاع ١٥px ونصوصًا بحجم ٨px — صعبة اللمس والقراءة على الجوّال. */

  /* روابط نصّية كانت أصغر من الحدّ الأدنى للمس */
  .studio-strip-link{padding:9px 2px;min-height:34px;display:inline-flex;align-items:center}
  .studio-text-link{padding:9px 2px;min-height:36px;display:inline-flex;align-items:center}
  .studio-next-button{min-height:42px}

  /* أزرار الترويسة: نوسّع مساحة اللمس بلا ما نكبّر الشكل (حتى ما ينكسر تخطيط
     الترويسة الضيّق أصلًا) — طبقة شفافة تمتد ٥px حوالين الزر */
  .theme-btn,#authBox button{position:relative}
  .theme-btn::after,#authBox button::after{content:"";position:absolute;inset:-6px;border-radius:50%}
  #authBox button::after{border-radius:99px}

  /* أصغر النصوص: ٨px صعبة القراءة — نرفعها لحدّ مقروء مع الحفاظ على الطابع */
  .studio-scene-label{font-size:10px!important;letter-spacing:1.2px}
  .studio-scene-note{font-size:10px;letter-spacing:1.2px}

  @media (max-width:560px){
    .studio-proof span{font-size:11px}
    .studio-proof b{font-size:18px}
  }

  /* رفع أصغر الملصقات على الجوّال فقط — 9px صغيرة على شاشة اليد،
     وتصميم الشاشات الكبيرة يبقى كما هو */
  @media (max-width:560px){
    .studio-strip-kicker,.studio-next-label,.studio-proof span em,
    .studio-eyebrow,.studio-section-kicker{font-size:10.5px;letter-spacing:1.2px}
  }

  /* شارة "محفوظة" في أرشيف الجولات: --good على خلفية خضراء فاتحة = 4.22:1 وهو راسب
     لنص 11px (المطلوب 4.5). نغمّق النصّ فقط ونُبقي الشكل كما هو. */
  .round-history-lock{color:#116b43}
  html[data-theme="dark"] .round-history-lock{color:#4ade9b}

  /* بطاقة الحدث الحمراء في شريط الرئيسية: كانت تستخدم أحمر الشعار الصافي كخلفية
     مع نص أبيض = 4.28:1 (راسب)، والنصوص الفرعية بشفافية .75 نزلت لـ3.0:1.
     نفس قاعدة الفصل المطبّقة على الأزرار: الأحمر الصافي للأشكال، والأغمق للنص الأبيض. */
  .studio-strip-event{background:var(--studio-red-btn)}
  .studio-strip-event .studio-strip-kicker{opacity:.95}
  .studio-strip-event small{color:rgba(255,255,255,.92)}
  .studio-strip-event .studio-strip-link{color:#fff}

  /* ── شاشات ٣٦٠px وأضيق (iPhone SE وما شابه) ──
     مجموع (شعار + اسم + زرّي الحساب + زر ⋯) يتجاوز عرض الشاشة، فزر الإعدادات
     كان بيطلع ٣٩px خارجها. الشعار لحاله يحمل الهوية (وle alt نصّه "KYO PAL"
     فالقارئ الصوتي ما بيخسر شي)، فنخفي كلمة الاسم ونضغط أزرار الحساب. */
  @media (max-width:360px){
    .brand h1,.brand .brand-tt,.brand .sub{display:none}
    .brand .logo{width:34px;height:34px}
    #authBox button{padding-inline:7px;font-size:11px}
    .theme-btn{width:32px;height:32px}
  }

  /* دعوة البطولة تظهر قبل الهيرو: مشاهدة الصفحة لا تسجّل الزائر، والقرار يبقى بزر واضح. */
  .landing-event-prompt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
        margin:0 0 14px;padding:16px 18px;border:1px solid var(--studio-border);border-radius:18px;
        background:linear-gradient(110deg,var(--surface),color-mix(in srgb,var(--accent) 6%,var(--surface)));
        box-shadow:0 18px 42px -32px rgba(31,20,22,.75)}
  .landing-event-prompt.is-joinable{border-color:color-mix(in srgb,var(--studio-red-btn) 54%,var(--studio-border));
        background:linear-gradient(110deg,color-mix(in srgb,var(--studio-red-btn) 9%,var(--surface)),var(--surface) 56%)}
  .landing-event-state{display:inline-flex;align-items:center;gap:8px;align-self:stretch;padding-inline-end:17px;
        border-inline-end:1px solid var(--line);color:var(--accent);font:900 10px/1.35 var(--disp);letter-spacing:1px;text-transform:uppercase}
  .landing-event-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent);
        box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}
  .landing-event-prompt.is-live .landing-event-dot,.landing-event-prompt.is-joinable .landing-event-dot{animation:studioPulse 1.8s ease-in-out infinite}
  .landing-event-copy{min-width:0}.landing-event-copy>span{display:block;color:var(--muted);font:800 9px var(--disp);letter-spacing:1.3px}
  .landing-event-copy strong{display:block;margin-top:4px;color:var(--text);font:900 clamp(18px,2.4vw,26px)/1.1 var(--disp);overflow-wrap:anywhere}
  .landing-event-copy p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
  .landing-event-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .landing-event-primary,.landing-event-secondary{min-height:46px;padding:11px 16px;border-radius:10px;white-space:nowrap;
        font:900 12px var(--disp);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
  .landing-event-primary{border:1px solid var(--studio-red-btn);background:var(--studio-red-btn);color:#fff;
        box-shadow:0 14px 25px -17px rgba(164,26,25,.95)}
  .landing-event-secondary{border:1px solid var(--line);background:var(--surface);color:var(--text)}
  .landing-event-primary:hover,.landing-event-secondary:hover{transform:translateY(-2px)}

  @media (max-width:760px){
    .landing-event-prompt{grid-template-columns:1fr;gap:11px;padding:15px;border-radius:15px}
    .landing-event-state{align-self:auto;padding:0 0 10px;border-inline-end:0;border-bottom:1px solid var(--line)}
    .landing-event-actions{justify-content:stretch}
    .landing-event-actions button{flex:1;min-width:0;white-space:normal}
  }
  @media (max-width:390px){.landing-event-actions{display:grid;grid-template-columns:1fr}.landing-event-actions button{width:100%}}
  @media (prefers-reduced-motion:reduce){.landing-event-dot{animation:none!important}}

  /* ═══════════════════════════════════════════════════════════════════════════
     KYO PAL — Sakura Duel House
     الصفحة الرئيسية مبنية من الشعار: الورق الأبيض، الأحمر المختوم، والساكورا.
     ═══════════════════════════════════════════════════════════════════════════ */
  html.sakura-landing{
    --sk-paper:#fffafa;--sk-paper-2:#fff3f4;--sk-ink:#291d21;--sk-muted:#745f66;
    --sk-red:#d82027;--sk-red-deep:#a90f1a;--sk-pink:#f1aeb8;--sk-pink-soft:#f9dfe3;
    --sk-line:rgba(174,40,54,.18);--sk-shadow:0 30px 80px -50px rgba(93,16,28,.55)
  }
  html[data-theme="dark"].sakura-landing,html.midnight.sakura-landing{
    --sk-paper:#171114;--sk-paper-2:#21171b;--sk-ink:#fff5f6;--sk-muted:#ceb9bf;
    --sk-red:#ef4a50;--sk-red-deep:#bc1d28;--sk-pink:#a95867;--sk-pink-soft:#3b242b;
    --sk-line:rgba(255,150,164,.2);--sk-shadow:0 34px 90px -48px rgba(0,0,0,.9)
  }
  html.sakura-landing body{background:
    radial-gradient(760px 430px at 88% -8%,color-mix(in srgb,var(--sk-pink) 24%,transparent),transparent 68%),
    radial-gradient(560px 360px at -5% 42%,color-mix(in srgb,var(--sk-red) 7%,transparent),transparent 74%),var(--sk-paper)}
  html.sakura-landing main.wrap{max-width:1180px;padding-top:20px}
  html.sakura-landing header.top{background:color-mix(in srgb,var(--sk-paper) 91%,transparent);border-bottom:1px solid var(--sk-line);box-shadow:0 12px 36px -30px rgba(90,15,26,.55)}
  html.sakura-landing .brand .logo{box-shadow:0 0 0 3px var(--sk-paper),0 0 0 4px color-mix(in srgb,var(--sk-red) 42%,transparent),0 8px 20px -12px rgba(150,14,28,.8)}
  html.sakura-landing .brand h1{color:var(--sk-ink);letter-spacing:-.5px}
  html.sakura-landing .brand .sub{color:var(--sk-muted)}
  html.sakura-landing .tabbar{background:color-mix(in srgb,var(--sk-paper) 92%,transparent);border-top-color:var(--sk-line)}
  html.sakura-landing .tabbar button.on{color:var(--sk-red);background:color-mix(in srgb,var(--sk-red) 9%,transparent)}

  /* بوابة الحدث الأولى — من نفس لغة الختم الياباني. */
  html.sakura-landing .landing-event-prompt{position:relative;isolation:isolate;overflow:hidden;margin-bottom:18px;
    border-color:var(--sk-line);border-radius:18px;background:linear-gradient(105deg,var(--sk-paper),var(--sk-paper-2));
    box-shadow:var(--sk-shadow)}
  html.sakura-landing .landing-event-prompt::before{content:"大会受付";position:absolute;z-index:-1;inset-inline-end:22px;top:-22px;
    color:color-mix(in srgb,var(--sk-red) 7%,transparent);font:900 76px/1 "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:-7px;white-space:nowrap}
  html.sakura-landing .landing-event-prompt.is-joinable{border-color:color-mix(in srgb,var(--sk-red) 58%,var(--sk-line));background:linear-gradient(105deg,color-mix(in srgb,var(--sk-red) 7%,var(--sk-paper)),var(--sk-paper) 58%)}
  html.sakura-landing .landing-event-state{color:var(--sk-red);border-color:var(--sk-line)}
  html.sakura-landing .landing-event-dot{background:var(--sk-red);box-shadow:0 0 0 5px color-mix(in srgb,var(--sk-red) 14%,transparent)}
  html.sakura-landing .landing-event-copy>span,html.sakura-landing .landing-event-copy p{color:var(--sk-muted)}
  html.sakura-landing .landing-event-copy strong{color:var(--sk-ink)}
  html.sakura-landing .landing-event-primary{background:var(--sk-red-deep);border-color:var(--sk-red-deep);box-shadow:0 16px 30px -20px rgba(145,8,22,.9)}
  html.sakura-landing .landing-event-secondary{background:var(--sk-paper);border-color:var(--sk-line);color:var(--sk-ink)}

  .sakura-home.hero{position:relative!important;isolation:isolate;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:30px;min-height:650px!important;margin:0 0 22px!important;padding:62px 56px 28px!important;overflow:hidden;
    border:1px solid var(--sk-line)!important;border-radius:34px 9px 34px 9px!important;color:var(--sk-ink)!important;
    background:linear-gradient(128deg,var(--sk-paper) 0 55%,var(--sk-paper-2) 55% 100%)!important;
    box-shadow:var(--sk-shadow)!important}
  .sakura-home.hero::before{content:""!important;position:absolute;inset:0!important;z-index:-3!important;opacity:1!important;transform:none!important;
    background:linear-gradient(113deg,transparent 0 52%,color-mix(in srgb,var(--sk-red) 10%,transparent) 52.2%,transparent 52.6%)!important;animation:none!important}
  .sakura-home.hero::after{content:""!important;display:block!important;position:absolute!important;inset:13px!important;z-index:-2!important;
    border:1px solid color-mix(in srgb,var(--sk-red) 15%,transparent)!important;border-radius:26px 6px 26px 6px!important;background:none!important;opacity:1!important;pointer-events:none}
  .sakura-paper-grain{position:absolute;inset:0;z-index:-2;opacity:.34;pointer-events:none;background-image:
    radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--sk-red) 9%,transparent) 0 1px,transparent 1.2px),
    linear-gradient(90deg,color-mix(in srgb,var(--sk-ink) 3%,transparent) 1px,transparent 1px);background-size:27px 27px,5px 100%}
  .sakura-side-script{position:absolute;top:48px;inset-inline-end:19px;bottom:98px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
    color:var(--sk-red);font-family:"Yu Gothic","Noto Sans JP",sans-serif;writing-mode:vertical-rl}
  .sakura-side-script span{font-size:10px;letter-spacing:5px}.sakura-side-script i{width:1px;flex:1;background:linear-gradient(transparent,var(--sk-red),transparent)}
  .sakura-side-script b{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--sk-red);background:var(--sk-red);color:#fff;font-size:15px;writing-mode:horizontal-tb}
  .sakura-blossom{position:absolute;z-index:-1;color:color-mix(in srgb,var(--sk-red) 18%,transparent);font:400 118px/1 serif;pointer-events:none}
  .blossom-a{top:-30px;inset-inline-start:-18px;transform:rotate(15deg)}.blossom-b{bottom:64px;inset-inline-end:32%;font-size:72px;transform:rotate(-22deg)}.blossom-c{top:34%;inset-inline-start:46%;font-size:42px}
  .sakura-home-copy{align-self:center;position:relative;z-index:2;padding-inline-end:8px}
  .sakura-kicker{display:flex;align-items:center;gap:9px;color:var(--sk-red);font:800 10px var(--disp);letter-spacing:1.5px;text-transform:uppercase}
  .sakura-kicker-mark{width:25px;height:2px;background:var(--sk-red)}.sakura-kicker b{color:var(--sk-ink)}.sakura-kicker i{font:700 10px "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:2px}
  .sakura-home-copy h2{max-width:680px;margin:22px 0 10px;color:var(--sk-ink);font:900 clamp(48px,6vw,86px)/.98 var(--disp);letter-spacing:-4.5px;text-wrap:balance}
  .sakura-jp-line{color:var(--sk-red);font:700 12px "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:3px}
  .sakura-home-copy>p{max-width:610px;margin:20px 0 0;color:var(--sk-muted);font-size:15px;line-height:1.85}
  .sakura-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
  .sakura-btn{min-height:48px;padding:12px 18px;border-radius:2px 12px 2px 12px;font:900 12px var(--disp);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
  .sakura-btn:hover{transform:translateY(-3px)}.sakura-btn-primary{border:1px solid var(--sk-red-deep);background:var(--sk-red-deep);color:#fff;box-shadow:0 18px 30px -21px rgba(143,8,22,.95)}
  .sakura-btn-paper{border:1px solid color-mix(in srgb,var(--sk-red) 40%,var(--sk-line));background:var(--sk-paper);color:var(--sk-red)}
  .sakura-btn-ink{border:1px solid var(--sk-ink);background:transparent;color:var(--sk-ink)}
  .sakura-stats{display:flex;gap:0;margin-top:34px;border-block:1px solid var(--sk-line)}
  .sakura-stats span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:end;gap:0 7px;min-width:112px;padding:11px 16px;border-inline-end:1px solid var(--sk-line)}
  .sakura-stats span:first-child{padding-inline-start:0}.sakura-stats small{grid-column:1/-1;color:var(--sk-red);font:700 8px "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:1.5px}
  .sakura-stats b{color:var(--sk-ink);font:900 22px var(--disp)}.sakura-stats em{color:var(--sk-muted);font-size:9px;font-style:normal;font-weight:800}

  .sakura-crest-stage{position:relative;align-self:center;display:grid;place-items:center;min-height:475px;isolation:isolate}
  .sakura-enso{position:absolute;border-radius:50%;pointer-events:none}.enso-one{width:390px;height:390px;border:2px solid color-mix(in srgb,var(--sk-red) 34%,transparent);border-inline-start-color:transparent;transform:rotate(-20deg)}
  .enso-one::after{content:"";position:absolute;top:21px;inset-inline-start:52px;width:13px;height:13px;border-radius:50%;background:var(--sk-red)}
  .enso-two{width:305px;height:305px;border:1px solid color-mix(in srgb,var(--sk-red) 16%,transparent);border-block-end-color:transparent;transform:rotate(24deg)}
  .sakura-logo-halo{position:relative;z-index:4;display:grid;place-items:center;width:218px;height:218px;border-radius:50%;background:var(--sk-paper);
    box-shadow:0 0 0 12px color-mix(in srgb,var(--sk-paper) 78%,transparent),0 0 0 13px color-mix(in srgb,var(--sk-red) 25%,transparent),0 30px 58px -32px rgba(130,14,28,.72)}
  .sakura-crest{display:block;width:190px;height:190px;border-radius:50%;object-fit:cover}
  .sakura-stage-jp{position:absolute;z-index:5;color:var(--sk-muted);font:800 10px "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:4px}
  .stage-top{top:34px}.stage-bottom{bottom:28px}.stage-side{inset-inline-end:10px;writing-mode:vertical-rl;top:124px}
  .sakura-red-seal{position:absolute;z-index:6;inset-inline-start:18px;bottom:76px;display:grid;place-items:center;width:61px;height:61px;border:2px solid var(--sk-red);color:var(--sk-red);transform:rotate(-5deg)}
  .sakura-red-seal::before{content:"";position:absolute;inset:3px;border:1px solid var(--sk-red)}.sakura-red-seal b{font:900 17px "Yu Gothic","Noto Sans JP",sans-serif}.sakura-red-seal small{font:800 6px var(--disp);letter-spacing:.5px}
  .sakura-petal{position:absolute;z-index:3;color:var(--sk-pink);font-size:15px;filter:drop-shadow(0 4px 4px rgba(143,8,22,.15));animation:sakuraPetalDrift 5s ease-in-out infinite alternate}
  .petal-1{top:72px;left:18%;transform:rotate(25deg)}.petal-2{top:32%;right:13%;font-size:10px;animation-delay:-1s}.petal-3{bottom:92px;right:24%;font-size:20px;animation-delay:-2.4s}.petal-4{bottom:42%;left:7%;font-size:9px;animation-delay:-3.1s}.petal-5{top:18px;right:28%;font-size:12px;animation-delay:-4s}
  @keyframes sakuraPetalDrift{to{transform:translate(8px,12px) rotate(45deg)}}
  .sakura-manifesto{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:8px;padding-top:19px;border-top:1px solid var(--sk-line)}
  .sakura-manifesto span{color:var(--sk-red);font:800 10px "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:3px}.sakura-manifesto p{margin:0;color:var(--sk-muted);font-size:11px;font-weight:700}

  .sakura-hub{margin:0 0 24px;padding:30px;border:1px solid var(--sk-line);border-radius:8px 28px 8px 28px;background:var(--sk-paper);box-shadow:var(--sk-shadow)}
  .sakura-hub-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--sk-line)}
  .sakura-hub-head span{color:var(--sk-red);font:800 9px "Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:2px}.sakura-hub-head h3{margin:6px 0 0;color:var(--sk-ink);font:900 clamp(27px,4vw,43px)/1 var(--disp);letter-spacing:-2px}
  .sakura-text-action{min-height:40px;padding:9px 13px;border:1px solid var(--sk-red);border-radius:2px 9px;background:transparent;color:var(--sk-red);font:900 11px var(--disp);cursor:pointer}
  .sakura-path-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:11px}
  .sakura-path-card{position:relative;display:flex;flex-direction:column;min-height:228px;padding:22px;border:1px solid var(--sk-line);border-radius:4px 18px 4px 18px;overflow:hidden;background:linear-gradient(145deg,var(--sk-paper),var(--sk-paper-2));transition:transform .22s ease,border-color .22s ease}
  .sakura-path-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sk-red) 50%,var(--sk-line))}.sakura-path-event{background:linear-gradient(145deg,color-mix(in srgb,var(--sk-red) 9%,var(--sk-paper)),var(--sk-paper))}
  .sakura-path-kanji{position:absolute;inset-inline-end:13px;top:4px;color:color-mix(in srgb,var(--sk-red) 9%,transparent);font:900 82px/1 "Yu Gothic","Noto Sans JP",sans-serif}
  .sakura-path-card>div{position:relative;z-index:1}.sakura-path-card small{color:var(--sk-red);font:800 8px var(--disp);letter-spacing:1.5px}.sakura-path-card b{display:block;margin-top:13px;color:var(--sk-ink);font:900 21px/1.15 var(--disp)}
  .sakura-path-card p{margin:9px 0 18px;color:var(--sk-muted);font-size:11px;line-height:1.65}.sakura-path-card button{position:relative;z-index:1;align-self:flex-start;margin-top:auto;padding:8px 0;border:0;border-bottom:1px solid var(--sk-red);background:none;color:var(--sk-red);font:900 11px var(--disp);cursor:pointer}
  .sakura-live-board{display:grid;gap:8px}.sakura-duel-row{display:grid;grid-template-columns:42px minmax(0,1fr) 190px 54px;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--sk-line);border-radius:3px 13px;background:linear-gradient(90deg,color-mix(in srgb,var(--sk-red) 6%,var(--sk-paper)),var(--sk-paper))}
  .sakura-table-no{color:var(--sk-red);font:900 18px var(--disp)}.sakura-duel-names{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;color:var(--sk-ink);font-size:12px}.sakura-duel-names i{color:var(--sk-red);font:900 12px "Yu Gothic",sans-serif;font-style:normal}
  .sakura-duel-life{display:grid;grid-template-columns:42px 1fr 42px;gap:6px;align-items:center;color:var(--sk-muted);font:800 10px var(--disp);text-align:center}.sakura-duel-life>i{display:grid;gap:3px}.sakura-duel-life u{display:block;height:3px;background:var(--sk-pink-soft);text-decoration:none}.sakura-duel-life u::after{content:"";display:block;width:inherit;height:100%;background:var(--sk-red)}
  .sakura-duel-row>em{color:var(--sk-red);font:900 9px var(--disp);font-style:normal}.sakura-empty{min-height:140px;display:grid;place-items:center;align-content:center;color:var(--sk-muted)}.sakura-empty b{color:var(--sk-red);font:900 22px "Yu Gothic",sans-serif}

  /* الأقسام القديمة الباقية (المواعيد/لوحة الشرف) تُطبع على نفس ورق الساكورا. */
  html.sakura-landing #app>.sechead{margin-top:26px}html.sakura-landing #app>.sechead h3{color:var(--sk-ink)}
  html.sakura-landing #app>.card,html.sakura-landing #app>.potw{border-color:var(--sk-line);border-radius:4px 18px 4px 18px;background:var(--sk-paper);box-shadow:var(--sk-shadow)}

  @media(max-width:900px){
    .sakura-home.hero{grid-template-columns:1fr!important;padding:48px 38px 26px!important}.sakura-home-copy{max-width:760px}.sakura-crest-stage{min-height:390px}.sakura-manifesto{margin-top:0}
    .sakura-path-grid{grid-template-columns:1fr 1fr}.sakura-path-event{grid-column:1/-1}.sakura-path-card{min-height:190px}
  }
  @media(max-width:640px){
    html.sakura-landing main.wrap{padding-top:15px}.sakura-home.hero{min-height:0!important;padding:38px 19px 21px!important;border-radius:22px 6px 22px 6px!important}
    .sakura-home.hero::after{inset:8px!important;border-radius:16px 4px 16px 4px!important}.sakura-side-script{display:none}.sakura-home-copy h2{margin-top:18px;font-size:46px;line-height:1;letter-spacing:-2.5px}
    .sakura-kicker{flex-wrap:wrap}.sakura-home-copy>p{font-size:13px;line-height:1.72}.sakura-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:23px}.sakura-btn{padding:11px 10px;min-height:46px}.sakura-btn-primary{grid-column:1/-1}
    .sakura-stats{justify-content:stretch}.sakura-stats span{min-width:0;flex:1;padding:9px 8px}.sakura-stats span:first-child{padding-inline-start:0}.sakura-stats b{font-size:18px}.sakura-stats em{font-size:8px}
    .sakura-crest-stage{min-height:330px}.enso-one{width:276px;height:276px}.enso-two{width:220px;height:220px}.sakura-logo-halo{width:162px;height:162px}.sakura-crest{width:142px;height:142px}.sakura-stage-jp{font-size:8px}.stage-top{top:24px}.stage-bottom{bottom:19px}.stage-side{top:88px;inset-inline-end:0}.sakura-red-seal{width:48px;height:48px;bottom:53px;inset-inline-start:4px}.sakura-red-seal b{font-size:13px}
    .sakura-manifesto{display:block;text-align:center}.sakura-manifesto p{margin-top:6px}.sakura-hub{padding:21px 14px;border-radius:6px 20px 6px 20px}.sakura-hub-head{align-items:flex-start}.sakura-path-grid{grid-template-columns:1fr}.sakura-path-event{grid-column:auto}.sakura-path-card{min-height:170px;padding:19px}.sakura-duel-row{grid-template-columns:32px minmax(0,1fr) 44px;gap:8px}.sakura-duel-life{grid-column:2/-1;grid-row:2}.sakura-duel-row>em{grid-column:3;grid-row:1}.sakura-table-no{font-size:15px}
  }
  @media(max-width:360px){.sakura-home-copy h2{font-size:40px}.sakura-jp-line{font-size:10px;letter-spacing:1.7px}.sakura-actions{grid-template-columns:1fr}.sakura-btn-primary{grid-column:auto}.sakura-crest-stage{min-height:300px}.enso-one{width:248px;height:248px}.enso-two{width:198px;height:198px}.sakura-logo-halo{width:150px;height:150px}.sakura-crest{width:132px;height:132px}.sakura-manifesto span{letter-spacing:2px}}
  @media(prefers-reduced-motion:reduce){.sakura-petal{animation:none!important}.sakura-btn,.sakura-path-card{transition:none!important}}
  @media(max-width:640px){
    .sakura-crest-stage{order:-1;min-height:292px;margin:-8px 0 2px}
    html.sakura-landing .landing-event-actions{display:grid;grid-template-columns:1fr 1fr}
    html.sakura-landing .landing-event-actions button{width:100%}
  }
  @media(max-width:340px){html.sakura-landing .landing-event-actions{grid-template-columns:1fr}}

  /* التنقّل المتجاوب: قائمة علوية للكمبيوتر، وشريط سفلي للجوال فقط. */
  @media(min-width:861px){
    #globalTabbar{display:none!important}
    .top-nav{display:flex!important;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
    .top-nav::-webkit-scrollbar{display:none}
    .top-nav-link{flex:none;padding:9px 10px}
    .wrap{padding-bottom:42px!important}
    .credit{padding-bottom:26px!important}
  }
  @media(max-width:860px){
    .top-nav{display:none!important}
    #globalTabbar{display:block}
  }

  /* ترويسة عملية: ثابتة، حدث حالي واضح، لغة ظاهرة، وحساب واحد بقائمة مختصرة. */
  header.top{position:sticky!important;top:0;z-index:100!important;transition:box-shadow .22s ease,background-color .22s ease}
  header.top.is-scrolled{box-shadow:0 16px 38px -25px rgba(78,18,27,.55)!important;background:color-mix(in srgb,var(--surface) 95%,transparent)!important}
  header.top .brand{max-width:1360px}
  .header-event-cta[hidden],.header-account-menu[hidden]{display:none!important}
  .header-event-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;max-width:150px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent-strong);font:900 10px var(--disp);white-space:nowrap;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
  .header-event-cta:hover{transform:translateY(-2px);box-shadow:0 12px 22px -17px rgba(151,12,27,.85)}
  .header-event-cta.is-joinable{border-color:var(--accent-btn);background:var(--accent-btn);color:#fff}
  .header-event-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 16%,transparent);flex:none}
  .header-event-cta.is-live .header-event-dot,.header-event-cta.is-joinable .header-event-dot{animation:headerEventPulse 1.8s ease-in-out infinite}
  .header-event-label{overflow:hidden;text-overflow:ellipsis}
  @keyframes headerEventPulse{50%{transform:scale(1.32);opacity:.68}}

  .header-lang{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:900 10px var(--disp);cursor:pointer;transition:border-color .2s ease,transform .2s ease,color .2s ease}
  .header-lang:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));color:var(--accent)}
  .header-lang i{opacity:.35;font-style:normal}.header-lang span{padding:2px 3px;border-radius:5px;line-height:1.35}
  .header-lang.is-ar .lang-ar,.header-lang.is-en .lang-en{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-strong)}

  .top-nav-link{position:relative}
  .top-nav-link::after{content:"";position:absolute;inset-inline:12px;bottom:1px;height:2px;border-radius:3px;background:var(--accent);opacity:0;transform:scaleX(.2);transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
  .top-nav-link::before{content:"✿";position:absolute;inset-inline-start:50%;bottom:-9px;color:var(--accent);font:700 10px/1 serif;opacity:0;transform:translateX(-50%) scale(.25) rotate(-35deg);pointer-events:none}
  .top-nav-link.is-active::after{opacity:1;transform:scaleX(1)}
  .top-nav-link.is-active::before{animation:topNavSakura .58s cubic-bezier(.2,.85,.3,1) both}
  @keyframes topNavSakura{0%{opacity:0;transform:translateX(-50%) translateY(4px) scale(.2) rotate(-35deg)}65%{opacity:1;transform:translateX(-50%) translateY(-2px) scale(1.15) rotate(8deg)}100%{opacity:.78;transform:translateX(-50%) translateY(0) scale(1) rotate(0)}}

  #authBox.signed-in{position:relative;margin-inline-start:0}
  .header-account-wrap{position:relative}
  #authBox .header-account{display:flex;align-items:center;gap:8px;width:auto;max-width:180px;height:42px;padding:4px 9px 4px 5px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);cursor:pointer;box-shadow:0 8px 18px -16px rgba(38,22,26,.8)}
  .header-account-avatar{--avatar-h:0;position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;background:hsl(var(--avatar-h) 58% 48%);color:#fff;font:900 13px var(--disp);box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
  .header-account-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .header-account-copy{display:grid;min-width:0;text-align:start;line-height:1.1}.header-account-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 11px var(--disp)}.header-account-copy small{margin-top:3px;color:var(--muted);font-size:8px;font-weight:800}
  .header-account-chevron{color:var(--muted);font-size:13px;transition:transform .2s ease}.header-account[aria-expanded="true"] .header-account-chevron{transform:rotate(180deg)}
  .header-account-menu{position:absolute;z-index:130;top:calc(100% + 9px);inset-inline-end:0;width:224px;padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 24px 55px -26px rgba(34,19,23,.75)}
  #authBox .header-account-menu button{display:flex;align-items:center;width:100%;height:auto;min-height:40px;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:var(--text);font:800 12px var(--disp);text-align:start;cursor:pointer}
  #authBox .header-account-menu button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-strong)}
  #authBox .header-account-menu .account-signout{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--danger)}
  #authBox .header-account-menu button::after{display:none}

  @media(min-width:861px) and (max-width:1180px){
    .brand-wm>div{display:none}
    .top-nav{gap:1px}.top-nav-link{padding-inline:7px;font-size:10px}
    .header-event-cta{max-width:112px;padding-inline:9px}
  }
  @media(max-width:860px){
    .header-event-cta{display:none!important}
    .header-lang{order:3}.notif-btn{order:4}#authBox{order:5}.more-wrap{order:6}
  }
  @media(max-width:560px){
    .brand-wm>div{display:none}
    .header-lang{width:46px;padding-inline:5px;gap:2px}.header-lang .lang-ar{font-size:0}.header-lang .lang-ar::after{content:"ع";font-size:11px}
    #authBox .header-account{max-width:126px}.header-account-copy b{max-width:62px}.header-account-copy small{display:none}
    /* بطاقة الحدث تبقى أول شيء، لكن من دون تكرار الوصف الطويل على شاشة صغيرة. */
    html.sakura-landing .landing-event-prompt{grid-template-columns:minmax(0,1fr) auto!important;gap:7px 10px!important;margin-bottom:12px!important;padding:12px 13px!important;border-radius:14px!important}
    html.sakura-landing .landing-event-state{grid-column:1/-1;align-self:auto;padding:0!important;border:0!important;font-size:9px;line-height:1.25}
    html.sakura-landing .landing-event-copy>span,html.sakura-landing .landing-event-copy p{display:none}
    html.sakura-landing .landing-event-copy strong{margin:0;font-size:17px;line-height:1.15}
    html.sakura-landing .landing-event-actions{display:flex!important;gap:6px!important;justify-content:flex-end}
    html.sakura-landing .landing-event-actions button{flex:0 1 auto;width:auto!important;min-height:40px;padding:8px 10px;font-size:11px;line-height:1.25}
  }
  @media(max-width:360px){
    .brand{padding-inline:6px;gap:5px}
    .header-lang{width:42px}.header-account-avatar{width:30px;height:30px}
    #authBox .header-account{height:38px;max-width:108px;padding-inline:4px}.header-account-copy b{max-width:50px}
    html.sakura-landing .landing-event-prompt{grid-template-columns:1fr!important}
    html.sakura-landing .landing-event-actions{display:grid!important;grid-template-columns:1fr 1fr!important;justify-content:stretch}
    html.sakura-landing .landing-event-actions button{width:100%!important}
  }
  html.no-fx .header-event-dot,.no-fx .top-nav-link.is-active::before{animation:none!important}
  @media(prefers-reduced-motion:reduce){.header-event-dot,.top-nav-link.is-active::before{animation:none!important}.header-event-cta,.header-lang{transition:none!important}}