/* المهاجم الأسطوري — واجهة بطابع لعبة */
:root{--bg:#050a14;--panel:rgba(14,25,43,.8);--panel2:#12233d;--line:rgba(120,170,255,.16);--txt:#eaf2ff;--muted:#8da3c0;--green:#2dff8f;--blue:#38bdf8;--gold:#fbbf24;--red:#ef4444;--ok:#22c55e;--r:16px;--glow:rgba(45,255,143,.55);--font:"Cairo","Tajawal","Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{color:var(--txt);font-family:var(--font);line-height:1.55;background:#04080f}
/* خلفية الملعب الليلي (WebP خفيفة ~32KB) + تعتيم متدرّج */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:linear-gradient(180deg,rgba(4,8,15,.35) 0%,rgba(4,8,15,.82) 55%,#04080f 100%),url(img/stadium-bg.webp) center top/cover no-repeat}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(700px 420px at 85% -5%,rgba(45,255,143,.14),transparent 60%),radial-gradient(700px 420px at 0% 10%,rgba(56,189,248,.14),transparent 60%)}
button,input,select{font-family:var(--font)}
.hidden{display:none!important}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.82rem}
h1,h2,h3,h4{margin:.2rem 0 .6rem}
h3{font-size:1.05rem;color:var(--txt)}
h3::before{content:"";display:inline-block;width:4px;height:1em;background:var(--green);border-radius:3px;margin-inline-end:8px;vertical-align:-2px;box-shadow:0 0 10px var(--green)}
h4{color:var(--muted);font-size:.9rem;margin-top:1rem}
.panel{background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.brand{font-weight:900;color:#fff;letter-spacing:.5px;margin:0;line-height:1.1}
.brand span{color:var(--green);text-shadow:0 0 16px rgba(45,255,143,.6)}.brand.small{font-size:1.2rem}
.view{min-height:100vh;padding:14px}
.auth{display:flex;align-items:center;justify-content:center}.auth-box{width:min(420px,100%)}
.auth-box h1{font-size:2.4rem;text-align:center}
.tabs{display:flex;gap:6px;margin:12px 0}.tabs button{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font:inherit}.tabs .active{background:var(--green);color:#052;font-weight:800}
form{display:flex;flex-direction:column;gap:10px}
input,select{padding:11px;border-radius:10px;border:1px solid var(--line);background:#081224;color:var(--txt);font:inherit}
input:focus,select:focus{outline:2px solid var(--blue)}
.btn{padding:10px 16px;border-radius:11px;border:1px solid var(--line);background:#16294a;color:var(--txt);cursor:pointer;font:inherit;transition:.15s}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--blue)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#3dffa2,#13c26a);color:#032;font-weight:800;border:0;box-shadow:0 6px 20px rgba(45,255,143,.3)}
.btn.danger{background:#7f1d1d;border-color:#b91c1c}.btn.ghost{background:transparent}
.btn.big{padding:14px 38px;font-size:1.2rem;border-radius:14px;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 20px rgba(45,255,143,.3)}50%{box-shadow:0 6px 36px rgba(45,255,143,.65)}}

/* ===== اللعبة: حاوية مركزية ===== */
#view-game{max-width:1240px;margin:0 auto;padding:12px 14px 40px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:10px;border-color:rgba(45,255,143,.22);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 28px rgba(45,255,143,.06)}
.pchip{display:flex;align-items:center;gap:10px;padding-inline-end:16px;border-inline-end:1px solid var(--line)}
.pchip .av{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem;
  background:radial-gradient(circle at 35% 30%,#3b82f6,#0b1d3a);border:2px solid var(--green);box-shadow:0 0 14px rgba(45,255,143,.4)}
.pchip b{display:block;line-height:1.2}.pchip small{color:var(--muted);font-size:.74rem}
.stat.money{display:flex;align-items:center;gap:8px;background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.3)}
.stat.money label{margin:0}.stat.money::before{content:"💵"}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:5px 14px}
.stat label,.meter label{display:block;font-size:.72rem;color:var(--muted)}.stat b{font-size:1.05rem;color:var(--gold)}
.meter{min-width:140px;flex:1;max-width:240px}.meter b{color:var(--txt)}
.bar{height:10px;background:#081224;border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#16a34a,var(--green));transition:width .6s ease;box-shadow:0 0 10px rgba(45,255,143,.5)}
.bar i.energy{background:linear-gradient(90deg,#f59e0b,#facc15)}.bar i.morale{background:linear-gradient(90deg,#2563eb,var(--blue))}

.nav{display:flex;gap:6px;margin:0 0 16px;padding:4px 6px;background:rgba(7,14,26,.85);backdrop-filter:blur(12px);border:1px solid rgba(45,255,143,.22);border-radius:14px;position:relative;z-index:40;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.nav-item{position:relative;flex:1}
.nav-btn{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 14px;border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-weight:700;white-space:nowrap;transition:all .18s;border-radius:10px}
.nav-btn i{font-style:normal;font-size:1.1rem;filter:grayscale(.5);transition:filter .15s}
.nav-btn .chev{font-style:normal;font-size:.78rem;opacity:.6;margin-inline-start:2px;transition:transform .2s ease}
.nav-btn:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav-btn.active{color:var(--green);font-weight:800;background:linear-gradient(180deg,transparent,rgba(45,255,143,.12));box-shadow:inset 0 -2px 0 var(--green)}
.nav-btn.active i{filter:none}
.nav-btn.active .chev{opacity:1;color:var(--green)}

/* القوائم المنسدلة */
.dropdown-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:230px;background:linear-gradient(175deg,rgba(11,24,44,.96),rgba(6,14,26,.98));border:1px solid rgba(56,189,248,.35);box-shadow:0 14px 40px rgba(0,0,0,.65),0 0 25px rgba(56,189,248,.12);border-radius:12px;padding:6px;display:none;flex-direction:column;gap:3px;backdrop-filter:blur(14px);z-index:99;animation:dropFade .18s ease-out}
@keyframes dropFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-item.has-dropdown:hover .dropdown-menu,.nav-item.has-dropdown.open .dropdown-menu{display:flex}
.nav-item.has-dropdown:hover .nav-btn .chev,.nav-item.has-dropdown.open .nav-btn .chev{transform:rotate(180deg)}
.sub-tab-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:0;background:transparent;color:#cbd5e1;font:inherit;font-size:.86rem;font-weight:600;border-radius:8px;cursor:pointer;text-align:start;transition:all .15s}
.sub-tab-btn i{font-style:normal;font-size:1.05rem}
.sub-tab-btn:hover{background:rgba(56,189,248,.15);color:#fff;padding-inline-start:18px}
.sub-tab-btn.active{background:rgba(45,255,143,.16);color:var(--green);font-weight:800;border-inline-start:3px solid var(--green)}

.grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:16px;align-items:start}
.cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.cols-eq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.col-main,.col-side,.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:960px){.grid,.cols,.cols-eq{grid-template-columns:1fr}}

/* بطاقة المباراة القادمة */
.hero{position:relative;overflow:hidden;text-align:center;padding:26px 18px 30px;border:1px solid rgba(45,255,143,.4);
  background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.14),transparent 70%),linear-gradient(180deg,rgba(8,26,44,.55) 0%,rgba(8,48,32,.78) 100%),url(img/stadium-bg.webp) center 30%/cover;box-shadow:0 0 40px rgba(45,255,143,.14)}
.hero::before{content:"";position:absolute;left:50%;bottom:-130px;width:340px;height:340px;margin-left:-170px;border:2px solid rgba(255,255,255,.1);border-radius:50%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:40px;height:2px;background:rgba(255,255,255,.07)}
.hero>*{position:relative;z-index:1}
.vs{display:flex;align-items:center;justify-content:center;gap:clamp(12px,5vw,52px);margin:14px 0}
.team{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;max-width:160px}
.vsmark{font-size:2rem;font-weight:900;color:var(--gold);text-shadow:0 0 18px rgba(251,191,36,.6)}
.crest{width:88px;height:88px;border-radius:50% 50% 46% 46%/40% 40% 60% 60%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.7rem;color:#fff;
  background:linear-gradient(160deg,hsl(var(--h) 80% 55%),hsl(var(--h) 70% 22%));border:3px solid rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 22px hsl(var(--h) 80% 50%/.5)}
.tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.tag{padding:2px 12px;border-radius:99px;font-size:.8rem;background:rgba(255,255,255,.08);border:1px solid var(--line)}.tag.hot{background:rgba(239,68,68,.2);border-color:#ef4444;color:#fecaca}.tag.gold{background:rgba(251,191,36,.15);border-color:var(--gold);color:var(--gold)}

/* بطاقة اللاعب: إطار تقني + صواعق نيون، لونها حسب التقييم */
.fcard{--fc:#fbbf24;--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;position:relative;max-width:340px;margin:0 auto;border-radius:20px 20px 40px 40px;padding:16px 18px 18px;text-align:center;overflow:hidden;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.1),transparent 40%),radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--fc) 22%,transparent),transparent 60%),linear-gradient(170deg,#12304f,#0a1b33 55%,#060f1e);
  border:2px solid var(--fc);box-shadow:0 0 34px color-mix(in srgb,var(--fc) 30%,transparent),inset 0 0 0 5px rgba(5,12,24,.9),inset 0 0 0 6px color-mix(in srgb,var(--fc) 45%,transparent);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .15s ease-out,box-shadow .2s}
.fcard.r-gold{--fc:#fbbf24}.fcard.r-blue{--fc:#38bdf8}.fcard.r-green{--fc:#2dff8f}
.fcard:hover{box-shadow:0 0 50px color-mix(in srgb,var(--fc) 45%,transparent),inset 0 0 0 5px rgba(5,12,24,.9),inset 0 0 0 6px color-mix(in srgb,var(--fc) 60%,transparent)}
.fcard>*{position:relative;z-index:1}
.fc-c{position:absolute!important;width:20px;height:20px;border:3px solid var(--fc);opacity:.85;z-index:2}
.fc-c.tl{top:12px;inset-inline-start:12px;border-width:3px 0 0 3px}.fc-c.tr{top:12px;inset-inline-end:12px;border-width:3px 3px 0 0}
.fc-c.bl{bottom:30px;inset-inline-start:12px;border-width:0 0 3px 3px}.fc-c.br{bottom:30px;inset-inline-end:12px;border-width:0 3px 3px 0}
.fc-spark{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important;filter:drop-shadow(0 0 5px #38bdf8);animation:spark 2.4s infinite steps(1)}
@keyframes spark{0%,100%{opacity:.95}46%{opacity:.95}48%{opacity:.35}52%{opacity:1}}
.fc-top{display:flex;justify-content:space-between;align-items:flex-start;padding:0 8px}
.fc-ovr{font-size:2.8rem;font-weight:900;color:var(--fc);line-height:1;text-shadow:0 0 16px color-mix(in srgb,var(--fc) 70%,transparent)}.fc-ovr small{display:block;font-size:.7rem;font-weight:600;color:var(--muted);margin-top:2px}
.fc-pos{text-align:end;line-height:1.1}.fc-pos span{display:block;font-family:"Cairo",monospace;font-size:1.9rem;font-weight:900;letter-spacing:2px;color:#67e8f9;text-shadow:0 0 12px rgba(103,232,249,.8)}
.fc-avatar{width:75%;margin:-8px auto 0;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--fc) 45%,transparent));position:relative}.fc-avatar svg{display:block;width:100%;height:auto}
.hero-avatar{width:80%;margin:-10px auto 4px}
.hero-img-box{position:relative;border-radius:20px;overflow:hidden;border:2px solid #38bdf8;box-shadow:0 0 25px rgba(56,189,248,.45),inset 0 0 20px rgba(45,255,143,.2);background:radial-gradient(circle at 50% 30%,#0d2847,#040d1a 80%)}
.hero-avatar-art{display:block;width:100%;height:auto;object-fit:cover;transform:scale(1.02);transition:transform .3s ease}
.fcard:hover .hero-avatar-art{transform:scale(1.06)}
.hero-bonus-chip{position:absolute;bottom:8px;inset-inline-end:8px;background:linear-gradient(135deg,rgba(251,191,36,.95),rgba(217,119,6,.95));color:#1a0f00;font-weight:900;font-size:.85rem;padding:3px 10px;border-radius:8px;box-shadow:0 0 15px rgba(251,191,36,.8),0 2px 6px rgba(0,0,0,.6);border:1px solid #fef08a;letter-spacing:.5px;display:flex;align-items:center;gap:4px}
.cyber-pos span{color:#38bdf8!important;text-shadow:0 0 14px rgba(56,189,248,.9)!important;font-family:"Cairo",monospace;font-weight:900}
.hud-av-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1.5px solid var(--green);box-shadow:0 0 8px rgba(45,255,143,.5)}
.sq-avatar.is-me{border:2px solid var(--gold)!important;box-shadow:0 0 12px rgba(251,191,36,.45)}
.sq-av-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hero-cyber-avatar-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 16px rgba(56,189,248,.6))}
.fc-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:12px 6px 10px;text-align:start}
.fc-stats div{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l v" "b b";gap:1px 8px;align-items:baseline}
.fc-stats span{grid-area:l;font-size:.74rem;color:var(--muted)}.fc-stats b{grid-area:v;justify-self:end;font-size:1rem;color:var(--txt)}
.fc-stats i{grid-area:b;display:block;height:4px;border-radius:9px;background:#0a1830;position:relative;overflow:hidden}
.fc-stats i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#38bdf8,var(--green))}
.fc-stats .hi b{color:var(--fc)}.fc-stats .hi i::after{background:linear-gradient(90deg,var(--fc),#fff)}
.fc-foot{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--green);margin-top:4px;padding:0 6px}
.ribbon{padding:3px 14px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.45));border:1px solid var(--fc);border-radius:8px 18px 8px 18px;color:var(--fc);font-weight:800}
@media(prefers-reduced-motion:reduce){.fcard,.fc-spark{transition:none;animation:none}}
.alert{margin-top:10px;padding:8px 12px;border-radius:10px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#fecaca;font-size:.88rem}

/* المباراة: شريط علوي + ملعب 2.5D + شريط المعلق */
body.in-match .topbar,body.in-match .nav{display:none}
body.in-match #view-game{padding-top:8px}
#tab-match .match{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.mhud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 16px;border-color:rgba(45,255,143,.25)}
.mh-side{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.venue{display:inline-block;padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:.82rem}
.mh-meters{align-items:stretch;gap:6px}.mh-meters label{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted)}.mh-meters b{color:var(--txt)}
.mh-center{min-width:min(420px,52vw);text-align:center}
.mh-top{display:flex;justify-content:center;align-items:center;gap:12px;font-size:.85rem}
.live{display:inline-flex;align-items:center;gap:6px;color:#ff6b6b;font-weight:800}.live::before{content:"";width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 10px #ef4444;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.mh-top em{font-style:normal;font-weight:800;color:var(--txt);background:rgba(255,255,255,.08);padding:0 10px;border-radius:8px;direction:ltr}
.mh-score{display:flex;align-items:center;justify-content:center;gap:16px;font-weight:800;font-size:1.15rem}
.mh-score b{font-size:2.1rem;color:var(--green);direction:rtl;unicode-bidi:isolate;letter-spacing:4px;text-shadow:0 0 16px var(--glow);min-width:90px}
.mh-prog{height:5px;border-radius:9px;background:#0a1830;overflow:hidden;margin-top:4px}.mh-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#ef4444);transition:width .6s}
@media(max-width:760px){.mhud{grid-template-columns:1fr}.mh-side,.mh-meters{align-items:center;flex-direction:row;justify-content:center;flex-wrap:wrap}.mh-meters>div{flex:1;min-width:120px}}

/* شريط تحكم إيقاع المباراة والزمن الفعلي 15 دقيقة */
.match-controls-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:linear-gradient(90deg,rgba(7,16,30,.9),rgba(11,26,48,.85));border:1px solid rgba(56,189,248,.25);border-radius:12px;padding:8px 14px;font-size:.85rem}
.match-real-timer{display:flex;align-items:center;gap:6px;color:var(--gold);font-weight:700}.match-real-timer b{font-family:"Cairo",monospace;font-size:1.05rem;color:#fef08a;letter-spacing:1px;direction:ltr;background:rgba(0,0,0,.3);padding:1px 6px;border-radius:6px;border:1px solid rgba(251,191,36,.3)}
.match-speed-control{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.speed-btn{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);padding:4px 10px;border-radius:7px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;transition:.15s}
.speed-btn:hover{border-color:var(--blue);background:rgba(56,189,248,.15)}
.speed-btn.active{background:var(--blue);color:#031122;border-color:var(--blue);box-shadow:0 0 10px rgba(56,189,248,.4)}
.speed-btn.ghost{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.speed-btn.ghost:hover{background:rgba(255,255,255,.08);color:var(--txt)}

.clutch-badge-bar{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.clutch-limit-tag{display:inline-block;padding:2px 10px;border-radius:99px;background:rgba(251,191,36,.15);border:1px solid var(--gold);color:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.5px}

.pitch{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(45,255,143,.25);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 40px rgba(45,255,143,.08);
  background:url(img/stadium-bg.webp) center top/cover;user-select:none}
.pitch-svg{display:block;width:100%;height:auto}
.pitch .actor{will-change:transform;pointer-events:auto;cursor:pointer;transition:filter .2s ease}
.pitch .actor:hover{filter:drop-shadow(0 0 8px rgba(56,189,248,.8))}
.pitch .actor.focused{filter:drop-shadow(0 0 12px rgba(251,191,36,.95)) brightness(1.12)}
.pitch .actor.hidden-phase{opacity:0;pointer-events:none;transform:scale(0.5);transition:opacity .5s ease,transform .5s ease}
.pitch .actor.visible-phase{opacity:1;transition:opacity .5s ease,transform .5s ease}
.pitch #pa-ball{will-change:transform;pointer-events:none}
.pitch .name-badge{transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1);opacity:0;transform:translateY(6px);pointer-events:none}
.pitch .name-badge.badge-visible{opacity:1;transform:translateY(0)}
.pitch .actor:hover .name-badge{opacity:1;transform:translateY(0)}
.pitch .me-ring{animation:ring 1.6s infinite ease-out;transform-box:fill-box;transform-origin:center}
@keyframes ring{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
.pitch .me-beacon{animation:beacon 1.4s infinite ease-in-out;transform-origin:center}
@keyframes beacon{0%,100%{transform:translateY(0) scale(1);opacity:.9}50%{transform:translateY(-5px) scale(1.1);opacity:1}}
.pitch .focus-spotlight{animation:spotpulse 1.8s infinite alternate ease-in-out;transform-origin:center}
@keyframes spotpulse{0%{opacity:.7;transform:scale(.95)}100%{opacity:1;transform:scale(1.15)}}
.opt-line{transition:opacity .2s}.opt-line.dim{opacity:.18}.opt-line.chosen path{stroke-width:6}
.pitch.clutch-on::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 60%,transparent 30%,rgba(2,8,18,.65));pointer-events:none;transition:opacity .3s}

.pitch-mode-badge{position:absolute;bottom:14px;inset-inline-start:16px;background:rgba(4,12,24,.85);border:1px solid rgba(56,189,248,.35);padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:6px;z-index:9;backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.pitch-mode-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);display:inline-block}
.pitch-mode-badge.is-defense .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.pitch-mode-badge.is-defense{border-color:rgba(239,68,68,.35)}

.pitch-click-hint{position:absolute;bottom:14px;inset-inline-end:16px;background:rgba(4,12,24,.75);border:1px solid rgba(255,255,255,.12);padding:3px 10px;border-radius:99px;font-size:.72rem;color:var(--muted);z-index:9;pointer-events:none}

.pitch-pass-banner{position:absolute;top:18px;left:50%;transform:translateX(-50%) translateY(-10px);
  background:linear-gradient(135deg,rgba(4,18,10,.94),rgba(15,23,42,.92));
  border:1.5px solid var(--green);box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 24px rgba(45,255,143,.3);
  color:#fff;padding:8px 20px;border-radius:99px;font-size:.9rem;font-weight:800;display:flex;align-items:center;gap:10px;
  z-index:10;pointer-events:none;opacity:0;transition:all .35s cubic-bezier(.16,1,.3,1)}
.pitch-pass-banner.show{opacity:1;transform:translateX(-50%) translateY(0)}
.pitch-pass-banner .pulse-ball{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

.pitch-goal-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(2.6rem,10vw,6rem);font-weight:900;color:#fff;
  text-shadow:0 0 30px var(--green),0 0 60px var(--green),0 6px 0 #0a7a3d;pointer-events:none;z-index:12}
.pitch-goal-flash.go{animation:goalpop 1.8s ease-out}
@keyframes goalpop{0%{opacity:0;transform:scale(.3) rotate(-6deg)}15%{opacity:1;transform:scale(1.15) rotate(2deg)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
.ticker{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;background:rgba(7,14,26,.8);border:1px solid var(--line);font-size:.92rem;min-height:42px}
.ticker .mic{filter:drop-shadow(0 0 6px var(--blue))}
.feedbox{background:rgba(7,14,26,.7);border:1px solid var(--line);border-radius:12px;padding:6px 12px}.feedbox summary{cursor:pointer;color:var(--muted);font-size:.85rem;padding:4px 0}
.feed{height:190px;overflow:auto;padding:4px 0;font-size:.92rem}
.feed div{padding:4px 0;border-bottom:1px dashed #14233a;animation:in .35s ease}
.feed .t{color:var(--muted);margin-inline-end:8px;font-size:.78rem}.feed .goal{color:var(--green);font-weight:700}.feed .clutch{color:var(--gold)}.feed .injury,.feed .bad{color:var(--red)}.feed .chatter{color:var(--muted)}.feed .sub{color:var(--blue)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* قوائم وجداول */
.fx{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;font-size:.9rem}.fx small{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{color:var(--muted);font-weight:600;font-size:.78rem}th,td{padding:8px 5px;text-align:center;border-bottom:1px solid var(--line)}
td:nth-child(2){text-align:right}tbody tr:hover,tr:hover td{background:rgba(255,255,255,.03)}
tr.me td{color:var(--green);font-weight:800;background:rgba(45,255,143,.07)}
.badge{display:inline-block;padding:1px 10px;border-radius:99px;background:#0b2a4a;border:1px solid var(--line);font-size:.75rem;color:var(--blue)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.stats div{background:#091323;border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:flex;justify-content:space-between}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.tiles div{display:flex;flex-direction:column-reverse;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px}
.tiles b{font-size:1.7rem;color:var(--green)}.tiles span{font-size:.78rem;color:var(--muted)}

/* المتجر / الاستشفاء */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.shop-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px;border-radius:14px;background:linear-gradient(180deg,#13294a,#0b182c);border:1px solid var(--line)}
.shop-card:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(251,191,36,.15)}
.shop-card .ico{font-size:2.4rem}.shop-card small{color:var(--muted);min-height:2.6em}

/* النوافذ المنبثقة وشاشة اللحظة الحاسمة */
.overlay{position:fixed;inset:0;background:rgba(2,6,14,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:999999;padding:14px}
.modal{width:min(520px,100%)}
#clutch{align-items:flex-end;background:linear-gradient(180deg,rgba(2,6,14,0) 15%,rgba(2,6,14,.88) 85%);backdrop-filter:none;padding:0 14px 14px;z-index:999999}
#clutch.urgent{box-shadow:inset 0 0 120px 10px rgba(239,68,68,.45);animation:urgent .6s infinite}
@keyframes urgent{50%{box-shadow:inset 0 0 160px 24px rgba(239,68,68,.6)}}
.clutch-box{width:min(980px,100%);background:linear-gradient(180deg,rgba(35,22,4,.97),rgba(10,18,32,.98));border:2px solid var(--gold);border-radius:20px;padding:16px 20px 20px;box-shadow:0 0 60px rgba(251,191,36,.4),0 -12px 50px rgba(0,0,0,.6);animation:rise .35s cubic-bezier(.2,.9,.3,1.1);max-height:92vh;display:flex;flex-direction:column}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
.clutch-head{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-shrink:0}
.clutch-head h2{color:var(--gold);margin:0;font-size:1.25rem;text-shadow:0 0 14px rgba(251,191,36,.45)}
.clutch-head small{color:var(--muted)}
.ring{position:relative;width:78px;height:78px;flex:none}.ring svg{width:100%;height:100%}
.ring .track{fill:none;stroke:#2a2f3d;stroke-width:9}.ring .arc{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(251,191,36,.7))}
.ring.danger .arc{stroke:var(--red);filter:drop-shadow(0 0 6px var(--red))}.ring.danger{animation:beat .6s infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.09)}}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem;direction:ltr}

/* شبكة خيارات الفرصة الحاسمة مع الميزة والعيب */
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;overflow-y:auto;max-height:62vh;padding:2px 2px 6px}
@media(max-width:850px){
  .options{grid-template-columns:1fr;gap:10px;max-height:55vh}
  .clutch-head h2{font-size:1.05rem}
  .clutch-box{padding:12px 14px 14px}
}

.opt{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 12px 12px;
  border-radius:14px;
  border:1.5px solid #334563;
  background:rgba(15,26,46,.95);
  color:var(--txt);
  cursor:pointer;
  font:inherit;
  text-align:right;
  transition:.18s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.opt:hover:not(:disabled),.opt:focus-visible{
  border-color:var(--gold);
  background:rgba(25,42,72,.98);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(251,191,36,.25);
  outline:0;
}
.opt:disabled{opacity:.5}
.opt.picked{
  border-color:var(--green);
  opacity:1;
  box-shadow:0 0 24px rgba(45,255,143,.4);
  background:rgba(18,48,34,.96);
}

.opt-head{
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:6px;
  position:relative;
}
.opt .n{
  min-width:24px;
  height:24px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.82rem;
  background:var(--gold);
  color:#241800;
  flex-shrink:0;
}
.opt-label{
  font-size:.95rem;
  font-weight:800;
  color:#fff;
  flex:1;
}
.opt-hint{
  font-size:.72rem;
  font-weight:700;
  color:var(--gold);
  background:rgba(251,191,36,.12);
  padding:2px 6px;
  border-radius:5px;
  white-space:nowrap;
}

/* مؤشرات وسرعة قراءة الفرص الحاسمة في 15 ثانية (Metric Pills) */
.opt-metrics {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.metric-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.25;
  transition: all 0.15s ease;
}
.metric-pill .m-ico {
  font-size: 0.95rem;
  flex-shrink: 0;
}
.metric-pill .m-val {
  font-weight: 800;
  letter-spacing: -0.2px;
}
.chance-pill {
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
  border-inline-start: 3px solid #38bdf8;
}
.energy-pill.neg {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border-inline-start: 3px solid #ef4444;
}
.energy-pill.pos {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  border-inline-start: 3px solid #10b981;
}
.trust-pill.pos {
  background: rgba(45, 255, 143, 0.14);
  color: #2dff8f;
  border-inline-start: 3px solid #2dff8f;
}
.trust-pill.neg {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border-inline-start: 3px solid #f59e0b;
}
.morale-pill.pos {
  background: rgba(251, 191, 36, 0.12);
  color: #fef08a;
  border-inline-start: 3px solid #facc15;
}
.morale-pill.neg {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border-inline-start: 3px solid #94a3b8;
}

.result{margin-top:12px;padding:12px;border-radius:12px;background:#08111f;border:1px solid var(--line);text-align:center;font-weight:700}.result.ok{color:var(--green)}.result.bad{color:var(--red)}
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#0b2a4a;border:1px solid var(--blue);padding:10px 18px;border-radius:12px;z-index:99;opacity:0;pointer-events:none;transition:.3s;max-width:90vw}
#toast.show{opacity:1}#toast.err{border-color:var(--red);background:#3b0d0d}
.ok{color:var(--ok)}

/* جوال: شريط تنقل سفلي */
@media(max-width:700px){
  #view-game{padding-bottom:90px}
  .nav{position:fixed;bottom:0;left:0;right:0;z-index:30;margin:0;border-radius:0;border-width:1px 0 0;background:rgba(5,10,20,.96);gap:2px;padding:0 4px}
  .nav button{flex-direction:column;gap:0;padding:7px 4px 9px;font-size:.68rem}.nav button i{font-size:1.3rem}
  .meter{max-width:none;min-width:45%}
  .crest{width:68px;height:68px;font-size:1.3rem}
}

/* سوق الانتقالات */
.mk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}@media(max-width:960px){.mk-grid{grid-template-columns:1fr}}
.mk-bar{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;justify-content:space-between;border-color:rgba(251,191,36,.28)}
.mk-status{display:flex;flex-direction:column;gap:2px}
.mk-tip{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:240px}.mk-tip>span{font-size:1.5rem}.mk-tip p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.grow{flex:1;min-width:0;display:flex;flex-direction:column}
.pill{display:inline-block;padding:1px 10px;border-radius:99px;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.ok{color:var(--green);border-color:rgba(45,255,143,.5);background:rgba(45,255,143,.1)}.pill.bad{color:#fecaca;border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.12)}.pill.mid{color:var(--gold);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.offer{--tc:#38bdf8;position:relative;border-radius:14px;padding:14px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 18%,#0a1626),#0a1626 70%);box-shadow:0 0 22px color-mix(in srgb,var(--tc) 14%,transparent);transition:transform .15s,box-shadow .15s}
.offer:hover{transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb,var(--tc) 28%,transparent)}
.offer.tier-local{--tc:#94a3b8}.offer.tier-mid{--tc:#38bdf8}.offer.tier-continental{--tc:#a78bfa}.offer.tier-elite{--tc:#fbbf24}
.offer-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.offer-head .crest{width:54px;height:54px;font-size:1.1rem}.offer-head b{font-size:1.05rem}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.offer-grid div{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column}
.offer-grid span{font-size:.74rem;color:var(--muted)}.up{font-style:normal;font-size:.72rem;color:var(--green);margin-inline-start:4px}
.offer-actions{display:flex;gap:10px}.offer-actions .btn{flex:1}.btn.reject{background:transparent;border-color:rgba(239,68,68,.6);color:#fecaca}.btn.reject:hover:not(:disabled){background:rgba(239,68,68,.18);border-color:#ef4444}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.chip{padding:4px 14px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:.82rem}
.chip.on{background:rgba(45,255,143,.14);border-color:var(--green);color:var(--green);font-weight:700}
.peer-list{display:flex;flex-direction:column;gap:8px}
.peer{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.peer:hover{border-color:var(--blue)}
.peer-av{position:relative;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem;background:radial-gradient(circle at 35% 30%,#3b82f6,#0b1d3a);border:1px solid var(--line)}
.peer-av i{position:absolute;bottom:-7px;inset-inline-start:-6px;font-style:normal;font-size:.72rem;font-weight:900;background:var(--gold);color:#241800;border-radius:7px;padding:0 5px}
.peer small{font-size:.78rem}
.empty{text-align:center;padding:26px 10px}.empty>div{font-size:2.4rem}

/* صفحة المسيرة */
.ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ctiles>div{position:relative;display:flex;flex-direction:column;align-items:center;padding:14px 8px 10px;border-radius:14px;background:linear-gradient(160deg,rgba(56,189,248,.1),rgba(255,255,255,.02));border:1px solid var(--line)}
.ctiles .ci{font-size:1.4rem}.ctiles b{font-size:2rem;line-height:1.1;color:var(--green);text-shadow:0 0 14px rgba(45,255,143,.35)}.ctiles small{font-size:.76rem;color:var(--muted)}
.ctiles>div:nth-child(2) b{color:var(--blue);text-shadow:0 0 14px rgba(56,189,248,.35)}.ctiles>div:nth-child(4) b{color:var(--gold);text-shadow:0 0 14px rgba(251,191,36,.35)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.medal{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 8px;border-radius:14px;background:radial-gradient(circle at 50% 0%,rgba(251,191,36,.25),transparent 70%),#0e1a2d;border:1px solid rgba(251,191,36,.5);box-shadow:0 0 20px rgba(251,191,36,.12)}
.medal span{font-size:2.4rem;filter:drop-shadow(0 0 10px rgba(251,191,36,.6))}.medal b{color:var(--gold);font-size:.9rem}.medal small{color:var(--muted)}
.empty.slim{padding:12px 6px}.empty.slim>div{font-size:1.8rem}
.sc-chart{display:flex;gap:10px;align-items:flex-end;height:210px;padding:26px 4px 0;overflow-x:auto}
.sc-col{flex:1;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%}
.sc-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-bottom:1px solid var(--line)}
.sc-bars i{position:relative;display:block;width:42%;max-width:22px;height:var(--h);min-height:4px;border-radius:6px 6px 0 0;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.sc-bars i.g,.sc-legend i.g{background:linear-gradient(180deg,var(--green),#13a85a)}.sc-bars i.a,.sc-legend i.a{background:linear-gradient(180deg,var(--blue),#1d6fa5)}
.sc-bars b{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:700;color:var(--txt)}
.sc-col span{font-size:.8rem;font-weight:700}.sc-col small{font-size:.7rem;color:var(--gold)}
.sc-legend{display:flex;gap:16px;justify-content:center;margin-top:8px;font-size:.78rem;color:var(--muted)}.sc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px}
.more{margin-top:10px}.more summary{cursor:pointer;color:var(--blue);font-size:.85rem;padding:4px 0}
.fin-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.fin-sum>div{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}.fin-sum small{font-size:.72rem;color:var(--muted)}.fin-sum b{font-size:1.05rem}
.pos{color:var(--ok)}.neg{color:var(--red)}
.tx-list{display:flex;flex-direction:column;gap:6px}
.tx{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.tx-i{font-size:1.3rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.06)}
.tx-a{text-align:end;display:flex;flex-direction:column;direction:ltr}.tx-a small{font-size:.7rem}
@media(max-width:520px){.fin-sum{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sc-bars i{animation:none}}

/* ===== وميض الشاشة الأحمر عند انخفاض الطاقة وخطر الإصابة ===== */
.danger-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 18px;
  animation: dangerPulse 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: inset 0 0 70px rgba(239, 68, 68, 0.7), inset 0 0 160px rgba(185, 28, 28, 0.45);
  border: 4px solid rgba(239, 68, 68, 0.85);
  background: radial-gradient(circle at center, transparent 35%, rgba(220, 38, 38, 0.22) 100%);
  transition: opacity 0.3s ease;
}

@keyframes dangerPulse {
  0%, 100% {
    opacity: 0.35;
    box-shadow: inset 0 0 50px rgba(239, 68, 68, 0.5), inset 0 0 100px rgba(185, 28, 28, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: inset 0 0 110px rgba(239, 68, 68, 0.95), inset 0 0 240px rgba(220, 38, 38, 0.7);
    border-color: rgba(255, 40, 40, 1);
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.08) 20%, rgba(220, 38, 38, 0.4) 100%);
  }
}

.danger-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(127, 29, 29, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid #ef4444;
  color: #fff;
  padding: 9px 24px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 4px 25px rgba(239, 68, 68, 0.65), 0 0 15px rgba(239, 68, 68, 0.8);
  animation: bannerShake 2s infinite ease-in-out;
  pointer-events: auto;
}

@keyframes bannerShake {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.danger-icon {
  font-size: 1.25rem;
  animation: dangerIconBlink 0.6s infinite alternate;
}

@keyframes dangerIconBlink {
  from { opacity: 0.6; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.15); }
}

/* شريط الطاقة عند خطر الإصابة */
.bar i.energy.danger {
  background: linear-gradient(90deg, #b91c1c, #ef4444) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.9) !important;
  animation: energyBarPulse 0.8s infinite alternate !important;
}

@keyframes energyBarPulse {
  from { opacity: 0.7; }
  to { opacity: 1; box-shadow: 0 0 24px rgba(255, 50, 50, 1); }
}

/* ============================================================================
   أنظمة الشخصيات الافتراضية والروبوتات (NPC & Bot Simulation Dashboard)
   ============================================================================ */
.npc-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 20px;
  margin-top: 10px;
}
@media (max-width: 768px) {
  .npc-dashboard-grid { grid-template-columns: 1fr; }
}

.npc-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(145deg, rgba(16, 28, 48, 0.95), rgba(8, 16, 28, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.npc-panel::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--blue), var(--green));
}

.npc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}
.npc-header .icon {
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.npc-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #f8fafc;
}

.npc-coach-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.npc-coach-selector label {
  font-size: 0.85rem;
  color: var(--muted);
}
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-group .btn {
  flex: 1;
  min-width: 110px;
  font-size: 0.82rem;
  padding: 8px 6px;
}
.btn-group .btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.4);
}

.coach-status-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.coach-metrics div {
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 4px;
  border-radius: 8px;
}
.coach-metrics span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}
.coach-metrics b {
  font-size: 1.1rem;
  color: #fbbf24;
}

.coach-dialogue-box {
  background: rgba(15, 23, 42, 0.8);
  border-inline-start: 4px solid #38bdf8;
  padding: 12px 14px;
  border-radius: 0 10px 10px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #e2e8f0;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
}

.rival-h2h-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.rival-side {
  text-align: center;
}
.rival-side b {
  display: block;
  font-size: 1.1rem;
  color: #fff;
}
.rival-side small {
  font-size: 0.8rem;
  color: var(--muted);
}
.rival-side .ovr-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #f59e0b;
  color: #000;
  font-weight: 900;
  border-radius: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
}
.rival-vs {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.rival-stats-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.r-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.r-stat-row b.lead {
  color: #10b981;
}

.agent-card, .board-card {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.harass-alert {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.market-bot-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
}

/* شارة طور منتصف الملعب التكتيكي */
.pitch-mode-badge.is-midfield {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #bae6fd;
}
.pitch-mode-badge.is-midfield .dot {
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

/* ==========================================================
 * صفحة التشكيلة والتكتيكات الحالية (Tactics & Lineup)
 * ========================================================== */
.tactics-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.tactics-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
}
.th-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.th-main .icon {
  font-size: 2rem;
  padding: 10px;
  border-radius: 12px;
  background: rgba(45, 255, 143, 0.12);
  border: 1px solid rgba(45, 255, 143, 0.3);
}
.th-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tactics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .tactics-grid {
    grid-template-columns: 1fr;
  }
}

.pitch-board-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}
.card-head h4 {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
}

/* لوحة الملعب التكتيكي الخضراء */
.tactics-pitch-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  min-height: 440px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #15803d, #14532d 70%, #052e16);
  border: 2px solid rgba(45, 255, 143, 0.35);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.4);
}
/* خطوط الملعب */
.tactics-pitch-board::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  pointer-events: none;
}
.tactics-pitch-board::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
  pointer-events: none;
}

/* دبوس/بطاقة اللاعب على لوحة التشكيلة */
.tactics-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  z-index: 10;
}
.tactics-pin:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 20;
}
.pin-badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d62839, #991b1b);
  border: 2.5px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.pin-badge.is-gk {
  background: linear-gradient(145deg, #059669, #047857);
}
.pin-badge.is-user {
  background: linear-gradient(145deg, #fbbf24, #d97706);
  border: 3px solid #2dff8f;
  box-shadow: 0 0 20px #2dff8f, 0 4px 14px rgba(0, 0, 0, 0.6);
  animation: userPinPulse 2s infinite ease-in-out;
}
@keyframes userPinPulse {
  0%, 100% { box-shadow: 0 0 14px #2dff8f, 0 0 26px rgba(45, 255, 143, 0.5); }
  50% { box-shadow: 0 0 26px #fbbf24, 0 0 40px rgba(251, 191, 36, 0.7); }
}
.pin-ovr {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  background: #0f172a;
  border: 1px solid #fbbf24;
  color: #fbbf24;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 6px;
}
.pin-label {
  background: rgba(4, 18, 10, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f8fafc;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}
.tactics-pin.is-user .pin-label {
  background: rgba(6, 78, 59, 0.95);
  border-color: #2dff8f;
  color: #2dff8f;
}

.tactics-pitch-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: 4px;
}
.legend-dot.user { background: #fbbf24; box-shadow: 0 0 8px #2dff8f; }
.legend-dot.starter { background: #d62839; }
.legend-dot.sub { background: #38bdf8; }

.tactics-side-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.coach-tactics-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.t-directives-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-dir-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.84rem;
}
.t-dir-item .icon { font-size: 1.1rem; }
.t-user-instruction {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: #a7f3d0;
}
.t-user-instruction b { display: block; color: var(--green); margin-bottom: 2px; }

/* دكة البدلاء */
.bench-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bench-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) {
  .bench-list { grid-template-columns: 1fr; }
}
.bench-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 0.82rem;
}
.bench-item .b-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bench-num {
  font-family: "Cairo", monospace;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--muted);
}
.bench-ovr {
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

/* ==========================================================
 * صفحة قائمة لاعبي النادي (Club Squad / Roster)
 * ========================================================== */
.squad-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.squad-header-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}
.sq-head-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.sq-stats-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sq-stat-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sq-stat-chip small { font-size: 0.7rem; color: var(--muted); }
.sq-stat-chip b { font-size: 1rem; color: #fff; }
.sq-stat-chip b.gold { color: var(--gold); }

.sq-filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}
.sq-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sq-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.sq-tab-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sq-tab-btn.active {
  background: var(--blue);
  color: #031122;
  border-color: var(--blue);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
.sq-search input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.84rem;
  min-width: 260px;
  transition: border-color 0.15s;
}
.sq-search input:focus {
  outline: none;
  border-color: var(--green);
}

.squad-sections-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.squad-pos-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.squad-pos-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.squad-pos-title .badge {
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--muted);
}
.squad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* بطاقة اللاعب داخل قائمة الفريق */
.squad-card {
  background: linear-gradient(160deg, rgba(11, 24, 44, 0.85), rgba(7, 16, 30, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.squad-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.squad-card.is-user {
  border: 2px solid var(--green);
  box-shadow: 0 0 24px rgba(45, 255, 143, 0.22);
  background: linear-gradient(160deg, rgba(14, 44, 30, 0.9), rgba(6, 20, 14, 0.95));
}
.squad-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sq-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.sq-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sq-card-info {
  flex: 1;
  min-width: 0;
}
.sq-name {
  font-weight: 800;
  font-size: 0.96rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-meta {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.sq-ovr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 4px 8px;
}
.sq-ovr-box b {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.sq-ovr-box small {
  font-size: 0.65rem;
  color: var(--muted);
}
.sq-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  border-radius: 8px;
}
.sq-detail-row {
  display: flex;
  justify-content: space-between;
}
.sq-detail-row span { color: var(--muted); }
.sq-detail-row b { color: #f1f5f9; }
.sq-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   دكة بدلاء الفريقين والمنطقة الفنية وتفاعل المدربين واللوحة الإلكترونية LED
   ========================================================================== */

#tab-match .match {
  max-width: 1360px;
  margin: 0 auto;
}

/* تخطيط ساحة المباراة: دكة الأهلي | الملعب التفاعلي | دكة الزمالك */
.match-arena-wrapper {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 14px;
  align-items: start;
  margin-bottom: 8px;
}

.match-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* حاوية دكة البدلاء (Dugout) */
.bench-dugout {
  background: linear-gradient(180deg, rgba(11, 24, 44, 0.94), rgba(4, 10, 20, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* سقف الدكة الشفاف الرياضي (Shelter Canopy) */
.bench-dugout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--bench-accent, #38bdf8), transparent);
}

.home-dugout {
  --bench-accent: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.12);
}

.away-dugout {
  --bench-accent: #f8fafc;
  border-color: rgba(248, 250, 252, 0.25);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
}

/* ترويسة الدكة */
.dugout-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dugout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.dugout-title .team-name {
  font-weight: 800;
  color: #f8fafc;
}
.team-dot {
  font-size: 0.9rem;
}
.subs-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--blue);
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.home-dugout .subs-pill {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* المنطقة الفنية للمدرب (Technical Area) */
.technical-area {
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.home-dugout .technical-area {
  border-color: rgba(239, 68, 68, 0.4);
}
.away-dugout .technical-area {
  border-color: rgba(255, 255, 255, 0.25);
}

.coach-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
.coach-figure {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: radial-gradient(circle at 35% 35%, #1e3a5f, #0a1424);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.coach-figure[data-reaction="celebrate"] {
  animation: coach-jump 0.6s ease-in-out infinite alternate;
  box-shadow: 0 0 18px rgba(45, 255, 143, 0.6);
  border-color: var(--green);
}
.coach-figure[data-reaction="angry"] {
  animation: coach-rage 0.4s ease-in-out infinite alternate;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
  border-color: #ef4444;
}
.coach-figure[data-reaction="clap"] {
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
  border-color: var(--gold);
}
@keyframes coach-jump {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-6px) scale(1.08); }
}
@keyframes coach-rage {
  0% { transform: rotate(-3deg) scale(1); }
  100% { transform: rotate(3deg) scale(1.04); }
}

.coach-badge-tag {
  position: absolute;
  bottom: -6px;
  right: -4px;
  font-size: 0.6rem;
  font-weight: 900;
  background: var(--gold);
  color: #1a1000;
  padding: 0 4px;
  border-radius: 4px;
}

.coach-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.coach-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-reaction-state {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

/* فقاعة كلام وتوجيهات المدرب */
.coach-speech-bubble {
  position: relative;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: #e2e8f0;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.coach-speech-bubble p {
  margin: 0;
  font-weight: 600;
}
.coach-speech-bubble .speech-tail {
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px;
  height: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(15, 23, 42, 0.95);
}

.btn-coach-consult {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(217, 119, 6, 0.15));
  border: 1px solid var(--gold);
  color: #fef08a;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-coach-consult:hover {
  background: var(--gold);
  color: #1a1000;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
}

/* قائمة لاعبي دكة البدلاء */
.bench-roster-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
  padding: 0 2px;
}
.btn-quick-sub-open {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: var(--blue);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: 0.15s;
}
.btn-quick-sub-open:hover {
  background: var(--blue);
  color: #031122;
}

.bench-players-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}
.bench-players-list::-webkit-scrollbar {
  width: 4px;
}
.bench-players-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* بطاقة لاعب الدكة */
.bench-pcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.18s ease;
  font-size: 0.78rem;
}
.bench-pcard:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}
.bench-pcard.subbed-in {
  opacity: 0.55;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}
.bench-pcard.subbed-out {
  opacity: 0.4;
  text-decoration: line-through;
}

.bp-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bp-num {
  font-family: monospace;
  font-weight: 900;
  font-size: 0.78rem;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  flex-shrink: 0;
}
.home-dugout .bp-num {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
.bp-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bp-name {
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-meta {
  font-size: 0.68rem;
  color: var(--muted);
}
.bp-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bp-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.bp-tag.warm {
  background: rgba(251, 191, 36, 0.15);
  color: #fef08a;
  border: 1px solid rgba(251, 191, 36, 0.3);
  animation: warm-pulse 1.4s infinite alternate ease-in-out;
}
@keyframes warm-pulse {
  from { opacity: 0.75; }
  to { opacity: 1; filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); }
}
.bp-tag.in {
  background: rgba(16, 185, 129, 0.2);
  color: var(--green);
}
.btn-bench-sub-direct {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--blue);
  color: #e0f2fe;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  cursor: pointer;
  transition: 0.15s;
}
.btn-bench-sub-direct:hover {
  background: var(--blue);
  color: #031122;
}

/* ==========================================================================
   لوحة التبديل الإلكترونية LED (Electronic 4th Official Board)
   ========================================================================== */

.electronic-sub-board {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: sub-board-drop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sub-board-drop {
  from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.sub-board-bezel {
  background: linear-gradient(180deg, #1e293b, #090d16);
  border: 3px solid #334155;
  border-radius: 14px;
  padding: 10px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 320px;
}

.sub-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  letter-spacing: 0.5px;
}
.sub-board-time {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
}
.sub-board-team {
  font-weight: 900;
  color: #f1f5f9;
}

.sub-board-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.digit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 100px;
}
.digit-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.out-box .digit-label { color: #f87171; }
.in-box .digit-label { color: #4ade80; }

.digit-led {
  font-family: "Courier New", Courier, monospace, "Cairo";
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 12px;
  border-radius: 8px;
  background: #020617;
  border: 2px solid #0f172a;
  letter-spacing: 3px;
  min-width: 76px;
  text-align: center;
}
.digit-led.red-led {
  color: #ef4444;
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.9), 0 0 30px rgba(239, 68, 68, 0.6);
  border-color: rgba(239, 68, 68, 0.4);
}
.digit-led.green-led {
  color: #22c55e;
  text-shadow: 0 0 16px rgba(34, 197, 94, 0.9), 0 0 30px rgba(34, 197, 94, 0.6);
  border-color: rgba(34, 197, 94, 0.4);
}
.digit-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f8fafc;
  text-align: center;
  white-space: nowrap;
}
.sub-board-divider {
  font-size: 1.6rem;
  color: #64748b;
  font-weight: 900;
}

/* وميض اللاعب البديل عند الدخول إلى الملعب */
.subbed-in-beacon {
  animation: sub-in-flash 0.8s ease-in-out 3 alternate;
}
@keyframes sub-in-flash {
  from { filter: drop-shadow(0 0 20px #22c55e) brightness(1.4); }
  to { filter: drop-shadow(0 0 4px #22c55e) brightness(1); }
}

/* ==========================================================================
   وضع ملء الشاشة لشاشة المباراة (Match Fullscreen Mode)
   ========================================================================== */

#btn-fullscreen-match {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#btn-fullscreen-match:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--blue);
  color: #38bdf8;
}
#btn-fullscreen-match.active {
  background: linear-gradient(135deg, var(--gold), #d97706);
  color: #0b1528;
  border-color: var(--gold);
  font-weight: 900;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
}

/* تنسيق شاشة المباراة في وضع ملء الشاشة */
#tab-match:fullscreen,
#tab-match:-webkit-full-screen,
#tab-match.is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  background: radial-gradient(circle at 50% 15%, #0d1e38 0%, #030814 85%) !important;
  overflow-y: auto !important;
  padding: 16px 20px 40px !important;
  box-sizing: border-box !important;
  display: block !important;
}

#tab-match:fullscreen .match,
#tab-match:-webkit-full-screen .match,
#tab-match.is-fullscreen .match {
  max-width: 1480px;
  margin: 0 auto;
}

#tab-match:fullscreen .match-arena-wrapper,
#tab-match:-webkit-full-screen .match-arena-wrapper,
#tab-match.is-fullscreen .match-arena-wrapper {
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 16px;
}

#tab-match:fullscreen .pitch,
#tab-match:-webkit-full-screen .pitch,
#tab-match.is-fullscreen .pitch {
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(45, 255, 143, 0.12);
}

/* نافذة استشارة المدرب */
.coach-dialog-modal {
  width: min(500px, 94vw);
}
.coach-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.coach-dialog-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 35%, #1e3a5f, #0a1424);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}
.coach-dialog-quote-box {
  position: relative;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  padding: 16px 18px 16px 36px;
  margin-bottom: 14px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #f1f5f9;
}
.coach-dialog-quote-box .quote-icon {
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 2.2rem;
  color: rgba(251, 191, 36, 0.25);
  font-family: Georgia, serif;
}
.coach-dialog-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.coach-dialog-stats > div {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

/* التجاوب في الجوال والشاشات المتوسطة: الدكة بالأسفل */
@media (max-width: 1040px) {
  .match-arena-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .match-center-stage {
    order: 1;
  }
  .home-dugout {
    order: 2;
  }
  .away-dugout {
    order: 3;
  }
  .bench-dugout {
    max-height: none;
  }
  .bench-players-list {
    max-height: 180px;
  }
}

@media (max-width: 768px) {
  .match-arena-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sub-board-bezel {
    min-width: 280px;
    padding: 8px 12px;
  }
  .digit-led {
    font-size: 2.2rem;
    padding: 2px 8px;
    min-width: 60px;
  }
}

/* ==========================================================================
   وضع ملء الشاشة لشاشة المباراة (Fullscreen Match Arena Mode)
   ========================================================================== */

.dugout-player-notice {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  text-align: center;
}

.speed-btn.highlight-btn {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(14, 116, 144, 0.25));
  border-color: rgba(56, 189, 248, 0.5);
  color: #7dd3fc;
  font-weight: 700;
}
.speed-btn.highlight-btn:hover {
  background: rgba(56, 189, 248, 0.35);
  border-color: #38bdf8;
  color: #fff;
}
.speed-btn.highlight-btn.active {
  background: #0284c7;
  color: #fff;
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

#tab-match:fullscreen,
#tab-match:-webkit-full-screen,
#tab-match.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  background: radial-gradient(circle at 50% 20%, #0c1a2e 0%, #030712 100%) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
}

#tab-match:fullscreen .match,
#tab-match:-webkit-full-screen .match,
#tab-match.is-fullscreen .match {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

#tab-match:fullscreen .pitch,
#tab-match:-webkit-full-screen .pitch,
#tab-match.is-fullscreen .pitch {
  min-height: 520px;
}

#tab-match:fullscreen .overlay,
#tab-match:-webkit-full-screen .overlay,
#tab-match.is-fullscreen .overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}

#tab-match:fullscreen #clutch,
#tab-match:-webkit-full-screen #clutch,
#tab-match.is-fullscreen #clutch {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 16px 16px !important;
}

#tab-match:fullscreen #clutch.hidden,
#tab-match:-webkit-full-screen #clutch.hidden,
#tab-match.is-fullscreen #clutch.hidden {
  display: none !important;
}

#tab-match:fullscreen #coach-consult-modal,
#tab-match:-webkit-full-screen #coach-consult-modal,
#tab-match.is-fullscreen #coach-consult-modal {
  z-index: 999999 !important;
}

#tab-match:fullscreen #summary,
#tab-match:-webkit-full-screen #summary,
#tab-match.is-fullscreen #summary {
  z-index: 999999 !important;
}