:root{--bg:#04060e;--panel:rgba(12,17,35,0.72);--panel-solid:#0a0e1f;--panel-soft:#0d1226;--line:rgba(130,175,255,0.14);--line-soft:rgba(130,175,255,0.08);--cyan:#22e9ff;--cyan-dim:rgba(34,233,255,0.14);--magenta:#ff2f97;--magenta-dim:rgba(255,47,151,0.14);--violet:#8b6bff;--live:#ff3b5c;--text:#eef2ff;--text-dim:#8791b4;--text-faint:#5c6488;--radius-lg:18px;--radius-md:13px;--radius-sm:9px}body.light-mode{--bg:#eef2fb;--panel:rgba(255,255,255,0.78);--panel-solid:#ffffff;--panel-soft:#f2f5fc;--line:rgba(24,36,90,0.13);--line-soft:rgba(24,36,90,0.07);--cyan-dim:rgba(34,233,255,0.16);--magenta-dim:rgba(255,47,151,0.16);--text:#12172e;--text-dim:#565f80;--text-faint:#8791a8}body.light-mode header{background:rgba(255,255,255,0.86)}body.light-mode .modal-overlay{background:rgba(80,90,130,0.35)}body.light-mode .drawer-overlay{background:rgba(80,90,130,0.35)}*{box-sizing:border-box;margin:0;padding:0;font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif}html{scroll-behavior:smooth}html{overflow-x:hidden}body{overflow-x:hidden;background:radial-gradient(720px 420px at 12% -6%,rgba(34,233,255,0.10),transparent 60%),radial-gradient(720px 420px at 92% 4%,rgba(255,47,151,0.09),transparent 60%),radial-gradient(900px 600px at 50% 115%,rgba(139,107,255,0.08),transparent 60%),var(--bg);color:var(--text);min-height:100vh;padding-bottom:60px}.num{font-family:'Orbitron','Segoe UI',sans-serif}a{color:inherit;text-decoration:none}button{font-family:inherit}::selection{background:var(--cyan-dim);color:var(--text)}svg.icon{width:18px;height:18px;stroke:url(#iconGrad);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}header{position:sticky;top:0;z-index:50;background:rgba(4,6,14,0.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:13px 5%;display:flex;justify-content:space-between;align-items:center;gap:16px}.hamburger-btn{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--cyan);background:var(--panel-soft);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;box-shadow:0 0 10px rgba(34,233,255,0.35),inset 0 0 10px rgba(34,233,255,0.08);transition:box-shadow .15s,border-color .15s}.hamburger-btn:hover{border-color:var(--magenta);box-shadow:0 0 16px rgba(255,47,151,0.4),inset 0 0 10px rgba(34,233,255,0.08)}.hamburger-bar{width:20px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--magenta))}.header-start{display:flex;align-items:center;gap:12px}.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(2,3,8,0.6);z-index:150}.drawer-overlay.open{display:block}.drawer{position:fixed;top:0;inset-inline-start:0;height:100%;width:270px;max-width:82vw;background:var(--panel-solid);border-inline-end:1px solid var(--line);z-index:151;padding:18px 16px;transform:translateX(-105%);transition:transform .22s ease}html[dir="rtl"] .drawer{transform:translateX(105%)}.drawer.open{transform:translateX(0)}html[dir="rtl"] .drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.drawer-close{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--cyan);background:transparent;color:var(--text-dim);cursor:pointer;box-shadow:0 0 8px rgba(34,233,255,0.2);transition:border-color .15s,color .15s,box-shadow .15s}.drawer-close:hover{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 10px rgba(255,47,151,0.3)}.drawer-link{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;color:var(--text-dim);font-weight:700;font-size:0.86rem;cursor:pointer;margin-bottom:4px}.drawer-link:hover,.drawer-link.active{background:var(--panel-soft);color:var(--cyan)}.drawer-divider{height:1px;background:var(--line-soft);margin:12px 0}.brand{display:flex;align-items:center;flex:0 0 auto}.brand-stack{display:flex;flex-direction:column;font-family:'Orbitron','Segoe UI',sans-serif;font-weight:900;line-height:1.08;letter-spacing:0.5px}.brand-row{font-size:1.05rem;white-space:nowrap}.brand-row.brand-top{color:var(--cyan);text-shadow:0 0 6px var(--cyan),0 0 16px rgba(34,233,255,0.65),0 0 34px rgba(34,233,255,0.35)}.brand-row.brand-bottom{display:flex;align-items:center;gap:5px;color:var(--magenta);text-shadow:0 0 6px var(--magenta),0 0 16px rgba(255,47,151,0.65),0 0 34px rgba(255,47,151,0.35)}.brand-ball{font-size:0.92rem;line-height:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.55))}nav.tabs{display:flex;gap:4px;background:var(--panel-soft);border:1px solid var(--line);border-radius:11px;padding:4px}nav.tabs button{display:flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--text-dim);padding:8px 15px;border-radius:8px;font-weight:700;font-size:0.83rem;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap}nav.tabs button:hover{color:var(--text)}nav.tabs button.active{background:linear-gradient(145deg,rgba(34,233,255,0.14),rgba(139,107,255,0.10));color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(34,233,255,0.3)}.header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.icon-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--cyan);background:var(--panel-soft);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 8px rgba(34,233,255,0.25);transition:color .15s,border-color .15s,box-shadow .15s}.icon-btn:hover{color:var(--magenta);border-color:var(--magenta);box-shadow:0 0 12px rgba(255,47,151,0.35)}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);z-index:300;background:var(--panel-solid);border:1px solid var(--cyan-dim);border-radius:12px;padding:11px 20px;font-size:0.82rem;font-weight:700;color:var(--text);box-shadow:0 10px 30px -8px rgba(0,0,0,0.6),0 0 18px rgba(34,233,255,0.15);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.icon-btn .badge{position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 6px var(--magenta)}.lang-code{font-family:'Orbitron';font-size:0.62rem;font-weight:700;margin-inline-start:3px}.ticker-wrap{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,47,151,0.05),transparent);overflow:hidden;padding:9px 0;display:flex;align-items:center;gap:14px}.ticker-label{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:0 16px;font-weight:800;font-size:0.76rem;color:var(--live);letter-spacing:0.3px;border-inline-end:1px solid var(--line);white-space:nowrap}.pulse{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:pulse 1.4s ease-in-out infinite;flex:0 0 auto}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(0.65)}}.ticker-track{display:flex;gap:34px;white-space:nowrap;animation:scroll-x 32s linear infinite;padding-inline-start:34px}.ticker-wrap:hover .ticker-track{animation-play-state:paused}@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}html[dir="ltr"] .ticker-track{animation-name:scroll-x-ltr}@keyframes scroll-x-ltr{from{transform:translateX(0)}to{transform:translateX(50%)}}.ticker-item{display:flex;direction:ltr;align-items:center;gap:8px;font-size:0.83rem;color:var(--text-dim)}.ticker-item b{color:var(--text);font-weight:700}.ticker-item .num{color:var(--cyan);font-weight:700}.ticker-empty{padding:0 16px;color:var(--text-faint);font-size:0.83rem}
.ticker-empty.err{color:var(--live)}.apif-live-panel .panel-head{flex-wrap:wrap;gap:6px 10px}.apif-live-updated{font-size:0.62rem;color:var(--text-faint);white-space:nowrap}.apif-live-updated.stale{color:var(--live);font-weight:700}.apif-live-panel .panel-body{padding:10px 12px 14px}.apif-match{display:grid;grid-template-columns:1fr 60px 1fr;direction:ltr;align-items:center;gap:9px;padding:10px 8px;border-radius:11px;border:1px solid var(--line-soft);background:var(--panel-soft);margin-bottom:8px}.apif-match .mm-team{flex:none}.dashboard{max-width:1380px;margin:0 auto;padding:22px 5% 0;display:grid;grid-template-columns:290px minmax(0,1fr) 290px;gap:18px;align-items:start}.col-left,.col-center,.col-right{display:flex;flex-direction:column;gap:18px;min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);backdrop-filter:blur(10px);position:relative;overflow:hidden}.panel::before,.panel::after{content:'';position:absolute;width:22px;height:22px;pointer-events:none}.panel::before{top:-1px;inset-inline-start:-1px;border-top:2px solid var(--cyan);border-inline-start:2px solid var(--cyan);border-start-start-radius:var(--radius-lg);opacity:0.65}.panel::after{bottom:-1px;inset-inline-end:-1px;border-bottom:2px solid var(--magenta);border-inline-end:2px solid var(--magenta);border-end-end-radius:var(--radius-lg);opacity:0.65}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px 12px;border-bottom:1px solid var(--line-soft)}.panel-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:0.86rem;letter-spacing:0.3px;color:var(--text)}.panel-title .accent-bar{width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--cyan),var(--violet))}.panel-nav{display:flex;gap:5px}.panel-nav button{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--cyan);background:transparent;color:var(--text-dim);cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 6px rgba(34,233,255,0.2);transition:color .15s,border-color .15s,box-shadow .15s}.panel-nav button:hover{color:var(--magenta);border-color:var(--magenta);box-shadow:0 0 10px rgba(255,47,151,0.3)}.panel-body{padding:13px 17px 17px}.panel-body.no-pad{padding:8px 0 4px}.live-panel{grid-area:live;position:sticky;top:82px}.mini-match{display:flex;direction:ltr;align-items:center;gap:9px;padding:10px 8px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:border-color .15s,background .15s;margin-bottom:6px}.mini-match:hover{border-color:var(--line);background:var(--panel-soft)}.mini-match:last-child{margin-bottom:0}.mini-match .mm-team{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}.mini-match .mm-team img{width:24px;height:24px;object-fit:contain}.mini-match .mm-team span{font-size:0.68rem;font-weight:700;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mini-match .mm-mid{flex:0 0 52px;text-align:center}.mini-match .mm-score{font-family:'Orbitron';font-weight:700;font-size:0.95rem;color:var(--text)}.mini-match.is-live .mm-score{color:var(--live)}.mini-match .mm-clock{font-size:0.62rem;color:var(--live);font-weight:700;display:flex;align-items:center;gap:3px;justify-content:center;margin-top:2px}.empty-hint{color:var(--text-faint);font-size:0.8rem;text-align:center;padding:20px 6px}.chat-panel .panel-body{display:flex;flex-direction:column;gap:10px}.chat-log{display:flex;flex-direction:column;gap:9px;max-height:230px;overflow-y:auto;padding-right:2px}.chat-msg{display:flex;gap:8px;align-items:flex-start}.chat-msg.me{flex-direction:row-reverse}.chat-msg .cm-av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:0.7rem;background:linear-gradient(145deg,var(--violet),var(--cyan));color:#04060e;font-weight:800}.chat-msg.me .cm-av{background:linear-gradient(145deg,var(--cyan),var(--violet))}.chat-msg .cm-bubble{background:var(--panel-soft);border:1px solid var(--line-soft);border-radius:10px;padding:7px 10px;font-size:0.76rem;color:var(--text-dim);line-height:1.55;max-width:82%}.chat-msg.me .cm-bubble{background:linear-gradient(160deg,rgba(34,233,255,0.12),var(--panel-soft));color:var(--text)}.chat-msg.typing .cm-bubble{color:var(--text-faint);font-style:italic}.chat-input-row{display:flex;align-items:center;gap:8px;background:var(--panel-soft);border:1px solid var(--line);border-radius:11px;padding:7px 8px 7px 12px}.chat-input-row input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:0.8rem}.chat-send-btn{width:30px;height:30px;border-radius:9px;background:linear-gradient(90deg,var(--cyan),var(--violet));border:0;color:#04060e;display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer}.chat-send-btn:disabled{opacity:0.5;cursor:default}.chat-hint{font-size:0.62rem;color:var(--text-faint);text-align:center}.hero-panel{grid-area:hero}.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.72rem;font-weight:800;color:var(--cyan);letter-spacing:1px;padding-top:18px}.hero-eyebrow .pulse{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.hero-title{text-align:center;font-family:'Orbitron';font-weight:800;font-size:1.5rem;margin:6px 0 20px;letter-spacing:0.3px;background:linear-gradient(90deg,#fff,var(--cyan) 60%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-body{display:flex;direction:ltr;align-items:center;justify-content:space-between;gap:10px;padding:0 22px 20px}.hero-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}.hero-team .badge-ring{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel-soft);border:1px solid var(--line)}.hero-team.home .badge-ring{box-shadow:0 0 0 1px var(--cyan-dim),0 0 24px -4px rgba(34,233,255,0.35)}.hero-team.away .badge-ring{box-shadow:0 0 0 1px var(--magenta-dim),0 0 24px -4px rgba(255,47,151,0.35)}.hero-team img{width:46px;height:46px;object-fit:contain}.hero-team span{font-family:'Orbitron';font-weight:700;font-size:0.86rem;text-align:center}.hero-mid{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 6px}.hero-vs{font-family:'Orbitron';font-weight:800;font-size:1rem;color:var(--text-faint)}.hero-score{font-family:'Orbitron';font-weight:800;font-size:1.9rem;letter-spacing:2px}.hero-meta{background:var(--panel-soft);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:0.72rem;color:var(--text-dim);text-align:center;white-space:nowrap}.hero-meta b{color:var(--text)}.hero-analysis{margin:0 22px 16px;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 16px}.hero-analysis-title{font-size:0.68rem;font-weight:800;color:var(--violet);letter-spacing:0.5px;margin-bottom:8px;text-align:center}.hero-analysis-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}.hero-analysis-row{font-size:0.75rem;color:var(--text-dim);display:flex;gap:5px}.hero-analysis-row b{color:var(--text);font-weight:700}.hero-countdown-wrap{margin:0 22px 20px;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 18px;text-align:center}.hero-countdown-label{font-size:0.68rem;color:var(--text-dim);font-weight:700;letter-spacing:1px;margin-bottom:5px}.hero-countdown{font-family:'Orbitron';font-weight:800;font-size:1.5rem;letter-spacing:3px;color:var(--cyan);text-shadow:0 0 16px rgba(34,233,255,0.45)}.hero-actions{display:flex;justify-content:center;padding-bottom:22px}.hero-btn{background:linear-gradient(90deg,var(--cyan),var(--violet));color:#04060e;border:0;font-weight:800;font-size:0.86rem;padding:11px 30px;border-radius:10px;cursor:pointer;box-shadow:0 6px 22px -6px rgba(34,233,255,0.55);transition:transform .12s}.hero-btn:active{transform:scale(0.97)}.hero-empty{text-align:center;padding:40px 20px;color:var(--text-faint);font-size:0.88rem}.news-panel{grid-area:news;position:sticky;top:82px}.news-flash{display:inline-flex;align-items:center;gap:5px;background:var(--live);color:#fff;font-size:0.62rem;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:0.5px;margin-bottom:8px}.news-mini{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}.news-mini:last-child{border-bottom:0;padding-bottom:0}.news-mini:first-child{padding-top:0}.news-mini img{width:60px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--panel-soft)}.news-mini .news-thumb-fallback{width:60px;height:46px;border-radius:8px;flex:0 0 auto;background:var(--panel-soft);display:flex;align-items:center;justify-content:center;font-size:1.2rem;opacity:.55}.news-mini .body{min-width:0}.news-mini .headline{font-size:0.78rem;font-weight:700;line-height:1.4;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.news-mini .meta{font-size:0.66rem;color:var(--text-faint)}.main-panel{grid-area:main}.date-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 17px 6px}.date-bar button{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--cyan);background:var(--panel-soft);color:var(--text);cursor:pointer;font-size:0.95rem;box-shadow:0 0 8px rgba(34,233,255,0.22);transition:border-color .15s,color .15s,box-shadow .15s}.date-bar button:hover{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 12px rgba(255,47,151,0.32)}.date-bar span{font-weight:700;font-size:0.88rem;min-width:150px;text-align:center}.search-box{position:relative;padding:10px 17px 0}.search-box input{width:100%;padding:12px 42px 12px 16px;background:var(--panel-soft);border:1px solid var(--line);border-radius:11px;color:var(--text);outline:none;font-size:0.9rem}.search-box input:focus{border-color:var(--cyan)}.search-box svg.icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:31px;color:var(--text-faint)}.search-hint{display:none;background:var(--panel-soft);border:1px solid var(--violet);border-radius:10px;margin:12px 17px 0;padding:11px 14px;font-size:0.82rem;color:var(--text-dim);align-items:center;justify-content:space-between;gap:10px}.search-hint button{background:var(--violet);color:#fff;border:0;border-radius:7px;padding:8px 14px;font-weight:700;font-size:0.78rem;cursor:pointer;white-space:nowrap}.league-block{margin-bottom:18px}.league-block:last-child{margin-bottom:2px}.league-title{display:flex;align-items:center;gap:9px;padding-inline-start:12px;border-inline-start:3px solid var(--violet);margin-bottom:9px;font-weight:700;font-size:0.86rem;color:var(--text)}.league-title img{width:19px;height:19px;border-radius:3px;object-fit:contain;background:#fff1}.match-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:8px;position:relative;display:flex;direction:ltr;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,transform .1s}.match-card:hover{border-color:var(--cyan-dim)}.match-card:active{transform:scale(0.995)}.match-card.is-live{border-color:rgba(255,59,92,0.35);background:linear-gradient(90deg,rgba(255,59,92,0.07),var(--panel-soft) 45%)}.team{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-weight:700;font-size:0.87rem}.team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team.home{justify-content:flex-end;text-align:right}.team.away{justify-content:flex-start;text-align:left}.team img{width:25px;height:25px;flex:0 0 auto;object-fit:contain}.score-info{text-align:center;padding:0 10px;flex:0 0 82px}.score{font-family:'Orbitron';font-size:1.18rem;font-weight:700;color:var(--text)}.match-card.is-live .score{color:var(--live)}.status{font-size:0.7rem;margin-top:3px;color:var(--text-dim)}.status.live{color:var(--live);font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px}.tv-badge{position:absolute;top:7px;inset-inline-end:7px;width:22px;height:22px;border-radius:50%;background:var(--panel);border:1.5px solid var(--cyan);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;padding:0;box-shadow:0 0 6px rgba(34,233,255,0.25);transition:color .15s,border-color .15s,box-shadow .15s}.tv-badge svg{width:12px;height:12px;stroke:url(#iconGrad)}.tv-badge:hover{color:var(--magenta);border-color:var(--magenta);box-shadow:0 0 10px rgba(255,47,151,0.35)}.channel-popover{position:absolute;z-index:60;min-width:190px;max-width:240px;background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 14px 34px -10px rgba(0,0,0,0.55);display:none}.channel-popover.open{display:block}.channel-popover .cp-title{font-size:0.66rem;font-weight:800;color:var(--text-dim);letter-spacing:0.3px;margin-bottom:7px}.channel-popover .cp-note{font-size:0.62rem;color:var(--text-faint);margin-top:7px;line-height:1.5}.channel-chip{display:flex;align-items:center;gap:8px;padding:5px 0}.channel-chip img{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fff1;flex:0 0 auto}.channel-chip .tv-fallback{width:20px;height:20px;border-radius:5px;background:var(--panel-soft);display:flex;align-items:center;justify-content:center;color:var(--text-faint);flex:0 0 auto}.channel-chip .tv-fallback svg{width:11px;height:11px}.channel-chip span{font-size:0.78rem;font-weight:700;color:var(--text)}.broadcast-pill{display:flex;align-items:center;gap:6px;flex:0 0 auto;background:var(--panel-soft);border:1px solid var(--violet);color:var(--violet);border-radius:20px;padding:6px 13px 6px 10px;font-size:0.74rem;font-weight:800;cursor:pointer;white-space:nowrap;margin-inline-end:14px}.broadcast-pill svg{width:14px;height:14px;stroke:url(#iconGrad)}.broadcast-pill:hover{background:rgba(139,107,255,0.12)}.bx-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line-soft)}.bx-row:last-child{border-bottom:0}.bx-time{flex:0 0 52px;font-family:'Orbitron';font-size:0.82rem;font-weight:700;color:var(--cyan);text-align:center}.bx-teams{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:0.8rem;font-weight:700}.bx-teams img{width:18px;height:18px;object-fit:contain;flex:0 0 auto}.bx-chans{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.bx-country-note{font-size:0.72rem;color:var(--text-dim);text-align:center;padding:2px 4px 14px;line-height:1.6}.bx-country-note b{color:var(--cyan)}.state-msg{text-align:center;padding:44px 20px;color:var(--text-dim);font-size:0.88rem}.state-msg.err{color:var(--live)}.news-card{display:flex;gap:12px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;color:var(--text)}.news-card:hover{border-color:var(--cyan-dim)}.news-card img{width:88px;height:66px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--panel)}.news-card .news-thumb-fallback{width:88px;height:66px;border-radius:8px;flex:0 0 auto;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:1.5rem;opacity:.55}.news-card .body{min-width:0}.news-card .headline{font-weight:700;font-size:0.87rem;line-height:1.4;margin-bottom:4px}.news-card .meta{font-size:0.71rem;color:var(--text-faint)}.extra-row{grid-area:extra;display:grid;grid-template-columns:1fr 1fr;gap:18px}.fixtures-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.fixtures-scroll::-webkit-scrollbar{height:5px}.fixtures-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}.fx-card{flex:0 0 128px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:11px 8px;text-align:center;cursor:pointer;transition:border-color .15s}.fx-card:hover{border-color:var(--cyan-dim)}.fx-card .fx-time{font-size:0.66rem;color:var(--cyan);font-weight:700;margin-bottom:7px}.fx-card .fx-teams{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:5px}.fx-card img{width:20px;height:20px;object-fit:contain}.fx-card .fx-vs{font-size:0.62rem;color:var(--text-faint);font-weight:800}.fx-card .fx-names{font-size:0.62rem;color:var(--text-dim);line-height:1.5}.stat-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:0.78rem}.stat-row .val{flex:0 0 30px;font-weight:700;text-align:center;font-family:'Orbitron'}.stat-row .bar-wrap{flex:1;height:6px;background:var(--panel-solid);border-radius:3px;overflow:hidden;display:flex}.stat-row .bar-home{background:var(--cyan);height:100%}.stat-row .bar-away{background:var(--magenta);height:100%}.stat-row .label{flex:0 0 84px;text-align:center;color:var(--text-dim);font-size:0.72rem}.mobile-tabs{display:none;padding:16px 5% 0;gap:10px}
/* [جديد] زر "تقييم تشكيلة الفنتازي بالـ AI" — موبايل بس، أسفل صف تابات
   كل المباريات/مباشر/أخبار/فنتازي/الترتيب فوق. عريض وواضح (لون مختلف/متوهج
   عن التابات العادية عشان يبان كميزة مميزة) بس ارتفاعه بسيط عشان ماياخدش
   مساحة كبيرة من الشاشة. مخفي افتراضيًا (ديسكتوب)، وبيظهر جوه نفس
   media query بتاع .mobile-tabs تحت. */
/* [إصلاح] <button> عنصر form control — width:auto بيتصرف كـ"shrink-to-fit"
   (بيتصاغر على قد محتواه) حتى مع display:flex، مش زي div عادي بيمتلئ العرض
   المتاح تلقائيًا. عشان كده لازم width:90% صريحة + margin:auto لتوسيطه، بدل
   ما نعتمد على margin:0 5% لوحدها (اللي سابته صغير قوي فعليًا). */
.fantasy-ai-banner{display:none;width:90%;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;padding:12px 14px;border-radius:13px;border:1.5px solid var(--violet);background:linear-gradient(160deg,rgba(139,107,255,0.16),var(--panel));color:var(--text);font-weight:800;font-size:0.8rem;cursor:pointer;box-shadow:0 0 10px rgba(139,107,255,0.25);transition:box-shadow .15s}
.fantasy-ai-banner:hover{box-shadow:0 0 14px rgba(139,107,255,0.4)}
.fantasy-ai-banner-icon{font-size:1rem;line-height:1}.mobile-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel);border:1.5px solid var(--cyan-dim);border-radius:13px;padding:11px 4px;color:var(--text-dim);cursor:pointer;font-size:0.68rem;font-weight:700;box-shadow:0 0 6px rgba(34,233,255,0.15);transition:color .15s,border-color .15s,box-shadow .15s,background .15s}.mobile-tabs button.active{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(34,233,255,0.3);background:linear-gradient(160deg,rgba(34,233,255,0.10),var(--panel))}.mobile-tabs button svg.icon{width:20px;height:20px}.modal-overlay{display:none;position:fixed;inset:0;background:rgba(2,3,8,0.68);z-index:200;align-items:flex-end;backdrop-filter:blur(3px)}.modal-overlay.open{display:flex}.modal-sheet{background:var(--panel-solid);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:760px;margin:0 auto;max-height:88vh;overflow-y:auto;padding:18px 18px 30px;animation:sheet-up .2s ease-out}@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{width:100%;display:flex;justify-content:center;margin-bottom:12px;cursor:pointer}.modal-close span{width:36px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--magenta))}.modal-header{display:flex;direction:ltr;align-items:center;justify-content:space-between;margin-bottom:20px;gap:8px}.modal-header .team{flex-direction:column;gap:7px;font-size:0.82rem;text-align:center}.modal-header .team img{width:42px;height:42px}.modal-header .mid{text-align:center;flex:0 0 90px}.modal-header .mid .score{font-size:1.6rem}.modal-section-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.83rem;color:var(--text-dim);margin:20px 0 12px}.modal-section-title .accent-bar{width:4px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--cyan),var(--violet))}.timeline-item{display:flex;align-items:center;gap:10px;font-size:0.82rem;margin-bottom:10px}.timeline-item .min{flex:0 0 34px;color:var(--text-dim);font-weight:700}.timeline-item .icon{flex:0 0 20px;text-align:center}.timeline-item .who{flex:1}.recap{font-size:0.85rem;line-height:1.7;color:var(--text-dim);background:var(--panel-soft);border:1px solid var(--line-soft);padding:13px;border-radius:11px}.team-focus-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:0 17px}.team-focus-header img{width:44px;height:44px;object-fit:contain}.team-focus-header h2{font-size:1.05rem}.team-focus-header img.clickable,.mm-team img.clickable,.team img.clickable,.fx-teams img.clickable{cursor:pointer}.team-focus-header img.clickable:hover,.mm-team img.clickable:hover,.team img.clickable:hover,.fx-teams img.clickable:hover{filter:drop-shadow(0 0 6px var(--cyan))}.winprob-wrap{margin:0 22px 16px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.winprob-title{font-size:0.68rem;font-weight:800;color:var(--cyan);letter-spacing:0.5px;margin-bottom:9px;text-align:center}.winprob-bar{display:flex;direction:ltr;height:9px;border-radius:5px;overflow:hidden;background:var(--panel-soft);border:1px solid var(--line-soft)}.winprob-bar .wp-home{background:linear-gradient(90deg,var(--cyan),var(--violet))}.winprob-bar .wp-draw{background:var(--text-faint);opacity:0.35}.winprob-bar .wp-away{background:linear-gradient(90deg,var(--violet),var(--magenta))}.winprob-labels{display:flex;direction:ltr;justify-content:space-between;margin-top:7px;font-size:0.7rem;font-weight:700;color:var(--text-dim)}.winprob-labels b.wp-h{color:var(--cyan)}.winprob-labels b.wp-d{color:var(--text-faint)}.winprob-labels b.wp-a{color:var(--magenta)}.winprob-note{text-align:center;font-size:0.6rem;color:var(--text-faint);margin-top:8px}.spotlight-panel{grid-area:spotlight}.spotlight-scroll{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 4px}.spotlight-card{flex:0 0 200px;background:var(--panel-soft);border:1px solid var(--line);border-radius:13px;padding:12px;cursor:pointer;transition:border-color .15s}.spotlight-card:hover{border-color:var(--cyan-dim)}.spotlight-card .sp-league{font-size:0.6rem;font-weight:800;color:var(--violet);letter-spacing:0.4px;margin-bottom:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotlight-card .sp-teams{display:flex;direction:ltr;align-items:center;justify-content:center;gap:8px}.spotlight-card img{width:30px;height:30px;object-fit:contain}.spotlight-card .sp-mid{font-family:'Orbitron';font-weight:800;font-size:0.85rem;color:var(--text);min-width:34px;text-align:center}.spotlight-card .sp-names{margin-top:8px;font-size:0.62rem;color:var(--text-dim);text-align:center;line-height:1.5}.spotlight-card .sp-time{margin-top:6px;font-size:0.62rem;font-weight:700;color:var(--cyan);text-align:center}.spotlight-card.is-live .sp-time{color:var(--live)}.spotlight-empty{color:var(--text-faint);font-size:0.82rem;padding:6px 4px}.search-results{position:absolute;top:100%;inset-inline:17px;margin-top:6px;background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;z-index:40;max-height:340px;overflow-y:auto;box-shadow:0 14px 30px -10px rgba(0,0,0,0.6)}.sr-group-label{font-size:0.65rem;font-weight:800;color:var(--text-faint);letter-spacing:0.5px;padding:9px 14px 4px}.sr-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer}.sr-item:hover{background:var(--panel-soft)}.sr-item img{width:26px;height:26px;object-fit:contain;border-radius:50%}.sr-item .sr-name{font-size:0.8rem;font-weight:700;color:var(--text)}.sr-item .sr-sub{font-size:0.65rem;color:var(--text-dim);margin-inline-start:auto}.player-focus-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:0 17px}.player-focus-header img{width:64px;height:64px;object-fit:cover;border-radius:50%;border:2px solid var(--cyan-dim);background:var(--panel-soft)}.player-focus-header h2{font-size:1.05rem}.player-focus-header .pf-sub{font-size:0.75rem;color:var(--text-dim);margin-top:3px}.player-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:0 17px}.player-stat-box{background:var(--panel-soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}.player-info-lines{padding:0 17px 4px;display:flex;flex-direction:column;gap:4px}.pf-line{font-size:0.78rem;color:var(--text-dim)}.pf-line b{color:var(--text);font-weight:700;margin-inline-end:4px}.pf-flag{width:18px;height:13px;border-radius:2px;object-fit:cover;vertical-align:middle;margin-inline-start:6px}.player-roadmap{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:4px 17px 10px;-webkit-overflow-scrolling:touch}.roadmap-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;min-width:78px;text-align:center;padding:8px 6px;border-radius:10px;background:var(--panel-soft);border:1px solid var(--line-soft)}.roadmap-step.current{border-color:var(--cyan-dim);box-shadow:0 0 0 1px var(--cyan-dim) inset}.roadmap-step img{width:34px;height:34px;object-fit:contain}.roadmap-step-team{font-size:0.68rem;font-weight:700;color:var(--text);max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roadmap-step-years{font-size:0.6rem;color:var(--text-dim)}.roadmap-arrow{flex:0 0 auto;color:var(--text-faint);font-size:0.9rem}.pitch-wrap{padding:0 17px 14px}.pitch-meta{font-size:0.72rem;color:var(--text-dim);text-align:center;margin-bottom:8px}.pitch-field{position:relative;width:100%;aspect-ratio:2/3;background:linear-gradient(180deg,#0e4327,#136339);border:2px solid rgba(255,255,255,0.28);border-radius:12px;overflow:hidden}.pitch-field::before{content:'';position:absolute;left:50%;top:50%;width:64px;height:64px;border:2px solid rgba(255,255,255,0.28);border-radius:50%;transform:translate(-50%,-50%)}.pitch-field::after{content:'';position:absolute;left:5%;right:5%;top:50%;height:2px;background:rgba(255,255,255,0.28)}.pitch-player{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:2}.pitch-player-badge{width:24px;height:24px;border-radius:50%;background:var(--panel-solid);border:2px solid var(--cyan);color:var(--text);font-size:0.62rem;font-weight:800;display:flex;align-items:center;justify-content:center}.pitch-player-name{font-size:0.53rem;color:#fff;background:rgba(0,0,0,0.5);padding:1px 4px;border-radius:4px;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis}.player-stat-box .v{font-family:'Orbitron';font-weight:800;font-size:1.1rem;color:var(--cyan)}.player-stat-box .l{font-size:0.65rem;color:var(--text-dim);margin-top:3px}.players-panel{grid-area:players}.players-tabs{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}.players-tabs button{background:var(--panel-soft);border:1px solid var(--line);color:var(--text-dim);padding:6px 13px;border-radius:20px;font-size:0.72rem;font-weight:700;cursor:pointer}.players-tabs button.active{color:var(--bg);background:linear-gradient(90deg,var(--cyan),var(--violet));border-color:transparent}.gw-picker{display:flex;align-items:center;gap:6px;margin-inline-start:auto;background:var(--panel-soft);border:1px solid var(--line);border-radius:20px;padding:4px 12px 4px 8px}.gw-picker svg.icon{width:15px;height:15px;color:var(--cyan)}.gw-picker select{background:transparent;border:0;color:var(--text);font-family:'Tajawal';font-weight:700;font-size:0.75rem;cursor:pointer;outline:none}.gw-picker select option{background:var(--panel-solid);color:var(--text)}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.player-row{display:flex;align-items:center;gap:11px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s}.player-row:hover{border-color:var(--cyan-dim)}.player-row .pr-rank{font-family:'Orbitron';font-weight:800;font-size:0.85rem;color:var(--text-faint);flex:0 0 20px}.player-row img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--panel);flex:0 0 auto}.player-row .pr-body{flex:1;min-width:0}.player-row .pr-name{font-size:0.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-row .pr-team{font-size:0.64rem;color:var(--text-dim)}.player-row .pr-pts{font-family:'Orbitron';font-weight:800;font-size:0.95rem;color:var(--cyan);flex:0 0 auto;text-align:end}.player-row .pr-pts small{display:block;font-family:'Tajawal';font-size:0.55rem;color:var(--text-faint);font-weight:700}.standings-league-row{display:flex;align-items:center;gap:8px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin-bottom:14px}.standings-league-row svg.icon{width:16px;height:16px;color:var(--cyan);flex:0 0 auto}.standings-league-row select{flex:1;background:transparent;border:0;color:var(--text);font-family:'Tajawal';font-weight:700;font-size:0.82rem;cursor:pointer;outline:none}.standings-league-row select option{background:var(--panel-solid);color:var(--text)}.standings-group{margin-bottom:16px}.standings-group:last-child{margin-bottom:0}.standings-group-title{font-size:0.72rem;font-weight:800;color:var(--violet);letter-spacing:0.3px;margin-bottom:8px;padding:0 2px}.standings-table{display:flex;flex-direction:column;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden}.standings-row{display:flex;align-items:center;gap:6px;padding:9px 10px;border-bottom:1px solid var(--line-soft);font-size:0.76rem}.standings-row:last-child{border-bottom:0}.standings-row.standings-head{background:rgba(34,233,255,0.06);font-weight:800;font-size:0.66rem;color:var(--text-faint);letter-spacing:0.3px;text-transform:uppercase}.standings-row .st-rank{flex:0 0 22px;text-align:center;font-family:'Orbitron';font-weight:700;color:var(--text-dim)}.standings-row.standings-head .st-rank{font-family:'Tajawal'}.standings-row .st-team{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}.standings-row .st-team img{width:20px;height:20px;object-fit:contain;flex:0 0 auto}.standings-row .st-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.standings-row .st-num{flex:0 0 28px;text-align:center;color:var(--text-dim);font-family:'Orbitron';font-weight:700;font-size:0.74rem}.standings-row.standings-head .st-num{font-family:'Tajawal';font-weight:800}.standings-row .st-pts{color:var(--cyan);font-weight:800}@media (max-width:1180px){.dashboard{grid-template-columns:250px minmax(0,1fr) 250px}}@media (max-width:960px){header{padding:12px 5%}nav.tabs{display:none}.mobile-tabs{display:flex}.fantasy-ai-banner{display:flex}.dashboard{display:flex;flex-direction:column;align-items:stretch;grid-template-columns:1fr;padding:18px 5% 0}.col-left,.col-center,.col-right{display:contents}#hero-panel{order:1}#myteam-panel{order:2}.spotlight-panel{order:3}.live-panel{order:4}#chat-panel{order:5}.main-panel{order:6}#fixtures-panel{order:7}#live-stats-panel{order:8}.news-panel{order:9}#players-panel{order:10}#standings-panel{order:11}#teams-directory-panel{order:12}#apif-live-panel{order:13}.live-panel,.news-panel{position:static}.tab-hidden{display:none !important}.dashboard > *{width:100%;max-width:100%;align-self:stretch}.hero-title{font-size:1.2rem}.hero-body{padding:0 12px 16px;flex-wrap:nowrap}.hero-team .badge-ring{width:60px;height:60px}.hero-team img{width:36px;height:36px}.hero-team span{font-size:0.72rem}.hero-score{font-size:1.4rem}.hero-countdown{font-size:1.2rem;letter-spacing:2px}}@media (max-width:520px){.brand-row{font-size:0.82rem}.brand-ball{font-size:0.7rem}.hamburger-btn{width:36px;height:36px;border-radius:10px}.hamburger-bar{width:16px}.hero-meta{display:none}}

/* ===================================================================
   [جديد] مساحات إعلانية (Google AdSense) — شريط جانبي يمين/شمال (ديسكتوب
   بس) + بانر أفقي بين أقوى مباريات اليوم وقائمة المباريات (ديسكتوب وموبايل
   مع بعض). كل الأماكن دي بارتفاع/مساحة محجوزة من الأول عشان الإعلان لما
   يحمّل ميعملش قفزة (layout shift) في باقي المحتوى.
   =================================================================== */
.ad-slot{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-slot .adsbygoogle{width:100%}
.ad-slot-label{position:absolute;top:6px;inset-inline-start:10px;font-size:0.6rem;font-weight:700;letter-spacing:0.5px;color:var(--text-faint);opacity:0.75;z-index:1;pointer-events:none}
.ad-slot--sidebar{min-height:250px;max-height:600px}
.ad-slot--sidebar .adsbygoogle{min-height:250px;max-height:600px}
.ad-slot--banner{min-height:100px}
.ad-slot--banner .adsbygoogle{min-height:100px}
/* [جديد] لو جوجل لسه مبعتش إعلان حقيقي للمكان ده (data-ad-status="unfilled" —
   طبيعي في أول فترة حساب AdSense)، بنخفي المساحة المحجوزة كلها بدل ما تفضل
   ظاهرة فاضية بارتفاعها الكامل. الكلاس is-unfilled بيتحط تلقائيًا من app.js. */
.ad-slot.is-unfilled{display:none}
@media (max-width:960px){
  /* الشريط الجانبي مطلوب ديسكتوب بس — بيختفي تمامًا على الموبايل */
  .ad-slot--sidebar{display:none}
  /* البانر الأفقي بيفضل ظاهر على الموبايل، بعد "المواجهة القادمة" و"أقوى
     مباريات اليوم" وقبل باقي الأقسام (نفس ترتيب order بتاع باقي اللوحات) */
  .ad-slot--banner{order:3}
}

/* ===================================================================
   [جديد] شات المباراة كـ Popup على الموبايل — زرار عائم (#chat-fab) بيفتح
   ويقفل لوحة الشات (#chat-panel) بدل ما تكون قسم ثابت جوه الصفحة. الديسكتوب
   مش بيتأثر خالص (اللوحة فاضلة زي ما هي جوه العمود الجانبي).
   =================================================================== */
.chat-close-btn{display:none}
.chat-fab{display:none;position:fixed;bottom:20px;inset-inline-end:18px;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--cyan);background:linear-gradient(135deg,var(--panel-solid),var(--panel-soft));color:var(--cyan);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 18px rgba(34,233,255,0.35);z-index:212;padding:0;transition:transform .15s ease}
.chat-fab:active{transform:scale(0.92)}
.chat-fab .icon{width:26px;height:26px}
.chat-fab-dot{position:absolute;top:6px;inset-inline-end:6px;width:9px;height:9px;border-radius:50%;background:var(--magenta);box-shadow:0 0 6px var(--magenta)}
.chat-fab.is-active{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s}
.chat-popup-overlay{display:none;position:fixed;inset:0;background:rgba(2,3,8,0.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:210}
.chat-popup-overlay.open{display:block}
@media (max-width:960px){
  .chat-fab{display:flex}
  .chat-close-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:var(--panel-soft);color:var(--text-dim);cursor:pointer;font-size:0.85rem;flex:0 0 auto}
  #chat-panel{position:fixed;bottom:0;inset-inline-start:3%;inset-inline-end:3%;max-width:480px;margin:0 auto;max-height:78vh;border-radius:20px 20px 0 0;z-index:211;transform:translateY(115%);transition:transform .25s ease;box-shadow:0 -8px 30px rgba(0,0,0,0.4);display:flex !important;flex-direction:column}
  #chat-panel.chat-open{transform:translateY(0)}
  #chat-panel .panel-body{flex:1;min-height:0;display:flex;flex-direction:column}
  #chat-panel .chat-log{flex:1;min-height:0;max-height:none}
}

/* ===================================================================
   [جديد] مشاركة نتيجة/توقع المباراة كصورة (واتساب/تويتر) — زرار داخل
   مودال تفاصيل المباراة، وكانفاس مؤقت (مش ظاهر) بيتحط في صفحة الـ HTML
   وقت التصدير بس.
   =================================================================== */
.share-result-btn{display:inline-flex;align-items:center;gap:8px}

/* ===================================================================
   [جديد] متابعة فريق + إشعارات فورية (Web Push) — زرار "متابعة" بيظهر
   جوه مودال تفاصيل المباراة تحت كل شعار فريق، وبانر صغير أول مرة يفتح
   فيه حد الموقع يشرح الميزة باختصار.
   =================================================================== */
.follow-team-btn{margin-top:6px;display:inline-flex;align-items:center;gap:5px;background:var(--panel-soft);border:1.5px solid var(--line);color:var(--text-dim);border-radius:16px;padding:5px 12px;font-size:0.68rem;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.follow-team-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.follow-team-btn.is-following{background:linear-gradient(90deg,var(--cyan-dim),var(--magenta-dim));border-color:var(--cyan);color:var(--cyan)}
.push-promo-banner{position:fixed;bottom:16px;inset-inline:16px;max-width:420px;margin:0 auto;background:var(--panel-solid);border:1px solid var(--cyan);border-radius:14px;padding:14px 16px;box-shadow:0 14px 34px -10px rgba(0,0,0,0.6);z-index:220;display:flex;align-items:center;gap:12px;transform:translateY(140%);transition:transform .3s ease}
.push-promo-banner.show{transform:translateY(0)}
.push-promo-banner .ppb-text{flex:1;font-size:0.78rem;color:var(--text-dim);line-height:1.5}
.push-promo-banner .ppb-actions{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.push-promo-banner button{border:0;border-radius:8px;padding:7px 14px;font-size:0.72rem;font-weight:800;cursor:pointer;white-space:nowrap}
.push-promo-banner .ppb-allow{background:linear-gradient(90deg,var(--cyan),var(--violet));color:#04060e}
.push-promo-banner .ppb-dismiss{background:transparent;color:var(--text-faint)}
@media (max-width:960px){.push-promo-banner{bottom:92px}}

/* ===================================================================
   [جديد] "الملعب المباشر" — محاكاة مرئية لملعب + تشكيل + كورة متحركة
   لمباريات لايف بس (مش بث حقيقي ولا بيانات لاعبين فعلية — شرح ده موجود
   نصيًا تحت الملعب نفسه في live-pitch-note). المنطق في app.js.
   =================================================================== */
.live-pitch-toggle-btn{background:linear-gradient(90deg,var(--violet),var(--magenta))}
.live-pitch-wrap{margin:0 4px 18px;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px}
.pitch{position:relative;direction:ltr;width:100%;aspect-ratio:105/68;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(90deg,#0b6e35 0,#0b6e35 8%,#0e7d3c 8%,#0e7d3c 16%);border:2px solid rgba(255,255,255,0.55);box-shadow:inset 0 0 30px rgba(0,0,0,0.35)}
.pitch::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,0.55);transform:translateX(-1px)}
.pitch::after{content:'';position:absolute;top:50%;left:50%;width:19%;aspect-ratio:1;border:2px solid rgba(255,255,255,0.55);border-radius:50%;transform:translate(-50%,-50%)}
.pitch-box{position:absolute;top:20%;bottom:20%;width:11%;border:2px solid rgba(255,255,255,0.55)}
.pitch-box.left{left:0;border-left:0}
.pitch-box.right{right:0;border-right:0}
.pitch-player{position:absolute;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,0.5);animation:pitch-drift var(--dur,3.2s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.pitch-player.home{background:linear-gradient(145deg,var(--cyan),var(--violet))}
.pitch-player.away{background:linear-gradient(145deg,var(--magenta),var(--violet))}
.pitch-ball{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cfd4e6 60%,#8791b4);box-shadow:0 0 8px rgba(255,255,255,0.8);transform:translate(-50%,-50%);z-index:2}
.live-pitch-note{font-size:0.66rem;color:var(--text-faint);text-align:center;margin-top:10px;line-height:1.6}
@keyframes pitch-drift{0%,100%{margin-left:0;margin-top:0}50%{margin-left:var(--jx,3px);margin-top:var(--jy,2px)}}
@media (max-width:520px){.pitch-player{width:11px;height:11px}.pitch-ball{width:8px;height:8px}}
/* [جديد] صفحة المقال الداخلية (news-article) — بدل ما نودي الزائر لموقع خارجي */
.news-card,.news-mini{cursor:pointer}
.news-card:focus-visible,.news-mini:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.article-page{max-width:760px;margin:0 auto;padding:0 17px 10px;animation:sheet-up .2s ease-out}
.article-back-btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel-soft);border:1.5px solid var(--cyan);color:var(--cyan);font-weight:800;font-size:0.78rem;padding:9px 16px;border-radius:20px;cursor:pointer;box-shadow:0 0 8px rgba(34,233,255,0.2);transition:border-color .15s,color .15s,box-shadow .15s;margin-bottom:16px}
.article-back-btn:hover{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 12px rgba(255,47,151,0.3)}
.article-hero-img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line);margin-bottom:18px;background:var(--panel-soft)}
.article-title{font-size:1.25rem;font-weight:800;line-height:1.5;color:var(--text);margin-bottom:10px}
.article-meta{font-size:0.74rem;color:var(--text-faint);font-weight:700;letter-spacing:0.2px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.article-source-link{color:var(--cyan);text-decoration:none;font-weight:800}
.article-source-link:hover{text-decoration:underline}
.standings-stale-note{text-align:center;font-size:0.66rem;color:var(--text-faint);margin-bottom:10px;padding:6px 10px;background:var(--panel-soft);border:1px solid var(--line-soft);border-radius:10px}
.article-body{font-size:0.92rem;line-height:1.95;color:var(--text-dim)}
.article-body p{margin-bottom:16px}
.article-body p:last-child{margin-bottom:0}
@media (max-width:520px){.article-title{font-size:1.08rem}.article-hero-img{max-height:220px}}
/* [جديد] أيقونة نتيجة بحث "دوري/بطولة" في القايمة الموحدة — بديل الصورة عشان
   الدوريات مالهاش لوجو محلي زي الفرق */
.sr-item .sr-league-ico{width:26px;height:26px;border-radius:50%;background:var(--panel-soft);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex:0 0 auto}

/* [جديد] نص مخفي بصريًا بس مقروء لمحركات البحث وقارئات الشاشة — مستخدم في h1
   الهيدر عشان يديله سياق أوصف من مجرد اسم البراند "FOOTBALL LEGENDS" */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* [جديد] تشكيلة الفريقين مع بعض في مودال تفاصيل المباراة — نفس ملعب .pitch-field
   بس بنسبة أطول (أرتفاع أكبر) عشان يستوعب الـ22 لاعب براحة، والمضيف ياخد نصه
   السفلي والضيف ياخد نصه العلوي (مرسومين ومتجهين لبعض في النص، زي عرض التشكيلتين
   في تطبيقات الرياضة المعروفة) */
.pitch-field-dual{aspect-ratio:3/4}
.pitch-wrap-dual{padding-bottom:18px}
.pitch-meta-dual{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:0.74rem;font-weight:700}
.pitch-meta-dual .pitch-meta-home{color:var(--cyan);display:flex;align-items:center;gap:6px}
.pitch-meta-dual .pitch-meta-away{color:var(--magenta);display:flex;flex-direction:row-reverse;align-items:center;gap:6px}
.pitch-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pitch-dot-home{background:var(--cyan)}
.pitch-dot-away{background:var(--magenta)}
.pitch-player-badge-home{border-color:var(--cyan)}
.pitch-player-badge-away{border-color:var(--magenta)}
/* [جديد — إعادة تصميم] تشكيلة المباريات (فريق واحد أو الفريقين مع بعض) بنفس
   الشكل البصري بتاع كروت تشكيلة الفنتازي بالظبط: دايرة "صورة" (هنا أيقونة
   لاعب عامة بدل صورة حقيقية غير متوفرة من ESPN لكل الدوريات) + شارة رقم
   القميص عايمة فوقها + اسم اللاعب في شريط داكن تحتها. */
.lineup-player{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;z-index:2;width:52px}
.lineup-avatar{position:relative;width:34px;height:34px;border-radius:50%;background:var(--panel-solid);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;margin:0 auto}
.lineup-avatar svg{width:18px;height:18px;fill:rgba(255,255,255,0.4)}
.lineup-avatar-away{border-color:var(--magenta)}
.lineup-jersey{position:absolute;top:-6px;inset-inline-start:2px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--panel-solid);border:1.5px solid var(--cyan);color:#fff;font-size:0.56rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:3}
.lineup-jersey-away{border-color:var(--magenta)}
.lineup-name{direction:ltr;font-size:0.52rem;font-weight:700;color:#fff;background:rgba(0,0,0,0.55);padding:1px 4px;border-radius:4px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pitch-field-dual .lineup-player{width:44px}
.pitch-field-dual .lineup-avatar{width:26px;height:26px}
.pitch-field-dual .lineup-avatar svg{width:14px;height:14px}
.pitch-field-dual .lineup-jersey{min-width:15px;height:15px;font-size:0.5rem}
.pitch-field-dual .lineup-name{font-size:0.46rem}

/* [جديد] "عاجل الآن" (Breaking Now) — شريط ملخصات فورية لمباريات الأندية الكبرى،
   نفس بنية .ticker-wrap تمامًا بس بلون مميز (بنفسجي) عشان يتفرق بصريًا عن شريط
   المباريات المباشرة (الأحمر) فوقه. لو القائمة فاضية، الشريط مخفي بالكامل من
   app.js (display:none) فمفيش أي مساحة فاضية أو تأثير على باقي الصفحة. */
.trending-wrap{background:linear-gradient(180deg,rgba(139,107,255,0.08),transparent)}
.trending-label{color:var(--violet)}
.trending-pulse{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.trending-item{gap:10px}
.trending-item .trending-recap{color:var(--text-faint);font-size:0.76rem;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:4px}
.auth-buttons{display:flex;flex-direction:column;gap:10px;align-items:center;padding:6px 4px 0}
.google-btn-slot{min-height:44px;display:flex;align-items:center;justify-content:center}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:260px;padding:11px 18px;border-radius:999px;border:0;font-weight:700;font-size:0.85rem;cursor:pointer;transition:opacity .15s}
.auth-btn:disabled{opacity:0.5;cursor:default}
.auth-btn-facebook{background:#1877f2;color:#fff}
.auth-btn-facebook:hover{opacity:0.92}
.auth-btn-google{background:#131314;border:1px solid rgba(255,255,255,0.18);color:#fff}
.auth-btn-google:hover{opacity:0.92}
.auth-btn-google svg{flex:0 0 auto}
.auth-btn-secondary{background:var(--panel-soft);border:1px solid var(--line);color:var(--text);max-width:none;width:auto;white-space:nowrap}
.auth-btn-secondary:hover{border-color:var(--cyan-dim)}
.account-head{display:flex;align-items:center;gap:12px;padding:2px 4px 6px}
.account-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan-dim)}
.account-name{font-weight:800;font-size:1rem;color:var(--text)}
.account-row{display:flex;gap:8px;align-items:center}
.account-row input{flex:1;padding:11px 14px;background:var(--panel-soft);border:1px solid var(--line);border-radius:11px;color:var(--text);outline:none;font-size:0.85rem;min-width:0}
.account-row input:focus{border-color:var(--cyan)}
.fpl-pitch-player{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2}
.fpl-cap-badge{position:absolute;top:-6px;inset-inline-end:-6px;width:16px;height:16px;border-radius:50%;background:var(--live);color:#fff;font-size:0.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.4);z-index:3}
.fpl-player-badge{border-color:var(--violet)}
@media (max-width:520px){.auth-btn{max-width:100%}.account-row{flex-wrap:wrap}.account-row input{width:100%}}
/* [جديد — إعادة تصميم تشكيلة الفانتازي] عرض بكروت لاعبين حقيقية (صور رسمية) زي تطبيق FPL بالظبط، بدل النقط الصغيرة القديمة */
.fpl2-wrap{padding:2px 0 4px}
.fpl2-topbar{display:flex;justify-content:center;margin-bottom:10px}
.fpl2-modeswitch{display:inline-flex;background:var(--panel-soft);border:1px solid var(--line);border-radius:20px;padding:3px;gap:2px}
.fpl2-modeswitch button{border:none;background:transparent;color:var(--text-dim);font-size:0.7rem;font-weight:800;padding:6px 16px;border-radius:16px;cursor:pointer;white-space:nowrap;font-family:inherit}
.fpl2-modeswitch button.active{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#04060e}
.fpl2-chipbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.fpl2-chip{font-size:0.6rem;font-weight:700;padding:4px 10px;border-radius:12px;background:var(--panel-soft);border:1px solid var(--line);color:var(--text-faint)}
.fpl2-chip.active{background:var(--magenta-dim);border-color:var(--magenta);color:var(--magenta)}
.fpl2-meta{font-size:0.72rem;color:var(--text-dim);text-align:center;margin-bottom:4px}
.fpl2-meta b{color:var(--text)}
.fpl2-pitch{position:relative;margin-top:8px;background:linear-gradient(180deg,#0e4327,#136339);border:2px solid rgba(255,255,255,0.28);border-radius:14px;padding:16px 4px 10px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.fpl2-pitch::before{content:'';position:absolute;left:50%;top:42%;width:56px;height:56px;border:2px solid rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.fpl2-row{display:flex;justify-content:space-evenly;gap:2px;position:relative;z-index:1}
.fpl2-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;width:19%;max-width:64px}
.fpl2-photo-wrap{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--panel-solid);border:2px solid rgba(255,255,255,0.55);flex:0 0 auto}
.fpl2-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fpl2-pts{position:absolute;top:-6px;inset-inline-start:2px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--panel-solid);border:1.5px solid var(--cyan);color:#fff;font-size:0.56rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:3}
.fpl2-cap{position:absolute;top:-6px;inset-inline-end:2px;width:15px;height:15px;border-radius:50%;background:var(--live);color:#fff;font-size:0.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid #fff;z-index:3}
.fpl2-name{direction:ltr;font-size:0.52rem;font-weight:700;color:#fff;background:rgba(0,0,0,0.55);padding:1px 4px;border-radius:4px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.fpl2-opp{direction:ltr;font-size:0.46rem;color:rgba(255,255,255,0.75);font-weight:700}
.fpl2-opp.fdr1,.fpl2-opp.fdr2{color:#7CFFB2}
.fpl2-opp.fdr3{color:#FFE38A}
.fpl2-opp.fdr4,.fpl2-opp.fdr5{color:#FF9A9A}
.fpl2-bench{margin-top:2px;padding-top:10px;border-top:1px dashed rgba(255,255,255,0.25)}
.fpl2-bench-label{font-size:0.6rem;color:rgba(255,255,255,0.7);text-align:center;margin-bottom:6px;font-weight:700}
.fpl2-bench-row{display:flex;justify-content:space-evenly;gap:2px}
.fpl2-bench-slot{width:19%;max-width:64px;display:flex;flex-direction:column;align-items:center}
.fpl2-bench-slot .fpl2-card{width:100%;max-width:100%;opacity:0.82}
.fpl2-bench-pos{font-size:0.48rem;color:rgba(255,255,255,0.65);font-weight:800;margin-bottom:2px;text-align:center}
.fpl2-suggestions{display:flex;flex-direction:column;gap:8px}
.fpl2-sugg-card{display:flex;align-items:center;gap:7px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.fpl2-sugg-side{flex:1;min-width:0}
.fpl2-sugg-side .nm{direction:ltr;text-align:start;font-size:0.75rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpl2-sugg-side .pt{font-size:0.65rem;color:var(--text-dim)}
.fpl2-sugg-reason{font-size:0.56rem;color:var(--text-faint);margin-top:2px}
.fpl2-sugg-out .nm{color:var(--live)}
.fpl2-sugg-in .nm{color:var(--cyan)}
.fpl2-sugg-arrow{font-size:1.05rem;color:var(--violet);flex:0 0 auto}
.fpl2-sugg-gain{font-size:0.6rem;font-weight:800;color:#7CFFB2;flex:0 0 auto;white-space:nowrap}
@media (max-width:380px){.fpl2-card{max-width:54px}.fpl2-photo-wrap{width:28px;height:28px}.fpl2-name{font-size:0.46rem}.fpl2-sugg-card{flex-wrap:wrap}}
/* [جديد] "Reels" رياضية — شاشة كاملة شبيهة تيك توك، فيديوهات رأسية بتتسحب لفوق/تحت */
.reels-overlay{position:fixed;inset:0;z-index:9999;background:#000}
/* [إصلاح جذري للسوايب] كانت طبقة الفيديو (.reels-player-layer) فوق #reels-scroll
   بصريًا (z-index أعلى) وبنعتمد على pointer-events:none عليها عشان "تمرّر"
   اللمس لـ#reels-scroll اللي تحتها. ده نظريًا سليم، لكن iframes (خصوصًا فيديو
   يوتيوب) مش موثوقة في تمرير لفة/سحب اللمس دي على كل متصفحات الموبايل فعليًا —
   بعضها بياخد اللمسة لنفسه حتى مع pointer-events:none. الحل النهائي: بنقلب
   الترتيب — #reels-scroll (بعناصره الحقيقية) بقى هو اللي فوق فعليًا وبيستقبل
   اللمس مباشرة زي أي صفحة عادية (سكرول متصفح طبيعي 100%)، وطبقة الفيديو بقت
   تحته. عشان الفيديو الحقيقي يبان، الصورة المصغّرة بتاعة العنصر النشط بس
   بتختفي (.reels-item.reels-active) فتبان الفيديو اللي تحتها من الفتحة الشفافة
   دي. الأزرار (إغلاق/صوت) اتنقلت برّه طبقة الفيديو عشان تقدر تظهر فوق
   #reels-scroll (عنصر جوه stacking context بتاع طبقة الفيديو مينفعش يظهر فوق
   شقيق ليها بره الطبقة دي مهما كان z-index بتاعه هو نفسه). */
.reels-close-btn{position:fixed;top:14px;inset-inline-end:14px;z-index:5;width:38px;height:38px;border-radius:50%;border:0;background:rgba(20,20,20,0.55);color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);pointer-events:auto}
.reels-close-btn:hover{background:rgba(20,20,20,0.8)}
.reels-scroll{position:relative;z-index:2;height:100dvh;width:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none}
.reels-scroll::-webkit-scrollbar{display:none}
.reels-item{height:100dvh;width:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;position:relative;background:#000;transition:background .12s ease}
.reels-item.reels-state{color:#fff}
.reels-frame-wrap{position:relative;height:100%;max-height:100dvh;aspect-ratio:9/16;max-width:100%;margin:0 auto;background:#111}
.reels-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reels-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:opacity .12s ease}
.reels-item.reels-broken .reels-poster{opacity:0.35}
/* [إصلاح] العنصر النشط فعليًا (اللي فيديوه الحقيقي شغال في الطبقة تحته) —
   بنشيل خلفيته وصورته المصغّرة عشان الفيديو يبان من تحته. أول مرة نسينا إن
   .reels-frame-wrap (الديف اللي جوه العنصر ولافّ حوالين الصورة المصغّرة) ليه
   خلفية خاصة بيه (#111 من القاعدة العامة فوق) غير خلفية .reels-item نفسها —
   فكانت لسه بتغطي الفيديو بشاشة سودا حتى بعد ما العنصر والصورة بقوا شفافين،
   وده اللي كان بيظهر كـ"شاشة سودا + صوت شغال" بالظبط زي ما وصفت. */
.reels-item.reels-active{background:transparent}
.reels-item.reels-active .reels-frame-wrap{background:transparent}
.reels-item.reels-active .reels-poster{opacity:0}
/* [جديد] مشغّل واحد ثابت (مش iframe منفصل لكل فيديو) بيظهر بصريًا بالظبط تحت
   العنصر النشط في السحب — نفس مقاس ومكان .reels-frame-wrap العادي، بس
   position:fixed عشان يفضل في مكانه مهما اتسحب اللي فوقه. شوف app.js. */
.reels-player-layer{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.reels-player-layer .reels-frame-wrap{background:transparent}
.reels-player-layer iframe{pointer-events:none}
/* [جديد] الـiframe الثابت بيتعرض شاشة سودا لحد ما يتحط فيه فيديو فعلي — بنسيبه
   مخفي لحد أول لحظة حقيقية بيتفعّل فيها فيديو (has-video)، وبعدها بيفضل ظاهر دايمًا. */
.reels-player-layer:not(.has-video) iframe{opacity:0}
.reels-mute-btn{position:fixed;bottom:16px;inset-inline-end:12px;z-index:5;width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,20,20,0.6);color:#fff;font-size:0.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto}
/* [جديد] رسالة بديلة لو فيديو ممنوع عرضه في إطار خارج يوتيوب (زي بعض فيديوهات FIFA).
   position:fixed دلوقتي (شقيقة لـ#reels-scroll مش جوه طبقة الفيديو)، وبنستخدم
   combinator ~ عشان نظهرها بناءً على كلاس broken اللي بيتحط على طبقة الفيديو. */
.reels-broken-msg{display:none;position:fixed;inset:0;align-items:center;justify-content:center;text-align:center;padding:24px;color:#fff;opacity:0.85;font-size:0.85rem;background:rgba(10,10,10,0.94);z-index:4;pointer-events:none}
#reels-player-layer.broken ~ .reels-broken-msg{display:flex}
#reels-player-layer.broken ~ .reels-mute-btn{display:none !important}
.reels-player-layer.broken iframe{display:none !important}
.reels-meta{position:absolute;inset-inline-start:0;bottom:0;width:100%;max-width:min(100%,calc(100dvh * 9 / 16));margin:0 auto;padding:14px 16px 22px;background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);color:#fff;pointer-events:none}
.reels-meta-title{font-weight:700;font-size:0.9rem;line-height:1.4}
.reels-meta-channel{font-size:0.75rem;opacity:0.8;margin-top:2px}
@media (max-width:520px){.reels-frame-wrap{aspect-ratio:auto;width:100%;height:100%}.reels-meta{max-width:100%}}
/* [جديد] قائمة "المميزات" جوه المودال */
.features-list{display:flex;flex-direction:column;gap:14px;padding:4px 2px 6px}
.feature-row{display:flex;gap:12px;align-items:flex-start}
.feature-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--panel-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.feature-text{flex:1;min-width:0}
.feature-title{font-weight:700;font-size:0.88rem;color:var(--text)}
.feature-desc{font-size:0.78rem;color:var(--text-dim);margin-top:2px;line-height:1.5}
/* [جديد — مرحلة 2] تابات صفحة المباراة */
.match-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:0}
.match-tabs::-webkit-scrollbar{display:none}
.match-tabs.players-tabs button.match-tab-btn{flex:0 0 auto;white-space:nowrap}
.match-tab-content{min-height:70px}
.standings-row.standings-row-highlight{background:rgba(34,233,255,0.08)}
.standings-row.standings-row-highlight .st-team span{font-weight:800;color:var(--text)}
.rating-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-soft);font-size:0.8rem}
.rating-row:last-child{border-bottom:0}
.rating-badge{flex:0 0 34px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Orbitron';font-size:0.76rem;color:#04121a}
.rating-badge.rating-high{background:var(--cyan)}
.rating-badge.rating-mid{background:#f5c518}
.rating-badge.rating-low{background:var(--magenta);color:#fff}
.rating-name{flex:1}
.rating-name small{color:var(--text-faint)}
.rating-tag{font-size:0.68rem;color:var(--text-dim);background:var(--panel-solid);padding:3px 8px;border-radius:10px;white-space:nowrap}
.h2h-row{display:flex;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px solid var(--line-soft);font-size:0.78rem}
.h2h-row:last-child{border-bottom:0}
.h2h-date{flex:0 0 54px;color:var(--text-faint);font-size:0.66rem}
.h2h-team{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-score{flex:0 0 56px;text-align:center;font-family:'Orbitron';font-weight:700}

/* [جديد — مرحلة 3] لوحتي: فريقي المفضّل */
.myteam-panel .panel-body{padding:15px 17px 17px}
.myteam-empty-banner{text-align:center;padding:14px 6px 6px}
.myteam-empty-banner p{font-size:0.82rem;color:var(--text-dim);line-height:1.7;margin-bottom:14px}
.myteam-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.myteam-head img{width:46px;height:46px;object-fit:contain;flex:0 0 auto;border-radius:50%;background:var(--panel-soft)}
.myteam-head-info{flex:1;min-width:0}
.myteam-name{font-weight:800;font-size:0.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myteam-pos{font-size:0.7rem;color:var(--cyan);font-weight:700;margin-top:3px}
.myteam-change-btn{flex:0 0 auto;background:var(--panel-soft);border:1.5px solid var(--line);color:var(--text-dim);border-radius:16px;padding:7px 14px;font-size:0.68rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.myteam-change-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.myteam-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.myteam-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:10px}
.myteam-card-label{font-size:0.64rem;font-weight:800;color:var(--text-faint);letter-spacing:0.3px;margin-bottom:6px;text-align:center}
.myteam-card-body .match-card{margin-bottom:0;padding:9px 8px}
.myteam-card-body .empty-hint{padding:14px 4px;font-size:0.72rem}
.myteam-picker-results{max-height:320px;overflow-y:auto;margin-top:6px}
@media (max-width:520px){.myteam-cards{grid-template-columns:1fr}}

/* [جديد] الفرق و الدليل الشامل: شبكة كروت فرق قابلة للتصفح حسب الدوري.
   بتستخدم نفس بيانات /teams?league= الموجودة بالفعل (ensureTeamsLoaded في
   app.js) — نفس المصدر المستخدم في البحث الموحّد، فمفيش أي خطر جديد على
   الـ backend أو مطابقة المعرّفات. */
.teams-directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:14px}
.team-dir-card{background:var(--panel-soft);border:1px solid var(--line);border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;transition:border-color .15s,transform .15s}
.team-dir-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.team-dir-card img{width:44px;height:44px;object-fit:contain}
.team-dir-card span{font-size:0.74rem;font-weight:700;color:var(--text);line-height:1.3}
@media (max-width:520px){.teams-directory-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}