/* ══════════════════════════════════════════════════════════════ Makhluot Sports v3 — YSscores-inspired World-class Match Center Split-panel (desktop) · Single-column (mobile) · RTL · Dark/Light PWA-ready · 60fps animations · WCAG-AA contrast ══════════════════════════════════════════════════════════════ */ /* ── Reset & Base ── */ .ms3, .ms3 * { box-sizing: border-box; margin: 0; padding: 0; } .ms3 { direction: rtl; font-family: 'Cairo','Tajawal',system-ui,-apple-system,sans-serif; font-size: 14px; line-height: 1.5; color: var(--c-text); background: var(--c-bg); min-height: 100vh; min-height: 100dvh; transition: background .3s ease, color .3s ease; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } .ms3 a { color: inherit; text-decoration: none; } .ms3 button { font-family: inherit; cursor: pointer; border: 0; background: none; } .ms3 img { display: block; max-width: 100%; } .ms3 ul { list-style: none; } /* ── Theme Tokens (Dark default) ── */ .ms3 { --c-bg: #0b1017; --c-surface: #131b24; --c-surface2: #1a2530; --c-surface3: #212e3a; --c-border: rgba(255,255,255,.08); --c-text: #e4eaf2; --c-text2: #b0bfce; --c-heading: #ffffff; --c-muted: #6d8096; --c-green: #00c853; --c-green2: #00e676; --c-accent: #1da1f2; --c-live: #ff2d2d; --c-warn: #f7b125; --c-on-green: #042e14; --c-fill: rgba(255,255,255,.06); --c-shadow: 0 4px 20px rgba(0,0,0,.5); --c-card-shadow: 0 1px 6px rgba(0,0,0,.3); --radius: 14px; --radius-sm: 10px; --radius-xs: 7px; --header-h: 56px; } /* ── Light Theme — follows the SITE-WIDE (CineMaster) ── The sports section no longer keeps its own theme; it inherits the site theme. */ html[data-theme="light"] .ms3, [data-theme="light"].ms3 { --c-bg: #f2f5f9; --c-surface: #ffffff; --c-surface2: #edf1f6; --c-surface3: #e2e8ef; --c-border: rgba(16,32,52,.09); --c-text: #1a2530; --c-text2: #3d4f5f; --c-heading: #0c1620; --c-muted: #6b7a89; --c-green: #00a846; --c-green2: #00b35a; --c-accent: #1283d6; --c-live: #d92027; --c-warn: #e6a200; --c-on-green: #ffffff; --c-fill: rgba(16,32,52,.05); --c-shadow: 0 4px 18px rgba(20,40,70,.12); --c-card-shadow: 0 1px 4px rgba(20,40,70,.07); } /* ── Header ── */ .ms3-header { position: sticky; top: 0; z-index: 100; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--c-card-shadow); height: var(--header-h); display: flex; align-items: center; padding: 0 16px; gap: 12px; } .ms3-logo { font-size: 17px; font-weight: 900; color: var(--c-heading); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ms3-logo b { color: var(--c-green2); } .ms3-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; } .ms3-nav::-webkit-scrollbar { display: none; } .ms3-nav-btn { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; color: var(--c-muted); transition: all .15s; white-space: nowrap; } .ms3-nav-btn:hover { color: var(--c-heading); background: var(--c-fill); } .ms3-nav-btn.active { color: var(--c-on-green); background: linear-gradient(135deg,var(--c-green),var(--c-green2)); box-shadow: 0 3px 12px rgba(0,200,83,.35); } .ms3-hdr-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .ms3-icon-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface2); color: var(--c-text); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .ms3-icon-btn:hover { border-color: var(--c-green); color: var(--c-green2); } .ms3-live-badge { background: var(--c-live); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; display: none; align-items: center; gap: 4px; animation: ms3-pulse 1.5s infinite; } .ms3-live-badge.show { display: inline-flex; } @keyframes ms3-pulse { 0%,100%{opacity:1} 50%{opacity:.6} } /* ── Search ── */ .ms3-search { display: flex; align-items: center; gap: 8px; padding: 9px 14px; margin: 8px 12px; background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .ms3-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--c-text); font-family: inherit; font-size: 13.5px; } .ms3-search input::placeholder { color: var(--c-muted); } .ms3-search-ic { color: var(--c-muted); font-size: 14px; } /* ── Date Bar ── */ .ms3-datebar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-bg); position: sticky; top: var(--header-h); z-index: 90; } .ms3-datebar-scroll { display: flex; gap: 5px; overflow-x: auto; flex: 1; scrollbar-width: none; scroll-behavior: smooth; } .ms3-datebar-scroll::-webkit-scrollbar { display: none; } .ms3-date-chip { flex: 0 0 auto; min-width: 58px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface); text-align: center; font-size: 12px; font-weight: 700; color: var(--c-text2); transition: all .15s; } .ms3-date-chip:hover { border-color: var(--c-green); } .ms3-date-chip.active { background: linear-gradient(135deg,var(--c-green),var(--c-green2)); color: var(--c-on-green); border-color: transparent; } .ms3-date-chip.today:not(.active) { color: var(--c-green2); } .ms3-date-chip small { display: block; font-size: 10px; color: var(--c-muted); margin-top: 1px; } .ms3-date-chip.active small { color: var(--c-on-green); opacity: .8; } .ms3-date-arr { width: 28px; height: 28px; border-radius: 50%; background: var(--c-surface2); border: 1px solid var(--c-border); color: var(--c-text2); font-size: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .ms3-date-arr:hover { color: var(--c-green2); border-color: var(--c-green); } /* ── Split Layout (Desktop: matches left + detail right) ── */ .ms3-body { display: grid; grid-template-columns: 1fr 380px; gap: 0; min-height: calc(100vh - var(--header-h) - 80px); } .ms3-panel-matches { border-inline-end: 1px solid var(--c-border); overflow-y: auto; max-height: calc(100vh - var(--header-h) - 80px); position: sticky; top: calc(var(--header-h) + 80px); } .ms3-panel-detail { overflow-y: auto; max-height: calc(100vh - var(--header-h)); position: sticky; top: var(--header-h); padding: 0; } /* ── League Group ── */ .ms3-league { margin-bottom: 2px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); } .ms3-league-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; transition: background .12s; } .ms3-league-head:hover { background: var(--c-fill); } .ms3-league-head img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; } .ms3-league-name { font-size: 13.5px; font-weight: 800; color: var(--c-heading); flex: 1; } .ms3-league-tabs { display: flex; gap: 4px; margin-inline-start: auto; } .ms3-league-tab { font-size: 11px; color: var(--c-muted); padding: 3px 8px; border-radius: 6px; font-weight: 700; transition: all .12s; } .ms3-league-tab:hover { color: var(--c-green2); background: rgba(0,200,83,.1); } .ms3-league-count { background: var(--c-fill); color: var(--c-text2); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; } .ms3-league-arrow { color: var(--c-muted); font-size: 11px; transition: transform .2s; } .ms3-league.open .ms3-league-arrow { transform: rotate(180deg); } .ms3-league-body { display: none; } .ms3-league.open .ms3-league-body { display: block; } .ms3-league.live .ms3-league-head { background: rgba(255,45,45,.06); } .ms3-league.live .ms3-league-count { background: var(--c-live); color: #fff; } /* ── Match Row ── */ .ms3-match { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--c-border); cursor: pointer; transition: background .12s; } .ms3-match:first-child { border-top: 0; } .ms3-match:hover { background: var(--c-fill); } .ms3-match.selected { background: rgba(0,200,83,.08); border-inline-end: 3px solid var(--c-green2); } .ms3-match.live { background: rgba(255,45,45,.04); } .ms3-team { display: flex; align-items: center; gap: 8px; min-width: 0; } .ms3-team.home { justify-content: flex-end; text-align: end; } .ms3-team-name { font-size: 13px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .ms3-crest { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; border-radius: 4px; } .ms3-crest-ph { width: 26px; height: 26px; border-radius: 4px; background: rgba(0,200,83,.12); color: var(--c-green2); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex: 0 0 auto; } .ms3-score { font-size: 17px; font-weight: 900; color: var(--c-heading); min-width: 50px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; } .ms3-score span { color: var(--c-muted); font-size: 13px; } .ms3-score.live { color: var(--c-green2); } .ms3-time { font-size: 13px; font-weight: 800; color: var(--c-accent); background: rgba(29,161,242,.1); padding: 4px 9px; border-radius: var(--radius-xs); text-align: center; min-width: 50px; } .ms3-status { font-size: 11px; font-weight: 700; color: var(--c-muted); text-align: center; min-width: 60px; } .ms3-status.live { color: var(--c-live); display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 800; } .ms3-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-live); animation: ms3-pulse 1.2s infinite; } .ms3-status.fin { color: var(--c-muted); } .ms3-pen { font-size: 10px; color: var(--c-warn); font-weight: 700; margin-top: 2px; } /* ── Detail Panel (right side / bottom-sheet on mobile) ── */ .ms3-detail { background: var(--c-surface); min-height: 100%; } .ms3-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; min-height: 400px; } .ms3-detail-empty .ic { font-size: 48px; margin-bottom: 12px; opacity: .7; } .ms3-detail-empty h4 { color: var(--c-heading); font-size: 16px; margin-bottom: 6px; } .ms3-detail-empty p { color: var(--c-muted); font-size: 13px; } /* ── Detail Hero (scoreboard) ── */ .ms3-hero { padding: 24px 16px 18px; text-align: center; background: linear-gradient(180deg, rgba(0,200,83,.08), var(--c-surface)); border-bottom: 1px solid var(--c-border); position: relative; } .ms3-hero.live { background: linear-gradient(180deg, rgba(255,45,45,.08), var(--c-surface)); } .ms3-hero-comp { font-size: 12px; color: var(--c-muted); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; } .ms3-hero-comp img { width: 16px; height: 16px; object-fit: contain; } .ms3-hero-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .ms3-hero-side { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ms3-hero-side img { width: 52px; height: 52px; object-fit: contain; } .ms3-hero-side span { font-size: 13px; font-weight: 800; color: var(--c-heading); } .ms3-hero-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; } .ms3-hero-num { font-size: 30px; font-weight: 900; color: var(--c-heading); letter-spacing: 2px; } .ms3-hero-status { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; } .ms3-hero-status.live { background: rgba(255,45,45,.15); color: var(--c-live); } .ms3-hero-status.fin { background: var(--c-fill); color: var(--c-muted); } .ms3-hero-status.sched { background: rgba(0,200,83,.12); color: var(--c-green2); } .ms3-hero-ht { font-size: 11px; color: var(--c-muted); margin-top: 4px; } .ms3-hero-pen { font-size: 12px; color: var(--c-warn); font-weight: 800; margin-top: 4px; } .ms3-hero-share { position: absolute; top: 12px; inset-inline-start: 12px; width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--c-fill); color: var(--c-text2); font-size: 14px; display: flex; align-items: center; justify-content: center; } .ms3-hero-fav { position: absolute; top: 12px; inset-inline-end: 12px; font-size: 18px; color: var(--c-muted); opacity: .6; } .ms3-hero-fav.on { color: var(--c-warn); opacity: 1; } /* ── Detail Tabs ── */ .ms3-dtabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--c-border); background: var(--c-surface); position: sticky; top: 0; z-index: 5; scrollbar-width: none; } .ms3-dtabs::-webkit-scrollbar { display: none; } .ms3-dtab { flex: 1 0 auto; padding: 12px 14px; font-size: 12.5px; font-weight: 800; color: var(--c-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: all .12s; text-align: center; } .ms3-dtab:hover { color: var(--c-text); } .ms3-dtab.active { color: var(--c-green2); border-bottom-color: var(--c-green2); } .ms3-dbody { padding: 14px; } /* ── Events Timeline ── */ .ms3-events { display: flex; flex-direction: column; gap: 2px; } .ms3-ev { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-xs); transition: background .1s; } .ms3-ev:hover { background: var(--c-fill); } .ms3-ev-min { background: rgba(0,200,83,.12); color: var(--c-green2); font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 999px; min-width: 36px; text-align: center; flex: 0 0 auto; } .ms3-ev-ic { font-size: 16px; flex: 0 0 auto; } .ms3-ev-tx { display: flex; flex-direction: column; gap: 1px; } .ms3-ev-tx b { color: var(--c-heading); font-size: 13px; } .ms3-ev-tx small { color: var(--c-muted); font-size: 11px; } .ms3-ev.goal { border-inline-start: 3px solid var(--c-green2); } .ms3-ev.card { border-inline-start: 3px solid var(--c-warn); } .ms3-ev.sub { border-inline-start: 3px solid var(--c-accent); } .ms3-ev-filter { display: flex; gap: 4px; margin-bottom: 12px; } .ms3-ev-fbtn { padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--c-fill); color: var(--c-text2); transition: all .12s; } .ms3-ev-fbtn.active { background: linear-gradient(135deg,var(--c-green),var(--c-green2)); color: var(--c-on-green); } /* ── Lineups ── */ .ms3-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ms3-lu-side h5 { font-size: 13px; font-weight: 800; color: var(--c-heading); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .ms3-lu-form { background: rgba(0,200,83,.12); color: var(--c-green2); padding: 2px 7px; border-radius: 5px; font-size: 10px; } .ms3-lu-coach { font-size: 11px; color: var(--c-muted); margin-bottom: 8px; } .ms3-lu-list { display: flex; flex-direction: column; gap: 4px; } .ms3-lu-p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-text2); } .ms3-lu-num { width: 20px; height: 20px; border-radius: 5px; background: var(--c-fill); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--c-heading); flex: 0 0 auto; } .ms3-lu-sub { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); } .ms3-lu-sub-title { font-size: 11px; color: var(--c-muted); font-weight: 700; margin-bottom: 6px; } /* ── Stats ── */ .ms3-stats { display: flex; flex-direction: column; gap: 14px; } .ms3-stat { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 6px; } .ms3-stat span { font-weight: 800; color: var(--c-heading); text-align: center; font-size: 13px; } .ms3-stat b { text-align: center; color: var(--c-muted); font-size: 11.5px; font-weight: 600; } .ms3-stat-bar { grid-column: 1/-1; display: flex; height: 5px; border-radius: 999px; overflow: hidden; background: var(--c-fill); flex-direction: row-reverse; } .ms3-stat-bar .h { background: var(--c-green2); } .ms3-stat-bar .a { background: var(--c-accent); } /* ── Video Section ── */ .ms3-video { text-align: center; padding: 20px 0; } .ms3-video-screen { height: 160px; border-radius: var(--radius); background: var(--c-surface2); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .ms3-video-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,200,83,.15); color: var(--c-green2); display: flex; align-items: center; justify-content: center; font-size: 22px; } .ms3-video h4 { color: var(--c-heading); font-size: 15px; margin-bottom: 6px; } .ms3-video p { color: var(--c-muted); font-size: 12px; } /* ── Details List ── */ .ms3-details { display: flex; flex-direction: column; } .ms3-det-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; } .ms3-det-row:last-child { border-bottom: 0; } .ms3-det-row span { color: var(--c-muted); } .ms3-det-row b { color: var(--c-heading); font-weight: 700; } /* ── Settings Panel ── */ .ms3-settings { position: absolute; top: var(--header-h); inset-inline-end: 0; width: 260px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--c-shadow); padding: 14px; z-index: 200; display: none; } .ms3-settings.show { display: block; } .ms3-set-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; } .ms3-set-row:last-child { border-bottom: 0; } .ms3-set-row label { color: var(--c-text2); font-weight: 700; } .ms3-toggle { width: 40px; height: 22px; border-radius: 999px; background: var(--c-surface3); position: relative; cursor: pointer; transition: background .2s; } .ms3-toggle.on { background: var(--c-green); } .ms3-toggle::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; } .ms3-toggle.on::after { transform: translateX(-18px); } [dir="rtl"] .ms3-toggle.on::after { transform: translateX(18px); } /* ── Skeleton ── */ .ms3-skel { height: 56px; border-radius: var(--radius-sm); margin: 8px 12px; background: linear-gradient(90deg, var(--c-surface) 25%, var(--c-surface2) 50%, var(--c-surface) 75%); background-size: 200% 100%; animation: ms3-shim 1.2s linear infinite; } @keyframes ms3-shim { to { background-position: -200% 0; } } .ms3-empty { text-align: center; padding: 40px 16px; color: var(--c-muted); font-size: 13px; } /* ── Toast ── */ .ms3-toast-wrap { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline: 0; z-index: 100050; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; } .ms3-toast { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-inline-start: 3px solid var(--c-green2); border-radius: var(--radius-sm); padding: 11px 16px; font-size: 13px; font-weight: 700; box-shadow: var(--c-shadow); transform: translateY(16px); opacity: 0; transition: all .25s cubic-bezier(.3,1,.5,1); max-width: 88%; } .ms3-toast.show { transform: translateY(0); opacity: 1; } /* ── Mobile: single column + bottom-sheet detail ── */ @media (max-width: 860px) { .ms3-body { grid-template-columns: 1fr; } .ms3-panel-matches { max-height: none; position: static; border-inline-end: 0; } .ms3-panel-detail { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: none; align-items: flex-end; justify-content: center; } .ms3-panel-detail.show { display: flex; } .ms3-detail { max-width: 100%; width: 100%; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; overflow-y: auto; animation: ms3-up .3s cubic-bezier(.3,1,.5,1); } @keyframes ms3-up { from { transform: translateY(40px); opacity: .7; } } .ms3-detail-close { display: flex; } .ms3-team-name { max-width: 80px; font-size: 12px; } .ms3-lineups { grid-template-columns: 1fr; } } @media (min-width: 861px) { .ms3-detail-close { display: none; } .ms3-panel-detail { display: block !important; } } /* ── Detail close button (mobile only) ── */ .ms3-detail-close { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 6; width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--c-fill); color: var(--c-heading); font-size: 14px; align-items: center; justify-content: center; display: none; } /* ── Scroll-to-top ── */ .ms3-toup { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); inset-inline-end: 16px; z-index: 9999; width: 42px; height: 42px; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-green2); font-size: 16px; box-shadow: var(--c-shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .2s; } .ms3-toup.show { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ── PWA Install Banner ── */ .ms3-install { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); inset-inline: 12px; z-index: 100040; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--c-shadow); display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 0 auto; transform: translateY(120%); transition: transform .35s cubic-bezier(.3,1,.5,1); } .ms3-install.show { transform: translateY(0); } .ms3-install-ic { font-size: 24px; } .ms3-install-tx { flex: 1; } .ms3-install-tx b { display: block; color: var(--c-heading); font-size: 13px; } .ms3-install-tx small { color: var(--c-muted); font-size: 11px; } .ms3-inst-yes { background: linear-gradient(135deg,var(--c-green),var(--c-green2)); color: var(--c-on-green); border-radius: var(--radius-xs); padding: 8px 14px; font-weight: 800; font-size: 12px; } .ms3-inst-no { color: var(--c-muted); font-size: 12px; padding: 8px; } /* ── Competition selector ── */ .ms3-compsel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-border); } .ms3-compsel label { font-size: 13px; color: var(--c-muted); font-weight: 700; } .ms3-compsel select { flex: 1; max-width: 320px; background: var(--c-surface2); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 700; } /* ── Standings table ── */ .ms3-tablewrap { overflow-x: auto; } .ms3-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ms3-table th { background: rgba(0,200,83,.1); color: var(--c-green2); padding: 11px 5px; font-size: 11px; font-weight: 800; text-align: center; } .ms3-table th.tl { text-align: start; padding-inline-start: 14px; } .ms3-table td { padding: 10px 5px; text-align: center; border-top: 1px solid var(--c-border); color: var(--c-text2); } .ms3-tt { display: flex; align-items: center; gap: 8px; font-weight: 700; padding-inline-start: 14px; text-align: start; } .ms3-tt img { width: 20px; height: 20px; object-fit: contain; } .ms3-pos { font-weight: 800; width: 24px; } .ms3-pos.cl { color: var(--c-green2); border-inline-start: 3px solid var(--c-green2); } .ms3-pos.rel { color: #ff5252; border-inline-start: 3px solid #ff5252; } .ms3-pts { font-weight: 900; color: var(--c-heading); } /* ── Scorers ── */ .ms3-scorers { padding: 6px; } .ms3-scorer { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--c-border); } .ms3-scorer:last-child { border-bottom: 0; } .ms3-sc-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--c-fill); color: var(--c-text2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex: 0 0 auto; } .ms3-sc-rank.g { background: linear-gradient(135deg,#f7b125,#ffd700); color: #3a2a00; } .ms3-sc-rank.s { background: linear-gradient(135deg,#bdc3c7,#ecf0f1); color: #2c3e50; } .ms3-sc-rank.b { background: linear-gradient(135deg,#cd7f32,#e0a96d); color: #3a1f00; } .ms3-sc-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ms3-sc-info b { color: var(--c-heading); font-size: 14px; } .ms3-sc-info small { color: var(--c-muted); font-size: 11.5px; display: flex; align-items: center; gap: 5px; } .ms3-sc-info small img { width: 14px; height: 14px; object-fit: contain; } .ms3-sc-goals { font-size: 19px; font-weight: 900; color: var(--c-warn); } /* ── News grid ── */ .ms3-newsgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; padding: 14px; } .ms3-newscard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; transition: transform .15s, border-color .15s; } .ms3-newscard:hover { transform: translateY(-3px); border-color: var(--c-green); } .ms3-news-img { height: 120px; background-size: cover; background-position: center; background-color: var(--c-surface2); } .ms3-news-img.ph { display: flex; align-items: center; justify-content: center; font-size: 36px; opacity: .3; } .ms3-news-body { padding: 11px 13px; } .ms3-news-body h4 { font-size: 13.5px; color: var(--c-heading); line-height: 1.5; margin-bottom: 7px; font-weight: 700; } .ms3-news-body span { font-size: 11px; color: var(--c-muted); } /* ── Fallback date notice ── */ .ms3-fallback { margin: 10px 12px; padding: 11px 14px; border-radius: var(--radius-sm); background: rgba(29,161,242,.1); border: 1px solid rgba(29,161,242,.25); color: var(--c-accent); font-size: 12.5px; font-weight: 700; text-align: center; } .ms3-fallback b { color: var(--c-heading); } .ms3-league-flag { font-size: 18px; } /* ── Team page (squad) ── */ .ms3-team-link { cursor: pointer; border-radius: var(--radius-sm); transition: background .12s, transform .12s; padding: 6px; } .ms3-team-link:hover { background: var(--c-fill); transform: translateY(-2px); } .ms3-team-hero { text-align: center; padding: 24px 16px 18px; background: linear-gradient(180deg, rgba(0,200,83,.08), var(--c-surface)); border-bottom: 1px solid var(--c-border); } .ms3-team-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 10px; } .ms3-team-hero h3 { color: var(--c-heading); font-size: 18px; font-weight: 900; margin-bottom: 6px; } .ms3-team-coach { font-size: 12px; color: var(--c-muted); } .ms3-sq-group { font-size: 12px; font-weight: 800; color: var(--c-green2); padding: 14px 2px 8px; position: sticky; top: 0; background: var(--c-surface); } .ms3-player { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--c-border); } .ms3-player:last-child { border-bottom: 0; } .ms3-player-num { width: 26px; text-align: center; font-weight: 800; color: var(--c-muted); font-size: 13px; flex: 0 0 auto; } .ms3-player-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--c-surface2); flex: 0 0 auto; } .ms3-player-info { display: flex; flex-direction: column; gap: 1px; } .ms3-player-info b { color: var(--c-heading); font-size: 14px; font-weight: 700; } .ms3-player-info small { color: var(--c-muted); font-size: 11.5px; } /* ── Filter chips (all/live/fav/finished/upcoming) ── */ .ms3-fchips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; border-bottom: 1px solid var(--c-border); } .ms3-fchips::-webkit-scrollbar { display: none; } .ms3-fchip { flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; background: var(--c-surface2); color: var(--c-text2); border: 1px solid var(--c-border); font-family: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: all .14s; display: inline-flex; align-items: center; gap: 6px; } .ms3-fchip:hover { color: var(--c-heading); border-color: var(--c-green); } .ms3-fchip.active { background: linear-gradient(135deg,var(--c-green),var(--c-green2)); color: var(--c-on-green); border-color: transparent; } .ms3-fchip-live.active { background: linear-gradient(135deg,#ff2d2d,#ff6b6b); color:#fff; } .ms3-fchip-live .ms3-dot { background: var(--c-live); } .ms3-fchip-live.active .ms3-dot { background:#fff; } /* ══════════════════════════════════════════════════════════════ SPORTS MODE — header takeover (the sports section feels like a separate premium site inside makhluot). Activated by body class. ══════════════════════════════════════════════════════════════ */ /* hide the main theme chrome on sports pages */ body.ms-sports-mode .site-header, body.ms-sports-mode header#masthead, body.ms-sports-mode .cm-header, body.ms-sports-mode .mhp-unified-bar, body.ms-sports-mode .cm-home-header, body.ms-sports-mode > #content > .breadcrumb, body.ms-sports-mode .site-breadcrumb { display: none !important; } body.ms-sports-mode { background: var(--c-bg, #0b1017); } /* the sports app header becomes the page's top bar */ body.ms-sports-mode .ms3-header { background: linear-gradient(120deg, #04190f 0%, #0b1f14 45%, var(--c-surface) 100%); border-bottom: 1px solid rgba(0,200,83,.25); box-shadow: 0 4px 24px rgba(0,0,0,.35); } [data-theme="light"] body.ms-sports-mode .ms3-header, body.ms-sports-mode[data-theme="light"] .ms3-header { background: linear-gradient(120deg, #e3f7ec 0%, #f0fbf4 45%, #ffffff 100%); border-bottom: 1px solid rgba(0,168,70,.2); } /* premium logo + back-to-site button */ .ms3-home-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; color: var(--c-text2); background: var(--c-fill); border: 1px solid var(--c-border); transition: all .15s; white-space: nowrap; } .ms3-home-link:hover { color: var(--c-green2); border-color: var(--c-green); } .ms3-logo-badge { display:inline-flex; align-items:center; justify-content:center; width: 30px; height: 30px; border-radius: 9px; font-size: 16px; background: linear-gradient(135deg,var(--c-green),var(--c-green2)); color: var(--c-on-green); } /* ══════════════════════════════════════════════════════════════ PREMIUM UPGRADES (v3.10) — live ring, league menu, rich detail, donut stats, audience voting, match news, timeline. ══════════════════════════════════════════════════════════════ */ /* ── Live circular timer (match rows) ── */ .ms3-livebox { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; } .ms3-livephase { font-size: 9.5px; color: var(--c-muted); font-weight: 700; white-space: nowrap; } .ms3-livering { --p: 0; position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--c-surface) 73%, transparent 74% 100%), conic-gradient(var(--c-green2) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); animation: ms3-ringspin 0s; } .ms3-livering::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(0,230,118,.25); animation: ms3-ringpulse 1.8s ease-in-out infinite; } .ms3-livemin { font-size: 11px; font-weight: 900; color: var(--c-green2); position: relative; z-index: 1; } .ms3-livenow { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--c-live); } @keyframes ms3-ringpulse { 0%,100%{ opacity:.3; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.06);} } .ms3-score.fin span { color: var(--c-muted); } /* mark favourite match rows subtly */ .ms3-match.fav { box-shadow: inset 3px 0 0 var(--c-warn); } /* ── League header menu button + dropdown ── */ .ms3-league-menu { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; color: var(--c-muted); font-size: 16px; line-height: 1; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; margin-inline-start: 2px; } .ms3-league-menu:hover { background: var(--c-fill); color: var(--c-heading); } .ms3-league.pinned .ms3-league-head { background: linear-gradient(90deg, rgba(0,200,83,.10), transparent); } .ms3-pinmark { font-size: 11px; } .ms3-lgmenu { position: absolute; z-index: 100060; min-width: 180px; background: var(--c-surface, #131b24); border: 1px solid var(--c-border, rgba(255,255,255,.1)); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.5); padding: 6px; animation: ms3-pop .14s ease; } @keyframes ms3-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } } .ms3-lgmenu button { display: block; width: 100%; text-align: start; padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--c-text, #e4eaf2); transition: background .1s; } .ms3-lgmenu button:hover { background: var(--c-fill, rgba(255,255,255,.06)); } .ms3-lgmenu button.danger { color: #ff5a5a; } .ms3-lg-ico { font-size: 15px; } /* ── Premium detail hero (hero2) ── */ .ms3-hero2 { position: relative; padding: 20px 16px 16px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(0,200,83,.12), transparent 70%), var(--c-surface); border-bottom: 1px solid var(--c-border); } .ms3-hero2.live { background: radial-gradient(120% 80% at 50% 0%, rgba(255,45,45,.14), transparent 70%), var(--c-surface); } .ms3-hero-comp-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--c-fill); border: 1px solid var(--c-border); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 800; color: var(--c-text); margin-bottom: 16px; } .ms3-hero-comp-pill img { width: 18px; height: 18px; object-fit: contain; } .ms3-hero-board2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .ms3-bigcrest { width: 62px !important; height: 62px !important; object-fit: contain; } .ms3-hero-side { display: flex; flex-direction: column; align-items: center; gap: 10px; } .ms3-hero-side span { font-size: 14px; font-weight: 800; color: var(--c-heading); } .ms3-hero-mid2 { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 110px; } .ms3-hero-num { font-size: 34px; font-weight: 900; color: var(--c-heading); display: flex; align-items: center; gap: 12px; line-height: 1; } .ms3-hero-dash { font-size: 18px; color: var(--c-muted); font-weight: 800; } .ms3-hero-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; font-size: 11.5px; color: var(--c-muted); } /* live ring inside hero */ .ms3-hero-ring { --p: 0; position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--c-surface) 72%, transparent 73% 100%), conic-gradient(var(--c-green2) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); } .ms3-hero-ring span { font-size: 13px; font-weight: 900; color: var(--c-green2); } .ms3-hero-ring::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(0,230,118,.3); animation: ms3-ringpulse 1.8s ease-in-out infinite; } .ms3-hero-phase { font-size: 11px; color: var(--c-text2); font-weight: 700; } /* ── Events filter chips + timeline ── */ .ms3-evfilter { display: flex; background: var(--c-fill); border-radius: 999px; padding: 4px; margin-bottom: 14px; } .ms3-evchip { flex: 1; padding: 9px 14px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--c-text2); transition: all .14s; } .ms3-evchip.active { background: linear-gradient(135deg,var(--c-green),var(--c-green2)); color: var(--c-on-green); } .ms3-tl { position: relative; padding: 4px 0; } .ms3-tl::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 2px; background: var(--c-border); transform: translateX(-50%); } .ms3-tl-mark { text-align: center; font-size: 11px; font-weight: 800; color: var(--c-muted); background: var(--c-surface); padding: 6px 0; position: relative; z-index: 1; } .ms3-tl-mark.mid { color: var(--c-text); } .ms3-tl-ev { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-xs); position: relative; z-index: 1; transition: background .1s; } .ms3-tl-ev:hover { background: var(--c-fill); } .ms3-tl-min { background: rgba(0,200,83,.14); color: var(--c-green2); font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 999px; min-width: 38px; text-align: center; flex: 0 0 auto; } .ms3-tl-ev.goal { border-inline-start: 3px solid var(--c-green2); } .ms3-tl-ev.card { border-inline-start: 3px solid var(--c-warn); } .ms3-tl-ev.sub { border-inline-start: 3px solid var(--c-accent); } .ms3-tl-ev .ms3-ev-ic { font-size: 16px; flex: 0 0 auto; } .ms3-tl-ev .ms3-ev-tx { display: flex; flex-direction: column; gap: 1px; } .ms3-tl-ev .ms3-ev-tx b { color: var(--c-heading); font-size: 13px; } .ms3-tl-ev .ms3-ev-tx small { color: var(--c-muted); font-size: 11px; } /* ── Stats card: possession donut + grouped dual bars ── */ .ms3-statcard { background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 14px; } .ms3-poss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; } .ms3-poss-val { font-size: 19px; font-weight: 900; } .ms3-poss-val.home { color: #a78bfa; text-align: end; } .ms3-poss-val.away { color: var(--c-green2); text-align: start; } .ms3-donut { --h: 50; --a: 50; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(closest-side, var(--c-surface2) 66%, transparent 67% 100%), conic-gradient(var(--c-green2) 0 calc(var(--a) * 1%), #a78bfa 0); display: grid; place-items: center; margin: 0 auto; } .ms3-poss-cap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 11.5px; } .ms3-poss-cap b { color: var(--c-heading); font-weight: 800; } .ms3-poss-cap b:first-child { text-align: end; } .ms3-poss-cap b:last-child { text-align: start; } .ms3-poss-cap span { color: var(--c-muted); font-weight: 700; } .ms3-stat2-list { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border); } .ms3-stat2-top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; } .ms3-stat2-top b { color: var(--c-text2); font-size: 13px; font-weight: 800; text-align: center; } .ms3-stat2-top b.lead { color: var(--c-heading); } .ms3-stat2-top span { color: var(--c-muted); font-size: 11.5px; font-weight: 600; text-align: center; } .ms3-stat2-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--c-fill); margin-top: 5px; } /* RTL: home on the right, away on the left */ .ms3-stat2-bar .h { background: #a78bfa; order: 2; transition: width .5s cubic-bezier(.3,1,.5,1); } .ms3-stat2-bar .a { background: var(--c-green2); order: 1; transition: width .5s cubic-bezier(.3,1,.5,1); } /* ── Audience voting ── */ .ms3-vote { background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 14px; } .ms3-sec-title { color: var(--c-green2); font-size: 13px; font-weight: 900; margin-bottom: 14px; text-align: center; } .ms3-vote-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; } .ms3-vote-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: var(--radius-sm); background: var(--c-fill); border: 1.5px solid transparent; transition: all .14s; } .ms3-vote-opt b { font-size: 12.5px; color: var(--c-heading); font-weight: 800; } .ms3-vote-opt span { font-size: 15px; font-weight: 900; color: var(--c-text2); } .ms3-vote-opt:hover { border-color: var(--c-green); } .ms3-vote-opt.mine { border-color: var(--c-green2); background: rgba(0,200,83,.12); } .ms3-vote-opt.mine span { color: var(--c-green2); } .ms3-vote-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--c-fill); } .ms3-vote-bar .h { background: #a78bfa; transition: width .5s; } .ms3-vote-bar .d { background: var(--c-muted); transition: width .5s; } .ms3-vote-bar .a { background: var(--c-accent); transition: width .5s; } .ms3-vote-note { text-align: center; font-size: 11.5px; color: var(--c-muted); margin-top: 10px; font-weight: 700; } /* ── Predictions placeholder ── */ .ms3-predict { text-align: center; padding: 36px 16px; } .ms3-predict-ic { font-size: 40px; margin-bottom: 12px; } .ms3-predict h4 { color: var(--c-heading); font-size: 16px; margin-bottom: 6px; } .ms3-predict p { color: var(--c-muted); font-size: 12.5px; } /* ── Match news (inside detail) ── */ .ms3-mnews { display: flex; flex-direction: column; gap: 10px; } .ms3-mnews-item { display: flex; gap: 11px; padding: 10px; border-radius: var(--radius-sm); background: var(--c-surface2); border: 1px solid var(--c-border); transition: all .14s; } .ms3-mnews-item:hover { border-color: var(--c-green); transform: translateY(-2px); } .ms3-mnews-img { width: 84px; height: 64px; border-radius: 8px; flex: 0 0 auto; background-size: cover; background-position: center; background-color: var(--c-surface3); } .ms3-mnews-img.ph { display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: .35; } .ms3-mnews-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ms3-mnews-tx b { color: var(--c-heading); font-size: 13px; font-weight: 700; line-height: 1.45; } .ms3-mnews-tx small { color: var(--c-text2); font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms3-mnews-tx span { color: var(--c-muted); font-size: 10.5px; } /* ══════════════════════════════════════════════════════════════ SPORTS HUB (/sports/) — premium magazine grid ══════════════════════════════════════════════════════════════ */ .msports-hub-wrap { background: var(--c-bg, #0b1017); } .ms-hub { max-width: 1180px; margin: 0 auto; padding: 0 16px 60px; font-family: 'Cairo','Tajawal',system-ui,sans-serif; color: var(--c-text, #e4eaf2); direction: rtl; } .ms-hub * { box-sizing: border-box; } /* hero */ .ms-hub-hero { position: relative; border-radius: 0 0 28px 28px; overflow: hidden; padding: 56px 24px 44px; margin-bottom: 24px; text-align: center; } .ms-hub-hero-bg { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% -10%, rgba(0,200,83,.35), transparent 60%), linear-gradient(135deg, #04190f, #0b1f14 55%, var(--c-surface, #131b24)); } .ms-hub-hero-bg::after { content: ''; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; } .ms-hub-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .ms-hub-kicker { display: inline-block; background: rgba(0,230,118,.16); color: var(--c-green2, #00e676); font-size: 13px; font-weight: 800; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .ms-hub-title { font-size: clamp(26px, 5vw, 44px); font-weight: 900; color: #fff; line-height: 1.3; margin: 0 0 12px; } .ms-hub-sub { font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.8; margin: 0 0 22px; } .ms-hub-cta { display: inline-block; background: linear-gradient(135deg, var(--c-green,#00c853), var(--c-green2,#00e676)); color: var(--c-on-green,#042e14); font-weight: 800; font-size: 14px; padding: 12px 26px; border-radius: 999px; transition: transform .15s; } .ms-hub-cta:hover { transform: translateY(-2px); } /* category chips */ .ms-hub-cats { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 18px; scrollbar-width: none; } .ms-hub-cats::-webkit-scrollbar { display: none; } .ms-hub-cat { flex: 0 0 auto; background: var(--c-surface,#131b24); border: 1px solid var(--c-border,rgba(255,255,255,.08)); color: var(--c-text2,#b0bfce); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 999px; transition: all .15s; } .ms-hub-cat i { font-style: normal; opacity: .6; font-size: 11px; } .ms-hub-cat:hover { color: var(--c-heading,#fff); border-color: var(--c-green,#00c853); } .ms-hub-cat.active { background: linear-gradient(135deg, var(--c-green,#00c853), var(--c-green2,#00e676)); color: var(--c-on-green,#042e14); border-color: transparent; } .ms-hub-h2 { font-size: 22px; font-weight: 900; color: var(--c-heading,#fff); margin: 22px 0 16px; padding-inline-start: 12px; border-inline-start: 5px solid var(--c-green2,#00e676); } /* featured (big) */ .ms-hub-feat { margin-bottom: 22px; } .ms-hub-feat .ms-hub-card.big { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 320px; } .ms-hub-feat .ms-hub-card.big .ms-hub-card-img { height: 100%; min-height: 240px; } .ms-hub-feat .ms-hub-card.big h3 { font-size: 26px; } @media (max-width: 720px) { .ms-hub-feat .ms-hub-card.big { grid-template-columns: 1fr; } } /* grid */ .ms-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .ms-hub-card { background: var(--c-surface,#131b24); border: 1px solid var(--c-border,rgba(255,255,255,.08)); border-radius: 16px; overflow: hidden; transition: all .18s; display: flex; flex-direction: column; } .ms-hub-card:hover { transform: translateY(-5px); border-color: var(--c-green,#00c853); box-shadow: 0 12px 36px rgba(0,0,0,.4); } .ms-hub-card-img { position: relative; height: 175px; background-size: cover; background-position: center; background-color: var(--c-surface2,#1a2530); display: grid; place-items: center; } .ms-hub-card-img span { font-size: 44px; opacity: .25; } .ms-hub-card-cat { position: absolute; top: 12px; inset-inline-start: 12px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; } .ms-hub-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; } .ms-hub-card-body h3 { font-size: 17px; font-weight: 800; color: var(--c-heading,#fff); line-height: 1.5; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ms-hub-card-body p { font-size: 13px; color: var(--c-text2,#b0bfce); line-height: 1.7; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-hub-card-meta { margin-top: auto; display: flex; gap: 14px; font-size: 11.5px; color: var(--c-muted,#6d8096); } .ms-hub-skel { height: 280px; border-radius: 16px; background: linear-gradient(90deg, var(--c-surface,#131b24) 25%, var(--c-surface2,#1a2530) 50%, var(--c-surface,#131b24) 75%); background-size: 200% 100%; animation: ms3-shim 1.2s linear infinite; } .ms-hub-more-wrap { text-align: center; margin-top: 30px; } .ms-hub-more { background: var(--c-surface,#131b24); border: 1px solid var(--c-border,rgba(255,255,255,.08)); color: var(--c-text,#e4eaf2); font-family: inherit; font-weight: 800; font-size: 14px; padding: 13px 36px; border-radius: 999px; transition: all .15s; } .ms-hub-more:hover { border-color: var(--c-green,#00c853); color: var(--c-green2,#00e676); } .ms-hub-empty { text-align: center; padding: 50px 20px; } .ms-hub-empty-ic { font-size: 52px; margin-bottom: 14px; } .ms-hub-empty h3 { font-size: 20px; color: var(--c-heading,#fff); margin-bottom: 8px; } .ms-hub-empty p { color: var(--c-muted,#6d8096); font-size: 14px; margin-bottom: 20px; line-height: 1.8; } /* ══════════════════════════════════════════════════════════════ ADMIN — Matches API control center (admin-only, mounts on /studio/ + /matches/) ══════════════════════════════════════════════════════════════ */ .ms-apifab { position: fixed; bottom: 90px; right: 22px; left: auto; z-index: 100000; height: 46px; padding: 0 16px 0 14px; border-radius: 26px; background: linear-gradient(135deg,#1da1f2,#0a84d6); color: #fff; font-family: 'Cairo','Tajawal',system-ui,sans-serif; font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: 0 6px 22px rgba(10,132,214,.55); border: 2px solid rgba(255,255,255,.22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .ms-apifab .ms-apifab-ic { font-size: 19px; line-height: 1; } .ms-apifab:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 9px 28px rgba(10,132,214,.7); } .ms-apifab:active { transform: scale(.97); } .ms-apiov { position: fixed; inset: 0; z-index: 99991; display: flex; align-items: center; justify-content: center; background: rgba(4,8,12,.66); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; padding: 16px; } .ms-apiov.show { opacity: 1; visibility: visible; } .ms-apipanel { direction: rtl; font-family: 'Cairo','Tajawal',system-ui,sans-serif; width: 100%; max-width: 720px; max-height: 88vh; overflow: hidden; background: var(--c-surface,#131b24); color: var(--c-text,#e4eaf2); border: 1px solid var(--c-border,rgba(255,255,255,.1)); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; transform: translateY(14px) scale(.98); transition: transform .25s ease; } .ms-apiov.show .ms-apipanel { transform: translateY(0) scale(1); } .ms-apipanel[data-theme="light"] { --c-surface:#fff; --c-surface2:#f2f5f9; --c-text:#1a2530; --c-border:rgba(0,0,0,.1); --c-text2:#5a6b7c; } .ms-apihead { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-border,rgba(255,255,255,.08)); background: linear-gradient(120deg, rgba(29,161,242,.14), transparent); } .ms-apihead h3 { font-size: 17px; font-weight: 800; margin: 0; } .ms-apiclose { width: 34px; height: 34px; border-radius: 9px; background: var(--c-surface2,#1a2530); color: var(--c-text,#fff); font-size: 16px; } .ms-apiclose:hover { background: var(--c-live,#ff2d2d); color:#fff; } .ms-apibody { padding: 16px 20px; overflow-y: auto; } .ms-apiload, .ms-apierr { text-align: center; padding: 30px; color: var(--c-text2,#b0bfce); } .ms-apierr { color: var(--c-warn,#f7b125); } .ms-apicard { background: var(--c-surface2,#1a2530); border: 1px solid var(--c-border,rgba(255,255,255,.06)); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; } .ms-apicard-h { font-weight: 800; font-size: 14px; margin-bottom: 10px; color: var(--c-heading,#fff); } .ms-apicard-h.main { margin: 6px 0 10px; font-size: 15px; } .ms-apimode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ms-apiradio { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 11px; border: 2px solid var(--c-border,rgba(255,255,255,.1)); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .ms-apiradio.on { border-color: var(--c-green,#00c853); background: rgba(0,200,83,.08); } .ms-apiradio input { margin-inline-end: 6px; } .ms-apiradio b { font-size: 13.5px; } .ms-apiradio small { color: var(--c-text2,#b0bfce); font-size: 11.5px; line-height: 1.4; } .ms-apistat { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--c-text2,#b0bfce); } .ms-apistat b { color: var(--c-green2,#00e676); } .ms-apiwarn { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; background: rgba(247,177,37,.12); border: 1px solid rgba(247,177,37,.4); color: #ffcf6b; } .ms-apiwarn b { color: #ffe1a0; } .ms-apiprovs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .ms-apiprov { background: var(--c-surface2,#1a2530); border: 2px solid var(--c-border,rgba(255,255,255,.08)); border-radius: 14px; padding: 13px 15px; transition: border-color .18s ease; } .ms-apiprov.active { border-color: var(--c-green,#00c853); box-shadow: 0 0 0 3px rgba(0,200,83,.12); } .ms-apiprov-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .ms-apiprov-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .ms-apiprov-name b { font-size: 14px; } .ms-apitag { font-size: 10.5px; padding: 2px 7px; border-radius: 20px; background: var(--c-surface3,#212e3a); color: var(--c-text2,#b0bfce); font-weight: 700; } .ms-apitag.cust { background: rgba(29,161,242,.18); color: #6cc4ff; } .ms-apitag.on { background: rgba(0,200,83,.2); color: var(--c-green2,#00e676); } .ms-apiprov-meta { font-size: 11.5px; color: var(--c-text2,#b0bfce); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; } .ms-apiprov-keys { font-size: 12px; color: var(--c-muted,#6d8096); margin-bottom: 9px; word-break: break-all; } .ms-apiprov-edit { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .ms-apikeys, .ms-apiadd input, .ms-apiadd select { flex: 1 1 200px; min-width: 0; padding: 9px 11px; border-radius: 9px; background: var(--c-bg,#0b1017); color: var(--c-text,#e4eaf2); border: 1px solid var(--c-border,rgba(255,255,255,.12)); font-family: inherit; font-size: 12.5px; } .ms-apikeys:focus, .ms-apiadd input:focus, .ms-apiadd select:focus { outline: none; border-color: var(--c-accent,#1da1f2); } .ms-apibtn { padding: 9px 14px; border-radius: 9px; font-weight: 700; font-size: 12.5px; background: var(--c-green,#00c853); color: var(--c-on-green,#042e14); white-space: nowrap; transition: filter .15s ease, transform .1s ease; } .ms-apibtn:hover { filter: brightness(1.08); } .ms-apibtn:active { transform: scale(.96); } .ms-apibtn:disabled { opacity: .5; cursor: default; } .ms-apibtn.pick { background: var(--c-accent,#1da1f2); color: #fff; } .ms-apibtn.ghost { background: var(--c-surface3,#212e3a); color: var(--c-text,#e4eaf2); } .ms-apibtn.danger { background: rgba(255,45,45,.16); color: #ff6b6b; } .ms-apibtn.add { flex: 1 1 100%; padding: 11px; font-size: 13.5px; } .ms-apitestout { margin-top: 8px; font-size: 12.5px; min-height: 0; } .ms-apiok { color: var(--c-green2,#00e676); font-weight: 700; } .ms-apierr2 { color: var(--c-warn,#f7b125); font-weight: 700; } .ms-apispin { color: var(--c-text2,#b0bfce); } .ms-apiadd { display: flex; flex-wrap: wrap; gap: 9px; } .ms-apichk { flex: 1 1 100%; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--c-text2,#b0bfce); cursor: pointer; } .ms-apihint { flex: 1 1 100%; font-size: 11.5px; color: var(--c-muted,#6d8096); line-height: 1.5; background: var(--c-bg,#0b1017); padding: 9px 11px; border-radius: 9px; border: 1px dashed var(--c-border,rgba(255,255,255,.1)); } @media (max-width: 560px) { .ms-apimode { grid-template-columns: 1fr; } .ms-apipanel { max-height: 92vh; } .ms-apifab { bottom: 84px; right: 14px; font-size: 12.5px; height: 42px; } } /* toast color variants used by the admin control center */ .ms3-toast.ok { border-inline-start: 4px solid var(--c-green,#00c853); } .ms3-toast.err { border-inline-start: 4px solid var(--c-live,#ff2d2d); } /* ══════════════════════════════════════════════════════════════ STANDINGS — multi-group (World Cup) premium layout + flags ══════════════════════════════════════════════════════════════ */ .ms3-sflag { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,.3); background: var(--c-surface3); } .ms3-sflag-ph { width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; background: var(--c-surface3); color: var(--c-text2); } /* group cards grid */ .ms3-groups-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 8px 0 4px; background: linear-gradient(120deg, rgba(0,200,83,.12), transparent); border: 1px solid var(--c-border); border-radius: var(--radius); } .ms3-groups-emb { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; flex: 0 0 auto; } .ms3-groups-emb img { width: 44px; height: 44px; object-fit: contain; } .ms3-groups-head h3 { font-size: 17px; font-weight: 800; color: var(--c-heading); margin: 0; } .ms3-groups-head small { color: var(--c-text2); font-size: 12px; } .ms3-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 12px 0; } .ms3-group-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--c-card-shadow); transition: transform .18s ease, box-shadow .18s ease; } .ms3-group-card:hover { transform: translateY(-2px); box-shadow: var(--c-shadow); } .ms3-group-h { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: linear-gradient(120deg, rgba(0,200,83,.14), var(--c-surface2)); border-bottom: 1px solid var(--c-border); } .ms3-group-badge { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--c-green); color: var(--c-on-green); font-weight: 800; font-size: 14px; } .ms3-group-h b { font-size: 14px; color: var(--c-heading); } .ms3-gtable { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ms3-gtable thead th { padding: 7px 4px; color: var(--c-muted); font-weight: 700; font-size: 10.5px; text-align: center; border-bottom: 1px solid var(--c-border); background: var(--c-surface2); } .ms3-gtable thead th.tl { text-align: start; padding-inline-start: 10px; } .ms3-gtable tbody td { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--c-border); color: var(--c-text); } .ms3-gtable tbody tr:last-child td { border-bottom: 0; } .ms3-gtable .ms3-tt { display: flex; align-items: center; gap: 8px; text-align: start; padding-inline-start: 10px; font-weight: 600; } .ms3-gtable .ms3-tt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .ms3-gtable .ms3-pos { font-weight: 800; width: 26px; } .ms3-gtable .ms3-pos.cl { color: var(--c-green2); } .ms3-gtable .ms3-pts { font-weight: 800; color: var(--c-heading); } .ms3-gtable .ms3-strow { cursor: pointer; transition: background .15s ease; } .ms3-gtable .ms3-strow:hover { background: var(--c-fill); } .ms3-gtable .ms3-strow.q { background: rgba(0,200,83,.05); } .ms3-gtable .ms3-strow.q:hover { background: rgba(0,200,83,.12); } .ms3-groups-legend { display: flex; align-items: center; gap: 7px; padding: 6px 4px 14px; color: var(--c-text2); font-size: 12px; } .ms3-groups-legend .lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .ms3-groups-legend .lg.q { background: rgba(0,200,83,.4); border: 1px solid var(--c-green); } /* league table rows clickable */ .ms3-table .ms3-strow { cursor: pointer; } .ms3-table .ms3-strow:hover { background: var(--c-fill); } .ms3-table .ms3-tt { display: flex; align-items: center; gap: 9px; } @media (max-width: 560px) { .ms3-groups { grid-template-columns: 1fr; } }