        .material-symbols-outlined {
            font-family: 'Material Symbols Outlined';
            display: inline-block;
            width: 1em;
            height: 1em;
            overflow: hidden;
            white-space: nowrap;
            direction: ltr;
            line-height: 1;
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        html:not(.icons-ready) .material-symbols-outlined { color: transparent !important; }
        .hard-shadow:hover {
            box-shadow: 4px 4px 0px 0px #e8121d;
            transform: translate(-2px, -2px);
        }
        .text-stroke {
            -webkit-text-stroke: 1px rgba(27, 28, 28, 0.2);
            color: transparent;
        }
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active { opacity: 1; transform: translateY(0); }
        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
        .float-animation { animation: float 4s ease-in-out infinite; }
        .accent-bar { width: 0; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active .accent-bar { width: 96px; }
        .hover-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease; }
        .hover-card:hover { transform: scale(1.02); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1); border-color: #e8121d; }
        #scroll-progress { display:none!important; }
        @keyframes subtle-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }
        .reveal.active .pulse-on-view { animation: subtle-pulse 2s infinite ease-in-out; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        #results-container { scroll-behavior: smooth; }
        button, [role="button"], [data-club], [data-gclub] { min-width: 44px; min-height: 44px; }
        .nav-link, .footer-link, #social-links a, #social-strip-links a { min-height: 44px; align-items: center; }

        /* Tailwind safety net: keep custom design tokens available even if generated CSS is delayed. */
        .gap-gutter { gap: 24px !important; }
        .gap-base { gap: 8px !important; }
        .gap-stack-md { gap: 48px !important; }
        .px-margin-desktop { padding-left: 64px !important; padding-right: 64px !important; }
        .px-margin-mobile { padding-left: 20px !important; padding-right: 20px !important; }
        .max-w-container-max { max-width: 1280px !important; }
        .py-stack-lg { padding-top: 80px !important; padding-bottom: 80px !important; }
        .mb-stack-md { margin-bottom: 48px !important; }
        .mt-stack-lg { margin-top: 80px !important; }
        .p-stack-md { padding: 48px !important; }
        .font-display-xl, .font-headline-lg, .font-headline-md, .font-headline-lg-mobile { font-family: var(--a90-font-heading, Manrope, Arial, sans-serif) !important; }
        .font-label-sm, .font-label-bold, .font-body-md, .font-body-lg { font-family: var(--a90-font-ui, Manrope, Arial, sans-serif) !important; }
        html[lang="ar"], html[lang="ar"] body,
        html[lang="ar"] .font-display-xl, html[lang="ar"] .font-headline-lg, html[lang="ar"] .font-headline-md, html[lang="ar"] .font-headline-lg-mobile,
        html[lang="ar"] .font-label-sm, html[lang="ar"] .font-label-bold, html[lang="ar"] .font-body-md, html[lang="ar"] .font-body-lg {
          font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif !important;
          letter-spacing: 0 !important;
        }
        html[lang="ar"] .font-headline-lg,
        html[lang="ar"] .font-headline-md,
        html[lang="ar"] .font-headline-lg-mobile { font-weight: 500 !important; }
        html[lang="ar"] .font-display-xl { font-weight: 600 !important; }
        html[lang="ar"] .font-label-bold { font-weight: 500 !important; }
        .text-label-sm { font-size: 12px !important; line-height: 16px !important; font-weight: 500; }
        .text-label-bold { font-size: 14px !important; line-height: 20px !important; font-weight: 700; letter-spacing: .05em; }
        .text-body-md { font-size: 16px !important; line-height: 24px !important; }
        .text-body-lg { font-size: 18px !important; line-height: 28px !important; }
        .text-headline-md { font-size: 32px !important; line-height: 40px !important; font-weight: 700; }
        .text-headline-lg { font-size: 48px !important; line-height: 56px !important; font-weight: 700; }
        .text-display-xl { font-size: 80px !important; line-height: 88px !important; font-weight: 800; }
        .bg-background { background-color: #fbf9f8 !important; }
        .bg-surface { background-color: #fbf9f8 !important; }
        .bg-surface\/90 { background-color: rgba(251,249,248,.9) !important; }
        .bg-surface-container-lowest { background-color: #fff !important; }
        .bg-surface-container-low { background-color: #f5f3f3 !important; }
        .bg-surface-container { background-color: #efeded !important; }
        .bg-surface-container-high { background-color: #e9e8e7 !important; }
        .bg-primary-container { background-color: #e8121d !important; }
        .text-on-surface { color: #1b1c1c !important; }
        .text-on-secondary-container { color: #656464 !important; }
        .text-secondary { color: #5f5e5e !important; }
        .text-primary { color: #e8121d !important; }
        .border-primary { border-color: #e8121d !important; }
        .border-on-surface\/5 { border-color: rgba(27,28,28,.05) !important; }
        .border-on-surface\/10 { border-color: rgba(27,28,28,.10) !important; }
        .decoration-primary { text-decoration-color: #e8121d !important; }
        @media (max-width: 767px){
          .max-md\:px-margin-mobile { padding-left: 20px !important; padding-right: 20px !important; }
          #social-strip-links{justify-content:flex-start!important;flex-wrap:nowrap!important}
          #social-strip-links .social-strip-cta{flex:0 0 auto;padding:0 14px;font-size:16px}
          #social-strip-links .social-strip-button{flex:0 0 44px}
        }

        /* ---- Added: spin / live dot / ticker / modal / subpage ---- */
        @keyframes spin360 { to { transform: rotate(360deg); } }
        .spinning { animation: spin360 0.8s linear; }
        @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
        .live-dot { animation: blink 1.1s infinite; }
        .ticker-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker var(--ticker-duration, 60s) linear infinite; }
        @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        [dir="rtl"] .ticker-track { animation-direction: reverse; }
        .ticker-wrap:hover .ticker-track { animation-play-state: paused; }
        .social-strip-button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:999px;background:#9b9b9b;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background-color .18s ease,color .18s ease,transform .18s ease}
        .social-strip-button:hover,.social-strip-button:focus-visible{background:#e8121d;color:#101010;transform:translateY(-1px)}
        .social-strip-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#050505;color:#fff;border:1px solid #050505;padding:0 18px;font-size:18px;line-height:24px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
        .social-strip-cta:hover,.social-strip-cta:focus-visible{background:#e8121d;color:#101010;border-color:#e8121d;transform:translateY(-1px)}
        .social-strip-cta .material-symbols-outlined{font-size:22px;line-height:1}
        #social-strip-links{overflow-x:auto;scrollbar-width:none}
        #social-strip-links::-webkit-scrollbar{display:none}
        .daily-schedule-shell{background:#fff;border:1px solid rgba(16,16,16,.08);box-shadow:0 12px 30px rgba(16,16,16,.06)}
        .daily-schedule-days{display:flex;direction:ltr;gap:10px;overflow-x:auto;padding:14px;border-bottom:1px solid rgba(16,16,16,.08);scrollbar-width:none}
        .daily-schedule-days::-webkit-scrollbar{display:none}
        .daily-schedule-day{flex:0 0 76px;height:76px;border:1px solid rgba(16,16,16,.12);background:#fff;color:#1b1c1c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
        .daily-schedule-day:hover{border-color:#e8121d;transform:translateY(-1px)}
        .daily-schedule-day.is-active{background:#e8121d;border-color:#e8121d;color:#101010}
        .daily-schedule-day strong{font-size:24px;line-height:24px;font-weight:700}
        .daily-schedule-day span{font-size:12px;line-height:14px;color:inherit;opacity:.75}
        .daily-schedule-list{display:flex;flex-direction:column;background:#f7f5f3}
        .daily-schedule-row{border:0;border-bottom:1px solid rgba(16,16,16,.08);background:#fff;display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:inherit;transition:background .18s ease}
        .daily-schedule-row:hover{background:#262a33}
        .daily-schedule-team{display:flex;align-items:center;gap:10px;min-width:0}
        .daily-schedule-team.home{justify-content:flex-end;text-align:end}
        .daily-schedule-team.away{justify-content:flex-start;text-align:start}
.daily-schedule-team img{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.daily-schedule-team .a90-crest{width:30px;height:30px;flex:0 0 30px}
        .daily-schedule-team img.is-flag{object-fit:contain!important;border-radius:50%!important;border:1.5px solid rgba(255,255,255,.24);background:#11151b;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.22)}
        .daily-schedule-team .flag-circle{width:30px;height:30px}
        .daily-schedule-team span{font-size:18px;line-height:24px;font-weight:500;white-space:normal;overflow-wrap:break-word;word-break:normal}
        .daily-schedule-centre{text-align:center;min-width:0}
        .daily-schedule-score{display:block;font-size:24px;line-height:26px;font-weight:700;color:#101010}
        .daily-schedule-kickoff{display:block;font-size:23px;line-height:27px;font-weight:700;color:#101010}
        .daily-schedule-meta{font-size:12px;line-height:16px;color:#6f6b66;margin-top:4px}
        .daily-schedule-live{display:inline-flex;align-items:center;gap:5px;color:#b00020;font-weight:700}
        .daily-schedule-empty{padding:28px;text-align:center;color:#6f6b66;background:#fff}
        @media (max-width: 767px){
          .daily-schedule-row{grid-template-columns:1fr;gap:10px;padding:15px}
          .daily-schedule-team.home,.daily-schedule-team.away{justify-content:center;text-align:center}
          .daily-schedule-centre{order:-1}
        }
        .match-page-list [data-match]{min-width:0!important;width:100%}
        .menu-pop { transform-origin: top right; transition: opacity .18s ease, transform .18s ease; }
        .menu-pop.hidden-pop { opacity: 0; visibility: hidden; transform: scale(.95) translateY(-6px); pointer-events: none; }
        #mobile-menu.hidden-pop { display: none; }
        .modal-back { transition: opacity .25s ease; }
        .modal-card { transition: opacity .25s ease, transform .25s ease; }
        .modal-card::-webkit-scrollbar { display: none; }
        .modal-card { -ms-overflow-style: none; scrollbar-width: none; }
        .modal-hidden .modal-card { opacity: 0; transform: translateY(16px) scale(.98); }
        .modal-hidden { opacity: 0; pointer-events: none; }
        #subpage { transition: opacity .3s ease; }
        #subpage.hidden-pop { opacity: 0; pointer-events: none; }
        .sz-overlay-open { overflow: hidden; }
        #modal, #subpage { overscroll-behavior: contain; }
        .prose-sz p { margin-bottom: 1.15rem; }
        .prose-sz h2 { font-family: var(--a90-font-heading, Manrope, Arial, sans-serif); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 2rem 0 0.85rem; }
        .prose-sz h3 { font-family: var(--a90-font-heading, Manrope, Arial, sans-serif); font-weight: 700; font-size: 20px; margin: 1.5rem 0 0.6rem; }
        .prose-sz ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.15rem; }
        .prose-sz li { margin-bottom: .4rem; }
        .prose-sz blockquote { border-left: 4px solid #e8121d; padding-left: 1rem; font-style: italic; color: #b9bcc2; margin: 1.25rem 0; }
        /* RTL tweaks for Arabic */
        [dir="rtl"] .accent-bar { margin-left: auto; }
        [dir="rtl"] .prose-sz ul { padding-left: 0; padding-right: 1.4rem; }
        [dir="rtl"] .prose-sz blockquote { border-left: none; border-right: 4px solid #e8121d; padding-left: 0; padding-right: 1rem; }
        [dir="rtl"] body { letter-spacing: 0 !important; }
        html.lang-loading * { transition: none !important; }
        @keyframes szLoaderSpin { to { transform: rotate(360deg); } }
        @keyframes a90LoaderPulse { 0%,100%{ transform:scale(.9); opacity:.7 } 50%{ transform:scale(1.04); opacity:1 } }
        .site-loader{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:transparent;transition:opacity .22s ease,visibility .22s ease}
        .site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
        .site-loader-mark{position:relative;width:72px;height:72px;display:grid;place-items:center;background:transparent;box-shadow:none}
        .site-loader-mark svg{width:56px;height:56px;display:block;animation:a90LoaderPulse 1.1s ease-in-out infinite}
        @media (prefers-reduced-motion:reduce){ .site-loader-mark svg{ animation:none } }
        header nav { gap: 8px; }
        header nav > a[aria-label="Arabia90 home"] { min-width: 0; flex: 1 1 auto; }
        header nav > a[aria-label="Arabia90 home"] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        header nav > div:last-child { flex: 0 0 auto; }
        #desktop-nav-links { flex: 0 0 auto; }
        #btn-soccer { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
        #btn-menu { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
        #btn-lang { width: 62px; height: 44px; flex: 0 0 62px; overflow: hidden; }
        #btn-lang .material-symbols-outlined { width: 22px; flex: 0 0 22px; overflow: hidden; }

        /* ---------- Mobile polish (≤ 639px): readable type, tighter rhythm ---------- */
        @media (max-width: 639px){
          .text-headline-lg { font-size: 30px !important; line-height: 34px !important; letter-spacing: 0; }
          .text-headline-md { font-size: 26px !important; line-height: 32px !important; }
          .py-stack-lg { padding-top: 52px !important; padding-bottom: 52px !important; }
          .mb-stack-md { margin-bottom: 28px !important; }
          .mt-stack-lg { margin-top: 52px !important; }
          .p-stack-md { padding: 24px !important; }
          .gap-stack-md { gap: 28px !important; }
          /* comfortable tap targets on the match tabs / chips */
          #mc-tabs button { padding-top: 8px; padding-bottom: 8px; }
          #lang-menu { right: -44px; max-width: calc(100vw - 24px); }
          [dir="rtl"] #lang-menu { right: auto; left: 0; }
          #results-container > div { min-width: min(300px, calc(100vw - 40px)); }
          #news .max-w-container-max { min-width: 0; }
          /* keep big modal scoreline from crowding small screens */
          #modal .text-\[56px\] { font-size: 40px !important; }
          #modal .w-20 { width: 56px !important; height: 56px !important; }
          .modal-card { width: min(100%, calc(100vw - 32px)) !important; max-height: calc(100svh - 24px); }
          #subpage .subpage-topbar { padding: 8px 12px !important; gap: 8px !important; display: grid !important; grid-template-columns: auto minmax(0,1fr); align-items: center; }
          #subpage .subpage-brand { gap: 8px !important; max-width: 58px !important; overflow: hidden; }
          #subpage .subpage-brand span { display: none !important; }
          #subpage .subpage-brand img { width: 44px !important; height: 44px !important; max-width: 44px !important; object-fit: contain; }
          #subpage .subpage-back { justify-self: end; max-width: min(178px, calc(100vw - 92px)); justify-content: flex-end; font-size: 12px !important; line-height: 15px !important; letter-spacing: .06em !important; text-align: right; overflow-wrap: anywhere; }
          #subpage .subpage-back svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
        }
        /* ---------- Tablet polish (640–1023px): balanced type, comfortable rhythm ---------- */
        @media (min-width: 640px) and (max-width: 1023px){
          .text-display-xl, .md\:text-display-xl { font-size: 54px !important; line-height: 1.04 !important; }
          .text-headline-lg { font-size: 40px !important; line-height: 44px !important; }
          .py-stack-lg { padding-top: 60px !important; padding-bottom: 60px !important; }
          .mb-stack-md { margin-bottom: 36px !important; }
          /* overlays (modals + sub-pages) use more of the tablet screen, with breathing room */
          #modal > .modal-card { max-width: 92vw !important; }
          #modal .text-\[56px\] { font-size: 52px !important; }
        }
        @media (min-width: 1024px){
          header nav { position: relative; }
          header nav > a[aria-label="Arabia90 home"] { flex: 0 1 auto; max-width: min(360px, 32vw); }
          #desktop-nav-links {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            justify-content: center;
            max-width: min(460px, calc(100% - 480px));
          }
          #btn-menu { display: none !important; }
          #mobile-menu { display: none !important; }
        }
        /* never allow a stray wide element to break the page horizontally */
        html, body { max-width: 100%; overflow-x: clip; }
        h1, h2, h3, h4, button { overflow-wrap: anywhere; }
        .nav-link { white-space: nowrap; overflow-wrap: normal; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
        #desktop-nav-links .nav-link {
          border-bottom: 0 !important;
          padding-bottom: 0 !important;
          text-decoration: none !important;
          box-shadow: none !important;
        }
        .hl-card h4 { text-wrap: balance; }
        /* ---------- Comfortable touch targets (phones + tablets) ---------- */
        #btn-soccer, #btn-lang { min-width: 44px; min-height: 44px; transform: none; }
        #mc-tabs button { min-height: 44px; display: inline-flex; align-items: center; }
        #mobile-menu .nav-link { display: block; padding: 11px 6px; border-bottom: 1px solid rgba(120,120,120,.14); }
        #mobile-menu .nav-link:last-child { border-bottom: 0; }
        #lang-menu button { min-height: 48px; height: 48px; }
        [dir="rtl"] #lang-menu button { text-align: right; }
        #full-table-btn, .hl-card button, .footer-link {
            min-height: 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        #subpage .sticky a, #modal a[target="_blank"] { min-height: 44px; display: inline-flex; align-items: center; }
        #subpage .subpage-topbar { gap: 14px; }
        #subpage .subpage-brand, #subpage .subpage-back { min-width: 0; }
        #social-strip-links a { min-height: 44px; align-items: center; }
        #modal [data-close] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
        @media (hover: none){
          a, button, [role="button"], [data-tab] { -webkit-tap-highlight-color: rgba(10,125,63,.10); }
        }
