/* The four Saudi regional styles (one per visit, html[data-variant]): colour tokens for light/dark,
   header bands, wall patterns, emblem plaques and small regional touches.
   Research: vault AFC2027/Saudi Design Research. */
/* ───────── NAJDI — Diriyah mud plaster, Sadu weaving, triangular wall vents ───────── */
:root{
  --font-display:"Reem Kufi","Readex Pro",system-ui,sans-serif;
  --font-ui:"Readex Pro",system-ui,sans-serif;
  --r:3px; --pat-size:168px 120px;
  --pat-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='120'%3E%3Cpath d='M12 22l7-10 7 10zM30 22l7-10 7 10zM48 22l7-10 7 10zM96 72l7-10 7 10zM114 72l7-10 7 10zM132 72l7-10 7 10z'/%3E%3Cpath d='M138 18l7-7 7 7-7 7zM54 96l7-7 7 7-7 7z'/%3E%3C/svg%3E");
  --bg:#EADCC4; --pat:#D9C4A2; --wall:#E1CCAB; --surface:#F7EFE2; --ink:#2B1A10; --muted:#76593F; --line:#C9B08C;
  --accent:#8E1B1B; --accent-2:#C8671E; --on-accent:#F7EFE2;
  --live:#A8231B; --live-bg:#F6E0D2; --win:#8A6418; --fav:#C8671E; --spot-bg:#E7E3C6;
  --ok:#3E7A3A; --p1:#241510; --p2:#F1E4CF; --p3:#8E1B1B; --p4:#C8671E; --p5:#3E7A3A;
  --head-ink:#2B1A10; --head-bg:#EADCC4;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1B110B; --pat:#2A1B11; --wall:#251810; --surface:#2C1E14; --ink:#F2E6D3; --muted:#B79D82; --line:#4B3526;
  --accent:#D4473A; --accent-2:#E3904A; --on-accent:#1B110B;
  --live:#FF6F5C; --live-bg:#3B1E15; --win:#E2B65C; --fav:#E3904A; --spot-bg:#26281A;
  --ok:#7CC07A; --p1:#0F0805; --p2:#E8D7BC; --p3:#C8392D; --p4:#E08A3E; --p5:#5FA35C;
  --head-ink:#F2E6D3; --head-bg:#1B110B; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1B110B; --pat:#2A1B11; --wall:#251810; --surface:#2C1E14; --ink:#F2E6D3; --muted:#B79D82; --line:#4B3526;
  --accent:#D4473A; --accent-2:#E3904A; --on-accent:#1B110B;
  --live:#FF6F5C; --live-bg:#3B1E15; --win:#E2B65C; --fav:#E3904A; --spot-bg:#26281A;
  --ok:#7CC07A; --p1:#0F0805; --p2:#E8D7BC; --p3:#C8392D; --p4:#E08A3E; --p5:#5FA35C;
  --head-ink:#F2E6D3; --head-bg:#1B110B; color-scheme:dark;
}

/* ───────── HEJAZI — Al-Balad: green-painted roshan woodwork, mashrabiya beads, coral-white walls ───────── */
:root[data-variant="hejazi"]{
  --font-display:"El Messiri","IBM Plex Sans Arabic",Georgia,serif;
  --font-ui:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --r:8px; --pat-size:176px 152px;
  --pat-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='152'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M18 58V34a12 12 0 0 1 24 0v24z'/%3E%3Cpath d='M24 30v28M30 22v36M36 30v28M18 40h24M18 49h24'/%3E%3Cpath d='M14 58h32M14 62h32'/%3E%3Cpath d='M106 134v-24a12 12 0 0 1 24 0v24z'/%3E%3Cpath d='M112 106v28M118 98v36M124 106v28M106 116h24M106 125h24'/%3E%3Cpath d='M102 134h32M102 138h32'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='128' cy='34' r='2.6'/%3E%3Ccircle cx='138' cy='34' r='2.6'/%3E%3Ccircle cx='133' cy='29' r='2.6'/%3E%3Ccircle cx='133' cy='39' r='2.6'/%3E%3Ccircle cx='40' cy='112' r='2.6'/%3E%3Ccircle cx='50' cy='112' r='2.6'/%3E%3Ccircle cx='45' cy='107' r='2.6'/%3E%3Ccircle cx='45' cy='117' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --bg:#F4F0E8; --pat:#E7E0D3; --wall:#EAE3D5; --surface:#FFFDF9; --ink:#1B2422; --muted:#5B6763; --line:#DCD3C3;
  --accent:#1E5A4C; --accent-2:#8A5A33; --on-accent:#FFFDF9;
  --live:#B43A28; --live-bg:#FBEFD3; --win:#A87A12; --fav:#1E5A4C; --spot-bg:#E2EEE8;
  --ok:#2F7D5B; --p1:#1E4D43; --p2:#6B4226; --p3:#E3B23C; --p4:#F4EBDA; --p5:#2C6A5C;
  --head-ink:#F5EFE4; --head-bg:#1E4D43;
}
@media (prefers-color-scheme:dark){:root[data-variant="hejazi"]:not([data-theme="light"]){
  --bg:#0C1716; --pat:#15241F; --wall:#11201E; --surface:#152623; --ink:#ECE6DB; --muted:#97A8A2; --line:#24403A;
  --accent:#74BFA6; --accent-2:#C99566; --on-accent:#0C1716;
  --live:#FF8462; --live-bg:#2B2914; --win:#E6B640; --fav:#74BFA6; --spot-bg:#12302A;
  --ok:#74BFA6; --p1:#0E2B25; --p2:#8A5C3A; --p3:#E3B23C; --p4:#D9CBB0; --p5:#1E4D43;
  --head-ink:#EDE3D2; --head-bg:#0E2B25; color-scheme:dark;
}}
:root[data-variant="hejazi"][data-theme="dark"]{
  --bg:#0C1716; --pat:#15241F; --wall:#11201E; --surface:#152623; --ink:#ECE6DB; --muted:#97A8A2; --line:#24403A;
  --accent:#74BFA6; --accent-2:#C99566; --on-accent:#0C1716;
  --live:#FF8462; --live-bg:#2B2914; --win:#E6B640; --fav:#74BFA6; --spot-bg:#12302A;
  --ok:#74BFA6; --p1:#0E2B25; --p2:#8A5C3A; --p3:#E3B23C; --p4:#D9CBB0; --p5:#1E4D43;
  --head-ink:#EDE3D2; --head-bg:#0E2B25; color-scheme:dark;
}

/* ───────── ASIRI — Al-Qatt painted bands on gypsum: takhdheer, koffof, mona'ana'at, rukun ───────── */
:root[data-variant="asiri"]{
  --font-display:"Kufam","Tajawal",system-ui,sans-serif;
  --font-ui:"Tajawal",system-ui,sans-serif;
  --r:6px; --pat-size:72px 72px;
  --pat-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 8l28 28-28 28L8 36z' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M36 28l8 8-8 8-8-8z'/%3E%3Cpath d='M1 0v72M5 0v72' stroke='black' fill='none'/%3E%3C/svg%3E");
  --bg:#F7F3EA; --pat:#E9E1D0; --wall:#EFE8DA; --surface:#FFFFFF; --ink:#1A1A1A; --muted:#5C574F; --line:#E2DACB;
  --accent:#2B5DA8; --accent-2:#2E8B57; --on-accent:#FFFFFF;
  --live:#C8322B; --live-bg:#FCE8E2; --win:#B97F06; --fav:#2B5DA8; --spot-bg:#E2F1E8;
  --ok:#2E8B57; --p1:#1A1A1A; --p2:#C8322B; --p3:#F2B632; --p4:#2B5DA8; --p5:#2E8B57;
  --head-ink:#1A1A1A; --head-bg:#F7F3EA;
}
@media (prefers-color-scheme:dark){:root[data-variant="asiri"]:not([data-theme="light"]){
  --bg:#11152A; --pat:#1A2040; --wall:#171C35; --surface:#1C2240; --ink:#F3EFE6; --muted:#A8AEC6; --line:#2D3456;
  --accent:#78A2F2; --accent-2:#52C389; --on-accent:#11152A;
  --live:#FF6A5E; --live-bg:#3A1C2A; --win:#F7C54E; --fav:#78A2F2; --spot-bg:#16302B;
  --ok:#52C389; --p1:#F3EFE6; --p2:#F0584E; --p3:#F7C54E; --p4:#78A2F2; --p5:#52C389;
  --head-ink:#F3EFE6; --head-bg:#11152A; color-scheme:dark;
}}
:root[data-variant="asiri"][data-theme="dark"]{
  --bg:#11152A; --pat:#1A2040; --wall:#171C35; --surface:#1C2240; --ink:#F3EFE6; --muted:#A8AEC6; --line:#2D3456;
  --accent:#78A2F2; --accent-2:#52C389; --on-accent:#11152A;
  --live:#FF6A5E; --live-bg:#3A1C2A; --win:#F7C54E; --fav:#78A2F2; --spot-bg:#16302B;
  --ok:#52C389; --p1:#F3EFE6; --p2:#F0584E; --p3:#F7C54E; --p4:#78A2F2; --p5:#52C389;
  --head-ink:#F3EFE6; --head-bg:#11152A; color-scheme:dark;
}

/* ───────── HASAWI — Al-Ahsa: khoos palm weaving, the gold zari edge of the Hasawi bisht ───────── */
:root[data-variant="hasawi"]{
  --font-display:"Amiri","Alexandria",Georgia,serif;
  --font-ui:"Alexandria",system-ui,sans-serif;
  --r:4px; --pat-size:28px 28px;
  --pat-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 2.5h13M0 7h13M0 11.5h13M16.5 0v13M21 0v13M25.5 0v13M2.5 14v14M7 14v14M11.5 14v14M14 16.5h14M14 21h14M14 25.5h14' stroke='black' stroke-width='2.2' fill='none'/%3E%3C/svg%3E");
  --bg:#EDE3CB; --pat:#E2D4B3; --wall:#E4D6B6; --surface:#FBF7EE; --ink:#231C14; --muted:#6B5C45; --line:#D3C29C;
  --accent:#3F6B3A; --accent-2:#8C5A2B; --on-accent:#FBF7EE;
  --live:#A3301F; --live-bg:#F5E2CF; --win:#A57F1C; --fav:#3F6B3A; --spot-bg:#E2E6CC;
  --ok:#3F6B3A; --p1:#211B16; --p2:#C9A23A; --p3:#E9D59A; --p4:#3F6B3A; --p5:#8C5A2B;
  --head-ink:#F3E9D2; --head-bg:#211B16;
}
@media (prefers-color-scheme:dark){:root[data-variant="hasawi"]:not([data-theme="light"]){
  --bg:#15120E; --pat:#1F1A14; --wall:#1D1913; --surface:#231E17; --ink:#F1E8D6; --muted:#ADA087; --line:#3D3427;
  --accent:#8DBA7E; --accent-2:#D29B62; --on-accent:#15120E;
  --live:#FF7A5E; --live-bg:#34201A; --win:#E3BE55; --fav:#8DBA7E; --spot-bg:#1E2A1B;
  --ok:#8DBA7E; --p1:#0C0A08; --p2:#D9B24A; --p3:#F0DFA6; --p4:#8DBA7E; --p5:#D29B62;
  --head-ink:#F1E8D6; --head-bg:#0C0A08; color-scheme:dark;
}}
:root[data-variant="hasawi"][data-theme="dark"]{
  --bg:#15120E; --pat:#1F1A14; --wall:#1D1913; --surface:#231E17; --ink:#F1E8D6; --muted:#ADA087; --line:#3D3427;
  --accent:#8DBA7E; --accent-2:#D29B62; --on-accent:#15120E;
  --live:#FF7A5E; --live-bg:#34201A; --win:#E3BE55; --fav:#8DBA7E; --spot-bg:#1E2A1B;
  --ok:#8DBA7E; --p1:#0C0A08; --p2:#D9B24A; --p3:#F0DFA6; --p4:#8DBA7E; --p5:#D29B62;
  --head-ink:#F1E8D6; --head-bg:#0C0A08; color-scheme:dark;
}



/* ───────── regional bands (one value each, reused by the page header and the match sheet) ───────── */
:root[data-variant="najdi"]{--band-h:22px;--band:
    conic-gradient(from 135deg at 50% 0,var(--p3) 0 90deg,transparent 0) 0 0/16px 8px repeat-x,
    linear-gradient(var(--p4),var(--p4)) 0 9px/100% 3px no-repeat,
    conic-gradient(from -45deg at 50% 100%,var(--p2) 0 90deg,transparent 0) 8px 12px/16px 8px repeat-x,
    linear-gradient(var(--p3),var(--p3)) 0 20px/100% 2px no-repeat,
    var(--p1)}
:root[data-variant="hejazi"]{--band-h:30px;--band:
    radial-gradient(circle at 50% 100%,var(--p4) 0 5px,transparent 5.5px) 0 3px/16px 6px repeat-x,
    linear-gradient(90deg,transparent 3px,var(--p4) 3px 13px,transparent 13px) 0 9px/16px 8px repeat-x,
    linear-gradient(45deg,transparent calc(50% - 1px),var(--p2) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 19px/9px 9px repeat-x,
    linear-gradient(-45deg,transparent calc(50% - 1px),var(--p2) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 19px/9px 9px repeat-x,
    linear-gradient(var(--p4),var(--p4)) 0 19px/100% 9px no-repeat,
    var(--p2)}
:root[data-variant="asiri"]{--band-h:46px;--band:
    linear-gradient(var(--p1),var(--p1)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--p1),var(--p1)) 0 5px/100% 2px no-repeat,
    conic-gradient(from 135deg at 50% 0,var(--p2) 0 90deg,transparent 0) -30px 10px/80px 10px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--p3) 0 90deg,transparent 0) -10px 10px/80px 10px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--p4) 0 90deg,transparent 0) 10px 10px/80px 10px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--p5) 0 90deg,transparent 0) 30px 10px/80px 10px repeat-x,
    linear-gradient(var(--p1),var(--p1)) 0 22px/100% 2px no-repeat,
    conic-gradient(from 135deg at 50% 0,var(--p2) 0 90deg,transparent 0) 0 25px/12px 6px repeat-x,
    conic-gradient(from -45deg at 50% 100%,var(--p2) 0 90deg,transparent 0) 0 31px/12px 6px repeat-x,
    linear-gradient(var(--p1),var(--p1)) 0 37px/100% 2px no-repeat,
    linear-gradient(var(--p5),var(--p5)) 0 40px/100% 6px no-repeat,
    var(--head-bg)}
:root[data-variant="hasawi"]{--band-h:24px;--band:
    linear-gradient(var(--p2),var(--p2)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--p3),var(--p3)) 0 4px/100% 1px no-repeat,
    conic-gradient(from 135deg at 50% 0,var(--p2) 0 90deg,transparent 0) 0 6px/12px 6px repeat-x,
    conic-gradient(from -45deg at 50% 100%,var(--p2) 0 90deg,transparent 0) 0 12px/12px 6px repeat-x,
    radial-gradient(circle,var(--p3) 0 1.6px,transparent 2px) -6px 6px/12px 12px repeat-x,
    linear-gradient(var(--p3),var(--p3)) 0 19px/100% 1px no-repeat,
    linear-gradient(var(--p2),var(--p2)) 0 22px/100% 2px no-repeat,
    var(--p1)}

/* ═════════ tournament emblem on a regional plaque (the cut-out emblem needs a dark ground) ═════════ */
.emblem{position:relative;display:grid;place-items:center;flex:none;overflow:hidden;background:var(--plq);
  width:50px;height:62px;border-radius:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 12%,transparent)}
.emblem img{display:block;height:46px;width:auto;margin-top:-4px}
.emblem.lg{width:132px;height:auto;padding:16px 0 22px;margin-inline:auto;border-radius:10px}
.emblem.lg img{height:150px;margin:0}
#site-header .emblem{grid-area:logo;align-self:center}
/* Najdi: Sadu black, a row of red Sadu triangles along the foot */
:root[data-variant="najdi"]{--plq:#241510}
:root[data-variant="najdi"] .emblem::after{content:"";position:absolute;inset-inline:0;bottom:0;height:6px;
  background:conic-gradient(from -45deg at 50% 100%,#A3271F 0 90deg,transparent 0) 0 0/10px 6px repeat-x,#F1E4CF}
/* Hejazi: painted roshan green under an arched top, framed in teak */
:root[data-variant="hejazi"]{--plq:#1E4D43}
:root[data-variant="hejazi"] .emblem{border-radius:25px 25px 6px 6px;box-shadow:inset 0 0 0 2px #8A5A33,inset 0 0 0 4px #1E4D43,inset 0 0 0 5px color-mix(in srgb,#E3B23C 55%,transparent)}
:root[data-variant="hejazi"] .emblem.lg{border-radius:66px 66px 10px 10px}
/* Asiri: Qatt blue, painted rukun triangles in red, yellow and green along the foot */
:root[data-variant="asiri"]{--plq:#1F3F78}
:root[data-variant="asiri"] .emblem::after{content:"";position:absolute;inset-inline:0;bottom:0;height:7px;
  background:conic-gradient(from 135deg at 50% 0,#C8322B 0 90deg,transparent 0) 0 0/24px 7px repeat-x,
    conic-gradient(from 135deg at 50% 0,#F2B632 0 90deg,transparent 0) 8px 0/24px 7px repeat-x,
    conic-gradient(from 135deg at 50% 0,#2E8B57 0 90deg,transparent 0) 16px 0/24px 7px repeat-x}
/* Hasawi: bisht black with a double gold zari rim */
:root[data-variant="hasawi"]{--plq:#1A1511}
:root[data-variant="hasawi"] .emblem{box-shadow:inset 0 0 0 2px #C9A23A,inset 0 0 0 4px #1A1511,inset 0 0 0 5px #E9D59A}
#t-footer{text-align:center}
#t-footer .emblem{margin-bottom:14px}
/* the follow star: Sadu red, ghabanah yellow, Qatt yellow, zari gold */
:root[data-variant="najdi"]{--star:var(--p3)}
:root[data-variant="hejazi"]{--star:var(--p3)}
:root[data-variant="asiri"]{--star:var(--p3)}
:root[data-variant="hasawi"]{--star:var(--p2)}
/* launch screen plaque: exactly 3× the header plaque, so when it flies into the header at 1/3 it matches it */
.emblem.xl{width:150px;height:186px;border-radius:18px;box-shadow:inset 0 0 0 3px color-mix(in srgb,#fff 12%,transparent)}
.emblem.xl img{height:138px;margin-top:-12px}
:root[data-variant="najdi"] .emblem.xl::after{height:18px;
  background:conic-gradient(from -45deg at 50% 100%,#A3271F 0 90deg,transparent 0) 0 0/30px 18px repeat-x,#F1E4CF}
:root[data-variant="hejazi"] .emblem.xl{border-radius:75px 75px 18px 18px;box-shadow:inset 0 0 0 6px #8A5A33,inset 0 0 0 12px #1E4D43,inset 0 0 0 15px color-mix(in srgb,#E3B23C 55%,transparent)}
:root[data-variant="asiri"] .emblem.xl::after{height:21px;
  background:conic-gradient(from 135deg at 50% 0,#C8322B 0 90deg,transparent 0) 0 0/72px 21px repeat-x,
    conic-gradient(from 135deg at 50% 0,#F2B632 0 90deg,transparent 0) 24px 0/72px 21px repeat-x,
    conic-gradient(from 135deg at 50% 0,#2E8B57 0 90deg,transparent 0) 48px 0/72px 21px repeat-x}
:root[data-variant="hasawi"] .emblem.xl{box-shadow:inset 0 0 0 6px #C9A23A,inset 0 0 0 12px #1A1511,inset 0 0 0 15px #E9D59A}

/* ═════════ regional touches inside the page ═════════ */
:root[data-variant="najdi"] .seg-pill{box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 -2px 0 var(--p3)}
:root[data-variant="najdi"] :is(.day,.sec) > h3::after{content:"";margin-inline-start:auto;width:34px;height:9px;align-self:center;
  background:conic-gradient(from 135deg at 50% 0,var(--line) 0 90deg,transparent 0) 0 0/12px 9px repeat-x}
:root[data-variant="najdi"] .match[data-state="live"] .status{background:var(--live);color:var(--on-accent);padding:3px 8px;border-radius:var(--r)}
:root[data-variant="hejazi"] .seg-pill{box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 -2px 0 var(--p3)}
:root[data-variant="hejazi"] :is(.day,.sec) > h3{padding-bottom:6px;border-bottom:1px solid var(--line)}
:root[data-variant="hejazi"] :is(.day,.sec) > h3::after{content:"";margin-inline-start:auto;align-self:center;width:22px;height:14px;
  background:radial-gradient(circle at 50% 100%,var(--accent) 0 4.5px,transparent 5px) 0 0/11px 5px repeat-x,
    linear-gradient(90deg,transparent 1px,var(--accent) 1px 10px,transparent 10px) 0 5px/11px 9px repeat-x}
:root[data-variant="asiri"] .seg-pill{box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 -3px 0 var(--p3)}
:root[data-variant="asiri"] :is(.day,.sec) > h3{padding-bottom:8px;border-bottom:5px double var(--p1)}
:root[data-variant="asiri"] .row{border-inline-start:4px solid var(--line)}
:root[data-variant="asiri"] .match[data-state="live"] .row{border-inline-start-color:var(--p2)}
:root[data-variant="asiri"] .match[data-state="finished"] .row{border-inline-start-color:var(--p5)}
:root[data-variant="asiri"] .match[data-stage="final"] .row{border-inline-start-color:var(--p3)}
:root[data-variant="asiri"] #menu .ico{background:var(--p4)}
:root[data-variant="hasawi"] .seg-pill{box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 -2px 0 var(--p2)}
:root[data-variant="hasawi"] :is(.day,.sec) > h3{padding-bottom:6px;border-bottom:1px solid var(--p2)}
:root[data-variant="hasawi"] :is(.day,.sec) > h3::after{content:"";margin-inline-start:auto;align-self:center;width:10px;height:10px;background:var(--p2);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
:root[data-variant="hasawi"] #t-title{color:var(--p3)}
:root[data-variant="hejazi"] #menu .ico,:root[data-variant="hasawi"] #menu .ico{background:var(--p1);color:var(--p3)}

