@import "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap";:root{--blue:#0738b2;--ink:#10254c;--muted:#71809a;--border:#e4e9f2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:#f7f9fd;margin:0;font-family:Tajawal,Arial,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}:is(button:focus-visible,a:focus-visible,input:focus-visible){outline-offset:4px;outline:3px solid #709aff}.topbar{justify-content:space-between;align-items:center;max-width:1240px;height:102px;margin:auto;padding:0 38px;display:flex}.brand{align-items:center;gap:12px;font-size:22px;font-weight:900;display:flex}.brand img{object-fit:contain;width:49px;height:62px}.brand small{letter-spacing:2.4px;color:var(--muted);margin-top:3px;font-size:10px;display:block}.nav-link{align-items:center;gap:13px;font-size:15px;font-weight:700;display:flex}main{max-width:1240px;margin:auto;padding:0 38px}.hero{color:#fff;background:#082b89 radial-gradient(at 20% 30%,#134ed1 0%,#0000 65%);border-radius:22px;grid-template-columns:1fr 1fr;min-height:440px;display:grid;position:relative;overflow:hidden}.hero-text{z-index:2;padding:54px 54px 56px}.eyebrow{color:#c8d9ff;align-items:center;gap:10px;font-size:13px;font-weight:500;display:flex}.eyebrow i{background:#bbd550;border-radius:50%;width:7px;height:7px}h1{letter-spacing:-1.5px;margin:25px 0 19px;font-size:55px;font-weight:900;line-height:1.18}h1 span{color:#a9c7ff}.hero p{color:#d1defa;margin:0 0 25px;font-size:17px;line-height:1.9}.hero-link{color:#123d98;background:#fff;border-radius:9px;align-items:center;gap:27px;padding:14px 20px;font-size:15px;font-weight:800;display:inline-flex}.hero-art{justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.hero-art>img{object-fit:contain;z-index:1;filter:drop-shadow(0 18px 20px #00123766);width:260px;height:325px;transform:rotate(-7deg)}.orbit{border:1px solid #8baeff24;border-radius:50%;width:400px;height:400px;position:absolute}.orbit.two{width:500px;height:500px}.giant-type{letter-spacing:-20px;color:#ffffff06;font-size:235px;font-weight:900;position:absolute;left:-20px;transform:rotate(-90deg)}.art-caption{letter-spacing:5px;color:#b9ceff91;font-size:9px;position:absolute;bottom:35px}.hero-bottom{letter-spacing:3px;color:#90b2ff88;font-size:8px;position:absolute;bottom:17px;right:54px}.archive{padding:50px 0 65px;scroll-margin-top:24px}.section-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;display:flex}.section-kicker{color:var(--blue);font-size:12px;font-weight:700}h2{margin:8px 0 0;font-size:28px;font-weight:900}.search{border:1px solid var(--border);color:#8b98ae;background:#fff;border-radius:9px;align-items:center;gap:10px;width:285px;height:47px;padding:0 14px;display:flex}.search input{min-width:0;color:var(--ink);background:0 0;border:0;outline:none;flex:1;font-size:14px}.search button{color:var(--muted);background:0 0;border:0;padding:3px;display:flex}.match-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.match-card{border:1px solid var(--border);text-align:right;color:var(--ink);background:#fff;border-radius:14px;padding:0;transition:transform .2s,box-shadow .2s;overflow:hidden}.match-card:hover{transform:translateY(-4px);box-shadow:0 10px 35px #0c2b6b12}.match-art{background:linear-gradient(125deg,#06225f,#0a43ba);justify-content:center;align-items:center;height:200px;display:flex;position:relative;overflow:hidden}.match-art:after{content:"";pointer-events:none;background:repeating-linear-gradient(120deg,#0000,#0000 40px,#ffffff03 40px 80px);position:absolute;inset:0}.competition{color:#e5edff;z-index:2;background:#ffffff12;border:1px solid #ffffff20;border-radius:5px;padding:6px 9px;font-size:10px;position:absolute;top:17px;right:17px}.match-art img{object-fit:contain;opacity:.8;width:132px;height:132px;transform:translate(47px)rotate(-9deg)}.card-watermark{color:#ffffff08;letter-spacing:-3px;font-size:55px;font-weight:900;position:absolute;bottom:-3px;left:8px}.play{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;background:#ffffff20;border:1px solid #ffffff70;border-radius:50%;place-items:center;width:51px;height:51px;padding-left:3px;display:grid;position:absolute;top:66px;left:29%}.watch-label{color:#eaf0ff;font-size:11px;position:absolute;top:128px;left:24%}.match-info{padding:23px}.match-date{color:var(--muted);align-items:center;gap:7px;font-size:12px;display:flex}.match-info h3{margin:13px 0 23px;font-size:19px;font-weight:800}.card-action{color:var(--blue);border-top:1px solid #edf0f6;justify-content:space-between;align-items:center;padding-top:15px;font-size:13px;font-weight:700;display:flex}.state{min-height:240px;color:var(--muted);text-align:center;border:1px dashed #d9e0ed;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;padding:30px;display:flex}.state h3{color:var(--ink);margin-bottom:0}.state p{line-height:1.7}.retry{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 20px}footer{border-top:1px solid var(--border);align-items:center;gap:28px;max-width:1164px;margin:auto;padding:26px 0 32px;display:flex}footer>span{font-size:16px;font-weight:900}footer p,footer small{color:var(--muted);font-size:12px}footer small{margin-right:auto}.player-dialog{width:min(950px,94vw);max-height:93vh;color:var(--ink);background:#fff;border:0;border-radius:16px;padding:0;box-shadow:0 25px 100px #0005}.player-dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#03112ad9}.player-heading{justify-content:space-between;align-items:center;gap:16px;padding:23px 25px;display:flex}.player-heading span{color:var(--muted);font-size:12px}.player-heading h2{margin-top:7px;font-size:23px}.close{border:1px solid var(--border);width:36px;height:36px;color:var(--ink);background:#fff;border-radius:50%;flex-shrink:0;place-items:center;display:grid}.player-dialog video{aspect-ratio:16/9;background:#000;width:100%;max-height:66vh;display:block}.player-date{color:var(--muted);padding:0 25px;font-size:12px}.player-error{text-align:center;background:#f5f7fc;padding:60px 20px}.spin{animation:1.4s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:950px){.match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-text{padding:42px 35px 50px}h1{font-size:46px}.hero-art>img{width:220px}footer{margin:0 38px}}@media (max-width:640px){.topbar{height:83px;padding:0 21px}.brand{gap:8px;font-size:19px}.brand img{width:39px;height:49px}.brand small{font-size:8px}.nav-link{gap:5px;font-size:12px}main{padding:0 18px}.hero{border-radius:17px;min-height:390px;display:block}.hero-text{padding:36px 25px 50px}.eyebrow{font-size:11px}h1{margin-top:22px;font-size:42px}.hero p{max-width:220px;font-size:14px}.hero-link{gap:12px;font-size:13px}.hero-art{opacity:.32;width:225px;height:270px;position:absolute;bottom:-5px;left:-55px}.hero-art>img{width:190px;height:250px}.art-caption,.giant-type{display:none}.hero-bottom{bottom:17px;right:25px}.archive{padding:34px 0 40px}.section-heading{flex-direction:column;align-items:flex-start;gap:18px}.section-heading h2{font-size:25px}.search{width:100%}.match-grid{grid-template-columns:1fr;gap:18px}.match-art{height:210px}.match-info{padding:21px}footer{flex-direction:column;align-items:flex-start;gap:5px;margin:0 20px;padding:24px 0}footer p{margin:4px 0 7px}footer small{margin:0}.player-heading{padding:18px}.player-heading h2{font-size:19px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.branded-video{isolation:isolate;background:#000;position:relative}.branded-video .video-credit{top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));color:#fff;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 8px #0008;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:2;background:0 0;align-items:center;gap:9px;max-width:calc(100% - 86px);font-size:clamp(12px,1.65vw,17px);font-weight:700;line-height:1.4;display:flex;position:absolute}.video-credit-divider{color:#3e86ff;font-weight:800}.video-credit bdi{font-family:Arial,sans-serif;font-size:.9em;font-weight:600}.player-fullscreen{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));color:#fff;z-index:3;background:#0007;border:1px solid #ffffff45;border-radius:9px;place-items:center;width:44px;height:44px;display:grid;position:absolute}.player-fullscreen:hover{background:#000a}.player-fullscreen:disabled{cursor:wait;opacity:.6}.branded-video video::-webkit-media-controls-fullscreen-button{display:none}.branded-video:-webkit-full-screen{background:#000;place-items:center;width:100%;height:100%;display:grid}.branded-video:fullscreen{background:#000;place-items:center;width:100%;height:100%;display:grid}.player-dialog .branded-video:-webkit-full-screen video{aspect-ratio:auto;object-fit:contain;width:100%;height:100%;max-height:none}.player-dialog .branded-video:fullscreen video{aspect-ratio:auto;object-fit:contain;width:100%;height:100%;max-height:none}.player-dialog .branded-video.is-expanded video{aspect-ratio:auto;object-fit:contain;width:100%;height:100%;max-height:none}.player-dialog.is-player-expanded{background:#000;border-radius:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;position:fixed;inset:0;overflow:hidden}.player-dialog.is-player-expanded .player-heading,.player-dialog.is-player-expanded .player-date{display:none}.branded-video.is-expanded{background:#000;place-items:center;width:100%;height:100%;display:grid;position:fixed;inset:0}.player-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:640px){.branded-video .video-credit{top:max(15px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));gap:7px;font-size:12px}.player-fullscreen{left:max(5px,env(safe-area-inset-left));top:max(5px,env(safe-area-inset-top))}}.match-waiting{cursor:default}.match-waiting:hover{box-shadow:none;transform:none}.match-waiting .card-action{color:#6f7c91;gap:10px;font-weight:500;line-height:1.7}.match-waiting .card-action svg{flex-shrink:0}.match-waiting .play{background:#ffffff12;padding-left:0}
