/* ============================================================
   كُن أسطورة — التصميم (أزرق غامق + أخضر مزرق) — واجهة عرضية 1280×720
   ============================================================ */
@font-face{font-family:Cairo;font-weight:600;src:url(../fonts/cairo-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Cairo;font-weight:800;src:url(../fonts/cairo-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Cairo;font-weight:900;src:url(../fonts/cairo-arabic-900-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Cairo;font-weight:600;src:url(../fonts/cairo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Cairo;font-weight:800;src:url(../fonts/cairo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Cairo;font-weight:900;src:url(../fonts/cairo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --bg0:#040f1d; --bg1:#07203a; --bg2:#0d3a5e; --panel:rgba(10,38,66,.78); --panel2:rgba(16,58,94,.7);
  --line:rgba(120,210,230,.18);
  --teal:#19d9b8; --teal2:#0b9d89; --teal-glow:rgba(25,217,184,.45);
  --ink:#eaf7ff; --muted:#8db3cc; --gold:#ffc93c; --danger:#ff5d6c; --ok:#3ee08f;
  --c-common:#9fb6c9; --c-rare:#3aa3ff; --c-epic:#b068ff; --c-legendary:#ffc93c;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#020a14;font-family:Cairo,system-ui,sans-serif;font-weight:600;color:var(--ink);touch-action:manipulation;overscroll-behavior:none}
input{-webkit-user-select:text;user-select:text;font-family:inherit}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:50% 50%;overflow:hidden;
  background:radial-gradient(1200px 700px at 70% 0%,#0f4a73 0%,transparent 60%),radial-gradient(900px 600px at 0% 100%,#0a5d63 0%,transparent 55%),linear-gradient(160deg,var(--bg1),var(--bg0))}
.bgdeco{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(25,217,184,.035) 46px 92px)}
.screen{position:absolute;inset:0;animation:fadeIn .28s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ───── أزرار ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:22px;padding:12px 30px;border-radius:999px;
  background:linear-gradient(180deg,#22e6c4,#0aa890);color:#02201c;box-shadow:0 6px 0 #076b5e,0 10px 24px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s,filter .15s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #076b5e,0 4px 10px rgba(0,0,0,.35)}
.btn.gold{background:linear-gradient(180deg,#ffd75e,#f0a91a);color:#3a2500;box-shadow:0 6px 0 #a56d06,0 10px 24px rgba(0,0,0,.35)}
.btn.gold:active{box-shadow:0 2px 0 #a56d06}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:active{transform:scale(.97);box-shadow:inset 0 0 0 2px var(--line)}
.btn.danger{background:linear-gradient(180deg,#ff7a86,#e0364a);color:#fff;box-shadow:0 6px 0 #8f1d2c}
.btn.sm{font-size:17px;padding:7px 18px;box-shadow:0 4px 0 #076b5e}
.btn.sm.gold{box-shadow:0 4px 0 #a56d06}
.btn.sm.ghost{box-shadow:inset 0 0 0 2px var(--line)}
.btn[disabled]{filter:grayscale(.9) brightness(.7);pointer-events:none}
.iconbtn{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px var(--line);font-size:26px;display:grid;place-items:center}
.iconbtn:active{transform:scale(.94)}

/* ───── شريط علوي ───── */
.topbar{position:absolute;top:0;left:0;right:0;height:84px;padding:12px 28px;display:flex;align-items:center;gap:16px;z-index:5}
.topbar .title{font-size:32px;font-weight:900;flex:1;display:flex;align-items:center;gap:14px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(5,22,40,.7);box-shadow:inset 0 0 0 2px var(--line);padding:6px 18px;border-radius:999px;font-weight:800;font-size:22px;min-height:46px}
.pill .em{font-size:24px}
.pill.coin{color:var(--gold)}
.teamchip{display:flex;align-items:center;gap:12px;background:rgba(5,22,40,.55);padding:6px 20px 6px 8px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--line)}
.teamchip .nm{font-size:22px;font-weight:900;line-height:1.1}
.teamchip .sub{font-size:14px;color:var(--muted)}
.dot{position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px var(--bg1);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

/* ───── لوحات ───── */
.panel{background:var(--panel);border-radius:26px;box-shadow:inset 0 0 0 2px var(--line),0 14px 40px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.h2{font-size:26px;font-weight:900}
.muted{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 18px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px var(--line);font-size:18px;font-weight:800}
.chip.on{background:var(--teal);color:#02201c;box-shadow:0 0 18px var(--teal-glow)}

/* ───── الدخول ───── */
.login{display:grid;grid-template-columns:1fr 520px;align-items:center;padding:0 80px;gap:40px}
.login .logo{width:100%;max-width:520px;justify-self:center;filter:drop-shadow(0 10px 30px rgba(25,217,184,.35));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.login .box{padding:30px 34px}
.tabs{display:flex;background:rgba(0,0,0,.3);border-radius:999px;padding:5px;margin-bottom:20px}
.tabs button{flex:1;background:transparent;padding:10px;border-radius:999px;font-size:20px;font-weight:800;color:var(--muted)}
.tabs button.on{background:var(--teal);color:#02201c}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:16px;color:var(--muted);margin-bottom:4px}
.field input{width:100%;background:rgba(0,0,0,.35);border-radius:16px;padding:12px 18px;font-size:22px;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);outline:none;font-weight:700;direction:ltr;text-align:right}
.field input:focus{box-shadow:inset 0 0 0 2px var(--teal),0 0 16px var(--teal-glow)}
.field input.rtl{direction:rtl}
.err{color:var(--danger);min-height:26px;font-size:17px;font-weight:800;margin-bottom:6px}

/* ───── الرئيسية ───── */
.home{padding:96px 36px 28px;display:grid;grid-template-columns:520px 1fr;gap:26px}
.showcase{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.showcase .pitchmini{position:relative;flex:1;border-radius:20px;overflow:hidden}
.pitch{background:repeating-linear-gradient(90deg,#14a366 0 9.09%,#119a5e 9.09% 18.18%);position:relative;overflow:hidden}
.pitch svg.lines{position:absolute;inset:0;width:100%;height:100%}
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.25fr 1fr;gap:18px}
.tile{position:relative;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:30px;font-weight:900;
  background:linear-gradient(160deg,rgba(18,70,108,.9),rgba(8,36,62,.9));box-shadow:inset 0 0 0 2px var(--line),0 10px 0 rgba(0,0,0,.28),0 18px 30px rgba(0,0,0,.3);transition:transform .1s}
.tile:active{transform:translateY(6px);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 rgba(0,0,0,.28)}
.tile .big{font-size:64px;line-height:1.1}
.tile .sub{font-size:16px;color:var(--muted);font-weight:700}
.tile.hero{grid-column:span 2;background:linear-gradient(135deg,#12c9ab,#0a7f95 70%);color:#021e1c;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 10px 0 #075a63,0 18px 30px rgba(0,0,0,.35)}
.tile.hero .sub{color:rgba(2,30,28,.75)}
.tile.cuptile{background:linear-gradient(135deg,#ffcf47,#e8921b);color:#3a2300;box-shadow:inset 0 0 0 3px rgba(255,255,255,.3),0 10px 0 #96600a,0 18px 30px rgba(0,0,0,.35)}
.tile.cuptile .sub{color:rgba(58,35,0,.75)}
.tile.hero:active,.tile.cuptile:active{box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 4px 0 rgba(0,0,0,.3)}
.statrow{display:flex;gap:10px}
.stat{flex:1;background:rgba(0,0,0,.28);border-radius:16px;padding:6px 10px;text-align:center}
.stat b{display:block;font-size:24px;font-weight:900}
.stat span{font-size:13px;color:var(--muted)}
.stat.pw b{color:var(--teal)}

/* ───── بطاقات اللاعبين ───── */
.card{--g1:#3c5468;--g2:#1c2e3d;--rc:var(--c-common);position:relative;display:inline-block;flex:none;width:7em;height:9.7em;font-size:16px;border-radius:.9em;overflow:hidden;
  background:linear-gradient(165deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 .14em var(--rc),0 .4em .9em rgba(0,0,0,.4);text-align:center;vertical-align:top}
.card.mini{font-size:10.5px}.card.sm{font-size:13px}.card.lg{font-size:24px}
.card.r-common{--rc:var(--c-common);--g1:#4a6479;--g2:#1f3242}
.card.r-rare{--rc:var(--c-rare);--g1:#2b78c9;--g2:#10325c;box-shadow:inset 0 0 0 .14em var(--rc),0 0 1em rgba(58,163,255,.45),0 .4em .9em rgba(0,0,0,.4)}
.card.r-epic{--rc:var(--c-epic);--g1:#8a4bd6;--g2:#2c1559;box-shadow:inset 0 0 0 .14em var(--rc),0 0 1.1em rgba(176,104,255,.55),0 .4em .9em rgba(0,0,0,.4)}
.card.r-legendary{--rc:var(--c-legendary);--g1:#f2b21c;--g2:#7a4a05;box-shadow:inset 0 0 0 .16em #fff3b0,0 0 1.3em rgba(255,201,60,.75),0 .4em .9em rgba(0,0,0,.4)}
.card.r-legendary::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:shine 3.2s infinite;pointer-events:none}
@keyframes shine{60%,100%{transform:translateX(120%)}}
.card .ovr{position:absolute;top:.35em;right:.5em;font-size:1.9em;font-weight:900;line-height:1;text-shadow:0 .08em .2em rgba(0,0,0,.5)}
.card .pos{position:absolute;top:2.6em;right:.55em;font-size:.82em;font-weight:800;opacity:.9}
.card .cat{position:absolute;top:.4em;left:.5em;font-size:.95em}
.card .av{position:absolute;left:0;right:0;top:1.6em;height:5.6em;display:grid;place-items:center}
.card .av svg{width:5.4em;height:5.4em}
.card .av .emo{font-size:3.7em;line-height:1;filter:drop-shadow(0 .1em .15em rgba(0,0,0,.5))}
.card .nm{position:absolute;left:.2em;right:.2em;bottom:1.55em;font-size:.95em;font-weight:900;line-height:1.1;display:flex;align-items:center;justify-content:center;min-height:2.1em;text-shadow:0 .08em .15em rgba(0,0,0,.6)}
.card .ft{position:absolute;left:.4em;right:.4em;bottom:.3em;display:flex;justify-content:space-between;font-size:.8em;font-weight:800}
.card .lv{color:#ffe27a;letter-spacing:-.1em}
.card .qty{background:rgba(0,0,0,.45);border-radius:.8em;padding:0 .5em}
.card .tag{position:absolute;bottom:.25em;left:50%;transform:translateX(-50%);background:var(--ok);color:#052;font-weight:900;font-size:.72em;padding:.05em .7em;border-radius:1em;box-shadow:0 .2em .5em rgba(0,0,0,.4);z-index:3}
.card .tag.dup{background:#ffb74d;color:#3b2200}
.card.slotsel{outline:3px solid var(--teal);outline-offset:3px}
.card.inxi::before{content:'●';position:absolute;bottom:.3em;left:50%;transform:translateX(-50%);color:var(--teal);font-size:.7em;z-index:2}
.empty-slot{display:inline-grid;place-items:center;width:7em;height:9.7em;font-size:16px;border-radius:.9em;border:.14em dashed rgba(255,255,255,.55);color:rgba(255,255,255,.75);font-weight:800;background:rgba(0,0,0,.18)}
.empty-slot.mini{font-size:10.5px}.empty-slot.sm{font-size:13px}
.empty-slot.sel{border-color:var(--teal);box-shadow:0 0 20px var(--teal-glow);color:var(--teal)}

/* ───── التشكيلة ───── */
.squad{padding:90px 30px 24px;display:grid;grid-template-columns:600px 1fr;gap:24px}
.squad .left{display:flex;flex-direction:column;gap:12px;min-height:0}
.formchips{display:flex;gap:8px}
.formchips .chip{flex:1;text-align:center;padding:8px 6px;font-size:17px}
.formchips .chip small{display:block;font-size:12px;opacity:.8;font-weight:600}
.pitchbox{position:relative;height:300px;border-radius:22px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 12px 30px rgba(0,0,0,.4)}
.pitchbox .slot{position:absolute;transform:translate(-50%,-50%)}
.bench{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:20px;background:rgba(0,0,0,.28)}
.bench .lbl{font-weight:900;font-size:20px;width:60px;text-align:center;line-height:1.2}
.collection{display:flex;flex-direction:column;min-height:0;padding:16px 18px}
.collection .grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:14px 6px;justify-items:center;align-content:start;padding:8px 2px 14px;margin-top:8px;scrollbar-width:thin;scrollbar-color:var(--teal2) transparent}
.hint{font-size:16px;color:var(--teal);font-weight:800;min-height:24px}

/* ───── نوافذ ───── */
.overlay{position:absolute;inset:0;background:rgba(2,10,20,.78);backdrop-filter:blur(5px);z-index:50;display:grid;place-items:center;animation:fadeIn .2s}
.modal{padding:26px 30px;min-width:560px;max-width:980px;position:relative}
.modal .x{position:absolute;top:14px;left:14px}
.detail{display:flex;gap:30px;align-items:center}
.detail .info{min-width:360px}
.detail .row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.detail h3{font-size:34px;font-weight:900;margin-bottom:2px}
.slotbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.slotbtns button{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 2px var(--line);padding:8px 6px;border-radius:14px;font-size:15px;font-weight:800;line-height:1.2}
.slotbtns button:active{background:var(--teal);color:#02201c}

/* ───── الباكجات ───── */
.packs{padding:96px 40px 30px;display:flex;flex-direction:column;gap:20px}
.packrow{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;flex:1}
.pack{position:relative;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 10px 16px;text-align:center;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.22),0 10px 0 rgba(0,0,0,.3),0 20px 30px rgba(0,0,0,.35);transition:transform .1s}
.pack:active{transform:translateY(6px)}
.pack .ico{font-size:96px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));animation:float 3.4s ease-in-out infinite}
.pack .pn{font-size:28px;font-weight:900}
.pack .pd{font-size:15px;opacity:.85;line-height:1.35;min-height:42px}
.pack .price{background:rgba(0,0,0,.35);border-radius:999px;padding:6px 22px;font-size:22px;font-weight:900;display:inline-flex;gap:8px;align-items:center}
.pk-free{background:linear-gradient(160deg,#1bd2b3,#0a6f86)}
.pk-bronze{background:linear-gradient(160deg,#d58b55,#6f3d1c)}
.pk-silver{background:linear-gradient(160deg,#c7d6e4,#5c7489);color:#0d2233}
.pk-gold{background:linear-gradient(160deg,#ffd75e,#b87208);color:#3a2300}
.pk-gift{background:linear-gradient(160deg,#c27bff,#4d1d9a)}
.pack.off{filter:grayscale(.85) brightness(.75)}
.reveal{display:flex;gap:22px;align-items:center;justify-content:center;perspective:1200px}
.flip{width:7em;height:9.7em;font-size:22px;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.flip.on{transform:rotateY(180deg)}
.flip>div{position:absolute;inset:0;backface-visibility:hidden}
.flip .back{border-radius:.9em;background:linear-gradient(160deg,#17d6b6,#0a5870);box-shadow:inset 0 0 0 .14em rgba(255,255,255,.5),0 .4em 1em rgba(0,0,0,.5);display:grid;place-items:center;font-size:3em}
.flip .front{transform:rotateY(180deg)}
.flip .front .card{font-size:inherit}
.revealtitle{position:absolute;top:50px;left:0;right:0;text-align:center;font-size:40px;font-weight:900}
.revealfoot{position:absolute;bottom:50px;left:0;right:0;text-align:center}
.burst{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,201,60,.55),transparent 55%);animation:burst .9s ease-out forwards}
@keyframes burst{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}

/* ───── المهام ───── */
.missions{padding:96px 40px 26px;display:grid;grid-template-columns:1fr 470px;gap:24px}
.mlist{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:4px;scrollbar-width:none}
.mrow{display:flex;align-items:center;gap:18px;padding:14px 20px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line)}
.mrow .mi{font-size:44px;width:64px;text-align:center}
.mrow .mt{flex:1}
.mrow .mt b{font-size:24px;font-weight:900;display:block}
.mrow .mt span{font-size:16px;color:var(--muted)}
.bar{height:12px;border-radius:99px;background:rgba(0,0,0,.4);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal2),var(--teal));border-radius:99px;transition:width .4s}
.mrow .rw{font-size:20px;font-weight:900;color:var(--gold);min-width:88px;text-align:center}
.mrow.done{opacity:.55}
.daily{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.day{border-radius:16px;background:rgba(0,0,0,.3);padding:8px 4px;text-align:center;box-shadow:inset 0 0 0 2px var(--line)}
.day b{display:block;font-size:22px}.day small{color:var(--muted);font-size:13px}
.day.got{background:rgba(25,217,184,.25);box-shadow:inset 0 0 0 2px var(--teal)}
.day.now{box-shadow:inset 0 0 0 3px var(--gold);animation:pulse 1.6s infinite}
.day.last{grid-column:span 2}

/* ───── المتصدرون ───── */
.lb{padding:96px 60px 26px;display:flex;flex-direction:column}
.lbtable{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:thin;scrollbar-color:var(--teal2) transparent}
.lbrow{display:grid;grid-template-columns:70px 1fr 90px 80px 80px 80px 90px;gap:8px;align-items:center;padding:8px 18px;border-radius:16px;font-size:20px;font-weight:800}
.lbrow:nth-child(odd){background:rgba(255,255,255,.04)}
.lbrow.head{color:var(--muted);font-size:16px;position:sticky;top:0;background:#0b2a47;z-index:2}
.lbrow.me{background:rgba(25,217,184,.2);box-shadow:inset 0 0 0 2px var(--teal)}
.lbrow .tn{display:flex;align-items:center;gap:12px}
.lbrow .tn small{color:var(--muted);font-weight:600;font-size:14px;display:block}
.rank{font-size:26px;font-weight:900;text-align:center}
.rank.r1{color:var(--gold)}.rank.r2{color:#d8e4ee}.rank.r3{color:#e0976a}

/* ───── الكأس ───── */
.cupscr{padding:96px 50px 30px;display:grid;grid-template-columns:1fr 400px;gap:30px}
.bracket{display:flex;align-items:center;justify-content:space-around;padding:30px}
.rnd{width:230px;height:230px;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 3px var(--line);position:relative;font-weight:900}
.rnd .n{font-size:34px}.rnd .rico{font-size:64px}
.rnd small{font-size:16px;color:var(--muted)}
.rnd.cur{background:linear-gradient(160deg,rgba(255,201,60,.3),rgba(255,201,60,.08));box-shadow:inset 0 0 0 4px var(--gold),0 0 30px rgba(255,201,60,.4);transform:scale(1.08)}
.rnd.won{background:rgba(62,224,143,.18);box-shadow:inset 0 0 0 3px var(--ok)}
.rnd.won::after{content:'✔';position:absolute;top:10px;left:14px;color:var(--ok);font-size:30px}
.link{width:50px;height:6px;background:var(--line);border-radius:6px}

/* ───── المباراة ───── */
.score{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;padding:8px 30px;background:rgba(3,14,26,.85);border-radius:26px;box-shadow:inset 0 0 0 2px var(--line);z-index:6}
.score .tm{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:900;min-width:230px}
.score .tm.o{flex-direction:row-reverse}
.score .sc{font-size:56px;font-weight:900;min-width:150px;text-align:center;letter-spacing:6px;direction:ltr}
.score .clock{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);background:#0b2a47;padding:2px 20px;border-radius:99px;font-size:20px;font-weight:900;box-shadow:inset 0 0 0 2px var(--line)}
.pips{display:flex;gap:8px;position:absolute;top:100px;left:50%;transform:translateX(-50%);z-index:6}
.pip{width:46px;height:12px;border-radius:99px;background:rgba(255,255,255,.18)}
.pip.cur{background:var(--gold);box-shadow:0 0 14px var(--gold)}
.pip.g{background:var(--ok)}.pip.x{background:#546a7c}.pip.c{background:var(--danger)}
.field-wrap{position:absolute;left:90px;top:122px;width:1100px;height:470px}
.field-wrap .pitch{width:100%;height:100%;border-radius:26px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.3),0 20px 50px rgba(0,0,0,.5)}
.goalpost{position:absolute;top:50%;width:26px;height:150px;transform:translateY(-50%);background:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 4px,transparent 4px 10px),repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 4px,transparent 4px 10px);box-shadow:0 0 0 4px #fff}
.goalpost.l{left:-22px}.goalpost.r{right:-22px}
.tok{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:900;box-shadow:0 6px 10px rgba(0,0,0,.4);transition:left .7s ease,top .7s ease}
.tok small{position:absolute;top:66px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:800;background:rgba(0,0,0,.55);padding:0 8px;border-radius:8px}
.ball{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dfe7ee 60%,#9fb0c0);box-shadow:0 5px 8px rgba(0,0,0,.45);z-index:4}
.ball::after{content:'';position:absolute;inset:8px;background:#1c2b38;border-radius:50%}
.keeper{position:absolute;width:40px;height:74px;margin:-37px 0 0 -20px;border-radius:14px;box-shadow:0 5px 8px rgba(0,0,0,.4);transition:top .35s ease}
.banner{position:absolute;left:0;right:0;top:35%;text-align:center;z-index:8;pointer-events:none}
.banner span{display:inline-block;padding:10px 40px;border-radius:20px;background:rgba(3,14,26,.88);font-size:38px;font-weight:900;box-shadow:inset 0 0 0 3px var(--line);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.banner.goal span{background:linear-gradient(180deg,#ffd75e,#f0a91a);color:#3a2300;font-size:64px;padding:12px 70px;box-shadow:0 0 60px rgba(255,201,60,.7)}
.banner.bad span{background:rgba(120,20,30,.9)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.actionbar{position:absolute;left:0;right:0;bottom:0;height:120px;display:flex;align-items:center;justify-content:center;gap:26px;z-index:6}
.meter{position:relative;width:640px;height:34px;border-radius:99px;background:linear-gradient(90deg,#c43d4b 0 14%,#f2a93a 14% 32%,#7ddc5a 32% 42%,#19d9b8 42% 58%,#7ddc5a 58% 68%,#f2a93a 68% 86%,#c43d4b 86%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 8px 18px rgba(0,0,0,.4)}
.meter .cur{position:absolute;top:-10px;width:10px;height:54px;margin-left:-5px;background:#fff;border-radius:6px;box-shadow:0 0 14px #fff}
.shotbtn{font-size:30px;padding:14px 60px}
.side-btns{position:absolute;top:22px;display:flex;gap:10px;z-index:7}
.confetti{position:absolute;width:12px;height:18px;z-index:9;pointer-events:none}
.vs{display:grid;grid-template-columns:1fr 220px 1fr;gap:20px;padding:100px 50px 30px;align-items:center}
.vsteam{padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:14px}
.vsteam .cards{display:flex;gap:12px}
.vsmid{text-align:center;font-size:90px;font-weight:900;color:var(--gold);text-shadow:0 0 40px rgba(255,201,60,.6)}
.result{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:70px 90px 40px;align-items:center}
.result h1{font-size:96px;font-weight:900;line-height:1}
.result h1.W{color:var(--ok)}.result h1.L{color:var(--danger)}.result h1.D{color:var(--gold)}
.evlist{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:200px;overflow:auto;font-size:20px;font-weight:700}
.rwchips{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}

/* ───── ألعاب مصغّرة ───── */
.mg{position:absolute;inset:0;z-index:40;background:radial-gradient(900px 600px at 50% 0%,#0f5a7a,transparent 60%),linear-gradient(180deg,#06203a,#041020)}
.goalbox{position:absolute;left:50%;top:150px;width:700px;height:300px;transform:translateX(-50%);border:10px solid #fff;border-bottom:0;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 3px,transparent 3px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 3px,transparent 3px 26px),rgba(0,0,0,.25)}
.grass{position:absolute;left:0;right:0;top:450px;bottom:0;background:linear-gradient(180deg,#12a064,#0b6b43)}
.zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.zone{border:2px dashed rgba(255,255,255,.18);display:grid;place-items:center;font-size:34px;transition:background .15s}
.zone.sel{background:rgba(25,217,184,.35);box-shadow:inset 0 0 0 4px var(--teal)}
.zone.hint-col{background:rgba(255,201,60,.18)}
.gk{position:absolute;width:90px;height:120px;margin:-60px 0 0 -45px;font-size:80px;display:grid;place-items:center;transition:left .3s ease-out,top .3s ease-out,transform .3s;z-index:3;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.mgball{position:absolute;font-size:46px;margin:-23px 0 0 -23px;z-index:4;transition:left .45s cubic-bezier(.2,.7,.3,1),top .45s cubic-bezier(.2,.7,.3,1),transform .45s}
.mgtop{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:20px;z-index:5;align-items:center}
.kicks{display:flex;gap:10px}
.kick{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:24px;box-shadow:inset 0 0 0 2px var(--line)}
.kick.g{background:var(--ok)}.kick.m{background:var(--danger)}
.mgmsg{position:absolute;left:0;right:0;top:470px;text-align:center;font-size:34px;font-weight:900;z-index:5;min-height:50px}
.mgctl{position:absolute;left:0;right:0;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5}
.vmeter{position:absolute;right:70px;top:150px;width:46px;height:380px;border-radius:99px;background:linear-gradient(0deg,#c43d4b 0 25%,#f2a93a 25% 45%,#19d9b8 45% 75%,#f2a93a 75% 90%,#c43d4b 90%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.vmeter .cur{position:absolute;left:-12px;right:-12px;height:10px;background:#fff;border-radius:6px;box-shadow:0 0 14px #fff;margin-bottom:-5px}
.wall{position:absolute;display:flex;gap:2px;top:0}
.wall span{font-size:62px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.aimline{position:absolute;top:-20px;bottom:-20px;width:6px;background:#fff;box-shadow:0 0 16px #fff;border-radius:6px;z-index:3}

#toasts{position:absolute;top:92px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(3,14,26,.95);padding:10px 28px;border-radius:99px;font-size:22px;font-weight:800;box-shadow:inset 0 0 0 2px var(--line),0 10px 30px rgba(0,0,0,.5);animation:pop .25s}
.toast.err{box-shadow:inset 0 0 0 2px var(--danger)}
.toast.ok{box-shadow:inset 0 0 0 2px var(--teal)}
.spinner{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,10,20,.6);z-index:90}
.spinner i{width:64px;height:64px;border-radius:50%;border:8px solid rgba(255,255,255,.15);border-top-color:var(--teal);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.setup{display:grid;grid-template-columns:420px 1fr;gap:40px;padding:30px 80px;align-items:center}
.setup .prev{display:flex;flex-direction:column;align-items:center;gap:18px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
.sw.on{box-shadow:0 0 0 4px var(--teal),inset 0 0 0 3px #fff}
.opt{display:flex;gap:10px;flex-wrap:wrap}
.opt button{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px var(--line);font-size:30px;display:grid;place-items:center}
.opt button.on{background:rgba(25,217,184,.25);box-shadow:inset 0 0 0 3px var(--teal)}
.lbl{font-size:18px;color:var(--muted);margin:8px 0 4px;font-weight:800}
.rotate-hint{position:fixed;inset:0;display:none}

.mg,.field-wrap{direction:ltr}
.mgtop,.mgmsg,.mgctl{direction:rtl}
.login .logo{width:100%}

.home,.squad,.packs,.missions,.lb,.cupscr,.result,.vs,.setup,.login{position:absolute;inset:0}
.home,.squad,.missions,.cupscr{grid-template-rows:minmax(0,1fr)}
.mlist,.collection,.lbtable{min-height:0}
.result{grid-template-columns:1fr 300px;padding:50px 90px}
.result .scoreline{display:flex;align-items:center;gap:16px;font-size:26px;font-weight:900;margin:12px 0;white-space:nowrap}
.result .scoreline .n{font-size:64px;direction:ltr;color:var(--gold);line-height:1}

.result .chip{display:inline-block}

/* ───── أيقونات موحّدة ───── */
.si{width:1em;height:1em;display:block}
.ic{display:inline-grid;place-items:center;flex:none;width:1.62em;height:1.62em;border-radius:50%;border:.075em solid currentColor;background:rgba(255,255,255,.07);vertical-align:-.42em;margin:0 .1em;font-size:inherit;line-height:1}
.ic>.si{width:.92em;height:.92em}
.ic.bare,.bare .ic{border:0;background:none;width:1em;height:1em;vertical-align:-.12em;margin:0}
.ic.bare>.si,.bare .ic>.si{width:100%;height:100%}
.tile .ic,.pack .ic,.mrow .mi .ic,.rico .ic,.reveal .back .ic,.opt .ic{border-radius:.3em}
.tile .big{font-size:42px}.tile .big .ic{background:rgba(255,255,255,.1)}
.pack .ico{font-size:58px;animation:none}
.mrow .mi{font-size:30px;width:70px}
.rico{font-size:40px;line-height:1}
.pill .ic{width:1.45em;height:1.45em;vertical-align:-.3em}
.iconbtn .ic,.iconbtn .si{border:0;background:none;width:1em;height:1em;font-size:26px;margin:0;vertical-align:0}
.iconbtn .si{width:26px;height:26px}
.btn .ic{width:1.3em;height:1.3em;border-width:.09em;vertical-align:-.3em;background:rgba(0,0,0,.08)}
.chip .ic{width:1.35em;height:1.35em;vertical-align:-.28em}
.toast .ic{width:1.4em;height:1.4em;vertical-align:-.3em}
.chip.icn{width:56px;height:56px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:26px}
.chip.icn .si{width:26px;height:26px}
.card .ovr + .pos{font-size:1em}
.card .pos .ic,.card .cat .ic{width:1em;height:1em}
.card .pos{top:2.55em;right:.55em;font-size:1.05em;opacity:.95}
.card .cat{font-size:1.05em;opacity:.9}
.card .tag{font-size:.72em}
.reveal .back .ic{font-size:.7em}
.score .tm .ic{font-size:inherit}
.banner span .ic{width:1.15em;height:1.15em;vertical-align:-.22em;border-width:.07em}
.kick .ic{border:0;background:none;width:1em;height:1em}
.mgmsg .ic{width:1.2em;height:1.2em;vertical-align:-.25em}
.mgtop .ic{width:1.3em;height:1.3em}
.gk .ic,.wall .ic,#shooter .ic,#hint .ic{border:0;background:none;width:1em;height:1em;margin:0}
.gk .si,.wall .si,#shooter .si{width:100%;height:100%}
.mgball{width:46px;height:46px;margin:-23px 0 0 -23px;color:#fff;font-size:0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.mgball .ic{border:0;background:none;width:100%;height:100%;margin:0;vertical-align:0}
.mgball .si{width:100%;height:100%}

/* ───── خلفيات الصور (اختيارية: إن غابت الصورة يبقى التدرّج) ───── */
#stage::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}
#stage[data-bg=login]::before{background-image:linear-gradient(rgba(4,15,29,.25),rgba(4,15,29,.7)),url(../assets/bg/login.jpg)}
#stage[data-bg=night]::before{background-image:linear-gradient(rgba(4,15,29,.62),rgba(4,15,29,.86)),url(../assets/bg/stadium-night.jpg)}
#stage[data-bg=day]::before{background-image:linear-gradient(rgba(4,15,29,.5),rgba(4,15,29,.78)),url(../assets/bg/stadium-day.jpg)}
#stage[data-bg=packs]::before{background-image:linear-gradient(rgba(4,15,29,.35),rgba(4,15,29,.72)),url(../assets/bg/packs.jpg)}
.bgdeco{opacity:.25}

/* ───── الإنترو ───── */
.intro{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;animation:fadeIn .4s;transition:opacity .38s,transform .38s}
.intro.out{opacity:0;transform:scale(1.06)}
.ilogo{width:560px;grid-area:1/1;animation:logoIn 1.6s cubic-bezier(.2,.9,.2,1) both,glowp 2.6s 1.6s ease-in-out infinite;filter:drop-shadow(0 10px 40px rgba(25,217,184,.55))}
@keyframes logoIn{0%{opacity:0;transform:scale(.5) translateY(60px);filter:blur(18px) drop-shadow(0 0 0 transparent)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes glowp{50%{filter:drop-shadow(0 10px 70px rgba(25,217,184,.95))}}
.iglow{grid-area:1/1;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(25,217,184,.4),transparent 62%);animation:glowIn 2s ease-out both}
@keyframes glowIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.irays{grid-area:1/1;width:1500px;height:1500px;background:repeating-conic-gradient(from 0deg,rgba(25,217,184,.13) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);animation:spin 26s linear infinite,glowIn 2s both}
.iball{position:absolute;bottom:150px;left:-80px;width:64px;height:64px;color:#fff;animation:roll 2.4s .6s cubic-bezier(.3,.1,.3,1) both;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.iball .si{width:100%;height:100%}
@keyframes roll{from{left:-90px;transform:rotate(0)}to{left:1180px;transform:rotate(1080deg)}}
.iline{position:absolute;left:0;right:0;bottom:146px;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:glowIn 1.2s .4s both}
.itag{position:absolute;bottom:200px;left:0;right:0;text-align:center;font-size:34px;font-weight:800;letter-spacing:1px;animation:fadeIn 1s 1.6s both;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.iskip{position:absolute;bottom:34px;left:0;right:0;text-align:center;color:var(--muted);font-size:18px;animation:fadeIn 1s 2.2s both}

/* ───── الرئيسية: الدوري والموسم ───── */
.tierchip{display:flex;align-items:center;gap:10px;background:rgba(5,22,40,.65);box-shadow:inset 0 0 0 2px var(--line);padding:6px 20px 6px 10px;border-radius:999px;font-size:26px}
.tierchip div{line-height:1.05}.tierchip b{display:block;font-size:20px;font-weight:900}.tierchip small{font-size:14px;color:var(--muted)}
.t-bronze{color:#e0a070}.t-silver{color:#d3dfea}.t-gold{color:#ffd24d}.t-diamond{color:#7be3ff}.t-legend{color:#ff9bdc}
.tierchip b{color:inherit}
.tiles5{grid-template-columns:repeat(5,1fr)!important}
.tiles5 .tile.hero{grid-column:span 3!important}.tiles5 .tile.cuptile{grid-column:span 2!important}
.tiles5 .tile{font-size:24px}
.season{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);border-radius:16px;padding:6px 14px;font-size:17px;font-weight:700}
.season small{margin-right:auto;color:var(--muted);font-size:14px}
.codebox{display:flex;align-items:center;justify-content:center;gap:16px;background:rgba(0,0,0,.3);border-radius:18px;padding:10px 16px}
.codebox b{font-size:36px;letter-spacing:8px;color:var(--teal);direction:ltr}

/* ───── ما قبل المباراة ───── */
.vs{grid-template-columns:1fr 400px 1fr!important;gap:18px!important;padding:96px 34px 24px!important}
.vsmid{display:flex;flex-direction:column;align-items:stretch;gap:6px;font-size:inherit!important;text-align:center;color:var(--ink)!important;text-shadow:none!important}
.vstitle{font-size:30px;font-weight:900;color:var(--gold)}
.cmpbox{padding:10px 14px;border-radius:20px}
.cmp{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;font-size:20px;font-weight:900;position:relative;margin:6px 0}
.cmp span{position:absolute;left:50%;transform:translateX(-50%);top:-9px;font-size:12px;color:var(--muted);font-weight:700;background:rgba(7,32,58,.9);padding:0 8px;border-radius:8px}
.cbar{height:14px;border-radius:99px;background:rgba(255,120,120,.55);overflow:hidden;direction:rtl}
.cbar i{display:block;height:100%;background:#7a97ad;border-radius:99px}
.cbar.win i{background:linear-gradient(270deg,var(--teal),var(--teal2))}
.verdict{font-size:17px;font-weight:800;padding:2px 0}.verdict.up{color:var(--ok)}.verdict.down{color:var(--danger)}
.tacs{display:flex;flex-direction:column;gap:6px}
.tacs.row{flex-direction:row;justify-content:center}
.tac{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px var(--line);padding:6px 14px;border-radius:16px;font-size:24px;text-align:right}
.tac span{line-height:1.15}.tac b{display:block;font-size:19px;font-weight:900}.tac small{font-size:13px;color:var(--muted);font-weight:600}
.tac.on{background:rgba(25,217,184,.22);box-shadow:inset 0 0 0 3px var(--teal),0 0 18px var(--teal-glow)}
.tacs.row .tac{padding:6px 18px}
.reveal-tac{margin-top:90px;display:flex;flex-direction:column;gap:12px;align-items:center;font-size:90px;animation:pop .4s}
.vsteam .cards{display:flex;gap:10px}
.vsteam .statrow{width:100%}

/* ───── الاستراحة ───── */
.modal.ht{min-width:820px;padding:18px 26px}
.htrow{display:flex;gap:26px;justify-content:center;margin:4px 0}
.htcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.htcol .cards{display:flex;gap:10px}
.upc{color:var(--ok)}.downc{color:var(--danger)}

/* ───── المتصدرون: 7 أعمدة ───── */
.lbrow{grid-template-columns:60px 1fr 140px 110px 70px 70px 70px!important}
.lbrow .tr{display:flex;align-items:center;gap:6px;font-size:18px}
.lbrow .tr .ic{width:1.4em;height:1.4em}
.opt .si{width:28px;height:28px}
.sw.on{box-shadow:0 0 0 4px var(--teal),inset 0 0 0 3px #fff}

.intro{display:block}
.icenter{position:absolute;inset:0;display:grid;place-items:center}
.ilogo{grid-area:auto}
.irays,.iglow{position:absolute;left:50%;top:50%;grid-area:auto}
.irays{margin:-750px 0 0 -750px}.iglow{margin:-380px 0 0 -380px}
.itag{bottom:128px}.iline{bottom:96px}.iball{bottom:98px}
.vs{padding-top:84px!important}
.vsmid{gap:4px}.vstitle{font-size:26px}
.tac{padding:4px 14px}
.result .scoreline .n{display:flex;gap:12px;direction:ltr}
.tabs button{white-space:nowrap;font-size:17px}
.score .tm{min-width:190px}.score .sc{min-width:120px}