/* v14 "Cinematic" look (direction D). Loaded last; layout and features untouched, only the skin. */
:root{--r:20px;--dz:cubic-bezier(.2,.7,.2,1)}
[data-theme=light]{--bg:#f3f0f8;--ac:#6a35c8}
[data-theme=dark]{--bg:#09060f;--ac:#b593ff}
body{-webkit-font-smoothing:antialiased}
/* backdrop: flat, calm; the cinema lives in the header band */
#bgx{background:var(--bg)!important}
#bgx:after{display:none}
/* cinematic header band: duotone stadium photo, light leak, grain, crest watermark */
.top{position:relative;isolation:isolate;padding-bottom:18px!important;margin-bottom:4px;color:#fff;--tx:#fff;--lv:#e3d2ff}
.top:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
 background:radial-gradient(60% 90% at 92% 0%,rgba(255,196,140,.30),transparent 70%),radial-gradient(50% 80% at 0% 60%,rgba(196,150,255,.26),transparent 70%),
 linear-gradient(160deg,rgba(123,69,224,.86) 0%,rgba(58,29,114,.92) 50%,rgba(11,7,20,.96) 100%),url(img/stadium.jpg) center 35%/cover;
 border-radius:0 0 28px 28px;box-shadow:0 18px 40px -26px rgba(40,16,90,.6)}
.top:after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);border-radius:0 0 28px 28px;
 background:url(img/mahd-crest-white.svg) no-repeat calc(50% + 150px) 30%/170px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.top .cd{color:rgba(255,255,255,.78)}
.brand small{color:rgba(255,255,255,.78)!important;letter-spacing:.18em;font-weight:600}
html[lang=ar] .brand small{letter-spacing:0}
.brand b{color:#fff;font-weight:700}
.chip{min-width:44px;height:44px!important;border-radius:14px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
main .chip{min-width:0;height:36px!important;border-radius:99px!important;background:var(--gl)!important;border:1px solid var(--gb)!important;color:var(--tx)!important}
[data-theme=light] main .chip{background:#fff!important;border-color:rgba(21,14,36,.10)!important}
/* type */
.h1{font-weight:700;letter-spacing:-.025em}
html[lang=ar] .h1{letter-spacing:0}
.eyebrow{letter-spacing:.2em;font-weight:600;color:var(--ac)}
html[lang=ar] .eyebrow{letter-spacing:0;font-size:13px}
/* cards: one glass language, radius 20 */
.glass{border-radius:20px}
[data-theme=light] .glass{border-color:rgba(21,14,36,.08);box-shadow:0 20px 40px -26px rgba(40,16,90,.38)}
[data-theme=dark] .glass{background:rgba(22,14,38,.66);border-color:rgba(255,255,255,.12);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.glass,.btn,.chip,nav a,.pk,.tcard,.hero{transition:transform .2s var(--dz),background-color .25s var(--dz),box-shadow .3s var(--dz),opacity .25s}
.btn{min-height:44px;border-radius:14px}
/* hero cards (today session, player card, next match, bus, review): duotone photo */
.hero,.tcard,.nextm,.bushead,.rhero{border-radius:24px!important;isolation:isolate;position:relative;overflow:hidden;
 background:radial-gradient(60% 60% at 95% 0%,rgba(255,196,140,.28),transparent 70%),linear-gradient(160deg,rgba(123,69,224,.9) 0%,rgba(58,29,114,.94) 52%,rgba(11,7,20,.97) 100%),url(img/pitch.jpg) center/cover!important;
 box-shadow:0 26px 50px -26px rgba(58,29,114,.75)!important}
.hero:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important;opacity:.12!important;mix-blend-mode:overlay!important}
.hero:after{background-image:url(img/mahd-crest-white.svg)!important;opacity:.16!important}
.hero .nm{font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:.98}
html[lang=ar] .hero .nm{text-transform:none;letter-spacing:0;line-height:1.2}
.hero .no{font-weight:700;letter-spacing:-.04em}
.tcard .tq{font-weight:700;letter-spacing:-.02em}
/* tab bar: floating glass pill, 44pt+ targets */
nav{height:68px!important;border-radius:24px!important;inset-inline:16px!important}
[data-theme=light] nav{background:rgba(255,255,255,.86)!important;border-color:rgba(21,14,36,.10)!important}
[data-theme=dark] nav{background:rgba(9,6,15,.8)!important;border-color:rgba(255,255,255,.12)!important}
nav a{min-height:48px;justify-content:center;border-radius:16px!important}
nav a.on{color:var(--ac)!important;background:color-mix(in srgb,var(--ac) 13%,transparent)!important}
nav a.on svg{color:var(--ac)!important}
/* sign-in: crest + glass keypad */
.pcrest{height:84px!important}
.pk{border-radius:20px!important;font-weight:600!important}
[data-theme=dark] .pk:not(.g):not(.go){background:rgba(22,14,38,.66)!important;border-color:rgba(255,255,255,.12)!important}
.pk.go{background:linear-gradient(150deg,#8a55f0,#3a1d72)!important;box-shadow:0 14px 28px -14px rgba(58,29,114,.8)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* r2 */
.top{padding-top:calc(24px + env(safe-area-inset-top))!important;padding-bottom:22px!important}
.brand img.blogo{height:64px!important;margin-block:-6px!important}
.thsw{height:44px!important;padding:4px!important;border-radius:14px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important}
.thsw button{width:34px!important;height:34px!important;border-radius:10px!important;color:rgba(255,255,255,.75)!important}
.thsw button.on{background:rgba(255,255,255,.95)!important;color:#3a1d72!important;box-shadow:none!important}
.top .acts{gap:6px!important}
@media (max-width:379px){.brand img.blogo{height:54px!important}.top .chip{min-width:40px;height:40px!important}.thsw{height:40px!important}.thsw button{width:30px!important;height:30px!important}}
.hero,.tcard,.nextm,.bushead,.rhero{background:radial-gradient(60% 60% at 95% 0%,rgba(255,196,140,.30),transparent 70%),linear-gradient(160deg,rgba(123,69,224,.80) 0%,rgba(58,29,114,.86) 52%,rgba(11,7,20,.94) 100%),url(img/stadium.jpg) center 40%/cover!important}
.top:before{background:radial-gradient(60% 90% at 92% 0%,rgba(255,196,140,.32),transparent 70%),radial-gradient(50% 80% at 0% 60%,rgba(196,150,255,.26),transparent 70%),linear-gradient(160deg,rgba(123,69,224,.78) 0%,rgba(58,29,114,.86) 50%,rgba(11,7,20,.94) 100%),url(img/stadium.jpg) center 35%/cover!important}
/* r3 */
.brand img.blogo,[dir=rtl] .brand img.blogo{height:62px!important;margin-block:-6px!important;flex:none}
@media (max-width:400px){.brand img.blogo,[dir=rtl] .brand img.blogo{height:58px!important}}
@media (max-width:379px){.brand img.blogo,[dir=rtl] .brand img.blogo{height:50px!important}}
.brand{flex:none}
.phero{border-radius:24px!important;isolation:isolate;background:radial-gradient(60% 60% at 95% 0%,rgba(255,196,140,.30),transparent 70%),linear-gradient(160deg,rgba(123,69,224,.80) 0%,rgba(58,29,114,.86) 52%,rgba(11,7,20,.94) 100%),url(img/stadium.jpg) center 40%/cover!important;box-shadow:0 26px 50px -26px rgba(58,29,114,.75)!important}
.phero:after{border-radius:0!important;inset:auto -24px -36px auto!important;width:190px!important;height:240px!important;background:url(img/mahd-crest-white.svg) no-repeat center/contain!important;opacity:.13}
[dir=rtl] .phero:after{inset:auto auto -36px -24px!important}
.phero .h1,.phero b,.phero strong{font-weight:700}
/* progressive disclosure: details control + bottom sheet */
.dsi{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;margin:-4px 0 -10px;border-radius:14px;border:1px solid var(--gb);background:var(--gl);color:var(--mu);font:600 13px Inter,"IBM Plex Sans Arabic",system-ui;cursor:pointer;flex:none}
[data-theme=light] .dsi{background:#fff;border-color:rgba(21,14,36,.10);color:#5d5570}
.dsi svg{color:var(--ac)}
.dsb{position:fixed;inset:0;z-index:2000;background:rgba(9,6,15,.42);opacity:0;transition:opacity .3s var(--dz)}
.dsb.on{opacity:1}
.dsh-s{position:fixed;z-index:2001;left:0;right:0;bottom:0;margin:0 auto;width:min(100%,440px);max-height:78dvh;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .34s var(--dz);
 border-radius:28px 28px 0 0;padding:0 0 env(safe-area-inset-bottom);background:rgba(255,255,255,.84);color:#150e24;backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);border:1px solid rgba(21,14,36,.08);box-shadow:0 -24px 60px -20px rgba(40,16,90,.45);font-family:Inter,"IBM Plex Sans Arabic",system-ui}
[data-theme=dark] .dsh-s{background:rgba(22,14,38,.82);color:#f6f3fb;border-color:rgba(255,255,255,.12)}
.dsh-s[dir=rtl]{font-family:"IBM Plex Sans Arabic",Inter,system-ui}
.dsh-s.on{transform:translateY(0)}
.dsg{height:24px;display:grid;place-items:center;cursor:grab;flex:none}.dsg i{width:40px;height:5px;border-radius:9px;background:currentColor;opacity:.25}
.dst{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 20px 10px;flex:none}.dst b{font-size:20px;font-weight:700;letter-spacing:-.02em}.dsh-s[dir=rtl] .dst b{letter-spacing:0}
.dsx{width:44px;height:44px;border-radius:14px;border:0;background:rgba(127,110,160,.14);color:inherit;display:grid;place-items:center;cursor:pointer}
.dsc{overflow-y:auto;padding:0 20px 22px;overscroll-behavior:contain}
.dsh{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin:18px 0 6px}.dsh-s[dir=rtl] .dsh{letter-spacing:0;font-size:13px}
.dsp{font-size:15px;line-height:1.5;opacity:.82;margin:4px 0 8px}
.dsr{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(127,110,160,.18)}.dsr:first-of-type{border-top:0}
.dsk{flex:none;min-width:84px;font-size:15px;font-weight:600;color:var(--c,inherit);display:flex;align-items:center;gap:8px}
.dsk:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#8a55f0);flex:none}
.dsv{font-size:15px;line-height:1.45;opacity:.85}
@media (prefers-reduced-motion:reduce){.dsh-s,.dsb{transition:none!important}}