/* ==========================================================================
     KALBA SPORTS FESTIVAL 2026 — official brand typography (from the identity
     package). Arabic: GE Contrast Bold for headlines, TheSans for body copy.
     English: Losta Masta (serif display) for headlines, Montserrat for body.
     All faces self-hosted from /fonts; font-display:swap so text paints
     immediately in a fallback while the brand faces load.
     ========================================================================== */
  @font-face {
    font-family: 'GE Contrast'; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url('../fonts/GEContrast-Bold.otf') format('opentype');
  }
  @font-face {
    font-family: 'TheSans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/TheSans-Plain.otf') format('opentype');
  }
  @font-face {
    font-family: 'TheSans'; font-style: normal; font-weight: 600 900; font-display: swap;
    src: url('../fonts/TheSans-Bold.otf') format('opentype');
  }
  @font-face {
    font-family: 'Losta Masta'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('../fonts/LostaMasta-Light.otf') format('opentype');
  }
  @font-face {
    font-family: 'Losta Masta'; font-style: normal; font-weight: 400 500; font-display: swap;
    src: url('../fonts/LostaMasta-Medium.otf') format('opentype');
  }
  @font-face {
    font-family: 'Losta Masta'; font-style: normal; font-weight: 600 900; font-display: swap;
    src: url('../fonts/LostaMasta-Black.otf') format('opentype');
  }
  @font-face {
    font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/Montserrat-Var.ttf') format('truetype');
  }
  :root {
    /* Brand palette — sampled from the identity artwork:
       navy #013F5A · teal #0098B0 · coral #F04A2D · gold #FBAC18,
       laid over a deep-navy surface scale derived from the brand navy. */
    --deep: #0A2133; --deep2: #123048; --sea: #0F7E95; --sea-dark: #0B5C73;
    /* --gold carries the brand coral (primary action); --gold-soft / --gold-ink
       carry the brand gold for accent text on navy. Names kept so every
       existing usage restyles at once. */
    --gold: #E8542F; --gold-soft: #F5A81C; --gold-ink: #F7B558; --surf: #1D9BB0; --sand: #081C2B; --ink: #EAF2F8;
    --navy: #013F5A; --teal: #0098B0; --coral: #F04A2D;
    --muted: #A9C1D2; --line: #1E4664; --ok: #16a34a; --warn: #d97706; --bad: #dc2626;
    /* Darker variants for text and small filled controls. The base --ok/--warn are tuned
       for large fills and only reach ~3.2:1 on white, under the 4.5:1 needed for text. */
    --ok-ink: #4cc276; --warn-ink: #fbbf24; --bad-ink: #f87171;
    --radius: 8px; --shadow: 0 4px 18px rgba(15,23,42,.08);
    /* Stock CSS easings are too weak to read as intentional. One strong out-curve
       for things arriving, one strong in-out for things morphing in place. */
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
    /* Arabic-first stacks (the site's default language). html[lang=en] swaps
       the priority so Latin text sets in Montserrat / Losta Masta. */
    --font: 'TheSans', 'Montserrat', "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
    --font-display: 'GE Contrast', 'Losta Masta', 'TheSans', "Segoe UI", Tahoma, sans-serif;
  }
  html[lang="en"] {
    --font: 'Montserrat', 'TheSans', "Segoe UI", Tahoma, Arial, sans-serif;
    --font-display: 'Losta Masta', 'GE Contrast', 'Montserrat', "Segoe UI", serif;
  }
 
  /* Product demo: committed single look (the festival's own identity) in both viewer themes */
  html, body { background: var(--sand); }
  body { margin: 0; font-family: var(--font); color: var(--ink); line-height: 1.6; font-size: 17px; background: var(--sand); }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  a { color: var(--gold-soft); text-decoration: none; cursor: pointer; }
  /* Display face on headings and the big numerals — the places that set the page's
     voice. Body copy, forms and tables stay on the naskh face, which reads better at
     paragraph sizes. Tightened tracking because Cairo 800 sets wide by default. */
  h1, h2, h3,
  .pagehead h1, .def-hero h1, .def-state h2, .cat-head, .faq-hero h1, .faq-cat-head,
  .cal-title b, .day-name, .pod-rank, .def-stat b, .lbd-stat b,
  .stat .n, .ev-title, .sec-title, .ph-kicker, .def-kicker, .def-over, .ev-tag, .ag-tag {
    font-family: var(--font-display); font-weight: 700; letter-spacing: normal; text-transform: uppercase;
  }
  /* Latin condensed caps want a little air. Arabic joins its glyphs, so it is never
     tracked - hence a lang-scoped rule rather than spacing on the shared selector. */
  html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
  html[lang="en"] .sec-title, html[lang="en"] .ev-title, html[lang="en"] .def-kicker { letter-spacing: .04em; }
  h1, h2, h3 { line-height: 1.3; }
  /* Section headings promoted from h3 to h2 so the outline runs h1 -> h2 with no gap.
     .sec-h pins them at the old h3 size so nothing changes visually. */
  h2.sec-h { font-size: 1.17em; font-weight: 700; }
  .container { width: 100%; margin: 0 auto; padding: 0 clamp(16px, 3vw, 44px); }
  .section { padding: 30px 16px; }
  .muted { color: var(--muted); }
  .center { text-align: center; }

  .topbar { background: var(--deep); color: #fff; position: sticky;  z-index: 50; }
  .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; flex-wrap: wrap; padding: 4px clamp(16px, 3vw, 44px); margin: 0 auto; }
  .brand { color: #fff; font-weight: 800; display: flex; align-items: center; gap: 8px; font-size: 1rem; cursor: pointer; }
  .brand .star { color: var(--gold); }
  .brand-logo { width: 36px; height: auto; background: #fff; border-radius: 8px; padding: 3px 5px; flex-shrink: 0; }
  nav.main { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
  nav.main a { color: #cbd5e1; padding: 7px 10px; border-radius: 8px; font-size: .88rem; }
  nav.main a:hover, nav.main a.active { background: rgba(255,255,255,.12); color: #fff; }
  nav.main a.cta { background: var(--gold); color: #fff; font-weight: 700; }
  nav.main a.lang { border: 1px solid #3A688C; }

  /* Background image (WebP, ~115KB; sky-tone fallback shows while it loads) */
  .hero {background:#0E273A url("../media/portals/MainB.webp") center 45%/cover no-repeat;color: #fff; text-align:
  center; padding: 48px 16px 42px;min-height: 650px;}
  /* soft scrim so the navy hero text stays legible over any photo area */
  .hero-split h1, .hero-sub.festival-subtitle, .hero-welcome, .hero-meta { text-shadow: 0 1px 12px rgba(255,255,255,.75), 0 0 28px rgba(255,255,255,.5); }
  /* HERO SECTION */
  .hero-split{text-align:center;padding:80px 20px 90px;}
  .hero-grid{max-width:900px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;text-align:center;}
  /* Hero Content */
  .hero-info{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
  /* Welcome */
  .hero-welcome{color:#F5A81C;font-size:1.08rem;font-weight:700;margin-bottom:8px;}
  /* Main Title */
  .hero-split h1{color:#0F7E95;font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1.2;margin:0 0 12px;text-align:center;}
  /* Subtitle */
  .hero-sub.festival-subtitle{ color:#0F7E95; font-size:1.18rem;font-weight:600;line-height:1.7;max-width:760px;margin:0 auto 18px;text-align:center;}
  /* Date & Location */
  .hero-meta{display:flex; justify-content:center; align-items:center;gap:18px;flex-wrap:wrap;color:#0F7E95; font-size:1rem;font-weight:600;margin:0 auto 18px; text-align:center;}
  /* Buttons */
  .hero-split .ctas{display:flex;justify-content:center; align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;}
  /* Countdown */
  .cd-card{background:rgba(24,49,79,.78);border:1px solid rgba(255,255,255,.45);border-radius:20px;padding:20px 24px;max-width:470px;margin:0 auto; box-shadow:0 12px 30px rgba(0,0,0,.18);backdrop-filter:blur(6px);}
  .cd-title{color:#FFFFFF;font-size:1.15rem;font-weight:700;text-align:center;margin-bottom:18px;}
  .countdowndisplay{display:flex;justify-content:center; align-items:center;gap:12px;flex-wrap:nowrap;}
  .cd-cell{width:88px;padding:14px 10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.45);text-align:center;}
  .cd-num{display:block;color:#ffffff;font-size:2rem;font-weight:800;margin-bottom:8px;}
  .cd-lbl{color:#F3F5F8;font-size:.82rem;font-weight:600;}
  /* Responsive */
  @media (max-width:768px){.hero-split{padding:60px 18px 70px;}.hero-grid{gap:24px;}.hero-split h1{font-size:2.2rem;}
  .hero-sub.festival-subtitle{font-size:1rem;}.hero-meta{flex-direction:column; gap:8px;}.cd-card{max-width:100%;}
  .cd-cell{width:70px;}.cd-num{font-size:1.5rem;}
  /* Hide desktop tabs */
  .results-tabs{display:none;}
  }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
    padding: 11px 22px; border-radius: 5px; border: 0; background: #1F4463;
    color: var(--ink); font-size: .93rem; cursor: pointer; font-family: inherit; transition: filter .15s, transform 160ms var(--ease-out-strong); }
  .btn:hover { filter: brightness(1.07); }
  .btn:active { transform: scale(.98); }
  .btn:focus-visible, a:focus-visible, .award-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .btn.primary { background: linear-gradient(135deg, var(--sea), var(--sea-dark)); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform 160ms var(--ease-out-strong), box-shadow 160ms var(--ease-out-strong); }
  .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0,0,0,.38); }
  .btn.gold { background: linear-gradient(135deg, #F2683F, #D9411F); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(240,74,45,.35); transition: transform 160ms var(--ease-out-strong), box-shadow 160ms var(--ease-out-strong); }
  .btn.gold:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(240,74,45,.45); }
  .btn.ghost { background: transparent; border: 1px solid var(--sea); color: var(--gold-soft); }
  .hero .btn.ghost { border-color: #7C9DB5; color: #1F4463; }
  .btn.ok { background: #15803d; color: #fff; } .btn.warn { background: #b45309; color: #fff; } .btn.danger { background: #b91c1c; color: #fff; }
  .btn.block { width: 100%; margin-top: 10px; }
  /* 44px minimum touch target. Keeps the compact look via padding while the box stays
     tappable — these are the primary actions on the community and schools pages. */
  .btn.sm { padding: 4px 11px; font-size: .8rem; border-radius: 7px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

  .grid { display: grid; gap: 13px; }
  .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 920px) { .g4, .g3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
  .card { background: #0F2A3E; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
  .champ-card { padding: 0; overflow: hidden; }
  .champ-card .card-media { height: 148px; margin: 0 0 12px; border-radius: 0; overflow: hidden; display: grid; place-items: center; background: linear-gradient(150deg, #eef2f7, #e2e9f1); position: relative; }
  .champ-card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
  .champ-card:hover .card-media img { transform: scale(1.06); }
  .champ-card .card-media span { font-size: 2.6rem; }
  .champ-card .tt { padding: 0 14px 16px; margin: 0; }
  .cardimg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .cardimg-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #0F2A3E; }
  .cardimg-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; display: block; }
  .cardimg-icon { display: grid; place-items: center; aspect-ratio: 16 / 10; font-size: 2.2rem; background: var(--sand); border-radius: 8px; }
  .cardimg-name { font-weight: 700; font-size: .85rem; margin: 8px 0 6px; }
  .cardimg-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .cardimg-actions input[type=file] { max-width: 150px; font-size: .75rem; }
  /* .card.link renders as a <button>; reset the UA styling and make it fill the grid cell. */
  .card.link { cursor: pointer; position: relative; width: 100%; display: block; text-align: inherit; font: inherit; color: inherit; transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s; }
  .card.link:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
  .card.link:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,23,42,.15); border-color: var(--gold); }
  /* gold rule that wipes in on hover — ties the cards to the header's accent */
  .card.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--surf)); transform: scaleX(0); transform-origin: var(--wipe-from, left); transition: transform .28s cubic-bezier(.22,.61,.36,1); }
  [dir=rtl] .card.link::after { --wipe-from: right; }
  .card.link:hover::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .card.link, .card.link::after, .champ-card .card-media img { transition: none; } .card.link:hover { transform: none; } }
  .card .ic { font-size: 1.8rem; }
  /* an SVG in this slot has to match the weight of the emoji used in the cards
     beside it, and the base .sc-i rule is only 16px */
  .card .ic .sc-i { width: 28px; height: 28px; color: var(--sea); }
  .card .tt { font-weight: 700; margin: 7px 0 3px; }
  .card .dd { color: var(--muted); font-size: .85rem; }
  .panel { background: #0F2A3E; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 16px; }
  
  .sec-title { font-size: 1.45rem; font-weight: 800; margin: 0 0 4px; }
  .sec-intro { color: var(--muted); margin: 0 0 18px; }

  .field { margin-bottom: 14px; flex: 1; min-width: 150px; }
  .flabel { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; }
  .req { color: var(--bad); } .opt { color: var(--muted); font-weight: 400; font-size: .78rem; }
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], select, textarea, input[type=file] {
    width: 100%; padding: 10px 12px; border: 1px solid #2C587A; border-radius: 10px;
    font-family: inherit; font-size: .93rem; background: #0F2A3E; color: var(--ink);
    min-height: 44px;   /* was 42px — under the touch-target minimum */
  }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--sea); border-color: var(--sea); }
  /* invalid state — border plus an icon-marked message, so it is not colour-only */
  .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad-ink); background: #241416; }
  .field-err { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .84rem; font-weight: 700; color: var(--bad-ink); }
  .field-err::before { content: '!'; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; background: #b91c1c; color: #fff; font-size: .72rem; display: grid; place-items: center; }
  #formErr:focus { outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 8px; }
  .frow { display: flex; gap: 13px; flex-wrap: wrap; }

  /* Unified registration form. Eight portal cards each opened their own page, so
     "register" meant eight different layouts and one wrong guess sent you back.
     Now one form: pick the type first, and only that type's fields are revealed. */
  .reg-picked { display: flex; align-items: center; gap: 12px; background: #123048; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 18px 0; }
  .reg-picked img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
  .reg-picked b { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.35; }
  .reg-picked span { display: block; color: var(--muted); font-size: .83rem; line-height: 1.45; }
  h2.reg-sub { margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--gold-soft); }
  .reg-picked + h2.reg-sub { margin-top: 0; padding-top: 0; border-top: 0; }
  /* Short and transform-only, so it reads as the fields arriving rather than as
     decoration; dropped entirely when the viewer asks for less motion. */
  /* Squad roster: the row number is the visible label, and each input still
     carries a real one for screen readers rather than leaning on the placeholder. */
  .pf-roster { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  /* width/min-width override .field's flex:1 + min-width:150px, which otherwise pins
     the row at 150px and lets the input overflow it. */
  .pf-player { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 0; width: 100%; min-width: 0; }
  .pf-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #153450; color: var(--muted); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
  .pf-player input { flex: 1 1 150px; width: auto; }
  .pf-del { flex: 0 0 auto; width: 44px; min-height: 44px; border: 1px solid var(--line); background: #0F2A3E; border-radius: 10px; color: var(--bad-ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
  .pf-del:hover { background: #2a1518; border-color: var(--bad-ink); }
  .pf-del:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .pf-player .field-err { flex: 1 0 100%; }

  /* Each player's own payout documents, on their own line under the name so
     the pairing is visible rather than implied by field order. */
  .pf-docs { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 2px 34px; }
  html[dir="rtl"] .pf-docs { padding-left: 0; padding-right: 34px; }
  .pf-doc { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px;
            font-size: .78rem; color: var(--muted); }
  .pf-doc > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf-player .pf-doc input[type="file"] { flex: 0 0 auto; width: 100%; font-size: .78rem; }
  /* Squad on the confirmation card, over the navy panel. */
  .vroster { text-align: start; margin: 12px 0 4px; padding: 12px 16px; background: rgba(255,255,255,.08); border-radius: 12px; }
  .vroster ol { margin: 6px 0 0; padding-inline-start: 20px; font-size: .88rem; line-height: 1.7; }
  .reg-reveal { animation: regIn .22s var(--ease-out-strong) both; }
  @keyframes regIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .reg-reveal { animation: none; } }
  .checks { display: flex; flex-wrap: wrap; gap: 7px; }
  /* min-height, not extra padding: these chips measured 38px, under the 44px touch floor */
  .check { display: flex; align-items: center; gap: 6px; background: #193B58; padding: 7px 12px; min-height: 44px; border-radius: 9px; cursor: pointer; font-size: .87rem; border: 1px solid transparent; }
  .check:has(input:checked) { background: #0E3D55; border-color: var(--sea); }
  .chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
  .chip { cursor: pointer; }
  .chip input { position: absolute; opacity: 0; }
  /* inline-flex so min-height can centre the label: these were 36x38, under the 44px
     touch floor, and the NPS row packs eleven of them side by side */
  .chip span { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; background: #193B58; border-radius: 9px; border: 1px solid transparent; font-size: .9rem; min-width: 44px; min-height: 44px; text-align: center; }
  .chip:has(input:checked) span { background: var(--gold); color: #fff; font-weight: 700; }
  /* the radio itself is opacity:0, so the generic input:focus ring painted on an
     invisible box — keyboard users had no indicator at all on rating and NPS */
  .chip:has(input:focus-visible) span { outline: 2px solid var(--sea); outline-offset: 2px; }
  .flash { padding: 11px 15px; border-radius: 10px; margin: 12px 0; font-size: .9rem; }
  .flash.ok { background: #dcfce7; color: #14532d; } .flash.err { background: #fee2e2; color: #7f1d1d; } .flash.warn { background: #fef3c7; color: #78350f; }

  .vcard { background: linear-gradient(160deg, var(--deep), var(--sea-dark)); color: #fff; border-radius: 20px; padding: 26px; text-align: center; margin-bottom: 16px; box-shadow: 0 14px 40px rgba(15,23,42,.35); }
  .vcard .vh { color: var(--gold-soft); font-size: .88rem; letter-spacing: .3px; }
  .vcard h2 { margin: 10px 0 2px; font-size: 1.4rem; }
  .vcard .vage { color: #94a3b8; font-size: .83rem; margin-bottom: 13px; }
  .vqr { background: #fff; border-radius: 14px; padding: 10px; width: 200px; margin: 0 auto; }
  .vqr svg { display: block; width: 100%; height: auto; }
  .vcode { margin: 11px 0; color: #1F4463; font-size: .92rem; }
  .vcode b { color: var(--gold-soft); font-size: 1.1rem; letter-spacing: 2px; }
  .vstats { display: flex; gap: 13px; justify-content: center; margin-top: 6px; }
  .vstat { background: rgba(255,255,255,.09); border-radius: 12px; padding: 11px 22px; }
  .vstat .n { font-size: 1.6rem; font-weight: 800; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .vstat .l { font-size: .75rem; color: #cbd5e1; }

  .lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  /* Real <button>s now, so they need the font reset browsers don't inherit. */
  .lb-tab { padding: 10px 16px; background: #0F2A3E; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; font-family: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; transition: border-color .15s, background .15s; }
  .lb-tab:hover { border-color: var(--surf); }
  .lb-tab.active { background: var(--sea); color: #fff; border-color: var(--sea); }
  .lb-tab:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .lb-grp { color: var(--muted); font-size: .78rem; margin-inline-start: 6px; }
  .lb-row { display: flex; align-items: center; gap: 13px; background: #0F2A3E; border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; margin-bottom: 7px; box-shadow: var(--shadow); transition: transform .5s, opacity .5s; }
  .lb-rank { width: 34px; height: 34px; border-radius: 50%; background: #1F4463; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
  .lb-row.t1 .lb-rank { background: var(--gold); color: #fff; }
  .lb-row.t2 .lb-rank { background: #2C587A; } .lb-row.t3 .lb-rank { background: #d6a97c; }
  .lb-row.t1 { border-color: var(--gold); }
  .lb-row.me { outline: 2px solid var(--sea); }
  .lb-name { flex: 1; font-weight: 600; }
  .lb-pts { font-weight: 800; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .lb-row.bump { animation: bump .8s; }
  @keyframes bump { 0% { background: #fef9c3; } 100% { background: #0F2A3E; } }
  .live-dot { display: inline-block; width: 10px; height: 10px; background: #ef4444; border-radius: 50%; animation: pulse 1.4s infinite; vertical-align: middle; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
  @media (prefers-reduced-motion: reduce) { .live-dot, .lb-row.bump { animation: none; } .lb-row { transition: none; } }

  .screen-sim { background: var(--deep); color: #fff; border-radius: 18px; padding: 26px; }
  .ss-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .ss-brand { font-weight: 800; font-size: 1.15rem; }
  .ss-live { color: #ef4444; font-weight: 700; display: flex; gap: 7px; align-items: center; font-size: .9rem; }
  .ss-cols { display: grid; grid-template-columns: 1.8fr 1fr; gap: 22px; }
  @media (max-width: 700px) { .ss-cols { grid-template-columns: 1fr; } }
  .ss-cols h2 { color: var(--gold-soft); margin: 0 0 10px; }
  .s-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 12px; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
  .s-row .r { width: 1.9em; height: 1.9em; border-radius: 50%; background: #2C587A; display: grid; place-items: center; font-weight: 800; font-size: .82em; flex-shrink: 0; }
  .s-row.g { background: rgba(15,126,149,.16); } .s-row.g .r { background: var(--gold); color: #fff; }
  .s-row.s .r { background: #94a3b8; color: #fff; } .s-row.b .r { background: #b45309; }
  .s-row .nm { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .s-row .pt { font-weight: 800; color: var(--gold-soft); }
  .ss-foot { text-align: center; color: #7C9DB5; font-size: .8rem; margin-top: 12px; }

  .award-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .award-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 14px 0; }
  @media (max-width: 520px) { .award-grid { grid-template-columns: 1fr; } }
  .award-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); background: #123048; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: .95rem; text-align: start; }
  .award-btn:hover { background: #0E3D55; border-color: var(--sea); }
  .award-btn .an { flex: 1; font-weight: 700; } .award-btn .az { color: var(--muted); font-size: .74rem; }
  .award-btn .ap { background: var(--gold); color: #fff; font-weight: 800; border-radius: 999px; padding: 3px 11px; }

  table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
  table.t th, table.t td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
  table.t th { color: var(--muted); font-size: .76rem; }

  /* The fixture table leads each sport page, so it reads a step stronger than the
     generic .t tables: tinted header, the round carried as the emphasised column.
     It scrolls inside its own box rather than pushing the page sideways. */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.fx-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 340px; }
  table.fx-table th, table.fx-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
  table.fx-table thead th { background: #123048; color: var(--muted); font-size: .78rem; font-weight: 700; border-bottom: 2px solid var(--line); }
  table.fx-table tbody tr:last-child td { border-bottom: 0; }
  table.fx-table td:first-child { font-weight: 600; white-space: nowrap; }
  table.fx-table td strong { color: var(--gold-soft); }
  /* On a phone the three columns fit if the day label may wrap; the scroll
     container above stays as the safety net for very narrow screens. */
  @media (max-width: 560px) {
    table.fx-table { min-width: 0; font-size: .86rem; }
    table.fx-table th, table.fx-table td { padding: 9px 8px; }
    table.fx-table td:first-child { white-space: normal; }
  }
  .badge { border-radius: 999px; padding: 2px 11px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
  .badge.pending { background: #fef3c7; color: #78350f; } .badge.accepted { background: #dcfce7; color: #14532d; } .badge.rejected { background: #fee2e2; color: #7f1d1d; }
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 11px; margin-bottom: 18px; }
  .stat { background: #0F2A3E; border-radius: 12px; border: 1px solid var(--line); padding: 14px; text-align: center; box-shadow: var(--shadow); }
  .stat .n { font-size: 1.6rem; font-weight: 800; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .stat.w .n { color: var(--warn-ink); } .stat.k .n { color: var(--ok-ink); } .stat.g .n { color: var(--gold-ink); }
  .stat .l { font-size: .8rem; color: var(--muted); }  /* was .74rem = 11.84px, under the 12px floor */
  .stat.lead { border-color: var(--warn-ink); box-shadow: 0 4px 18px rgba(180,83,9,.14); }
  .stat.lead .n { font-size: 2.4rem; }
  .stat-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; background: none; border: 0; padding: 6px 0; font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--warn-ink); cursor: pointer; text-decoration: underline; }
  .stat-cta:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .bars { display: grid; gap: 6px; }
  .brow { display: grid; grid-template-columns: 150px 1fr 70px; gap: 9px; align-items: center; font-size: .85rem; }
  @media (max-width: 540px) { .brow { grid-template-columns: 100px 1fr 60px; } }
  .btrack { background: #193B58; border-radius: 999px; height: 15px; overflow: hidden; }
  .bfill { background: var(--sea); height: 100%; border-radius: 999px; min-width: 2px; }
  .nps-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .nps-s { font-size: 1.35rem; font-weight: 800; padding: 9px 18px; border-radius: 12px; background: #dcfce7; color: #14532d; }

  .star-map { width: 100%; height: auto; border-radius: 16px; }
  .star-map .zone { cursor: pointer; }
  .star-map .zone polygon, .star-map .zone circle { fill: rgba(15,126,149,.14); stroke: var(--gold); stroke-width: 2; transition: fill .15s; }
  .star-map .zone:hover polygon, .star-map .zone:hover circle, .star-map .zone.active polygon, .star-map .zone.active circle { fill: rgba(15,126,149,.42); }
  .star-map text { font-size: 25px; pointer-events: none; }
  .star-map .zl { font-size: 17px; fill: #fff; font-weight: 700; font-family: var(--font); }
  .map-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
  @media (max-width: 780px) { .map-wrap { grid-template-columns: 1fr; } }
  .zone-acts li { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #0F2A3E; border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; margin-bottom: 7px; list-style: none; }
  .zone-acts { padding: 0; margin: 0; }
  .pbadge { background: #dcfce7; color: #14532d; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: .82rem; white-space: nowrap; }

  .agenda-days { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
  @media (max-width: 720px) { .agenda-days { grid-template-columns: 1fr; } }
  .aday { background: #0F2A3E; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow); }
  .aday .ah { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-weight: 700; }
  .aday .num { width: 30px; height: 30px; background: var(--sea); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
  .aday ul { list-style: none; margin: 0; padding: 0; }
  .aday li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: .83rem; align-items: baseline; }
  .aday .tm { color: var(--gold-soft); font-weight: 700; white-space: nowrap; font-size: .76rem; font-variant-numeric: tabular-nums; }

  .footer { background: var(--deep); color: #94a3b8; margin-top: 36px; padding: 26px 16px; text-align: center; font-size: .85rem; }
  .footer .fb { color: #fff; font-weight: 700; } .footer .fs { color: var(--gold-soft); }

  .carousel { position: relative; max-width: 880px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.25); background: var(--deep); height: 380px; }
  @media (max-width: 640px) { .carousel { height: 250px; } }
  .car-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
  .car-slide.on { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .car-slide { transition: none; } }
  .car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .car-cap { position: absolute; bottom: 0; inset-inline: 0; background: linear-gradient(transparent, rgba(15,23,42,.88)); color: #fff; padding: 30px 16px 22px; font-size: .92rem; font-weight: 600; }
  .car-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(15,23,42,.55); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; z-index: 2; }
  .car-btn:hover { background: rgba(15,23,42,.8); }
  .car-btn.prev { inset-inline-start: 10px; } .car-btn.next { inset-inline-end: 10px; }
  .car-dots { position: absolute; bottom: 0; inset-inline: 0; display: flex; gap: 2px; justify-content: center; z-index: 2; }
  /* 24px tap area with a 9px visual dot */
  .car-dot { width: 24px; height: 24px; background: transparent; border: 0; cursor: pointer; padding: 0; position: relative; }
  .car-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); }
  .car-dot.on::after { background: var(--gold); }
  /* Enters rising with a strong out-curve; leaves faster than it arrived, and the
     base rule IS the exit state, so exit timing lives here and enter timing on .show. */
  .toast { position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(50%) translateY(12px); background: var(--deep); color: #fff;
           padding: 12px 22px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 100; font-size: .9rem;
           opacity: 0; transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; max-width: 92vw; }
  [dir=ltr] .toast { transform: translateX(-50%) translateY(12px); }
  .toast.show { opacity: 1; transform: translateX(50%) translateY(0); transition: opacity 220ms var(--ease-out-strong), transform 220ms var(--ease-out-strong); }
  [dir=ltr] .toast.show { transform: translateX(-50%) translateY(0); }
  .backlink { display: inline-block; margin-bottom: 10px; font-size: .88rem; }
  .hint { font-size: .8rem; color: var(--muted); }
  .success-panel { text-align: center; padding: 40px 20px; }
  .success-panel .be { font-size: 3rem; }

  /* ===== DEF-style homepage: full-screen dark hero, statement band, alternating features ===== */
  .defdark { background: #071826; color: #eaf1f9; position: relative; padding-bottom: 52px; }
  .defdark::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q15 4 30 14 T60 14 T90 14 T120 14 V26 H0 Z' fill='%23081C2B'/%3E%3C/svg%3E") repeat-x bottom; background-size: 120px 26px; pointer-events: none; z-index: 3; }
  .def-hero { position: relative; min-height: 86vh; display: grid; place-items: center; overflow: hidden; padding: 90px 16px 60px; text-align: center; }
  /* shorter hero for inner pages — the homepage keeps the full-height one */
  .def-hero-sm { min-height: 56vh; padding: 70px 16px 50px; }
  .def-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
  .def-hero .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.95)); }
  .def-hero-in { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; }
  .def-kicker { color: var(--gold-soft); font-weight: 800; letter-spacing: 3px; font-size: .95rem; margin-bottom: 12px; }
  .def-hero h1 { color: #fff; font-size: clamp(2.5rem, 7vw, 4.4rem); font-weight: 900; line-height: 1.15; margin: 0 0 14px; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
  .def-sub { color: #c9d6e6; font-size: clamp(1rem, 2.2vw, 1.22rem); max-width: 660px; margin: 0 auto 16px; line-height: 1.9; }
  .def-meta { color: #9fb1c7; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 0 0 24px; font-size: .95rem; }
  .btn.def { border-radius: 5px; padding: 15px 40px; font-size: 1.05rem; font-weight: 800; min-width: 170px; }
  .btn.defghost { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 2px rgba(15,126,149,.75); color: var(--gold-soft); }
  .btn.defghost:hover { background: rgba(15,126,149,.15); }
  .def-count { display: flex; gap: 12px; justify-content: center; margin-top: 30px; direction: ltr; flex-wrap: wrap; }
  .def-count .cd-cell { background: rgba(255,255,255,.06); border: 1px solid rgba(15,126,149,.45); backdrop-filter: blur(4px); }
  /* ---- Homepage: hero carousel, marquee bands, counters, why-visit, testimonials.
     The reference this follows leads with its competitions rather than a static
     photo, repeats exactly two calls to action, and counts its numbers up on
     arrival. All three transfer; the black-and-green identity does not, so this
     stays on the festival's own navy and gold. */
  .hx-slides { position: absolute; inset: 0; z-index: 0; }
  .hx-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity .7s ease, transform 7s linear; transform: scale(1.06); }
  .hx-slide.on { opacity: 1; transform: scale(1); }
  .hx-kick { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 6px 14px;
    border: 1px solid rgba(15,126,149,.5); border-radius: 999px; color: var(--gold-soft);
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
  .def-hero h1.hx-name { min-height: 1.15em; }
  .hx-explore { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 18px; padding: 9px 4px;
    background: none; border: 0; border-bottom: 2px solid var(--gold); color: #fff;
    font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; transition: gap .18s, color .18s; }
  .hx-explore:hover { gap: 12px; color: var(--gold-soft); }
  .hx-explore:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .hx-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px;
    display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
    background: rgba(0,0,0,.5); backdrop-filter: blur(6px); color: #fff; font-size: 1.6rem; line-height: 1;
    cursor: pointer; transition: background .18s, border-color .18s; }
  .hx-nav:hover { background: rgba(0,0,0,.8); border-color: var(--gold); }
  .hx-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .hx-prev { inset-inline-start: 18px; } .hx-next { inset-inline-end: 18px; }
  .hx-dots { position: absolute; bottom: 26px; inset-inline: 0; z-index: 3; display: flex; justify-content: center;
    gap: 7px; flex-wrap: wrap; padding: 0 20px; }
  /* The bar stays 4px but the button is 32px tall: content-box plus background-clip
     grows the hit area without growing the mark. */
  .hx-dot { width: 26px; height: 4px; border-radius: 99px; border: 0; padding: 14px 0; cursor: pointer;
    box-sizing: content-box; background-clip: content-box;
    background: rgba(255,255,255,.3); transition: background .2s, width .2s; }
  .hx-dot.on { background: var(--gold); width: 40px; }
  .hx-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  @media (max-width: 700px) {
    /* Arrows carry navigation on a phone, so they hold the full 44px target. Fifteen
       dots would wrap to three rows here, and the 01/15 counter already says where
       you are, so they stand down rather than shrink below a usable size. */
    .hx-nav { width: 44px; height: 44px; font-size: 1.35rem; }
    .hx-prev { inset-inline-start: 8px; } .hx-next { inset-inline-end: 8px; }
    .hx-dots { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .hx-slide { transition: opacity .2s; transform: none; } }

  /* Marquee band. Duplicating the track is what makes the loop seamless: the
     animation travels exactly one copy's width and restarts invisibly. */
  .mq { overflow: hidden; border-block: 1px solid rgba(15,126,149,.25); background: rgba(15,126,149,.06);
    padding: 13px 0; position: relative; z-index: 1; }
  .mq-track { display: flex; gap: 34px; width: max-content; animation: mqRun 34s linear infinite; }
  .mq-track span { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
    letter-spacing: .16em; color: rgba(245,168,28,.85); white-space: nowrap; }
  .mq-track span::after { content: '\2022'; margin-inline-start: 34px; color: rgba(245,168,28,.45); }
  @keyframes mqRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  [dir=rtl] .mq-track { animation-name: mqRunRtl; }
  @keyframes mqRunRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
  @media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

  /* Counters share .def-stat; only the roll-up is new. */
  .def-stat b { font-variant-numeric: tabular-nums; }

  .wv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 26px; }
  .wv-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
    padding: 24px 22px; text-align: start; transition: background .2s, border-color .2s, transform .2s; }
  .wv-card:hover { background: rgba(255,255,255,.08); border-color: rgba(15,126,149,.45); transform: translateY(-3px); }
  .wv-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(15,126,149,.14); color: var(--gold-soft); margin-bottom: 14px; }
  .wv-ic .sc-i { width: 22px; height: 22px; }
  .wv-card h3 { font-family: var(--font-display); font-size: 1.05rem; color: #fff; margin: 0 0 7px; }
  .wv-card p { color: #b8c7da; font-size: .9rem; line-height: 1.75; margin: 0; }
  @media (prefers-reduced-motion: reduce) { .wv-card:hover { transform: none; } }

  .nw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
  .nw-card { display: flex; flex-direction: column; gap: 9px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px; text-align: start;
    font-family: inherit; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
  .nw-card:hover { background: rgba(255,255,255,.08); border-color: rgba(15,126,149,.45); transform: translateY(-3px); }
  .nw-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .nw-date { color: var(--gold-soft); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
  .nw-title { color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.6; }
  .nw-more { color: #9fb3c9; font-size: .84rem; font-weight: 600; margin-top: auto; }
  .nw-live { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { .nw-card:hover { transform: none; } }

  .def-sec-head { text-align: center; max-width: 720px; margin: 0 auto 4px; }
  .def-sec-head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: #fff; margin: 0 0 10px; }
  .def-sec-head p { color: #a9bbd0; font-size: .96rem; line-height: 1.8; margin: 0; }
  .def-wrap { max-width: 1180px; margin: 0 auto; padding: 66px clamp(16px, 3vw, 40px); position: relative; z-index: 1; }
  .def-state { text-align: center; padding: 80px 16px 50px; position: relative; z-index: 1; }
  .def-state h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 900; color: #fff; margin: 0 0 16px; line-height: 1.3; }
  .def-state h2 b { color: var(--gold); }
  .def-state > p { color: #b9c8db; max-width: 720px; margin: 0 auto 34px; font-size: 1.08rem; line-height: 1.9; }
  .def-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
  .def-stat b { display: block; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
  .def-stat span { color: #9fb1c7; font-size: .95rem; }
  .def-feat { display: flex; gap: 44px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 46px 24px; flex-wrap: wrap; position: relative; z-index: 1; }
  .def-feat.flip { flex-direction: row-reverse; }
  .def-feat-img { flex: 1 1 400px; position: relative; min-width: 0; }
  .def-feat-img img { width: 100%; border-radius: 4px; display: block; aspect-ratio: 16/10; object-fit: cover; }
  .def-feat-img::before { content: ''; position: absolute; inset: -12px 12px 12px -12px; border: 2px solid var(--gold); opacity: .5; pointer-events: none; }
  [dir=rtl] .def-feat-img::before { inset: -12px -12px 12px 12px; }
  .def-feat-txt { flex: 1 1 380px; min-width: 0; }
  .def-over { color: var(--gold); font-weight: 800; letter-spacing: 3px; font-size: .82rem; }
  .def-feat-txt h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; margin: 8px 0 12px; }
  .def-feat-txt p { color: #b9c8db; line-height: 1.9; margin: 0 0 22px; }
  @media (max-width: 760px) {
    .def-hero { min-height: 76vh; }
    .def-feat, .def-feat.flip { flex-direction: column; gap: 26px; padding: 30px 18px; }
    /* Once the row becomes a column, flex-basis stops being a width and becomes a
       height — 400px and 380px were forcing the photo box and the text block to that
       tall, which left the gold frame drawn around 188px of nothing under the image. */
    .def-feat-img, .def-feat-txt { flex: 0 0 auto; width: 100%; }
    .def-stats { gap: 22px; }
  }
  /* summer wave divider — blends the photo hero into the sand background */
  .hero { position: relative; overflow: hidden; }
  .hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q15 4 30 14 T60 14 T90 14 T120 14 V26 H0 Z' fill='%23081C2B'/%3E%3C/svg%3E") repeat-x bottom; background-size: 120px 26px; pointer-events: none; z-index: 3; }
  .hero > * { position: relative; }
  .hero-bookmark { position: absolute; top: 0; inset-inline-start: 9%; width: 42px; height: 66px; z-index: 1; }
  @media (max-width: 640px) { .hero-bookmark { inset-inline-start: 16px; } }
  .sec-title { color: var(--gold-soft); }
  .sec-title::after { content: ''; display: block; width: 54px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--surf)); border-radius: 2px; margin-top: 7px; }
  .sec-title.center::after { margin-inline: auto; }

  /* ---- shared page header ----
     Carries the homepage's navy + gold identity onto every inner page, then hands off
     to the light sand background (via the same wave divider .defdark uses) so dense
     tables, forms and leaderboards keep their contrast. */
  .pagehead { position: relative; background: linear-gradient(150deg, #071826, #0F5273); color: #fff; padding: 52px 16px 60px; text-align: center; overflow: hidden; margin-bottom: 28px; }
  .pagehead::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q15 4 30 14 T60 14 T90 14 T120 14 V26 H0 Z' fill='%23081C2B'/%3E%3C/svg%3E") repeat-x bottom; background-size: 120px 26px; pointer-events: none; z-index: 3; }
  .ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; z-index: 0; }
  /* Scrim between the photo and the copy. Without it a bright background image (sand,
     white kit) lifts the effective background luminance and the AA contrast measured
     against the flat gradient stops holding. */
  .pagehead::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.88)); z-index: 1; pointer-events: none; }
  .pagehead-in { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
  .ph-kicker { color: var(--gold); font-weight: 800; letter-spacing: 3px; font-size: .8rem; margin-bottom: 10px; }
  .pagehead h1 { color: #fff; font-size: clamp(1.85rem, 4.4vw, 2.9rem); font-weight: 900; line-height: 1.2; margin: 0 0 12px; text-shadow: 0 3px 22px rgba(0,0,0,.35); }
  .pagehead h1::after { content: ''; display: block; width: 62px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--surf)); border-radius: 2px; margin: 14px auto 0; }
  /* h1 takes programmatic focus on navigation (announces the new view); it is not a
     keyboard stop, so it should not paint a focus ring */
  h1[tabindex="-1"]:focus { outline: none; }
  .pagehead p.ph-sub { color: #c2d0e2; max-width: 640px; margin: 14px auto 0; line-height: 1.85; font-size: 1.02rem; }
  .pagehead .ph-back { color: var(--gold-soft); display: inline-block; margin-bottom: 14px; font-size: .88rem; font-weight: 600; }
  .pagehead .ph-back:hover { color: #fff; }
  .ph-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
  .ph-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
  .ph-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(15,126,149,.4); color: #e7eef7; border-radius: 999px; padding: 7px 15px; font-size: .85rem; font-weight: 600; }
  .ph-chip b { color: var(--gold); font-variant-numeric: tabular-nums; }
  @media (max-width: 760px) { .pagehead { padding: 38px 16px 50px; } }

  /* v2 modules */
  .countdown { display: flex; gap: 10px; justify-content: center; margin: 16px 0 4px; direction: ltr; }
  .cd-cell { background: rgba(255,255,255,.08); border: 1px solid rgba(15,126,149,.4); border-radius: 12px; padding: 9px 13px; min-width: 72px; text-align: center; }
  .cd-num { display: block; font-size: 1.7rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
  .cd-lbl { font-size: .75rem; color: #c9d3e0; }
  @media (max-width: 520px) { .cd-cell { min-width: 58px; padding: 7px 7px; } .cd-num { font-size: 1.25rem; } }
  .ticker { background: var(--sea-dark); color: #fff; display: flex; align-items: center; gap: 12px; padding: 8px 16px; overflow: hidden; border-top: 2px solid var(--gold); }
  .ticker-label { font-weight: 700; color: var(--gold-soft); white-space: nowrap; font-size: .84rem; }
  .ticker-track { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .ticker-track::-webkit-scrollbar { display: none; }
  .ticker-track a { color: #e7ecf3; font-size: .86rem; cursor: pointer; }
  .champ-hero { background: linear-gradient(150deg, var(--deep), var(--deep2)); color: #fff; border-radius: 14px; padding: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
  .match-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; flex-wrap: wrap; background: #0F2A3E; }
  
  /* New results card design */
  .results-list {display: grid;gap: 14px;margin-top: 18px;}
  .match-row {
  display: grid;grid-template-columns: 180px 1fr auto 1fr 110px;align-items: center;gap: 18px;
  background: #0F2A3E;border: 1px solid #e4e8ee;border-radius: 16px;
  padding: 18px 20px;margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(22, 59, 103, 0.07);transition: transform 0.2s ease, box-shadow 0.2s ease;}

  .match-row:hover {transform: translateY(-2px);box-shadow: 0 8px 22px rgba(22, 59, 103, 0.12);}
  .match-row.live {border-inline-start: 5px solid #dc3545;}
  .match-row.upcoming {border-inline-start: 5px solid #0F7E95;}
  .match-row.finished {border-inline-start: 5px solid #e9edf0;}
  .match-row .m-champ {display: flex;align-items: center;gap: 8px;color: #AFC6D6;font-weight: 600;}
  .match-row .m-champ small {font-size: 0.85rem;}
  .match-row .m-side {color: #e9edf0;font-size: 1rem;font-weight: 700;text-align: center;}
  .match-row .m-score {min-width: 80px;padding: 9px 14px;background: #16374F;border-radius: 12px;
    color: #e9edf0;font-size: 1.3rem;font-weight: 800;text-align: center;}
  .match-row .badge {justify-self: end;min-width: 90px;padding: 7px 10px;
  border-radius: 20px;text-align: center;font-size: 0.82rem;font-weight: 700;}
  .match-row .badge.accepted {background: #fde8eb;color: #b42333;}
  .match-row .badge.pending {background: #2b2211;color: #8b6500;}
  .match-row .badge.rejected {background: #24506F;color: #e9edf0;}
  @media (max-width: 850px) {
  .match-row {grid-template-columns: 1fr auto;gap: 12px;padding: 16px;}
  .match-row .m-champ {grid-column: 1;}
  .match-row .badge {grid-column: 2;grid-row: 1;}
  .match-row .m-side {text-align: start;}
  .match-row .m-score {grid-column: 2;grid-row: 2 / span 2;}
}
@media (max-width: 520px) {
  .match-row {grid-template-columns: 1fr;}
  .match-row .m-champ,.match-row .badge,
  .match-row .m-side,.match-row .m-score {grid-column: 1;grid-row: auto;justify-self: stretch;}
  .match-row .badge {width: fit-content;}
  .match-row .m-side {text-align: center;}}

.results-group {width:85%;margin:0 auto;background: #0F2A3E;border: 1px solid #24506F;border-radius: 18px;
  padding: 24px;margin-bottom: 28px;box-shadow: 0 5px 18px rgba(22, 59, 103, 0.08);}
.results-section-title {margin: 0 0 20px;color: #e9edf0;font-size: 1.35rem;font-weight: 800;}
.results-section-title::after {content: "";display: block;width: 48px;height: 4px;margin-top: 8px;
  background: #0F7E95;border-radius: 10px;}

  .match-row.live { border-color: var(--gold); background: #271523; border-inline-start: 4px solid #ef4444; animation: liveGlow 2.4s ease-in-out infinite; }
  @keyframes liveGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.12); } }
  @media (prefers-reduced-motion: reduce) { .match-row.live { animation: none; } }
  .m-champ { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
  /* A nested <small> here compounded to ~10.4px; hold it at the parent size. */
  .m-champ small { font-size: 1em; }
  .m-side { flex: 1; font-weight: 700; min-width: 80px; }
  .m-side:last-of-type { text-align: end; }
  /* scoreboard chip */
  .m-score { font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--deep); border-radius: 9px; padding: 4px 14px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
  .match-row.live .m-score { background: linear-gradient(135deg, var(--coral-hot, #F2683F), var(--coral-deep, #D9411F)); color: #fff; }
  .ok-text { color: var(--ok-ink); } .bad-text { color: var(--bad-ink); }
  .win-wrap { position: relative; }
  .win-wrap .car-btn { background: rgba(0,0,0,.75); }
  .win-wrap .car-btn:hover { background: var(--deep); }
  .win-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 4px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .win-row > :first-child { margin-inline-start: auto; }
  .win-row > :last-child { margin-inline-end: auto; }
  .win-row::-webkit-scrollbar { display: none; }
  .win-row .win-card { flex: 0 0 248px; scroll-snap-align: start; }
  .win-card { text-align: center; }
  /* Homepage Winners & Latest Scores sport icons */
  .win-card .sport-icon{width:42px;height:42px;object-fit:contain;display:inline-block;vertical-align:middle;flex-shrink:0;}
  @media(max-width:700px){.win-card .sport-icon{width:34px;height:34px;}}
  .win-card.is-live { border-color: var(--gold); background: #271523; }
  .win-crown { font-size: 1.7rem; min-height: 1.9rem; }
  .win-name { font-size: 1.15rem; font-weight: 800; color: var(--gold-soft); margin: 4px 0; }
  .win-score { margin: 6px 0; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: .92rem; }
  .win-score b { background: var(--deep); color: var(--gold-soft); border-radius: 8px; padding: 3px 12px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

  /* dropdown nav menus */
.menu{position:relative;}
.menu-btn{background:none;border:0;color:#cbd5e1;padding:7px 10px;
  border-radius:8px;font-family:inherit;font-size:.88rem;cursor:pointer;display:flex;align-items:center;gap:4px;}
.menu-btn:hover,
.menu.open .menu-btn{background:rgba(255,255,255,.12);color:#fff;}
.caret{font-size:.68rem;transition:transform .15s;}
.menu.open .caret{transform:rotate(180deg);}
.dropdown{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:215px;background:#0F2A3E;border-radius:12px;
  box-shadow:0 14px 38px rgba(15,23,42,.22);padding:8px;z-index:70;border:1px solid var(--line);}
.menu.open .dropdown{display:block;}
/* Hover no longer opens the dropdown in CSS. It used to, which meant a clicked menu
   (.open, persistent) and a hovered menu could both be showing at once. Hover-to-open
   is handled in JS now so `.open` is the single source of truth. */
@media (hover:hover) and (min-width:861px){
  .menu:hover .menu-btn{background:rgba(255,255,255,.12);color:#fff;}}
  .dropdown a,nav.main .dropdown a{display:block;color:#0F7E95;font-weight:700;padding:9px 12px; border-radius:8px;
  font-size:.89rem;cursor:pointer;transition:background .15s ease,color .15s ease;}
  .dropdown a:hover,nav.main .dropdown a:hover{background:#16374F; color:#0F7E95;}
  @media (max-width:860px){.menu{width:100%;}
  .menu-btn{width:100%;justify-content:space-between;}
  .dropdown{position:static;box-shadow:none;background:#0F2A3E;border:0;border-radius:10px;}
  .dropdown a,nav.main .dropdown a{color:#0F7E95;  }
  .dropdown a:hover,nav.main .dropdown a:hover{background:#16374F;color:#0F7E95;}}

  /* v3: about / faq / gallery / policies / sponsors / footer links */
  .faq-item { background: #0F2A3E; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; box-shadow: var(--shadow); }
  .faq-item summary { cursor: pointer; padding: 14px 17px; font-weight: 700; color: var(--gold-soft); list-style: none; position: relative; }
  .faq-item summary::after { content: '▾'; position: absolute; inset-inline-end: 15px; color: var(--gold); transition: transform .15s; }
  .faq-item[open] summary::after { transform: rotate(180deg); }
  .faq-item p { padding: 0 17px 14px; margin: 0; }
  .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }
  .gallery-item { margin: 0; padding: 0; border: 0; width: 100%; font-family: inherit; text-align: start; border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; background: var(--deep); box-shadow: var(--shadow); }
  .gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .2s; }
  .gallery-item:hover img { transform: scale(1.04); opacity: .92; }
  .gallery-item:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
  .gallery-cap { position: absolute; bottom: 0; inset-inline: 0; background: linear-gradient(transparent, rgba(15,23,42,.85)); color: #fff; font-size: .8rem; padding: 20px 11px 8px; }
  /* A modal is the one popover that keeps a centered origin - nothing anchors it. */
  .lightbox { position: fixed; inset: 0; background: rgba(10,18,32,.92); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4vh 4vw; cursor: pointer;
    transition: opacity 200ms var(--ease-out-strong); }
  .lightbox img { transition: transform 200ms var(--ease-out-strong); }
  @starting-style { .lightbox { opacity: 0; } .lightbox img { transform: scale(.97); } }
  .lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 10px; }
  .lb-cap { color: #1F4463; margin-top: 10px; }
  .lb-close { position: absolute; top: 16px; inset-inline-end: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
  .lb-close:hover { background: rgba(255,255,255,.2); }
  .lb-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .sponsor-marquee { overflow: hidden; position: relative; padding: 6px 0; }
  .sponsor-track { display: flex; gap: 54px; width: max-content; align-items: center; direction: ltr; animation: spScroll 26s linear infinite; }
  .sponsor-marquee:hover .sponsor-track { animation-play-state: paused; }
  @keyframes spScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .sponsor-track { animation: none; } }
  .sponsor-logo { height: 56px; width: auto; flex-shrink: 0; }
  .foot-links { margin-top: 10px; font-size: .84rem; }
  .foot-links a { color: #cbd5e1; cursor: pointer; }
  .foot-links a:hover { color: var(--gold-soft); }
  /* feedback: hero motion bg, chatbot, agenda timeline */
  .hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
  .hm-slide { position: absolute; inset: -7%; background-size: cover; background-position: center; opacity: 0; animation: heroKB 24s linear infinite; }
  .hm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  @keyframes heroKB { 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 25% { opacity: 1; } 33% { opacity: 0; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .hm-slide { animation: none; } .hm-slide:first-child { opacity: 1; } }
  .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,32,56,.78), rgba(0,0,0,.88)); }
  .hero.hero-live::before { opacity: .09; z-index: 1; }
  .hero.hero-live > * { position: relative; z-index: 2; }
  .hero.hero-live .hero-media { z-index: 0; }
  #kbotBtn { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 150; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--gold); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .22s ease, opacity .22s ease; }
  #kbotBtn svg { width: 25px; height: 25px; }
  #kbotBtn:hover { transform: scale(1.06); }
  #kbotBtn:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
  /* A fixed launcher sits on top of whatever is being read. Rather than leave it
     there, it steps aside while the page is scrolling down and comes back on the way
     up or once scrolling stops — so it never permanently covers a paragraph. */
  #kbotBtn.tucked { transform: translateY(90px); opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { #kbotBtn { transition: none; } }
  /* and the end of the page clears it even when it is showing */
  /* footer.footer, not footer: the .footer class sets a padding shorthand and would
     otherwise win on specificity, leaving the last line of the page under the button. */
  footer.footer { padding-bottom: 84px; }
  /* A popover scales from its trigger, and the launcher sits at the panel's
     bottom-end corner - so that is the origin, not center. allow-discrete lets the
     hidden attribute keep driving it with no JS; entry state via @starting-style. */
  #kbot { position: fixed; bottom: 86px; inset-inline-end: 20px; z-index: 150; width: 330px; max-width: calc(100vw - 32px); max-height: 70vh; background: #0F2A3E; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,.35); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
    transform-origin: bottom right; opacity: 1; transform: scale(1) translateY(0);
    transition: opacity 200ms var(--ease-out-strong), transform 200ms var(--ease-out-strong), display 200ms allow-discrete, overlay 200ms allow-discrete; }
  [dir=rtl] #kbot { transform-origin: bottom left; }
  #kbot[hidden] { display: none; opacity: 0; transform: scale(.95) translateY(8px); transition-duration: 150ms; }
  @starting-style { #kbot { opacity: 0; transform: scale(.95) translateY(8px); } }
  .kbot-head { background: var(--deep); color: #fff; padding: 11px 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
  .kbot-head button { background: none; border: 0; color: #cbd5e1; font-size: 1rem; cursor: pointer; }
  .kbot-msgs { padding: 13px; overflow-y: auto; flex: 1; min-height: 170px; max-height: 42vh; display: flex; flex-direction: column; gap: 8px; background: var(--sand); }
  .kbot-msg { background: #0F2A3E; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: .88rem; max-width: 88%; align-self: flex-start; }
  .kbot-msg.mine { background: var(--sea); color: #fff; border-color: var(--sea); align-self: flex-end; }
  .kbot-links { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
  .kbot-links a { background: var(--sand); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .84rem; color: var(--gold-soft); font-weight: 600; }
  .kbot-links a:hover { border-color: var(--gold); }
  .kbot-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 11px; background: #0F2A3E; border-top: 1px solid var(--line); }
  .kbot-chip { background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: .78rem; cursor: pointer; font-family: inherit; color: var(--gold-soft); }
  #kbotForm { display: flex; border-top: 1px solid var(--line); }
  #kbotForm input { border: 0; padding: 11px 13px; }
  #kbotForm input:focus { outline: none; }
  #kbotForm button { border: 0; background: var(--gold); color: #fff; width: 50px; font-size: 1rem; cursor: pointer; }
  .mini-cd { font-weight: 800; color: var(--gold-ink); font-size: 1.1rem; margin: 8px 0; font-variant-numeric: tabular-nums; }
  .nav-login { border: 1px solid var(--gold); color: var(--gold-soft) !important; border-radius: 999px; cursor: pointer; }
  .menu-btn.nav-login { padding: 7px 14px; }
  .hero-split { text-align: start; padding: 56px 16px 70px; }
  .hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: center; margin: 0 auto; }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero-welcome { color: var(--gold-soft); font-weight: 700; margin: 0 0 2px; font-size: 1.02rem; }
  .hero-split h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 2.3rem); }
  .hero-sub { color: #dfe7f0; font-size: 1.08rem; margin: 0 0 13px; }
  .hero-meta { display: flex; gap: 20px; flex-wrap: wrap; color: #4E93B8; font-size: .92rem; margin: 0 0 16px; }
  .hero-split .ctas { justify-content: flex-start; margin-top: 4px; }
  .cd-card { background: rgba(13,26,46,.72); border: 1px solid rgba(15,126,149,.35); border-radius: 16px; padding: 16px 18px; justify-self: end; max-width: 370px; }
  @media (max-width: 860px) { .cd-card { justify-self: stretch; max-width: none; } }
  .cd-title { color: #fff; font-weight: 700; margin-bottom: 10px; text-align: center; font-size: .95rem; }
  .cd-card .countdown { margin: 0; }
  .services-wrap { margin-top: -38px; position: relative; z-index: 5; }
  .services-card { background: #0F2A3E; border-radius: 16px; box-shadow: 0 14px 38px rgba(15,23,42,.14); padding: 13px 20px; border: 1px solid var(--line); }
  .services-head { color: var(--gold); font-weight: 800; font-size: .82rem; margin-bottom: 7px; }
  .services-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .services-row a { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; padding: 7px 9px; border-radius: 10px; flex: 1; min-width: 135px; cursor: pointer; }
  .services-row a:hover { background: var(--sand); color: var(--gold-soft); }
  .sv-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--sand); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; }
  .sv-arr { color: var(--gold); margin-inline-start: auto; }
  .stats-band { background: linear-gradient(120deg, #ffffff, #0F2A3E); border: 1px solid var(--line); border-top: 3px solid var(--surf); border-radius: 14px; display: flex; justify-content: space-around; gap: 12px; flex-wrap: wrap; padding: 16px 14px; margin-top: 15px; }
  .sb-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
  .sb-item b { color: var(--gold-soft); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
  .sb-ic { font-size: 1.4rem; }
  .tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
  @media (max-width: 960px) { .tri-grid { grid-template-columns: 1fr; } }
  .tri-panel { margin-bottom: 0; }
  .tri-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; color: var(--gold-soft); margin-bottom: 11px; flex-wrap: wrap; }
  .tri-head a { font-size: .78rem; color: var(--gold-ink); font-weight: 700; cursor: pointer; display: inline-block; padding: 12px 6px; margin: -12px -6px; }
  .tri-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); color: var(--ink); cursor: pointer; }
  .tri-item img { width: 60px; height: 46px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
  .tri-item strong { display: block; font-size: .86rem; line-height: 1.45; }
  .tri-item small { color: var(--muted); font-size: .74rem; }
  .feat-cards { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .feat-cards::-webkit-scrollbar { display: none; }
  .feat-card { flex: 0 0 145px; background: var(--sand); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); cursor: pointer; }
  .feat-card img { width: 100%; height: 80px; object-fit: cover; display: block; }
  .feat-card strong { display: block; font-size: .78rem; padding: 7px 8px 2px; line-height: 1.4; }
  .feat-card small { display: block; color: var(--muted); font-size: .7rem; padding: 0 8px 8px; }
  .footer-nl { display: flex; gap: 6px; }
  .footer-nl input { border-radius: 9px; border: 1px solid #3A688C; background: rgba(255,255,255,.08); color: #fff; padding: 8px 12px; font-size: .84rem; min-width: 0; }
  .footer-nl input::placeholder { color: #8fa1bb; }
  .hero-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
  .hero-thumb { position: relative; }
  .hero-thumb img { width: 126px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
  .hero-thumb button { position: absolute; top: 4px; inset-inline-end: 4px; }
  /* segmented control — hero background type */
  .seg { display: inline-flex; background: #153450; border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 6px; }
  .seg-btn { border: 0; background: transparent; font-family: inherit; font-size: .9rem; font-weight: 600; color: #B7CCDA; padding: 10px 18px; min-height: 44px; border-radius: 9px; cursor: pointer; transition: background .16s, color .16s; }  /* --muted on the track was 4.27:1 */
  .seg-btn:hover { color: var(--ink); }
  .seg-btn.on { background: var(--gold); color: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.16); }
  .seg-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .sub-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .sub-block h4 { margin: 0 0 10px; font-size: .95rem; }

  /* ---- agenda: event cards + month calendar sidebar ---- */
  .ag-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 30px; align-items: start; }

  .ag-side { position: sticky; top: 76px; }
  /* 10px side padding keeps the 7 day cells at 44px inside a 330px sidebar */
  .cal { border: 1px solid var(--gold); background: #0F2A3E; border-radius: 4px; padding: 18px 10px 0; }
  .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .cal-title { text-align: center; line-height: 1.15; }
  .cal-title b { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
  .cal-title span { font-size: .82rem; color: var(--muted); }
  .cal-nav { width: 44px; height: 44px; border: 0; border-radius: 4px; background: var(--deep); color: #fff;
    font-size: 1.2rem; line-height: 1; cursor: pointer; font-family: inherit; }
  .cal-nav:hover { background: var(--sea-dark); }
  .cal-nav:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  [dir=rtl] .cal-nav { transform: scaleX(-1); }
  .cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .cal-dow { margin-bottom: 6px; }
  .cal-dow span { text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
  .cal-day { aspect-ratio: 1; display: grid; place-items: center; position: relative; font-size: .95rem; color: #B7CCDA;
    background: none; border: 0; font-family: inherit; border-radius: 50%; }
  /* Adjacent-month filler. Deliberately de-emphasised and inactive (and aria-hidden),
     so it falls under the incidental-text exemption — but #C4D5E1 was only 1.67:1. */
  .cal-day.out { color: #9FB9CC; }
  .cal-day.fest { cursor: pointer; font-weight: 700; color: var(--ink); }
  .cal-day.fest:hover { background: #16374F; }
  .cal-day.fest:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
  /* gold dot marks a day that has scheduled events */
  .cal-day.has-event::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--gold-ink); }
  .cal-day.today { box-shadow: inset 0 0 0 2px var(--sea); }
  .cal-day.sel { background: var(--deep); color: #fff; }
  .cal-day.sel::after { background: var(--gold); }
  .cal-all { display: block; width: calc(100% + 32px); margin: 16px -16px 0; min-height: 45px; border: 0;
    background: var(--gold-ink); color: #06202F; font-family: inherit; font-size: .84rem; font-weight: 700; letter-spacing: .5px;
    cursor: pointer; border-radius: 0 0 3px 3px; }
  .cal-all:hover { background: var(--deep); color: #fff; }
  .cal-all.on { background: var(--deep); color: #fff; }
  .cal-all:focus-visible { outline: 2px solid var(--sea); outline-offset: -3px; }
  .cal-legend { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: .78rem; color: var(--muted);
    margin: 12px 0; }
  .cal-legend .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink); display: inline-block; }
  @media (max-width: 900px) {
    .ag-grid { grid-template-columns: 1fr; }
    .ag-side { position: static; order: -1; }
    .cal { max-width: 360px; margin: 0 auto; }
  }
  @media (max-width: 560px) {
  }

  /* ---- leaderboard: filters toolbar ---- */
  .lb-toolbar{width:85%;max-width:1500px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:60px auto 28px;padding:12px;background:#0F2A3E;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 5px 18px rgba(0,0,0,.06);}

  /* SEARCH */
  .lb-search{position:relative;flex:1 1 0;min-width:160px;order:1;}
  .lb-search input{width:100%;height:46px;padding-inline:16px 44px;border:1px solid var(--line);border-radius:12px;
    font-family:inherit;font-size:.9rem;background:#123048;transition:border-color .16s,background .16s;}
  .lb-search input:focus{outline:none;border-color:var(--gold);background:#0F2A3E;}
  .lb-search-ic{position:absolute;top:50%;inset-inline-end:14px;transform:translateY(-50%);
  font-size:1.2rem;color:var(--muted);pointer-events:none;}
  /* BOARD DROPDOWN */
  .lb-board-dropdown{position:relative;flex:1 1 0;min-width:160px;order:2;}
  .lb-board-btn{width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;border:1px solid var(--line);border-radius:12px;background:#123048;font-family:inherit;font-size:.86rem;
  font-weight:600;color:var(--ink);padding-inline:14px;cursor:pointer;transition:border-color .16s,background .16s;}
  .lb-board-btn > span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .lb-board-btn:hover{border-color:var(--gold);}
  .lb-board-dropdown.open .lb-board-btn{border-color:var(--gold);background:#0F2A3E;}
  .lb-board-caret{flex-shrink:0;font-size:.8rem;color:var(--muted);transition:transform .18s;}
  .lb-board-dropdown.open .lb-board-caret{transform:rotate(180deg);}
  /* DROPDOWN MENU */
  .lb-board-menu{display:none;position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;
  max-height:320px;overflow-x:hidden;overflow-y:auto;background:#0F2A3E;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 16px 36px rgba(0,0,0,.20);padding:6px;}
  .lb-board-dropdown.open .lb-board-menu{display:block;}
  .lb-board-group{padding:10px 10px 4px;font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}
  .lb-board-opt{display:block;width:100%;text-align:start;padding:10px 12px;border:0;border-radius:8px;
  background:#0F2A3E;color:var(--ink);font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s;}
  .lb-board-opt:hover{background:#16374F;}
  .lb-board-opt.sel{background:var(--deep);color:#fff;font-weight:800;}
  .lb-board-opt.sel:hover{background:#10516F;}
  /* TOP 10 / ALL */
  .lb-toolbar .seg{order:3;margin-bottom:0;flex:1 1 0;min-width:160px;display:flex;}
  .lb-toolbar .seg-btn{flex:1;}
  /* FILTER BUTTON:hidden on desktop */
  .lb-filter-btn{display:none;}
  /* Desktop shows the filters normally */
  .lb-filters-panel{display:contents;}
  .lb-grid{width:85%;max-width:1500px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;
  align-items:start;margin:0 auto;}

  /* podium — 2 · 1 · 3, winner centre and tallest */
  .lb-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;
  background:linear-gradient(160deg,#0D3D57,#071826);border-radius:18px;padding:22px 16px 0;margin-bottom:18px;}
  .pod { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; font-family: inherit;
    cursor: pointer; padding: 0; color: #fff; }
  .pod-name { font-size: .92rem; font-weight: 800; color: #fff; text-align: center; line-height: 1.3; }
  .pod-sub { font-size: .8rem; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .pod-block { width: 100%; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.09); border: 1px solid rgba(15,126,149,.35);
    border-bottom: 0; display: grid; place-items: center; margin-top: 4px; transition: background .16s; }
  .pod.p1 .pod-block { height: 108px; background: linear-gradient(180deg, rgba(15,126,149,.42), rgba(15,126,149,.14)); }
  .pod.p2 .pod-block { height: 78px; }
  .pod.p3 .pod-block { height: 60px; }
  .pod-rank { font-size: 2rem; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
  .pod.p1 .pod-rank { color: #fff; }   /* gold-on-gold-tint was only 4.42:1 */
  .pod:hover .pod-block, .pod.sel .pod-block { background: rgba(15,126,149,.3); }
  .pod:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
  .pod.p1 .av { width: 66px; height: 66px; font-size: 1.15rem; }

  /* avatars (initials — the demo has no participant photos) */
  /* L=30% keeps white initials above 4.5:1 across every hue — at 42% the yellow-green
     range only reached ~2.9:1. */
  .av { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; flex-shrink: 0;
    background: hsl(var(--h) 50% 30%); color: #fff; width: 38px; height: 38px; font-size: .85rem; letter-spacing: .5px; }
  .av.sm { width: 38px; height: 38px; }
  .av.lg { width: 54px; height: 54px; font-size: 1rem; border: 2px solid rgba(255,255,255,.35); }
  .av.xl { width: 76px; height: 76px; font-size: 1.5rem; }

  .lb-list { display: flex; flex-direction: column; gap: 8px; }
  .lb-list .lb-row { width: 100%; display: flex; align-items: center; gap: 12px; background: #0F2A3E; border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 14px; min-height: 62px; font-family: inherit; text-align: start; cursor: pointer;
    transition: border-color .16s, box-shadow .16s, transform .16s; }
  .lb-list .lb-row:hover { border-color: var(--gold); transform: translateX(-2px); }
  [dir=rtl] .lb-list .lb-row:hover { transform: translateX(2px); }
  .lb-list .lb-row.sel { border-color: var(--sea); box-shadow: 0 0 0 2px rgba(29,155,176,.18); }
  .lb-list .lb-row:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .lb-list .lb-rank { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #123048;
    font-weight: 800; color: #B7CCDA; font-variant-numeric: tabular-nums; font-size: .95rem; }  /* --muted was 4.27:1 here */
  .lb-row.t1 .lb-rank { background: var(--gold); color: #fff; }
  .lb-row.t2 .lb-rank { background: #CBDAE5; color: #fff; }
  .lb-row.t3 .lb-rank { background: #d9b08c; color: #fff; }
  .lb-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .lb-list .lb-name { font-weight: 800; color: var(--ink); font-size: .98rem; }
  .lb-sub { font-size: .8rem; color: var(--muted); }
  .lb-trend { font-size: .8rem; font-weight: 700; color: var(--ok-ink); white-space: nowrap; }
  .lb-list .lb-pts { font-weight: 900; color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lb-list .lb-pts small { font-weight: 600; color: var(--muted); font-size: .78rem; }
  .lb-empty { text-align: center; color: var(--muted); padding: 30px 16px; background: #0F2A3E; border: 1px dashed var(--line); border-radius: 12px; }

  /* detail panel */
  .lb-detail { background: #0F2A3E; border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; position: sticky; top: 76px; }
  .lbd-head { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
  .lbd-head h2 { margin: 0; font-size: 1.15rem; color: var(--ink); }
  .lbd-badge { font-size: .78rem; font-weight: 700; color: #fff; background: #16374F; border-radius: 999px; padding: 5px 13px; }
  .lbd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 18px; text-align: center; }
  .lbd-stat b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .lbd-stat span { font-size: .8rem; color: var(--muted); line-height: 1.35; display: block; }  /* .74rem = 11.8px, under the floor */
  .lbd-next { background: #123048; border-radius: 12px; padding: 13px; margin-bottom: 18px; }
  .lbd-next-t {font-size: 1rem;font-weight: 700;color: var(--ink);margin-bottom: 0;width: 100%;text-align: center;}
  .lbd-next-bar { height: 8px; border-radius: 999px; background: #e3e8ef; overflow: hidden; }
  .lbd-next-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--surf)); }
  .lbd-next-n { font-size: .78rem; color: var(--muted); margin-top: 7px; }
  .lbd-lead {display: flex;align-items: center;justify-content: center;text-align: center;background: linear-gradient(140deg,rgba(15,126,149,.2),rgba(29,155,176,.12));}
  .lbd-sec { font-size: .78rem; font-weight: 800; color: var(--muted); letter-spacing: .8px; margin-bottom: 10px; }
  .zrow { display: grid; grid-template-columns: 74px 1fr 34px; gap: 9px; align-items: center; margin-bottom: 8px; }
  .zname { font-size: .8rem; color: var(--ink); }
  .zbar { height: 7px; border-radius: 999px; background: #123048; overflow: hidden; }
  .zbar span { display: block; height: 100%; border-radius: 999px; background: var(--sea); }
  .zpts { font-size: .8rem; font-weight: 700; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }

  @media (max-width:900px){
    .lb-grid{width:calc(100% - 24px);max-width:none;grid-template-columns:1fr;gap:18px;margin:0 auto;}
    .lb-detail{width:100%;max-width:none;margin:0;padding:22px 18px;position:static;order:-1;border-radius:17px;}
  }
  
  @media (max-width:640px){
    .lb-toolbar{display:flex;align-items:stretch;flex-wrap:wrap;width:88%;max-width:460px;gap:8px;padding:0;
      margin:50px auto 22px;background:transparent;border:0;box-shadow:none;}
    /* Arabic: filter on LEFT */
    [dir="rtl"] .lb-toolbar{flex-direction:row-reverse;}
    /* English */
    [dir="ltr"] .lb-toolbar{flex-direction:row-reverse;}

  /* SEARCH */
  .lb-search{position:relative;flex:1;min-width:0;height:46px;order:2;}
  .lb-search input{width:100%;height:46px;padding-inline:14px 38px;background:#0F2A3E;color:#e9edf0;
    border:1px solid #24506F;border-radius:12px;font-family:inherit;font-size:.78rem;outline:none;
    box-shadow:0 4px 12px rgba(0,0,0,.08);}
  .lb-search-ic{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;color:#e9edf0;pointer-events:none;}
  [dir="rtl"] .lb-search-ic{left:13px;right:auto;}
  [dir="ltr"] .lb-search-ic{right:13px;left:auto;}

  /* FILTER BUTTON */
  .lb-filter-btn{display:flex;align-items:center;justify-content:center;flex:0 0 92px;width:92px;height:46px;order:1;
    gap:7px;padding:0 14px;background:#0F2A3E;color:#e9edf0;border:1px solid #0F7E95;border-radius:12px;
    font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.08);}
  /* Arabic: text then icon */
  [dir="rtl"] .lb-filter-btn{flex-direction:row-reverse;}
  /* English: icon then text */
  [dir="ltr"] .lb-filter-btn{flex-direction:row;}
  .lb-filter-icon{display:block;width:18px;height:18px;flex:0 0 18px;color:#F7B558;}
  .lb-filter-btn.active{background:#0F7E95;color:#ffffff;border-color:#0F7E95;}
  .lb-filter-btn.active .lb-filter-icon{color:#F5A81C;}
  /* OPEN FILTER PANEL */
  .lb-filters-panel{display:none;order:3;flex:0 0 100%;width:100%;grid-template-columns:1fr 1fr;align-items:stretch;
    gap:8px;margin-top:6px;padding:8px;background:#0F2A3E;border:1px solid #24506F;border-radius:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);box-sizing:border-box;}
  .lb-filters-panel.open{display:grid;}
  /* RANKING DROPDOWN */
  .lb-board-dropdown{position:relative;width:100%;min-width:0;}
  .lb-board-btn{width:100%;height:48px;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#0F2A3E;
    color:#e9edf0;border:1px solid #24506F;border-radius:10px;font-family:inherit;font-size:.80rem;font-weight:600;box-sizing:border-box;}

  /* TOP 10 / ALL */
  .lb-toolbar .seg{width:100%;min-width:0;height:48px;display:grid;grid-template-columns:1fr 1fr;
    margin:0;padding:3px;background:#123048;border:1px solid #24506F;border-radius:10px;box-sizing:border-box;}
  .lb-toolbar .seg-btn{width:100%;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;
    padding:0 8px;border:0;border-radius:8px;font-family:inherit;font-size:.80rem;font-weight:600;white-space:nowrap;}
  .lb-toolbar .seg-btn.on{background:#0F7E95;color:#ffffff;box-shadow:0 3px 8px rgba(0,0,0,.16);}
}

  @media (max-width: 520px) {
    .lb-podium { padding: 20px 10px 0; gap: 7px; }
    .pod-name { font-size: .78rem; }
    .pod .av.lg { width: 44px; height: 44px; font-size: .85rem; }
    .pod.p1 .av { width: 54px; height: 54px; font-size: 1rem; }
    .pod-rank { font-size: 1.5rem; }
    .lb-trend { display: none; }
  }

  /* ---- FAQ: help-centre layout (search hero + topic sidebar + grouped articles) ---- */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* skip link — off-screen until focused */
  .skip-link { position: absolute; top: 0; inset-inline-start: 0; z-index: 200; transform: translateY(-120%);
    background: var(--gold); color: #fff; font-weight: 800; padding: 13px 22px; border-radius: 0 0 10px 0;
    min-height: 44px; display: inline-flex; align-items: center; transition: transform .16s; }
  .skip-link:focus { transform: translateY(0); outline: 3px solid var(--sea); outline-offset: -3px; }
  .faq-hero { background: linear-gradient(180deg, #10293D, #0D2334); padding: 54px 16px 46px; text-align: center; }
  .faq-hero-in { max-width: 620px; margin: 0 auto; }
  .faq-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; color: #fff; margin: 0 0 22px; }
  .faq-search { position: relative; }
  .faq-search input { width: 100%; min-height: 62px; border-radius: 16px; border: 1px solid #D8E2EA; background: #0F2A3E;
    padding: 16px 52px 16px 20px; font-size: 1.05rem; box-shadow: 0 4px 16px rgba(0,0,0,.07); }
  [dir=rtl] .faq-search input { padding: 16px 20px 16px 52px; }
  .faq-search input:focus { outline: 2px solid var(--sea); border-color: var(--sea); }
  .faq-search-ic { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 20px; font-size: 1.5rem; color: var(--muted); pointer-events: none; }
  .faq-popular { margin-top: 14px; font-size: .9rem; color: var(--muted); display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
  .faq-pop { background: none; border: 0; font-family: inherit; font-size: .9rem; color: var(--gold-soft); text-decoration: underline;
    cursor: pointer; padding: 10px 4px; min-height: 44px; }
  .faq-pop:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: 6px; }

  .faq-wrap { display: grid; grid-template-columns: 232px 1fr; gap: 40px; align-items: start; }
  .faq-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
  .faq-side-over { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: 1px; margin-bottom: 8px; }
  .faq-side-link { background: none; border: 0; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--ink);
    text-align: start; cursor: pointer; padding: 11px 10px; min-height: 44px; border-radius: 9px; display: flex;
    align-items: center; justify-content: space-between; gap: 10px; transition: background .15s, color .15s; }
  .faq-side-link:hover { background: #16374F; color: var(--gold-soft); }
  .faq-side-link:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
  .faq-side-n { font-size: .78rem; font-weight: 700; color: var(--muted); background: #0F2A3E; border: 1px solid var(--line);
    border-radius: 999px; min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0 7px; }
  .faq-side-cta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
  .faq-side-cta p { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }

  .faq-cat { margin-bottom: 34px; }
  .faq-cat-head { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 14px; }
  .faq-empty { text-align: center; padding: 40px 16px; color: var(--muted); }
  @media (max-width: 860px) {
    .faq-wrap { grid-template-columns: 1fr; gap: 24px; }
    .faq-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .faq-side-over { width: 100%; margin-bottom: 4px; }
    .faq-side-link { border: 1px solid var(--line); background: #0F2A3E; }
    .faq-side-cta { width: 100%; }
  }

  /* ---- championships: category-grouped, image-forward event cards ---- */
  .fpills { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
  .fpill { background: #0F2A3E; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; min-height: 44px;
    font-family: inherit; font-size: .95rem; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: border-color .16s, background .16s, color .16s; }
  .fpill:hover { border-color: var(--gold); }
  .fpill b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
  .fpill.on { background: var(--deep); border-color: #fff; color: #fff; }
  .fpill.on b { color: var(--gold); }
  .fpill:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .cat-sec { margin: 0 0 42px; }
  .cat-head { display: flex; align-items: center; gap: 10px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900;
    color: #fff; margin: 0 0 18px; }
  .cat-head::after { content: none; }
  .cat-chev { color: var(--gold); font-weight: 900; font-size: 1.1em; line-height: 1; }
  [dir=rtl] .cat-chev { transform: rotate(180deg); display: inline-block; }
  .cat-n { font-size: .8rem; font-weight: 700; color: var(--muted); background: #0F2A3E; border: 1px solid var(--line);
    border-radius: 999px; min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 8px; font-variant-numeric: tabular-nums; }

  .ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 26px 20px; }
  /* flat cards — no border or shadow; the photo carries the card */
  .ev-card { display: block; width: 100%; padding: 0; border: 0; background: none; font-family: inherit;
    text-align: start; cursor: pointer; }
  .ev-media { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #123048; aspect-ratio: 16/9; }
  .ev-media img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.22,.61,.36,1); }
  .ev-card:hover .ev-media img { transform: scale(1.05); }
  .ev-tag { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(0,0,0,.86); color: var(--gold-soft);
    font-size: .75rem; font-weight: 800; letter-spacing: .4px; border-radius: 999px; padding: 5px 11px; backdrop-filter: blur(3px); }
  .ev-body { display: block; padding: 12px 2px 0; }
  .ev-title { display: block; font-size: 1.06rem; font-weight: 800; color: var(--ink); line-height: 1.35;
    /* two-line clamp keeps every card in a row the same height */
    display: -webkit-box; line-clamp:2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ev-meta { display: block; font-size: .85rem; color: var(--muted); margin-top: 5px; }
  .ev-open { display: block; font-size: .85rem; color: var(--ok-ink); font-weight: 600; margin-top: 3px; }
  .ev-card:focus-visible { outline: none; }
  .ev-card:focus-visible .ev-media { outline: 3px solid var(--sea); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .ev-media img { transition: none; } .ev-card:hover .ev-media img { transform: none; } }
  @media (max-width: 520px) { .ev-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 14px; } .ev-title { font-size: .95rem; } }

  /* ---- Schedule: a filterable timeline -------------------------------------
     This page was eight solid navy slabs stacked down the screen with 56 flat
     rows under them, each carrying its own button. The day is now a rail you can
     read the shape of: type is carried by a coloured node and an icon rather than
     an emoji, detail is behind a disclosure instead of on every row, and the
     filters actually narrow the list rather than just scrolling to it. */
  /* Base size for any icon outside the contexts below. Without it an SVG carrying
     only a viewBox falls back to its default box and inflates whatever holds it. */
  .sc-i { width: 16px; height: 16px; flex: 0 0 auto; }
  .sc-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .sc-search { position: relative; display: flex; align-items: center; }
  .sc-search .sc-i { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
  .sc-search input { padding-inline-start: 42px; padding-inline-end: 46px; border-radius: 12px; }
  .sc-clear { position: absolute; inset-inline-end: 6px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 9px; color: var(--muted); cursor: pointer; }
  /* The visual box has to fit inside a 44px input, so the touch target is grown
     past it instead of resizing it — 34px of paint, 44px of hit area. */
  .sc-clear::after { content: ''; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); width: 44px; height: 44px; }
  .sc-clear:hover { background: #153450; color: var(--ink); }
  .sc-clear:focus-visible { outline: 2px solid var(--sea); outline-offset: 1px; }
  /* Chip rows scroll sideways inside themselves rather than widening the page. */
  /* chips stay swipeable but hide their scrollbar, matching every other
     horizontal row on the site — two visible bars here looked awkward */
  .sc-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
  .sc-chips::-webkit-scrollbar { display: none; }
  .sc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 15px; background: #0F2A3E; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform 160ms var(--ease-out-strong); }
  .sc-chip:hover { border-color: var(--sea); background: #143350; }
  .sc-chip:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .sc-chip.on { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
  .sc-chip .sc-i { width: 16px; height: 16px; }
  .sc-chip .sc-n { font-size: .76rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #153450; color: var(--muted); font-variant-numeric: tabular-nums; }
  .sc-chip.on .sc-n { background: rgba(255,255,255,.2); color: #fff; }
  .sc-chip[disabled] { opacity: .45; cursor: not-allowed; }
  .sc-chip[disabled]:hover { border-color: var(--line); background: #0F2A3E; }
  .sc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
  .sc-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .sc-reset { min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); background: #0F2A3E; border-radius: 999px; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--gold-soft); cursor: pointer; transition: background .18s, border-color .18s; }
  .sc-reset:hover { background: #143350; border-color: var(--sea); }
  .sc-reset:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

  .sc-day { margin-bottom: 26px; }
  /* The old header was a solid navy bar; eight of them read as stripes rather than
     structure. White with a gold rule keeps it sticky and legible without shouting. */
  .sc-dayhead { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 11px 16px; background: rgba(10,30,46,.92); backdrop-filter: blur(8px); border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
  .sc-dayname { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: #fff; }
  .sc-daydate { font-size: .8rem; color: var(--muted); font-weight: 600; }
  .sc-daycount { margin-inline-start: auto; font-size: .78rem; font-weight: 700; color: var(--gold-ink); background: #113A50; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

  .sc-list { list-style: none; margin: 0; padding: 0; position: relative; }
  /* the rail itself, sitting under the nodes */
  .sc-list::before { content: ''; position: absolute; inset-inline-start: 21px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--line), #153450); border-radius: 2px; }
  .sc-item { position: relative; background: #0F2A3E; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(15,23,42,.04); transition: box-shadow .2s, border-color .2s, transform .2s; }
  .sc-item:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(15,23,42,.08); }
  .sc-item.open { border-color: var(--sea); box-shadow: 0 8px 24px rgba(15,126,149,.12); }
  .sc-toggle { width: 100%; display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; gap: 10px; padding: 12px 14px 12px 8px; background: transparent; border: 0; font-family: inherit; text-align: start; cursor: pointer; border-radius: 14px; }
  .sc-toggle:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .sc-node { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #0F2A3E; border: 2px solid currentColor; justify-self: center; }
  .sc-node .sc-i { width: 17px; height: 17px; }
  .sc-time { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
  .sc-title { display: block; font-size: .93rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
  .sc-caret { display: grid; place-items: center; color: var(--muted); transition: transform 240ms var(--ease-in-out-strong), color .18s; }
  .sc-caret .sc-i { width: 18px; height: 18px; }
  .sc-item.open .sc-caret { transform: rotate(180deg); color: var(--sea); }
  /* 0fr -> 1fr animates a height the browser computes, so nothing has to be measured */
  .sc-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out-strong); }
  .sc-item.open .sc-detail { grid-template-rows: 1fr; }
  .sc-detail > div { overflow: hidden; visibility: hidden; transition: visibility .24s; }
  .sc-item.open .sc-detail > div { visibility: visible; }
  .sc-detail-in { padding: 0 16px 14px 52px; }
  .sc-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--muted); }
  .sc-fact { display: inline-flex; align-items: center; gap: 6px; }
  .sc-fact .sc-i { width: 15px; height: 15px; flex: 0 0 auto; }
  .sc-fact b { color: var(--ink); font-weight: 600; }
  .sc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Add-the-whole-festival card on the agenda page. */
  .cal-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding: 18px 20px; background: linear-gradient(135deg, var(--deep), var(--sea-dark)); color: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.18); }
  .cal-cta-ic { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,.12); border-radius: 14px; color: var(--gold-soft); }
  .cal-cta-ic .sc-i { width: 25px; height: 25px; }
  .cal-cta-txt { flex: 1 1 240px; }
  .cal-cta strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; margin-bottom: 3px; }
  .cal-cta span.cal-cta-sub { display: block; color: #cbd5e1; font-size: .85rem; line-height: 1.5; }
  .cal-cta .btn { flex: 0 0 auto; }
  /* .btn is used on <a> here as well as <button>, so pin what the anchor inherits. */
  a.btn { text-decoration: none; }
  a.btn:hover { text-decoration: none; }
  @media (max-width: 560px) { .cal-cta { padding: 16px; gap: 13px; } .cal-cta .btn { width: 100%; justify-content: center; } }
  .sc-empty { text-align: center; padding: 40px 22px; background: #0F2A3E; border: 1px dashed var(--line); border-radius: 14px; }
  .sc-empty .sc-i { width: 34px; height: 34px; color: var(--muted); margin-bottom: 10px; }
  .sc-empty p { margin: 0 0 14px; color: var(--muted); }
  /* Short, small-offset, and capped so the tail of a long day is not left waiting. */
  .sc-item { animation: scIn .28s var(--ease-out-strong) both; animation-delay: calc(var(--sc-i, 0) * .03s); }
  @keyframes scIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .sc-item { animation: none; }
    .sc-detail, .sc-detail > div, .sc-caret { transition: none; }
  }
  @media (max-width: 560px) {
    .sc-toggle { grid-template-columns: 36px 1fr 28px; gap: 8px; padding: 11px 10px 11px 6px; }
    .sc-node { width: 30px; height: 30px; }
    .sc-node .sc-i { width: 15px; height: 15px; }
    .sc-list::before { inset-inline-start: 18px; }
    .sc-detail-in { padding: 0 12px 14px 12px; }
    .sc-dayhead { padding: 10px 13px; }
  }
  .kbot-typing { color: var(--muted); letter-spacing: 3px; }
  /* Homepage plan preview — links to the interactive festival map (map.html) */
  .planlink { position: relative; display: block; border-radius: 10px; overflow: hidden; }
  .planlink img { width: 100%; display: block; transition: transform .5s; }
  .planlink:hover img { transform: scale(1.03); }
  .planlink-cta { position: absolute; bottom: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 7px;
    background: rgba(9,28,43,.86); border: 1px solid rgba(216,181,113,.55); color: var(--gold-soft);
    padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
  /* visible keyboard focus everywhere */
  :focus-visible { outline: 2px solid var(--surf); outline-offset: 2px; }

  /* CREATIVE RESPONSIVE POINTS TABLE */
  /* Same desktop width as the live-results boxes */
  .points-board{width:85%;max-width:1500px;margin:0 auto 28px;overflow:hidden;
  background:#0F2A3E;border:1px solid #24506F;border-radius:20px;
  box-shadow:0 8px 26px rgba(0,0,0,.09);}
  /* Championship title area */
  .points-board-head{min-height:88px;padding:17px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:15px;color:#ffffff;
  background:linear-gradient(110deg,#0A2133 0%,#0F5273 72%,#14688C 100%);
  border-bottom:3px solid #F5A81C;}
  .points-board-title{margin:0;display:flex;align-items:center;gap:13px;color:#ffffff;
  font-family:var(--font-display);font-size:1.45rem;font-weight:800;line-height:1.2;}
  .points-board-title > span:first-child{display:flex;align-items:center;
    justify-content:center;flex-shrink:0;}
  .points-board-title .sport-icon{width:58px;height:58px;object-fit:contain;flex-shrink:0;}
  .points-board-count{flex-shrink:0;padding:7px 15px;color:#ffffff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:.84rem;font-weight:700;}
  /* Desktop table */
  .points-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pts-table{width:100%;min-width:760px;border-collapse:separate;
    border-spacing:0;color:#e9edf0;font-family:inherit;font-size:1rem;}
  .pts-table th,.pts-table td{padding:18px 15px;border-bottom:1px solid #24506F;
    text-align:center;vertical-align:middle;}
  .pts-table th{color:#93B3C8;background:#16374F;font-size:1.05rem;font-weight:700;white-space:nowrap;}
  .pts-table td{font-size:.92rem;  font-weight:500;}
  .pts-table th:nth-child(2),.pts-table td:nth-child(2){text-align:start;}
  .pts-table tbody tr{position:relative;background:#0F2A3E;transition:background .18s ease,transform .18s ease,box-shadow .18s ease;}
  .pts-table tbody tr:hover{background:#123048;box-shadow:inset 4px 0 0 #1d9bb0;}
  [dir="rtl"] .pts-table tbody tr:hover{box-shadow:inset -4px 0 0 #1d9bb0;}
  .pts-table tbody tr:last-child td{border-bottom:0;}

  /* Top-three rows */
  .pts-table tr.t1{background:linear-gradient(90deg, rgba(15,126,149,.18), #ffffff 34%);}
  .pts-table tr.t2{background:linear-gradient(90deg, rgba(184,194,204,.18), #ffffff 34%);}
  .pts-table tr.t3{background:linear-gradient(90deg, rgba(182,123,61,.12), #ffffff 34%);}
  [dir="rtl"] .pts-table tr.t1{background:linear-gradient(270deg, rgba(15,126,149,.18), #ffffff 34%);}
  [dir="rtl"] .pts-table tr.t2{background:linear-gradient(270deg, rgba(184,194,204,.18), #ffffff 34%);}
  [dir="rtl"] .pts-table tr.t3{background:linear-gradient(270deg, rgba(182,123,61,.12), #ffffff 34%);}
  .points-rank{white-space:nowrap;font-weight:700;}
  .rank-medal{  margin-inline-end:5px;}
  .rank-medal-img{width:28px;height:28px;object-fit:contain;vertical-align:middle;margin-inline-end:6px;flex-shrink:0;}
  @media (max-width:700px){.points-board-head{
  min-height:70px;
  padding:12px 15px;}
  .rank-medal-img{width:22px;height:22px;}}
  .points-team{color:#e9edf0;  font-size:1.05rem;  font-weight:700;}
  .points-total strong{display:inline-grid;place-items:center;min-width:42px;height:36px;
  padding:0 10px;color:#ffffff;background:#0A2133;border-radius:10px;font-size:1.05rem;font-weight:800;}
  .points-note{width:85%;max-width:1500px;margin:0 auto 22px;}
  
  /* PHONE POINTS CARDS */
  @media (max-width:700px){
  .points-board{width:calc(100% - 24px);max-width:none;margin:0 auto 20px;border-radius:17px;}
  .points-board-head{min-height:70px;padding:12px 15px;align-items:center;}
  /* Points title - match Live Results */
  .points-board-title{margin:0;display:flex;align-items:center;gap:10px;
    font-family:var(--font-display);font-size:1.1rem;font-weight:800;line-height:1.15;}
  .points-board-count{padding:5px 10px;font-size:.72rem;}
  .points-table-wrap{overflow:visible;padding:12px;background:#16374F;}
  .pts-table{display:block;min-width:0;font-size:.9rem;}
  .pts-table thead{display:none;}
  .pts-table tbody{display:grid;gap:12px;}
  /* Ball/icon - match Live Results */
  .points-board-title .sport-icon{width:46px;height:46px;display:block;object-fit:contain;flex-shrink:0;}
  /* Each team becomes a card */
  .pts-table tr{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;padding:62px 10px 10px;background:#0F2A3E !important;
    border:1px solid #e0e5eb;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.06);}
  .pts-table tr.t1{border-inline-start:4px solid #0F7E95;}
  .pts-table tr.t2{border-inline-start:4px solid #BCD0DD;}
  .pts-table tr.t3{border-inline-start:4px solid #b67b3d;}
  .pts-table tbody tr:hover{transform:none;box-shadow:0 4px 14px rgba(0,0,0,.06);}
  .pts-table td{min-width:0;min-height:58px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;padding:7px 4px;color:#e9edf0;
    background:#16374F;border:1px solid #24506F;border-radius:9px;font-size:.88rem;
    font-weight:700;text-align:center !important;}
  .pts-table td::before{content:attr(data-label);color:#8BA9BE;font-size:.67rem;font-weight:600;line-height:1.2;}
  /* Rank badge */
  .pts-table td.points-rank{position:absolute;top:13px;inset-inline-start:12px;width:auto;
    min-width:48px;height:36px;min-height:36px;padding:5px 10px;display:flex;
    flex-direction:row;gap:4px;color:#ffffff;background:#0A2133;border:0;border-radius:999px;}
  .pts-table td.points-rank::before{display:none;}
  /* Team name across the top */
  .pts-table td.points-team{position:absolute;top:12px;inset-inline-start:70px;inset-inline-end:12px;
    height:38px;min-height:38px;display:flex;flex-direction:row;justify-content:flex-start;
    padding:5px 10px;color:#e9edf0;background:#eef3f8;border:0;border-radius:9px;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    font-size:1rem;text-align:start !important;}
  .pts-table td.points-team::before{display:none;}
  .pts-table td.points-team strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  /* Points are the main highlight */
  .pts-table td.points-total{color:#ffffff;background:#0A2133;border-color:#e9edf0;}
  .pts-table td.points-total::before{color:#cbd7e5;}
  .pts-table td.points-total strong{min-width:0;height:auto;padding:0;color:#ffffff;
    background:transparent;border-radius:0;font-size:1rem;}
  .points-note{width:calc(100% - 30px);margin:0 auto 18px;font-size:.74rem;line-height:1.6;}
}
  /* Final date and location color */
.hero.hero-live .hero-meta,.hero.hero-live .hero-meta span{color:#0F7E95 !important;}

/* MOBILE PHONE DESIGN */
@media (max-width: 768px){
  body{font-size:16px;}
  .demo-banner{position:relative;top:auto;font-size:.76rem;line-height:1.5;padding:7px 10px;}
  .topbar{position:relative;top:auto;}
  .topbar-in{padding:8px 14px;min-height:auto;gap:10px;}
  .brand{width:100%;justify-content:center;font-size:.95rem;}
  .brand-logo{width:42px;}
  nav.main{width:100%;justify-content:center;gap:5px;}
  nav.main a,.menu-btn{font-size:.82rem;padding:8px 10px;}

  /* Hero becomes a real mobile layout */
  .hero{min-height:auto;padding:30px 14px 70px;background-size:auto 100%;background-position:center bottom;}
  .hero-split{padding:28px 12px 65px;}
  .hero-grid{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
  .hero-info,.hero-text{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
  .hero-welcome{font-size:1.05rem;margin:0 0 5px;}
  .hero-split h1,
  .hero h1{font-size:clamp(2rem, 9vw, 2.8rem);line-height:1.25;margin:0 0 10px;}
  .festival-subtitle,
  .hero .festival-subtitle{color:#2E6E94 !important;font-size:1.05rem !important;font-weight:600 !important;line-height:1.7;padding:0 8px;margin:0 auto 14px !important;}
  .hero-meta{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#2E6E94;font-size:.95rem;font-weight:600;margin:0 auto 14px;text-align:center;}
  .hero-meta span{display:flex;justify-content:center;align-items:center;gap:6px;}
  /* Countdown under the text */
  .cd-card{order:2;width:100%;max-width:390px;padding:17px 12px;margin:0 auto;border-radius:17px;}
  .cd-title{font-size:1rem;margin-bottom:12px;}
  .cd-card .countdown,
  .countdown{width:100%;display:grid;grid-template-columns:repeat(4, 1fr);gap:7px;margin:0;}
  .cd-cell{width:auto;min-width:0;padding:11px 4px;border-radius:11px;}
  .cd-num{font-size:1.45rem;margin-bottom:5px;}
  .cd-lbl{font-size:.75rem;}
  .hero-split .ctas,.hero .ctas{order:3;width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto;}
  .hero .btn.gold{min-width:145px;padding:11px 22px;font-size:1rem;}
  /* Quick services */
  .services-wrap{margin-top:-25px;padding:0 12px;}
  .services-card{padding:14px 12px;}
  .services-row{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;}
  .services-row a{min-width:0;padding:10px 7px;font-size:.9rem;}
  /* Statistics */
  .stats-band{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px;}
  /* Three homepage columns become one column */
  .tri-grid{grid-template-columns:1fr;}
  .tri-panel{width:100%;}
  .section{padding:24px 12px;}
  .sec-title{font-size:1.55rem;}
  /* Gallery */
  .carousel{height:250px;border-radius:13px;}.gallery-item img{height:180px;}}

@media (max-width: 430px){
  .hero-split h1,.hero h1{font-size:2rem;}
  .festival-subtitle,.hero .festival-subtitle{font-size:1rem !important;}
  .hero-meta{font-size:.88rem;}
  .cd-card{padding-inline:9px;}
  .cd-card .countdown,.countdown{gap:5px;}
  .cd-num{font-size:1.25rem;}
  .cd-lbl{font-size:.75rem;}}


/* MOBILE SIDEBAR NAVIGATION */
/* Hidden on desktop */
.mobile-menu-btn{display:none;}
.mobile-nav-overlay{display:none;}
/* Mobile navigation */
@media (max-width:768px){
  /* Compact header */
  .topbar{position:sticky;top:0;z-index:120;min-height:auto;}
  .topbar-in{min-height:68px;padding:8px 14px;display:flex;
    flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px;}
  /* Keep logo and title on one line */
  .brand{width:auto;min-width:0;flex:1;justify-content:flex-start;gap:9px;font-size:.88rem;}
  [dir="rtl"] .brand{justify-content:flex-start;}
  .brand-logo{width:44px;flex-shrink:0;}
  #brandName{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  /* Square Outlook-style button */
  .mobile-menu-btn{
    width:46px;height:46px;flex:0 0 46px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:0;border:1px solid rgba(255,255,255,.22);border-radius:10px;
    background:rgba(255,255,255,.08);color:#fff;cursor:pointer;z-index:132;}
  .mobile-menu-btn span{display:block;width:21px;height:2px;border-radius:2px;background:#fff;
    transition:transform .25s ease,opacity .2s ease;}
  /* Change hamburger to X when opened */
  body.mobile-nav-open .mobile-menu-btn span:nth-child(1){
    transform:translateY(7px) rotate(45deg);  }
  body.mobile-nav-open .mobile-menu-btn span:nth-child(2){
    opacity:0;}
  body.mobile-nav-open .mobile-menu-btn span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);}
  /* Sidebar */
  nav.main{
    position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(84vw, 340px);height:100dvh;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;
    gap:7px;padding:82px 16px 25px;background:#0A2133;box-shadow:10px 0 35px rgba(15,23,42,.28);overflow-y:auto;
    overscroll-behavior:contain;z-index:130;transform:translateX(-105%);visibility:hidden;
    transition:transform .28s ease,visibility .28s ease;}
  /* RTL menu enters from the right */
  [dir="rtl"] nav.main{transform:translateX(105%);}
  body.mobile-nav-open nav.main{transform:translateX(0);visibility:visible;}
  /* Home, login and language buttons */
  nav.main > a{width:100%;min-height:48px;display:flex;align-items:center;
    justify-content:flex-start;padding:10px 13px;color:#e6edf6;font-size:1rem;border-radius:10px;}
  nav.main > a:hover,nav.main > a.active{background:rgba(255,255,255,.12);color:#fff;}
  nav.main > a.cta,nav.main > a.nav-login{justify-content:center;margin-top:5px;}
  nav.main > a.lang{justify-content:center;}
  /* Navigation groups */
  nav.main .menu{width:100%;}
  nav.main .menu-btn{width:100%;min-height:48px;justify-content:space-between;
    padding:10px 13px;color:#e6edf6;font-size:1rem;text-align:start;border-radius:10px;}
  nav.main .menu-btn:hover,
  nav.main .menu.open .menu-btn{background:rgba(255,255,255,.12);color:#fff;}
  /* Dropdown items inside sidebar */
nav.main .menu{width:100%;position:relative;}
nav.main .dropdown{
  display:none !important;position:static !important;width:100%;min-width:0;
  margin:5px 0 10px;padding:7px;background:#0F2A3E;border:1px solid rgba(15,126,149,.25);border-radius:12px;
  box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:auto;}
nav.main .menu.open > .dropdown{display:block !important;}
nav.main .dropdown a{width:100%;min-height:44px;display:flex !important;align-items:center;
  justify-content:flex-start;padding:9px 12px;margin:2px 0;color:#0F7E95 !important;background:transparent;
  font-size:.95rem;font-weight:700;text-align:start;border-radius:9px;pointer-events:auto !important;}

nav.main .dropdown a:hover,nav.main .dropdown a:active{background:#16374F;color:#0F7E95 !important;}
nav.main .menu.open > .menu-btn{background:rgba(255,255,255,.12);color:#ffffff;}
nav.main .menu.open > .menu-btn .caret{transform:rotate(180deg);}
  .mobile-nav-overlay{position:fixed;top:0;bottom:0;
  /* Cover only the area outside the sidebar */
  inset-inline-end:0;width:calc(100% - min(84vw, 340px));display:block;background:rgba(8,18,33,.54);
  opacity:0;visibility:hidden;pointer-events:none;z-index:125;transition:opacity .25s ease,visibility .25s ease;}
  body.mobile-nav-open .mobile-nav-overlay{ opacity:1;visibility:visible;pointer-events:auto;}
  /* Stop the page scrolling behind the menu */
  body.mobile-nav-open{overflow:hidden;}} 
  
  /* RESULTS & LIVE RANKINGS Live Results + Points Table Desktop + Mobile */
  /* 1. RESULTS TOP NAVIGATION */
  .results-tabs-row{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:14px;margin:60px auto 28px;}
  .results-tabs{width:fit-content;max-width:100%;display:flex;align-items:center;
  justify-content:center;gap:4px;margin:0;padding:5px;background:#0F2A3E;
  border:1px solid #24506F;border-radius:15px;box-shadow:0 5px 18px rgba(0,0,0,.08);}
  .results-tabs .lb-tab{position:relative;min-height:46px;display:flex;align-items:center;
  justify-content:center;padding:10px 22px;color:#8FB2C9;background:transparent;border:0;
  border-radius:11px;font-family:inherit;font-size:.92rem;font-weight:700;
  white-space:nowrap;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease;}
  .results-tabs .lb-tab:hover{color:#0F7E95;background:#16374F;}
  .results-tabs .lb-tab.active{color:#ffffff;background:#0F7E95;box-shadow:0 5px 13px rgba(0,0,0,.20);}
  .results-tabs .lb-tab.active::after{content:"";position:absolute;left:50%;bottom:5px;width:28px;
  height:2px;transform:translateX(-50%);background:#F5A81C;border-radius:10px;}
  .results-tabs .lb-tab:focus-visible{outline:2px solid #1D9BB0;outline-offset:2px;}
  
  /* 2. MOBILE RESULTS DROPDOWN ROW */
  .results-toolbar-row{display:contents;}
  .results-mobile-dropdown{display:none;}
  /* 3. FILTER BUTTON Desktop + Mobile */
  .mobile-results-filter-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    min-width:86px;height:56px;gap:7px;padding:0 14px;color:#e9edf0;background:#0F2A3E;border:1px solid #F5A81C;
    border-radius:12px;font-family:inherit;font-size:.8rem;font-weight:700;white-space:nowrap;
    cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.08);
    transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .15s ease;
}
.mobile-results-filter-btn:hover{background:#16374F;}
.mobile-results-filter-btn:active{transform:scale(.97);}
.mobile-results-filter-btn .filter-icon{width:20px;height:20px;display:block;flex-shrink:0;color:#B87E1E;}
.mobile-results-filter-btn .filter-icon line,
.mobile-results-filter-btn .filter-icon circle{stroke:currentColor;}
.mobile-results-filter-btn.active{color:#ffffff;background:#0A2133;border-color:#e9edf0;
  box-shadow:0 5px 15px rgba(0,0,0,.18);}
.mobile-results-filter-btn.active .filter-icon{color:#F7C97E;}
/* 4. FILTER PANELS */
#mobileResultsFilters,#ptsResultsFilters{display:none;width:100%;}
#mobileResultsFilters.open,#ptsResultsFilters.open{display:block;}
/* 5. FILTER TOOLBAR */
.live-results-toolbar{width:85%;max-width:1500px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;padding:16px 18px;background:#0F2A3E;border:1px solid #24506F;
  border-radius:16px;box-shadow:0 5px 18px rgba(0,0,0,.06);
}
.live-filter-row{width:100%;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px;margin:0 auto;
}
/* 6. FILTER CHIPS */
.live-chip{min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:0 15px;color:#e9edf0;background:#0F2A3E;border:1.5px solid #DDE8F0;
  border-radius:999px;font-family:inherit;font-size:.82rem;font-weight:700;
  white-space:nowrap;cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}
.live-chip:hover{background:#123048;border-color:#e9edf0;}
.live-chip:focus-visible{outline:2px solid #1D9BB0;outline-offset:2px;}
.live-chip.active-filter{background:#173753;border-color:#e9edf0;}
.live-chip.is-fav{color:#B87E1E;border-color:#F5A81C;}
.live-chip.is-fav.active{color:#e9edf0;background:#F5A81C;border-color:#F5A81C;}
.live-chip.is-live{color:#dc3545;border-color:#dc3545;}
.live-chip.is-live.active{color:#ffffff;background:#dc3545;border-color:#dc3545;}
.live-chip-caret{color:#97B4C9;font-size:.68rem;line-height:1;}
/* 7. FILTER DROPDOWNS */
.live-chip-menu{position:relative;}
.live-chip-dropdown{position:absolute;top:calc(100% + 7px);inset-inline-start:0;
  display:none;min-width:200px;max-height:300px;overflow-x:hidden;
  overflow-y:auto;background:#0F2A3E;border:1px solid #24506F;
  border-radius:14px;box-shadow:0 16px 36px rgba(0,0,0,.20);z-index:50;}
.live-chip-menu.open .live-chip-dropdown{display:block;}
.live-chip-dropdown button{width:100%;min-height:44px;display:block;padding:10px 14px;
  color:#e9edf0;background:#0F2A3E;border:0;border-bottom:1px solid #153450;
  font-family:inherit;font-size:.85rem;font-weight:600;text-align:start;cursor:pointer;
  transition:
    background .15s ease,
    color .15s ease;
}
.live-chip-dropdown button:last-child{border-bottom:0;}
.live-chip-dropdown button:hover{background:#16374F;}
.live-chip-dropdown button.selected{color:#ffffff;background:#0A2133;font-weight:800;}
.live-chip-dropdown button.selected:hover{background:#0E4A67;}
/* 8. SEARCH / APPLY BUTTON */
.live-search-btn{width:44px;height:44px;flex:0 0 44px;display:inline-flex;
  align-items:center;justify-content:center;margin:0;color:#ffffff;
  background:linear-gradient(135deg,#0F5273,#0A2133);border:0;
  border-radius:12px;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.28);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;}
.live-search-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.live-search-btn:active{transform:scale(.97);}
/* 9. ACTIVE FILTER MESSAGE */
.live-active-filter{width:85%;max-width:1500px;display:flex;align-items:center;gap:7px;
  margin:0 auto 15px;padding:10px 14px;color:#8FB2C9;background:#123048;
  border:1px solid #24506F;border-radius:10px;font-size:.82rem;}
.live-active-filter strong{color:#e9edf0;}
.live-active-filter button{margin-inline-start:auto;color:#A9C1D2;background:transparent;border:0;cursor:pointer;}
/* 10. LIVE RESULTS CARD */
.live-championship{width:85%;max-width:1500px;margin:0 auto 26px;overflow:hidden;background:#0F2A3E;
  border:1px solid #24506F;border-radius:20px;box-shadow:0 8px 26px rgba(0,0,0,.09);}
/* 11. LIVE + POINTS BLUE HEADERS SAME HEIGHT */
.live-championship-header,.points-board-head{box-sizing:border-box;min-height:88px;height:88px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 26px;color:#ffffff;
  background:linear-gradient(
    110deg,
    #0A2133 0%,
    #0F5273 72%,
    #14688C 100%
  );border-bottom:3px solid #F5A81C;}

/* 12. HEADER TITLES */
.live-championship-info{display:flex;align-items:center;gap:13px;min-width:0;}
.live-championship-title,.points-board-title{margin:0;display:flex;align-items:center;gap:13px;
  color:#ffffff;font-family:var(--font-display);font-size:1.45rem;font-weight:800;line-height:1.2;}
/* 13. HEADER SPORT ICONS */
.live-championship-icon{width:58px;height:58px;display:grid;place-items:center;flex-shrink:0;}
.live-championship-icon .sport-icon,
.points-board-title .sport-icon{width:58px;height:58px;object-fit:contain;flex-shrink:0;}
/* 14. MATCH / TEAM COUNTER */
.live-championship-count,.points-board-count{flex-shrink:0;padding:7px 15px;color:#ffffff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:.78rem;font-weight:700;}
/* 15. LIVE MATCH LIST */
.live-match-list{padding:6px 18px 10px;}
.live-match{min-height:56px;position:relative;display:grid;
  grid-template-columns:
    45px
    minmax(140px,1fr)
    42px
    45px
    10px
    45px
    42px
    minmax(140px,1fr);
  grid-template-areas:"star nameA badgeA scoreA div scoreB badgeB nameB";align-items:center;
  gap:8px;padding:18px 12px 6px;border-bottom:1px solid #24506F;transition:background .15s ease;
}
.live-match:last-child{border-bottom:0;}
.live-match:nth-child(even){background:#123048;}
.live-match:hover{background:#16374F;}
/* MATCH ELEMENT POSITIONS */
.live-match-side{display:contents;}
.live-star{grid-area:star;}
.live-team.home{grid-area:nameA;}
.live-team-badge.home{grid-area:badgeA;}
.live-score.home{grid-area:scoreA;}
.live-score-divider{grid-area:div;}
.live-score.away{grid-area:scoreB;}
.live-team-badge.away{grid-area:badgeB;}
.live-team.away{grid-area:nameB;}
/* STATUS TAG */
.live-status-tag{position:absolute;top:6px;inset-inline-end:12px;display:inline-flex;align-items:center;
  padding:2px 11px;border-radius:999px;font-size:.66rem;font-weight:800;white-space:nowrap;}
.live-status-tag.live{background:#3d1218;color:#ff8896;}
.live-status-tag.finished{background:#1D4260;color:#B7CCDA;}
.live-status-tag.upcoming{background:#0F3346;color:#F7B558;}
/* FAVORITE */
.live-star{border:0;background:transparent;color:#D3DFE8;font-size:1.35rem;cursor:pointer;}
.live-star.active{color:#0F7E95;}
/* TEAM */
.live-team{color:#e9edf0;font-size:.9rem;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.live-team.home{text-align:end;}
.live-team.away{text-align:start;}
/* TEAM BADGE */
.live-team-badge{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  color:#ffffff;background:#0F7E95;font-size:.7rem;font-weight:800;}
/* SCORE */
.live-score{min-width:40px;height:36px;display:grid;place-items:center;padding:0 8px;
  color:#ffffff;background:#0A2133;border-radius:9px;font-size:.95rem;font-weight:800;}
.live-match.is-live .live-score{background:#0F7E95;color:#e9edf0;}
.live-score-divider{color:#D6E3EC;text-align:center;}
/* CHAMPIONSHIP RANKING */
.rank-hero{width:85%;max-width:1500px;margin:0 auto 26px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#113A50 0%,#0F2A3E 100%);border:1px solid rgba(15,126,149,.4);}
.rank-hero-inner{display:flex;align-items:center;gap:28px;padding:30px 30px 18px;flex-wrap:wrap;}
.rank-hero-side{flex:0 0 210px;}
.rank-hero-meta{display:flex;align-items:center;gap:8px;}
.rank-hero-title{max-width:100%;margin:0 0 10px;color:#e9edf0;font-family:var(--font-display);font-size:1.55rem;
  font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-hero-label{display:inline-block;margin-bottom:0;padding-bottom:0;color:#F7B558;border-bottom:0;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.rank-hero-label::after{content:"";display:inline-block;width:22px;height:2px;margin-inline-start:7px;
  background:#0F7E95;border-radius:2px;vertical-align:middle;}
.rank-hero-viewall{position:relative;display:block;padding:0;padding-inline-start:10px;color:#A9C1D2;
  background:none;border:0;font-family:inherit;font-size:.78rem;font-weight:700;text-decoration:none;}
.rank-hero-viewall::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:3px;
  height:3px;transform:translateY(-50%);background:#CFDEE8;border-radius:50%;}
/* TOP 3 RANKING CARDS */
.rank-hero-cards{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.rank-hero-scroll{flex:1;min-width:0;display:flex;justify-content:center;gap:16px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;}
.rank-hero-scroll::-webkit-scrollbar{height:5px;}
.rank-hero-scroll::-webkit-scrollbar-thumb{background:#D6E3EC;border-radius:6px}
.rank-hero-next{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  color:#e9edf0;background:#0F2A3E;border:1px solid #24506F;border-radius:50%;font-size:1.1rem;
  cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.1);}
.rank-hero-next:hover{background:#16374F;}
.rank-card{flex:0 0 200px;display:flex;flex-direction:column;align-items:center;padding:18px 14px 16px;background:#0F2A3E;
  border:1px solid #153450;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);scroll-snap-align:start;}
.rank-card-circle{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-bottom:10px;color:#e9edf0;border-radius:50%;font-size:1.15rem;
  font-weight:900;box-shadow:0 4px 10px rgba(0,0,0,.14);}
.rank-card.t1 .rank-card-circle{background:linear-gradient(160deg,#FBB53C,#E8941A);color:#06141F;}
.rank-card.t2 .rank-card-circle{background:linear-gradient(160deg,#153450,#C4D5E1);}
.rank-card.t3 .rank-card-circle{background:linear-gradient(160deg,#e6c09b,#c98f57);}
.rank-card-body{width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.rank-card-name{max-width:100%;margin:0;color:#e9edf0;font-size:.92rem;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.rank-card-sub{width:100%;margin-bottom:1px;padding-bottom:6px;color:#A3BDD0;border-bottom:1px solid #153450;font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.rank-card-score{display:flex;align-items:baseline;justify-content:center;gap:6px;color:#e9edf0;font-size:.85rem;}
.rank-card-score b{color:#A9C1D2;font-size:.62rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;}
.rank-card-score span{font-weight:900;font-variant-numeric:tabular-nums;}
/* RANKING 4 AND BELOW */
.standings-list{padding:6px 30px 22px;}
.standings-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid #153450;transition:background .15s ease;}
.standings-row:last-child{border-bottom:0;}
.standings-row:hover{background:#123048;}
.standings-rank{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;
  color:#A9C1D2;background:#153450;border-radius:50%;font-size:.74rem;font-weight:800;}
.standings-name{flex:1;min-width:0;color:#e9edf0;font-size:.88rem;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.standings-value{flex-shrink:0;color:#e9edf0;font-size:.85rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* OVERALL RANKING + CHAMPIONS */
.rank-grid{width:85%;max-width:1500px;margin:0 auto;gap:26px;align-items:start;}
.rank-panel{padding:26px 26px 10px;background:linear-gradient(180deg,#113A50 0%,#0F2A3E 100%);border:1px solid rgba(15,126,149,.4);border-radius:22px;}
.rank-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#e9edf0;font-family:var(--font-display);font-size:1.2rem;font-weight:900;}
.rank-panel-head .ic{font-size:1.35rem;}
/* Overall cards */
.ov-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;}
.ov-card{display:flex;flex-direction:column;align-items:center;padding:20px 12px 16px;text-align:center;background:#0F2A3E;border:1px solid #24506F;border-radius:12px;}
.ov-card-badge{width:50px;height:50px;display:grid;place-items:center;margin-bottom:14px;
  color:#e9edf0;background:#153450;border-radius:50%;font-size:1.05rem;font-weight:900;}
.ov-card.t1 .ov-card-badge{background:linear-gradient(160deg,#FBB53C,#E8941A);color:#06141F;box-shadow:0 4px 10px rgba(245,168,28,.35);}
.ov-card.t2 .ov-card-badge{background:linear-gradient(160deg,#153450,#C4D5E1);}
.ov-card.t3 .ov-card-badge{background:linear-gradient(160deg,#e6c09b,#c98f57);}
.ov-card-name{max-width:100%;margin-bottom:6px;color:#e9edf0;font-size:.9rem;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ov-card-sub{margin-bottom:14px;color:#97B4C9;font-size:.76rem;font-variant-numeric:tabular-nums;}
.ov-card-btn{padding:7px 16px;color:#e9edf0;background:transparent;
  border:1px solid #0A2133;border-radius:8px;font-size:.72rem;font-weight:700;white-space:nowrap;cursor:pointer;}
/* Champions */
.champ-grid{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px;}
.champ-grid .champ-card{flex:0 0 92px;min-height:58px;padding:9px 4px;text-align:center;background:#0F2A3E;
  border:1px solid #F1D9A8;border-radius:9px;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:transform .15s ease;}
.champ-grid .champ-card:hover{transform:translateY(-2px);}
.champ-card-badge{width:26px;height:26px;display:grid;place-items:center;margin:0 auto 5px;
  background:linear-gradient(160deg,#FBB53C,#E8941A);color:#06141F;border-radius:50%;font-size:.74rem;box-shadow:0 2px 6px rgba(245,168,28,.3);}
.champ-card-name{display:block;margin-bottom:2px;color:#e9edf0;font-size:.7rem;font-weight:800;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.champ-card-sub{display:block;color:#8BA9BE;font-size:.6rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/* RANKING PAGES - PHONE */
@media(max-width:700px){
  .rank-hero{width:calc(100% - 24px);border-radius:18px;}
  .rank-hero-inner{padding:20px 16px 6px;gap:14px;}
  .rank-hero-side{flex:1 1 100%;}
  .rank-hero-title{margin-bottom:8px;font-size:1.15rem;}
  .rank-hero-label{font-size:.66rem;}
  .rank-hero-viewall{font-size:.72rem;}
  .rank-hero-cards{align-items:stretch;}
  .rank-hero-scroll{flex-direction:column;gap:8px;max-height:280px;overflow-x:hidden;overflow-y:auto;padding:4px 2px 4px 0;scroll-snap-type:y proximity;}
  .rank-card{width:70%;max-width:220px;flex:0 0 auto;margin:0 auto;padding:10px 10px 8px;}
  .rank-card-circle{width:34px;height:34px;margin-bottom:5px;font-size:.85rem;}
  .rank-card-name{font-size:.8rem;}
  .rank-card-sub{padding-bottom:4px;font-size:.62rem;}
  .rank-card-score{font-size:.76rem;}
  .rank-card-score b{font-size:.58rem;}
  .rank-hero-next{display:none;}
  .standings-list{padding:4px 16px 18px;}
  .standings-row{gap:8px;padding:9px 4px;}
  .standings-name{font-size:.82rem;}
  .standings-value{font-size:.8rem;}
  /* Overall ranking */
  .rank-grid{width:calc(100% - 24px);}
  .rank-panel{padding:18px 16px 12px;border-radius:16px;}
  .rank-panel-head{font-size:1.05rem;}
  .ov-card-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ov-card{padding:14px 8px 12px;}
  .ov-card-badge{width:40px;height:40px;margin-bottom:10px;font-size:.9rem;}
  .ov-card-name{font-size:.8rem;}
  .ov-card-sub{margin-bottom:10px;font-size:.68rem;}
  .ov-card-btn{padding:6px 12px;font-size:.66rem;}
  .champ-grid{gap:6px;}
  .champ-grid .champ-card{flex:0 0 80px;min-height:52px;padding:7px 4px;}
  .champ-card-badge{width:24px;height:24px;font-size:.68rem;}
  .champ-card-name{font-size:.64rem;}
  .champ-card-sub{font-size:.54rem;}
}
/* 17. EMPTY RESULTS */
.live-results-empty{width:85%;max-width:1500px;margin:0 auto 25px;padding:30px;text-align:center;
  color:#87A5BB;background:#0F2A3E;border:1px dashed #DDE8F0;border-radius:15px;}
/* 18. MOBILE RESULTS */
@media (max-width:700px){
  /* Hide desktop tabs */
  .results-tabs{display:none !important;}
  .results-tabs-row{display:block;margin:0;}
  /* Mobile dropdown + filter */
  .results-toolbar-row{width:88%;max-width:460px;display:flex;align-items:stretch;justify-content:center;
    gap:8px;margin:50px auto 22px;position:relative;z-index:20;}
  .results-mobile-dropdown{position:relative;display:block;flex:1;min-width:0;width:auto;max-width:none;margin:0;}
  .results-dropdown-button{width:100%;height:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:6px 14px;color:#ffffff;background:#0A2133;border:1px solid #0A2133;border-radius:12px;
    font-family:inherit;font-size:.86rem;font-weight:600;text-align:start;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.14);transition:background .18s ease,border-color .18s ease;}
  .results-dropdown-button:hover{background:#0E4A67;border-color:#0E4A67;}
  .results-dropdown-button > span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .results-dropdown-arrow{flex-shrink:0;color:#ffffff;font-size:.9rem;line-height:1;transition:transform .2s ease;}
  .results-mobile-dropdown.open .results-dropdown-arrow{transform:rotate(180deg);}
  /* Mobile dropdown menu */
  .results-dropdown-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;display:none;max-height:320px;
    padding:0;overflow-x:hidden;overflow-y:auto;background:#0F2A3E;border:1px solid #24506F;
    border-radius:14px;box-shadow:0 16px 36px rgba(0,0,0,.20);z-index:40;}
  .results-mobile-dropdown.open .results-dropdown-menu{display:block;}
  .results-dropdown-option{width:100%;min-height:48px;display:flex;align-items:center;padding:12px 15px;
    color:#e9edf0;background:#0F2A3E;border:0;border-bottom:1px solid #153450;font-family:inherit;
    font-size:.86rem;font-weight:600;text-align:start;cursor:pointer;}
  .results-dropdown-option:last-child{border-bottom:0;}
  .results-dropdown-option:hover{background:#16374F;}
  .results-dropdown-option.selected{background:#1D4260;font-weight:700;}
  /* Filter button */
  .mobile-results-filter-btn{height:auto;min-width:92px;min-height:46px;padding:0 14px;font-size:.8rem;}
  /* Open filter panel */
  #mobileResultsFilters .live-results-toolbar,#ptsResultsFilters .live-results-toolbar{width:calc(100% - 24px);
    margin:10px auto 22px;padding:16px 12px;display:flex;align-items:center;justify-content:center;
    background:#0F2A3E;border:1px solid #24506F;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.08);}
  .live-filter-row{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto;}
  .live-chip{min-height:40px;padding:0 12px;font-size:.75rem;}
  .live-search-btn{width:40px;height:40px;flex:0 0 40px;margin:0;}
  .live-chip-dropdown{min-width:180px;}
  /* Card width */
  .live-championship,.live-active-filter,.live-results-empty{width:calc(100% - 24px);}
  /* PHONE BLUE HEADERS Live + Points exactly the same */
  .live-championship-header,.points-board-head{min-height:70px;height:70px;padding:10px 15px;}
  .live-championship-title,.points-board-title{font-size:1.1rem;font-weight:800;line-height:1.15;}
  .live-championship-icon,.live-championship-icon .sport-icon,.points-board-title .sport-icon{width:46px;height:46px;}
  .live-championship-count,.points-board-count{padding:5px 10px;font-size:.72rem;}
  /* MOBILE LIVE MATCHES */
  .live-match-list{padding:4px 10px 8px;}
  .live-match{min-height:0;
    grid-template-columns:
    34px
    1fr
    50px
    40px;
    grid-template-areas:"badgeA nameA scoreA side""badgeB nameB scoreB side";
    row-gap:8px;column-gap:8px;padding:12px 10px;
}
/* Status + favorite stacked vertically */
.live-match-side{display:flex;grid-area:side;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
/* Status badge */
.live-status-tag{position:static;top:auto;inset-inline-end:auto;padding:2px 8px;font-size:.6rem;}
/* Favorite star */
.live-star{font-size:1.15rem;}
/* Hide | separator on phone */
.live-score-divider{display:none;}
/* Team becomes a light rounded box */
.live-team{max-width:none;min-height:32px;display:flex;align-items:center;padding:8px 12px;
  color:#e9edf0;background:#16374F;border:1px solid #24506F;border-radius:9px;font-size:.85rem;
  text-align:start !important;}
/* Team badge */
.live-team-badge{width:28px;height:28px;border-radius:9px;font-size:.64rem;}
/* Score */
.live-score{min-width:36px;height:32px;justify-self:end;border:1px solid #24506F;font-size:.85rem;}
}
/* 19. VERY SMALL PHONES */
@media (max-width:390px){
  .results-toolbar-row{width:94%;gap:6px;}
  .mobile-results-filter-btn{min-width:78px;gap:5px;padding:0 10px;font-size:.74rem;}
  .mobile-results-filter-btn .filter-icon{width:18px;height:18px;}
  .results-dropdown-button{padding-inline:11px;font-size:.8rem;}
}
/* CHAMPIONSHIP CATEGORY TABS Desktop */
.fpills{width:fit-content;max-width:100%;display:flex;align-items:center;justify-content:center;
  gap:4px;margin:0 auto 30px;padding:5px;background:#0F2A3E;border:1px solid #24506F;border-radius:15px;
  box-shadow:0 5px 18px rgba(0,0,0,.08);}
.fpill{position:relative;min-height:46px;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:10px 22px;color:#8FB2C9;background:transparent;border:0;border-radius:11px;
  font-family:inherit;font-size:.92rem;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;}
.fpill:hover{color:#0F7E95;background:#16374F;}
.fpill.on{color:#ffffff;background:#0F7E95;box-shadow:0 5px 13px rgba(0,0,0,.20);}
.fpill.on::after{content:"";position:absolute;left:50%;bottom:5px;width:28px;height:2px;
  transform:translateX(-50%);background:#F5A81C;border-radius:10px;}
.fpill b{color:#A9C1D2;font-weight:700;}
.fpill.on b{color:#F7C97E;}
.fpill:focus-visible{outline:2px solid #1D9BB0;outline-offset:2px;}
/* MOBILE CHAMPIONSHIP MENU */
.champ-mobile-dropdown{display:none;}
@media(max-width:700px){
  /* Hide desktop championship pills */
  .fpills{display:none !important;}
  .champ-mobile-dropdown{position:relative;display:block;width:75%;max-width:420px;margin:0 auto 22px;z-index:20;}
  .champ-dropdown-button{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:6px 14px;color:#ffffff;background:#0A2133;border:1px solid #0A2133;border-radius:12px;
    font-family:inherit;font-size:.86rem;font-weight:600;text-align:start;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.14);}
  .champ-dropdown-button:hover{background:#123048;border-color:#123048;}
  .champ-dropdown-arrow{flex-shrink:0;color:#ffffff;font-size:.9rem;line-height:1;transition:transform .2s ease;}
  .champ-mobile-dropdown.open .champ-dropdown-arrow{transform:rotate(180deg);}
  .champ-dropdown-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;display:none;max-height:320px;
    padding:0;overflow-y:auto;background:#0F2A3E;border:1px solid #24506F;border-radius:14px;
    box-shadow:0 16px 36px rgba(0,0,0,.20);z-index:40;}
  .champ-mobile-dropdown.open .champ-dropdown-menu{display:block;}
  .champ-dropdown-option{width:100%;min-height:46px;display:flex;align-items:center;padding:11px 14px;
    color:#e9edf0;background:#0F2A3E;border:0;border-bottom:1px solid #153450;font-family:inherit;
    font-size:.84rem;font-weight:600;text-align:start;cursor:pointer;}
  .champ-dropdown-option:last-child{border-bottom:0;}
  .champ-dropdown-option:hover{background:#16374F;}
  .champ-dropdown-option.selected{background:#173753;color:#e9edf0;font-weight:700;}
}
/* SCHEDULE PAGE FILTER BAR Desktop */
.container.section > .sec-intro + .lb-tabs{
  width:fit-content;max-width:100%;display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;gap:4px;margin:0 auto 24px;padding:5px;background:#0F2A3E;
  border:1px solid #24506F;border-radius:15px;box-shadow:0 5px 18px rgba(0,0,0,.08);}
.container.section > .sec-intro + .lb-tabs .lb-tab{
  position:relative;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;flex-shrink:0;padding:10px 22px;color:#8FB2C9;background:transparent;border:0;
  border-radius:11px;font-family:inherit;font-size:.92rem;font-weight:600;white-space:nowrap;cursor:pointer;}
.container.section > .sec-intro + .lb-tabs .lb-tab:hover{color:#0F7E95;background:#16374F;}
.container.section > .sec-intro + .lb-tabs .lb-tab.active{color:#ffffff;background:#0F7E95;box-shadow:0 5px 13px rgba(0,0,0,.20);}
.container.section > .sec-intro + .lb-tabs .lb-tab.active::after{content:"";position:absolute;left:50%;
  bottom:5px;width:28px;height:2px;transform:translateX(-50%);background:#F5A81C;border-radius:10px;}
/* SCHEDULE INTRO */
.sec-intro{max-width:800px;margin:5px auto 30px;text-align:center;}
@media(max-width:700px){.sec-intro{font-size:.82rem;line-height:1.6;}}

/* RESULTS MOBILE DROPDOWN DIRECTION */
/* ARABIC */
[dir="rtl"] .results-dropdown-button{flex-direction:row-reverse;}
[dir="rtl"] .results-dropdown-button > span:last-child{text-align:right;}
/* ENGLISH */
[dir="ltr"] .results-dropdown-button{flex-direction:row-reverse;}
[dir="ltr"] .results-dropdown-button > span:last-child{text-align:left;}

/* FIX RESULTS EDITOR SPORT ICON */
.match-row .m-champ .sport-icon {width: 42px !important;height: 42px !important;object-fit: contain !important;display: block;flex-shrink: 0;}
.match-row .m-champ {display: flex;align-items: center;gap: 10px;}

/* Keep each result row normal size */
.match-row {min-height: 70px;overflow: hidden;}

  /* ---- press feedback on the remaining pressables; positioning transforms
     composed in so :active never undoes them ---- */
  .sc-chip:active, .fpill:active, .lb-tab:active, .seg-btn:active, .sc-reset:active { transform: scale(.96); }
  .hx-nav:active { transform: translateY(-50%) scale(.92); }
  #kbotBtn:active { transform: scale(.94); }

  /* ---- hover lifts fire on tap on touch screens; ground them there and keep the
     color/shadow feedback, which does not move ---- */
  @media (hover: none) {
    .btn.primary:hover, .btn.gold:hover, .card.link:hover,
    .champ-grid .champ-card:hover, .wv-card:hover, .nw-card:hover, .sc-item:hover { transform: none; }
    .ev-card:hover .ev-media img { transform: none; }
  }

  /* ---- reduced motion: keep the fades that aid comprehension, drop the travel ---- */
  @media (prefers-reduced-motion: reduce) {
    .toast, .toast.show, [dir=ltr] .toast, [dir=ltr] .toast.show { transform: translateX(50%); transition: opacity 150ms ease; }
    [dir=ltr] .toast, [dir=ltr] .toast.show { transform: translateX(-50%); }
    #kbot, #kbot[hidden] { transform: none; transition: opacity 150ms ease, display 150ms allow-discrete; }
    .lightbox img { transition: none; }
  }
  /* ---- results editors ---- */
  .se-sport { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.05rem; margin: 22px 0 8px; color: #fff; }
  .se-sport .sport-icon { width: 30px; height: 30px; object-fit: contain; }
  .se-count { margin-inline-start: auto; font-size: .78rem; font-weight: 700; color: var(--gold-soft); background: rgba(15,126,149,.16); padding: 3px 10px; border-radius: 999px; }
  .se-round { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #0E273A; }
  .se-round-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; color: var(--gold-soft); font-weight: 700; font-size: .85rem; }
  .se-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 0 4px; border-top: 1px dashed var(--line); margin-top: 8px; }
  input.se-name { flex: 1 1 140px; min-width: 120px; width: auto; }
  .se-team { flex: 1 1 140px; min-width: 120px; font-size: .92rem; font-weight: 600; }
  .se-team.empty { color: var(--muted); font-weight: 400; font-size: .85rem; }
  input.se-score { width: 74px; flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; }
  .se-vs { color: var(--muted); font-weight: 800; }
  select.se-st { width: auto; flex: 0 0 auto; }
  .se-del { flex: 0 0 auto; width: 44px; min-height: 44px; border: 1px solid var(--line); background: transparent; border-radius: 10px; color: var(--bad-ink); cursor: pointer; display: grid; place-items: center; }
  .se-del:hover { border-color: var(--bad-ink); background: #241416; }
  .se-del:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .se-del .sc-i { width: 17px; height: 17px; }
  .se-empty { color: var(--muted); font-size: .85rem; margin: 8px 0 2px; }
  .se-note { color: var(--muted); font-size: .82rem; margin: 10px 0 0; }
  /* the save bar rides the bottom of the viewport while the list scrolls, and only
     admits to unsaved changes when there are some */
  .se-bar { position: sticky; bottom: 10px; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 10px 14px; background: #123048; border: 1px solid var(--line); border-radius: 12px; margin-top: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
  .se-dirty { display: none; color: var(--warn-ink); font-weight: 700; font-size: .86rem; }
  .se-bar.dirty { border-color: rgba(251,191,36,.4); }
  .se-bar.dirty .se-dirty { display: inline; }
  /* ---- خريطة المهرجان ---- */
  .fm-root { position: relative; margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0B2233; }
  .fm-view { height: min(64vh, 620px); touch-action: none; cursor: grab; perspective: 1400px; overflow: hidden; }
  .fm-view:active { cursor: grabbing; }
  /* the 2.5D: the whole plot leans back; depth comes from shadows and risers */
  .fm-tiltwrap { width: 100%; height: 100%; transform: rotateX(30deg) scale(1.28); transform-origin: 50% 62%; transform-style: preserve-3d; animation: fmSettle 1.6s var(--ease-out-strong) both; }
  @keyframes fmSettle { from { opacity: 0; transform: rotateX(14deg) scale(1.12); } to { opacity: 1; transform: rotateX(30deg) scale(1.28); } }
  #fmSvg { width: 100%; height: 100%; display: block; }
  #fmCam { transition: transform 550ms var(--ease-in-out-strong); }
  .fm-bg { fill: #12293B; }
  .fm-sand { fill: #2b2a20; rx: 10; }
  .fm-green { fill: #14361f; stroke: #1d4a2b; stroke-width: 2; }
  .fm-souq { fill: #1a1f24; rx: 8; opacity: .8; }
  .fm-road { fill: #1D4260; }
  .fm-water { fill: #0c2733; animation: fmWater 9s ease-in-out infinite alternate; }
  @keyframes fmWater { from { fill: #0c2733; } to { fill: #0e3140; } }
  .fm-axis { stroke: rgba(245,168,28,.35); stroke-width: 3; stroke-dasharray: 10 12; }
  .fm-v { cursor: pointer; }
  .fm-v:focus-visible { outline: none; }
  .fm-v:focus-visible .fm-shape { stroke: var(--gold-soft); stroke-width: 4; }
  .fm-shape { stroke-width: 2; transition: transform .25s var(--ease-out-strong), filter .25s; transform-box: fill-box; transform-origin: center; }
  .fm-c-sport .fm-shape { fill: rgba(15,126,149,.55); stroke: #F5A81C; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
  .fm-c-stage .fm-shape { fill: rgba(230,180,60,.35); stroke: #d9b45c; }
  .fm-c-service .fm-shape { fill: rgba(122,166,255,.28); stroke: #7ba6ff; }
  .fm-c-vip .fm-shape { fill: rgba(217,180,92,.22); stroke: rgba(217,180,92,.6); }
  .fm-c-parking .fm-shape, .fm-c-parking polygon.fm-shape { fill: rgba(160,170,180,.16); stroke: rgba(160,170,180,.5); stroke-dasharray: 6 5; }
  .fm-c-seating .fm-shape, .fm-seat { fill: rgba(240,140,60,.4); stroke: #e08840; }
  .fm-c-ops .fm-shape { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.18); }
  .fm-c-ops .fm-lbl { fill: rgba(255,255,255,.35); }
  .fm-mat { fill: rgba(255,255,255,.14); stroke: #cfe8df; stroke-width: 1.5; pointer-events: none; }
  .fm-line { stroke: rgba(255,255,255,.4); stroke-width: 1.5; pointer-events: none; }
  .fm-ball { fill: #fff; pointer-events: none; }
  [data-zoom="near"] .fm-ball { animation: fmBall 3.2s ease-in-out infinite alternate; }
  @keyframes fmBall { from { transform: translateX(0); } to { transform: translateX(36px); } }
  .fm-vipseat { fill: rgba(217,180,92,.5); stroke: #d9b45c; pointer-events: none; }
  .fm-lbl { fill: #e9edf0; font-size: 17px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 3px; pointer-events: none; font-family: var(--font); }
  [data-zoom="far"] .fm-c-service .fm-lbl, [data-zoom="far"] .fm-c-seating .fm-lbl, [data-zoom="far"] .fm-c-vip .fm-lbl, [data-zoom="far"] .fm-c-ops .fm-lbl { display: none; }
  [data-zoom="far"] .fm-c-ops, [data-zoom="mid"] .fm-c-ops { display: none; }
  .fm-ent-c { fill: var(--gold); stroke: #fff; stroke-width: 2.5; }
  .fm-ent-t { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; pointer-events: none; }
  .fm-v:hover .fm-shape, .fm-on .fm-shape { transform: translateY(-5px) scale(1.04); filter: drop-shadow(0 9px 0 rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(245,168,28,.4)); }
  .fm-on .fm-shape { stroke-width: 4; }
  .fm-dimmed { opacity: .22; }
  .fm-pulse { fill: none; stroke: #f87171; stroke-width: 3; animation: fmPulse 2s ease-out infinite; pointer-events: none; }
  @keyframes fmPulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
  .fm-pulse { transform-box: fill-box; transform-origin: center; }
  .fm-route { fill: none; stroke: var(--gold-soft); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 10; animation: fmDraw 800ms var(--ease-out-strong) both; }
  @keyframes fmDraw { from { opacity: 0; stroke-dashoffset: 400; } to { opacity: 1; stroke-dashoffset: 0; } }
  .fm-route-dot { fill: #fff; }
  .fm-ctl { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; gap: 7px; z-index: 4; }
  .fm-btn { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: rgba(10,30,46,.85); color: #e9edf0; border-radius: 10px; font-size: 1.2rem; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px); }
  .fm-btn:hover { border-color: var(--gold); }
  .fm-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .fm-btn-w { font-size: .8rem; padding: 0 12px; }
  .fm-panel { position: absolute; top: 12px; inset-inline-end: 12px; width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto; background: rgba(11,32,49,.94); border: 1px solid rgba(245,168,28,.4); border-radius: 14px; padding: 14px 16px; z-index: 5; backdrop-filter: blur(6px); }
  .fm-p-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.02rem; color: #fff; }
  .fm-p-head .sport-icon { width: 26px; height: 26px; }
  .fm-x { margin-inline-start: auto; width: 34px; height: 34px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; }
  .fm-dim { color: var(--muted); font-size: .8rem; margin: 6px 0; }
  .fm-fx { display: flex; gap: 10px; align-items: center; font-size: .84rem; padding: 6px 0; border-top: 1px dashed var(--line); }
  .fm-st { font-size: .72rem; padding: 2px 8px; border-radius: 99px; margin-inline-start: auto; }
  .fm-st-live { background: #3d1218; color: #ff8896; }
  .fm-st-up, .fm-st-soon { background: #0F3346; color: #F7B558; }
  .fm-st-done { background: #1D4260; color: #B7CCDA; }
  .fm-none { color: var(--muted); font-size: .84rem; }
  .fm-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .fm-hits { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
  .fm-hit { min-height: 40px; padding: 7px 14px; border: 1px solid var(--line); background: #123048; color: #e9edf0; border-radius: 999px; font-family: inherit; font-size: .84rem; cursor: pointer; }
  .fm-hit:hover { border-color: var(--gold); }
  .fm-days { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 0; padding-bottom: 4px; }
  .fm-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .8rem; margin: 12px 2px; }
  .fm-k { width: 13px; height: 13px; border-radius: 4px; display: inline-block; margin-inline-end: 4px; vertical-align: -2px; }
  .fm-k-sport { background: rgba(15,126,149,.7); border: 1px solid #F5A81C; }
  .fm-k-service { background: rgba(122,166,255,.4); border: 1px solid #7ba6ff; }
  .fm-k-entrance { background: var(--gold); border-radius: 50%; }
  .fm-k-parking { background: rgba(160,170,180,.3); border: 1px dashed rgba(160,170,180,.7); }
  .fm-k-seating { background: rgba(240,140,60,.5); border: 1px solid #e08840; }
  /* the map itself never mirrors for RTL — only the UI around it does */
  .fm-view, #fmSvg { direction: ltr; }
  @media (max-width: 700px) {
    .fm-view { height: 62vh; }
    .fm-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; max-height: 46vh; border-radius: 14px 14px 0 0; animation: fmSheet .3s var(--ease-out-strong); z-index: 160; }
    @keyframes fmSheet { from { transform: translateY(30%); opacity: 0; } }
    .fm-ctl { top: auto; bottom: 12px; }
    .fm-panel ~ .fm-ctl, .fm-root:has(.fm-panel:not([hidden])) .fm-ctl { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fm-tiltwrap { animation: none; }
    .fm-water, .fm-ball, .fm-pulse { animation: none; }
    #fmCam, .fm-shape { transition: none; }
    .fm-route { animation: none; }
    .fm-route-dot { display: none; }
  }
  /* ==========================================================================
     SPORT IDENTITY LAYER — appended last so it restyles the shared component
     vocabulary (buttons, stats, cards, chips, headers) without touching the
     7900 lines of view code. Keeps the Sharjah green as the brand anchor and
     adds an electric accent, an athletic display voice, and scroll motion.
     RTL-safe: uppercase / letter-spacing are scoped to html[lang=en] only,
     because letter-spacing breaks Arabic letter joining.
     ========================================================================== */
  :root {
    --spark: #FBB53C;          /* brand gold — energy accent (from the identity sun) */
    --spark-deep: #E8941A;
    --spark-glow: rgba(251,181,60,.32);
    --coral-hot: #F2683F;      /* coral gradient pair for primary actions */
    --coral-deep: #D9411F;
    --coral-glow: rgba(240,74,45,.35);
    /* Numerals and outlined ghost type set in the brand's Losta Masta serif —
       the same voice the identity uses for SPEED / START / countdown posters. */
    --font-sport: 'Losta Masta', 'GE Contrast', var(--font-display);
  }

  /* --- athletic display voice for numbers & kickers (Latin glyphs; Arabic
         falls through the stack to Cairo automatically) --- */
  .def-count .cd-cell b, .stat .n, .def-stat b, .ss-num, .lb-rank, .vcode b,
  .win-score b, .se-score, .sc-n { font-family: var(--font-sport); }

  html[lang="en"] .def-kicker, html[lang="en"] .def-over, html[lang="en"] .ph-kicker,
  html[lang="en"] .btn.def, html[lang="en"] .ev-tag, html[lang="en"] .stat .l,
  html[lang="en"] .nav-login { text-transform: uppercase; letter-spacing: .06em; }

  /* --- buttons: tighter, more athletic, stronger energy on hover --- */
  .btn { border-radius: 9px; font-weight: 700; transition: transform .16s var(--ease-out-strong), box-shadow .16s var(--ease-out-strong), background-color .16s, filter .16s; }
  .btn.primary, .btn.gold { background: linear-gradient(135deg, var(--coral-hot), var(--coral-deep)); position: relative; overflow: hidden; color: #fff; }
  .btn.primary::after, .btn.gold::after, .btn.def::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg); transition: left .5s var(--ease-out-strong); pointer-events: none;
  }
  .btn.primary:hover::after, .btn.gold:hover::after, .btn.def:hover::after { left: 130%; }
  .btn.primary:hover, .btn.gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--coral-glow); filter: none; }
  .btn.def { border-radius: 8px; }
  .btn.defghost { box-shadow: inset 0 0 0 2px var(--spark); color: var(--spark); }
  .btn.defghost:hover { background: var(--spark-glow); color: #FFF4E0; }
  .btn.ghost { border-color: var(--spark-deep); color: var(--spark); }
  .btn.ghost:hover { background: var(--spark-glow); }
  .btn:focus-visible, a:focus-visible, .award-btn:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

  /* --- hero: kicker gets an accent bar; countdown reads like a scoreboard --- */
  .def-kicker { color: var(--spark); display: inline-flex; align-items: center; gap: 10px; }
  .def-kicker::before { content: ''; width: 26px; height: 3px; background: var(--spark); border-radius: 2px; }
  .def-count .cd-cell { border-color: var(--spark-deep) !important; background: rgba(251,181,60,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .def-count .cd-cell b { color: #FFF4E0; }

  /* --- stat tiles: bigger numbers, accent top-rail, hover lift --- */
  .stat { position: relative; overflow: hidden; transition: transform .2s var(--ease-out-strong), border-color .2s, box-shadow .2s; }
  .stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--spark), transparent); opacity: .8; }
  .stat:hover { transform: translateY(-3px); border-color: var(--spark-deep); box-shadow: 0 10px 24px rgba(0,0,0,.32); }
  .stat .n { font-size: 1.85rem; color: var(--spark); }
  .stat.lead { border-color: var(--spark); box-shadow: 0 6px 22px var(--spark-glow); }
  .stat.lead .n { color: #FFF4E0; }
  .def-stat b { color: var(--spark); }

  /* --- cards: athletic hover (lift + accent frame + sharper media zoom).
         Championship cards are .ev-card (.ev-media / .ev-tag); the generic
         portal/survey tiles are .card. --- */
  .ev-card, .card { transition: transform .22s var(--ease-out-strong), box-shadow .22s var(--ease-out-strong), border-color .22s; }
  .ev-card:hover, .card.link:hover { transform: translateY(-4px); }
  .card.link:hover { border-color: var(--spark-deep); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
  .ev-card:hover .ev-media { box-shadow: 0 14px 34px rgba(0,0,0,.45); }
  .ev-card:hover .ev-media img { transform: scale(1.09); }
  .ev-media { border: 1px solid transparent; transition: border-color .22s; }
  .ev-card:hover .ev-media { border-color: var(--spark-deep); }
  .ev-tag { background: rgba(9,28,43,.78) !important; border: 1px solid var(--spark-deep); color: var(--spark) !important; font-weight: 700; backdrop-filter: blur(3px); }
  .ev-card:hover .ev-title { color: var(--spark); }

  /* --- filters / chips: energetic active state --- */
  .sc-chip.on, .fpill.on { background: linear-gradient(135deg, var(--coral-hot), var(--coral-deep)); border-color: var(--coral-hot); color: #fff; box-shadow: 0 4px 14px var(--coral-glow); }
  .chip:has(input:checked) span { background: var(--gold); }
  .chip:has(input:focus-visible) span, .sc-chip:focus-visible, .fpill:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

  /* --- section headers: accent bar in the identity green-to-spark --- */
  .sec-title { color: var(--ink); }
  /* the identity's three race-track bands: gold → coral → teal */
  .sec-title::after, .pagehead h1::after { background: linear-gradient(90deg, var(--spark) 0 33%, var(--coral) 33% 66%, var(--teal) 66% 100%) !important; height: 4px !important; width: 60px !important; }
  .def-over { color: var(--spark); display: inline-flex; align-items: center; gap: 9px; }
  .def-over::before { content: ''; width: 22px; height: 3px; background: var(--spark); border-radius: 2px; }

  /* --- nav sign-in pill picks up the accent --- */
  .nav-login { border-color: var(--spark-deep) !important; color: var(--spark) !important; }
  .nav-login:hover { background: var(--spark-glow); }

  /* --- scroll-reveal motion. Hidden state applies ONLY once JS adds
         .reveal-ready to <html>, so a JS failure or reduced-motion leaves all
         content visible. Elements already on-screen reveal immediately. --- */
  html.reveal-ready .stat,
  html.reveal-ready .def-stat,
  html.reveal-ready .champ-card,
  html.reveal-ready .ev-grid > *,
  html.reveal-ready .def-feat,
  html.reveal-ready .card,
  html.reveal-ready .sec-title {
    opacity: 0; transform: translateY(16px);
  }
  html.reveal-ready .is-in {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease-out-strong), transform .5s var(--ease-out-strong);
    transition-delay: calc(var(--rvi, 0) * 45ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn.primary::after, .btn.gold::after, .btn.def::after { display: none; }
  }

  /* ==========================================================================
     CINEMATIC LAYER — reinterprets the UAE SWAT Challenge presentation language
     (transparent→solid nav over media, numbered editorial sport showcase,
     oversized edition/date treatment, big-number statistics, outlined display
     type, dramatic footer) in the festival's own Sharjah-green identity.
     ========================================================================== */

  /* --- navigation: overlays the hero on the homepage, solidifies on scroll --- */
  .topbar { transition: background-color .35s var(--ease-out-strong), box-shadow .35s, backdrop-filter .35s, border-color .35s; border-bottom: 1px solid transparent; }
  body.hero-view .topbar { position: fixed; top: 0; inset-inline: 0; background: linear-gradient(180deg, rgba(6,21,33,.62), rgba(6,21,33,0)); }
  body.hero-view .topbar.scrolled { background: rgba(7,26,40,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
  .topbar.scrolled { background: rgba(7,26,40,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); }

  /* --- oversized outlined section eyebrow, used as a graphic divider --- */
  .cine-head { max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px,3vw,44px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .cine-ey { font-family: var(--font-sport); font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: .92; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28); letter-spacing: .01em; margin: 0; }
  html[lang="en"] .cine-ey { text-transform: uppercase; }
  .cine-sub { display: inline-flex; align-items: center; gap: 10px; color: var(--spark); font-weight: 800; font-size: .82rem; letter-spacing: .18em; }
  html[lang="ar"] .cine-sub { letter-spacing: normal; }
  .cine-sub::before { content: ''; width: 30px; height: 3px; background: var(--spark); border-radius: 2px; }

  /* --- numbered editorial sport showcase (SWAT-style challenge cards) --- */
  .showcase-wrap { padding: clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px); background: linear-gradient(180deg, #081C2B, #0A2133); }
  .showcase { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px clamp(16px,3vw,44px) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .showcase::-webkit-scrollbar { display: none; }
  /* scoped under .showcase — the agenda schedule also uses .sc-item */
  .showcase .sc-item { position: relative; flex: 0 0 clamp(250px, 72vw, 360px); aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; scroll-snap-align: start;
    background: #0E273A; cursor: pointer; border: 0; padding: 0; text-align: start; display: block; isolation: isolate; margin: 0; }
  .showcase .sc-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
    transition: transform .7s var(--ease-out-strong), filter .5s; filter: saturate(1.05) contrast(1.03); }
  .showcase .sc-item::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(5,20,32,.05) 30%, rgba(5,20,32,.55) 62%, rgba(5,20,32,.94) 100%); transition: background .4s; }
  .showcase .sc-item:hover img, .showcase .sc-item:focus-visible img { transform: scale(1.08); }
  .showcase .sc-item:hover::after { background: linear-gradient(180deg, rgba(15,126,149,.14) 20%, rgba(5,20,32,.6) 62%, rgba(5,20,32,.96) 100%); }
  .showcase .sc-item:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }
  .sc-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 20px; }
  .sc-num { font-family: var(--font-sport); font-size: clamp(2.6rem, 6vw, 3.7rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--spark); opacity: .92; margin-bottom: 6px; display: block; }
  .sc-ey { font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--spark); margin-bottom: 4px; }
  html[lang="ar"] .sc-ey { letter-spacing: normal; }
  html[lang="en"] .sc-ey { text-transform: uppercase; }
  .sc-ti { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 10px; }
  .sc-go { display: inline-flex; align-items: center; gap: 8px; color: #FFF4E0; font-weight: 700; font-size: .84rem; opacity: .85; transition: gap .25s, opacity .25s; }
  .sc-go .ar { transition: transform .25s var(--ease-out-strong); }
  .showcase .sc-item:hover .sc-go { opacity: 1; gap: 12px; color: var(--spark); }
  [dir="rtl"] .sc-go .ar { transform: scaleX(-1); }
  .sc-rail { display: flex; align-items: center; gap: 12px; max-width: 1220px; margin: 8px auto 0; padding: 0 clamp(16px,3vw,44px); color: var(--muted); font-size: .82rem; }
  .sc-rail .sc-line { flex: 1; height: 1px; background: var(--line); }
  .sc-arrows { display: flex; gap: 8px; }
  .sc-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink);
    display: grid; place-items: center; font-size: 1.1rem; transition: border-color .2s, background .2s, color .2s; }
  .sc-arrow:hover { border-color: var(--spark); color: var(--spark); background: var(--spark-glow); }
  [dir="rtl"] .sc-arrow svg { transform: scaleX(-1); }

  /* --- editorial edition / date band --- */
  .edition { background: #081C2B; padding: clamp(40px,6vw,72px) clamp(16px,3vw,44px); border-block: 1px solid var(--line); }
  .edition-in { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: auto 1px 1fr; align-items: center; gap: clamp(20px,4vw,56px); }
  .edition-date { display: flex; flex-direction: column; line-height: 1; }
  .edition-date .yr { font-family: var(--font-sport); color: var(--spark); font-size: 1.2rem; letter-spacing: .12em; }
  .edition-date .dd { font-family: var(--font-sport); color: #fff; font-size: clamp(3.2rem, 9vw, 6rem); line-height: .92; margin: 6px 0; }
  .edition-date .mo { font-family: var(--font-display); color: #fff; font-size: clamp(1.1rem,2.5vw,1.6rem); font-weight: 800; letter-spacing: .06em; }
  html[lang="en"] .edition-date .mo { text-transform: uppercase; }
  .edition-rule { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--spark-deep), transparent); }
  .edition-meta { display: grid; gap: 14px; }
  .edition-meta .row { display: flex; flex-direction: column; gap: 3px; }
  .edition-meta .k { font-size: .74rem; letter-spacing: .14em; color: var(--spark); font-weight: 800; }
  html[lang="ar"] .edition-meta .k { letter-spacing: normal; }
  html[lang="en"] .edition-meta .k { text-transform: uppercase; }
  .edition-meta .v { font-size: 1.05rem; color: #e9edf0; font-weight: 600; }
  @media (max-width: 720px) { .edition-in { grid-template-columns: 1fr; gap: 22px; } .edition-rule { display: none; } }

  /* --- statistics: oversized editorial numbers instead of floating boxes --- */
  .def-stats { gap: clamp(22px, 5vw, 72px); align-items: flex-start; }
  .def-stat { position: relative; padding-top: 16px; }
  .def-stat::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 34px; height: 3px; background: var(--spark); border-radius: 2px; }
  html[lang="ar"] .def-stat::before { inset-inline-start: 0; }
  .def-stat b { font-size: clamp(2.6rem, 6vw, 4.4rem) !important; line-height: 1; color: #fff !important; }
  .def-stat span { color: var(--muted); font-size: .82rem; letter-spacing: .1em; font-weight: 700; margin-top: 8px; display: block; }
  html[lang="ar"] .def-stat span { letter-spacing: normal; }
  html[lang="en"] .def-stat span { text-transform: uppercase; }

  /* --- marquee: outlined ghost type for rhythm between sections --- */
  .mq { border-block: 1px solid var(--line); background: #081C2B; }
  .mq-track span { font-family: var(--font-sport); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22);
    font-size: clamp(1.3rem, 3vw, 2.1rem); padding: 0 22px; }
  html[lang="en"] .mq-track span { text-transform: uppercase; letter-spacing: .04em; }
  .mq-track span:nth-child(even) { color: var(--spark); -webkit-text-stroke: 0; opacity: .9; }

  /* --- footer: a final dramatic section rather than a strip --- */
  .footer { position: relative; padding: clamp(56px,8vw,90px) 20px clamp(28px,4vw,40px); overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #0B2233 0%, #06141F 70%); border-top: 1px solid var(--line); }
  .footer .fb { font-family: var(--font-display); font-size: clamp(1.4rem,4vw,2.2rem); font-weight: 800; letter-spacing: .04em; }
  .footer .fs { font-family: var(--font-sport); color: transparent; -webkit-text-stroke: 1px rgba(251,181,60,.55);
    font-size: clamp(2rem, 8vw, 5rem); line-height: .95; margin: 10px 0 6px; }
  html[lang="en"] .footer .fs { text-transform: uppercase; }
  .footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% -10%, var(--spark-glow), transparent 60%); opacity: .5; pointer-events: none; }
  .footer > * { position: relative; z-index: 1; }

  @media (max-width: 640px) {
    .showcase .sc-item { flex-basis: 78vw; }
    body.hero-view .topbar { position: sticky; background: rgba(7,26,40,.94); } /* solid on mobile — cleaner over a busy hero */
  }

  /* ==========================================================================
     CINEMATIC LAYER — INNER PAGES. Upgrades the shared pageHead (used by ~15
     pages), the mobile navigation, and the news / gallery / leaderboard
     surfaces so every route matches the homepage's premium system.
     ========================================================================== */

  /* --- shared page header: taller, editorial, cinematic when it carries media --- */
  .pagehead { padding: clamp(84px,12vw,140px) 16px clamp(44px,6vw,64px); margin-bottom: 34px; background: linear-gradient(150deg, #06141F, #0A2133); }
  .pagehead::after { background: none !important; height: 1px !important; bottom: 0 !important;
    background: linear-gradient(90deg, transparent, var(--spark-deep), transparent) !important; }
  .ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0;
    transform: scale(1.04); filter: saturate(1.05); animation: phZoom 18s var(--ease-out-strong) forwards; }
  @keyframes phZoom { to { transform: scale(1.12); } }
  .pagehead::before { background: linear-gradient(180deg, rgba(5,20,32,.55), rgba(5,20,32,.82) 60%, rgba(5,20,32,.94)) !important; }
  .ph-kicker { color: var(--spark); display: inline-flex; align-items: center; gap: 10px; letter-spacing: .2em; }
  html[lang="ar"] .ph-kicker { letter-spacing: normal; }
  .ph-kicker::before { content: ''; width: 28px; height: 3px; background: var(--spark); border-radius: 2px; }
  .pagehead h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
  .pagehead .ph-back { color: var(--spark); }
  .pagehead .ph-back:hover { color: #fff; }
  .ph-actions { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* --- news: editorial featured story + supporting list --- */
  .news-ed { max-width: 1100px; margin: 0 auto; display: grid; gap: 20px; grid-template-columns: 1.4fr 1fr; }
  .news-feat { position: relative; grid-row: span 3; border-radius: 8px; overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; isolation: isolate; }
  .news-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s var(--ease-out-strong); }
  .news-feat::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(5,20,32,.6) 62%, rgba(5,20,32,.96)); }
  .news-feat:hover img { transform: scale(1.06); }
  .news-feat .nf-body { position: relative; z-index: 2; padding: 26px; }
  .news-feat .nf-tag { font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: var(--spark); }
  html[lang="en"] .news-feat .nf-tag { text-transform: uppercase; }
  .news-feat .nf-title { font-family: var(--font-display); font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: #fff; line-height: 1.25; margin: 8px 0 0; }
  .news-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
  .news-item:first-of-type { border-top: 0; padding-top: 0; }
  .news-item .ni-no { font-family: var(--font-sport); font-size: 1.5rem; color: transparent; -webkit-text-stroke: 1px var(--spark-deep); line-height: 1; }
  .news-item .ni-date { color: var(--spark); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
  .news-item .ni-title { color: #e9edf0; font-weight: 600; line-height: 1.5; margin-top: 3px; }
  .news-item:hover .ni-title { color: #fff; }
  @media (max-width: 760px) { .news-ed { grid-template-columns: 1fr; } .news-feat { grid-row: auto; min-height: 300px; } }

  /* --- broadcast leaderboard: darker, spark leader, athletic ranks --- */
  .lb-row { background: #0B2436; border-color: #153450; }
  .lb-row.t1 { border-color: var(--spark); box-shadow: 0 6px 22px var(--spark-glow); }
  .lb-row.t1 .lb-rank { background: var(--spark); color: #06141F; }
  .lb-pts { color: var(--spark); }
  .lb-tab.active { background: linear-gradient(135deg, var(--coral-hot), var(--coral-deep)); border-color: var(--coral-hot); }

  /* --- full-screen cinematic mobile navigation --- */
  @media (max-width: 900px) {
    nav.main {
      width: 100vw !important; max-width: none !important; inset-inline: 0 !important;
      padding: 96px clamp(22px,7vw,44px) 40px !important; gap: 4px !important;
      background: radial-gradient(120% 80% at 50% 0%, #0B2233, #071826 70%) !important;
      justify-content: center !important;
    }
    nav.main::before { content: ''; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(60% 50% at 50% 0%, var(--spark-glow), transparent 60%); opacity: .5; }
    nav.main > a, nav.main .menu-btn {
      font-family: var(--font-display); font-size: 1.35rem !important; font-weight: 800 !important;
      padding: 14px 10px !important; border-bottom: 1px solid var(--line); border-radius: 0 !important;
    }
    nav.main .menu-btn { color: #F2F7FA !important; }
    nav.main > a.nav-login, nav.main > a.cta { font-family: var(--font); font-size: 1rem !important; border-bottom: 0; margin-top: 14px !important; }
    body.mobile-nav-open nav.main > a, body.mobile-nav-open nav.main .menu { opacity: 0; transform: translateY(12px); animation: navIn .45s var(--ease-out-strong) forwards; }
    body.mobile-nav-open nav.main > *:nth-child(1) { animation-delay: .05s; }
    body.mobile-nav-open nav.main > *:nth-child(2) { animation-delay: .1s; }
    body.mobile-nav-open nav.main > *:nth-child(3) { animation-delay: .15s; }
    body.mobile-nav-open nav.main > *:nth-child(4) { animation-delay: .2s; }
    body.mobile-nav-open nav.main > *:nth-child(5) { animation-delay: .25s; }
    body.mobile-nav-open nav.main > *:nth-child(n+6) { animation-delay: .3s; }
    @keyframes navIn { to { opacity: 1; transform: none; } }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    body.mobile-nav-open nav.main > a, body.mobile-nav-open nav.main .menu { opacity: 1; transform: none; animation: none; }
    .ph-bg { animation: none; }
  }

  /* --- agenda: cinematic timeline rail + editorial day headers + scoreboard
         milestone countdowns --- */
  .sc-list::before { background: linear-gradient(180deg, var(--spark-deep), #113A50) !important; opacity: .6; }
  .sc-node { background: #0A2133 !important; box-shadow: 0 0 0 4px rgba(7,26,40,.9); transition: box-shadow .2s, transform .2s; }
  .sc-item:hover .sc-node { transform: scale(1.08); }
  .sc-item.open .sc-node { box-shadow: 0 0 0 4px rgba(251,181,60,.18); }
  .sc-dayhead { border-inline-start: 4px solid var(--spark) !important; background: rgba(8,27,42,.94) !important; }
  .sc-dayname { font-size: 1.15rem !important; }
  .sc-daycount { color: var(--spark) !important; background: rgba(251,181,60,.12) !important; }
  .mini-cd { font-family: var(--font-sport); color: var(--spark); font-size: 1.15rem; letter-spacing: .04em; }
  .cal-cta { border: 1px solid var(--line); background: linear-gradient(150deg, #0A2133, #081C2B); border-radius: 12px; }

  /* --- gallery: editorial layout — a wide feature tile then a cinematic grid --- */
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 220px; gap: 14px; }
  .gallery-item { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
  .gallery-item:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .gallery-item img { height: 100%; transition: transform .6s var(--ease-out-strong); }
  .gallery-item:hover img { transform: scale(1.06); opacity: 1; }
  .gallery-item:hover { border-color: var(--spark-deep); }
  .gallery-cap { background: linear-gradient(transparent, rgba(5,20,32,.92)); font-weight: 600; padding: 30px 14px 12px; opacity: 0; transition: opacity .3s; }
  .gallery-item:hover .gallery-cap, .gallery-item:focus-visible .gallery-cap { opacity: 1; }
  .gallery-item:first-child .gallery-cap { opacity: 1; font-size: 1rem; }
  @media (max-width: 620px) { .gallery-grid { grid-auto-rows: 180px; } .gallery-item:first-child { grid-row: span 1; } }

  /* ==========================================================================
     KALBA 2026 BRAND LAYER — the official identity's graphic motifs, applied
     as ambient decoration: the race-track swoosh (teal/coral/gold bands that
     stream out of the logo), the rising-sun rays, and a navy wash over media
     so photography reads through the brand navy like the guideline posters.
     ========================================================================== */

  /* --- race-track swoosh (inline SVG, brand teal/coral/gold) --- */
  .footer::after {
    content: ''; position: absolute; bottom: -40px; inset-inline-end: -60px; width: 380px; height: 300px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none'%3E%3Cpath d='M-20 320 C120 210 240 120 420 60' stroke='%231D9BB0' stroke-width='34' stroke-linecap='round'/%3E%3Cpath d='M50 330 C180 230 290 150 430 100' stroke='%23F04A2D' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M110 340 C230 250 330 180 440 140' stroke='%23FBAC18' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .22; pointer-events: none; z-index: 0;
  }
  [dir=rtl] .footer::after { transform: scaleX(-1); }

  /* --- rising-sun rays behind the page header, from the logo's sun --- */
  .pagehead .pagehead-in::before {
    content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
    width: 720px; height: 360px; pointer-events: none; z-index: -1;
    background: repeating-conic-gradient(from 245deg at 50% 0%, rgba(251,172,24,.10) 0deg 5deg, transparent 5deg 14deg);
    -webkit-mask-image: radial-gradient(60% 100% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(60% 100% at 50% 0%, #000 30%, transparent 75%);
  }
  .pagehead .pagehead-in { position: relative; }

  /* --- hero: brand-navy wash over the photo carousel, like the poster system --- */
  .def-hero .hero-overlay { background: linear-gradient(180deg, rgba(1,63,90,.42), rgba(6,20,32,.94)); }
  .hero-overlay { background: linear-gradient(180deg, rgba(1,63,90,.5), rgba(6,20,32,.9)); }

  /* --- header lockup: official mark on its white tile --- */
  .brand { gap: 10px; }
  .brand .dot { display: none; }  /* replaced by the real mark */
  .brand-logo { width: 34px; background: #fff; border-radius: 7px; padding: 3px 4px; }
  #brandName { font-family: var(--font-display); font-weight: 800; letter-spacing: 0; }

  /* --- footer lockup --- */
  .footer-mark { width: 74px; height: auto; margin: 0 auto 14px; display: block; opacity: .95; }
  .footer .fb { display: flex; align-items: center; justify-content: center; gap: 10px; }

  /* --- countdown scoreboard cells pick up the sun gold frame --- */
  .def-count .cd-num { font-family: var(--font-sport); }

  /* --- GE Contrast sets Arabic headlines a touch large; give them air --- */
  html[lang="ar"] h1, html[lang="ar"] .pagehead h1, html[lang="ar"] .def-hero h1 { line-height: 1.45; }
  html[lang="ar"] .def-hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }

  /* --- Losta Masta serif display tracks a little in caps, as in the posters --- */
  html[lang="en"] .def-hero h1, html[lang="en"] .pagehead h1 { letter-spacing: .02em; }

  /* --- marquee: alternate outlined navy-white and solid gold, poster style --- */
  .mq-track span:nth-child(3n) { color: var(--teal); -webkit-text-stroke: 0; opacity: .85; }

  /* --- fixes: sport-icon images must never render unconstrained --- */
  img.sport-icon { max-width: 100%; }
  .sc-node img.sport-icon { width: 18px; height: 18px; object-fit: contain; }

  /* --- footer link row: real gaps between links --- */
  .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }

  /* --- dropdown links: light teal for contrast on the navy panel --- */
  .dropdown a, nav.main .dropdown a { color: #6FCBDD !important; }
  .dropdown a:hover, nav.main .dropdown a:hover { color: #fff !important; }

  /* ==========================================================================
     MOBILE APP LAYER — phone-first refinements following the brand guideline:
     a thumb-zone bottom app bar (Register elevated in coral at the centre),
     full-width hero actions, an 8-pt spacing rhythm, and iOS safe-area
     support. Desktop is untouched (everything scoped under 768px).
     ========================================================================== */
  .bottombar { display: none; }
  @media (max-width: 768px) {
    .bottombar {
      position: fixed; bottom: 0; inset-inline: 0; z-index: 140;
      display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
      background: rgba(7,23,37,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--line);
      padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
      transition: transform .28s var(--ease-out-strong);
    }
    /* the bar steps aside while the full-screen drawer is open */
    body.mobile-nav-open .bottombar { transform: translateY(110%); }
    .bb-item {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
      gap: 4px; min-height: 52px; padding: 4px 2px; border-radius: 12px;
      color: var(--muted); font-size: .75rem; font-weight: 700; line-height: 1;
      -webkit-tap-highlight-color: transparent;
    }
    .bb-ic { display: grid; place-items: center; width: 26px; height: 26px; }
    .bb-ic svg { width: 23px; height: 23px; }
    .bb-item.active { color: var(--gold-soft); }
    /* active page carries the identity's three track bands as its indicator */
    .bb-item.active::after {
      content: ''; width: 16px; height: 3px; border-radius: 2px; margin-top: 1px;
      background: linear-gradient(90deg, var(--spark) 0 33%, var(--coral) 33% 66%, var(--teal) 66% 100%);
    }
    .bb-item:active .bb-ic { transform: scale(.9); }
    .bb-ic { transition: transform .16s var(--ease-out-strong); }
    /* Register — the one action the festival wants most, raised out of the bar */
    .bb-item.bb-cta { color: var(--ink); }
    .bb-item.bb-cta .bb-ic {
      width: 46px; height: 46px; margin-top: -26px; border-radius: 50%;
      background: linear-gradient(135deg, var(--coral-hot), var(--coral-deep));
      border: 3px solid #071725; color: #fff;
      box-shadow: 0 8px 22px var(--coral-glow);
    }
    .bb-item.bb-cta .bb-ic svg { width: 20px; height: 20px; }
    .bb-item.bb-cta.active::after { content: none; }
    .bb-item.bb-cta.active { color: var(--gold-soft); }

    /* clearance so the bar never covers content or the chat launcher */
    footer.footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    #kbotBtn { bottom: calc(84px + env(safe-area-inset-bottom)); }
    #kbot { bottom: calc(148px + env(safe-area-inset-bottom)); }

    /* --- hero: actions span the thumb zone; countdown reads as one scoreboard --- */
    .def-hero { padding-bottom: 48px; }
    .def-hero .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; margin-inline: auto; gap: 10px; }
    .btn.def { width: 100%; }
    .def-count { gap: 8px; margin-top: 24px; }
    .def-count .cd-cell { flex: 1; max-width: 88px; padding: 10px 6px; }

    /* --- 8-pt section rhythm --- */
    .section { padding: 32px 16px; }
    .def-state { padding: 64px 16px 40px; }
    .def-stats { gap: 24px 32px; }
    .pagehead { margin-bottom: 24px; }

    /* the footer swoosh shrinks so it decorates rather than dominates */
    .footer::after { width: 240px; height: 190px; bottom: 40px; opacity: .18; }
  }

  /* --- contact channels: tappable phone / whatsapp / email rows --- */
  .cw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .cw-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-top: 1px dashed var(--line); }
  .cw-list li:first-child { border-top: 0; }
  .cw-ic { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.5; }
  .cw-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cw-body b { font-size: .78rem; font-weight: 700; color: var(--muted); }
  /* the link itself is the 44px touch target */
  .cw-body a, .cw-body span { font-size: .98rem; font-weight: 600; color: var(--gold-soft); word-break: break-word;
    display: inline-flex; align-items: center; min-height: 32px; }
  .cw-body span { color: var(--ink); font-weight: 500; }
  .cw-body a:hover { color: #fff; text-decoration: underline; }

  /* --- newsletter feedback under the footer form --- */
  .nl-flash { max-width: 420px; margin: 12px auto 0; padding: 10px 16px; border-radius: 10px;
    font-size: .88rem; font-weight: 600; }
  .nl-flash.ok  { background: rgba(76,194,118,.14); color: #7fe0a2; border: 1px solid rgba(76,194,118,.4); }
  .nl-flash.err { background: rgba(248,113,113,.14); color: #ffb3b3; border: 1px solid rgba(248,113,113,.4); }

  /* ==========================================================================
     SOFT-UI (NEUMORPHIC) LAYER + CRAFT PASS
     Elevation is now one language: surfaces are shaped by a paired light/dark
     shadow rather than by a border plus a shadow plus a background shift. The
     light source is fixed top-left and does NOT mirror in RTL, because a light
     source is physical, not typographic.
     This layer also flattens the decorative gradients and coloured glows the
     earlier passes accumulated: emphasis now comes from weight, size and
     space, and colour is stated once rather than faded.
     ========================================================================== */
  :root {
    /* the two halves of every extrusion */
    --nm-lit: rgba(228,244,255,.07);
    --nm-shade: rgba(2,9,16,.66);
    --nm-raise:    -5px -5px 12px var(--nm-lit), 6px 6px 16px var(--nm-shade);
    --nm-raise-sm: -3px -3px 7px var(--nm-lit), 3px 3px 9px var(--nm-shade);
    --nm-raise-lg: -8px -8px 20px var(--nm-lit), 10px 10px 28px var(--nm-shade);
    --nm-press:    inset 4px 4px 10px var(--nm-shade), inset -3px -3px 8px var(--nm-lit);
    --nm-press-sm: inset 2px 2px 6px var(--nm-shade), inset -2px -2px 5px var(--nm-lit);
    /* surface ramp - each step is a real, named tone, not an opacity guess */
    --surface: #0C2436;
    --surface-2: #10293C;
    --surface-in: #091E2D;
    /* flat, accessible coral: 5.18:1 with white, so button labels pass AA */
    --coral-flat: #C8391A;
    --coral-flat-hi: #D9411F;
    /* off-white - pure white on this navy reads glary */
    --paper: #F2F7FB;
    --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  }

  /* ---- surfaces: shadow-only elevation, no competing hairline ---- */
  .card, .panel, .stat, .faq-item, .aday, .reg-picked, .lb-detail,
  .rank-card, .ov-card, .points-board, .live-championship, .lb-toolbar,
  .services-card, .cal, .sc-empty, .lb-empty, .results-group, .rank-panel {
    background: var(--surface);
    border: 1px solid transparent;
    box-shadow: var(--nm-raise);
  }
  .panel, .points-board, .live-championship, .rank-panel { box-shadow: var(--nm-raise-lg); }

  /* lift on hover is a change of depth, not a change of colour */
  .card.link, .ev-card, .rank-card, .nw-card, .wv-card {
    transition: box-shadow 180ms var(--ease-out-soft), transform 180ms var(--ease-out-soft);
  }
  .card.link:hover, .rank-card:hover { box-shadow: var(--nm-raise-lg); transform: translateY(-3px); }
  .card.link:active { box-shadow: var(--nm-press); transform: translateY(0); }

  /* ---- controls: raised at rest, genuinely pressed on tap ---- */
  .btn { box-shadow: var(--nm-raise-sm);
    transition: background-color 150ms ease, color 150ms ease,
                box-shadow 150ms var(--ease-out-soft), transform 120ms var(--ease-out-soft); }
  .btn:hover { box-shadow: var(--nm-raise); }
  .btn:active { box-shadow: var(--nm-press-sm); transform: translateY(1px); }
  /* the primary action stays a solid, high-contrast block - a soft-UI button
     that blends into its background is the one thing this style gets wrong */
  .btn.primary, .btn.gold { background: var(--coral-flat); color: #fff; }
  .btn.primary:hover, .btn.gold:hover { background: var(--coral-flat-hi); transform: translateY(-1px); box-shadow: var(--nm-raise); }
  .btn.primary:active, .btn.gold:active { background: var(--coral-flat); transform: translateY(1px); box-shadow: var(--nm-press-sm); }
  .btn.ghost, .btn.defghost { background: var(--surface); box-shadow: var(--nm-raise-sm); }
  .btn.defghost { color: var(--gold-soft); }
  .btn[disabled], .btn:disabled { box-shadow: var(--nm-press-sm); color: var(--muted); cursor: not-allowed; transform: none; }

  /* chips, pills and tabs: selected means pressed in, not glowing */
  .sc-chip, .fpill, .lb-tab, .live-chip, .seg-btn, .fm-hit, .qj-chip, .faq-pop {
    background: var(--surface); border-color: transparent; box-shadow: var(--nm-raise-sm);
    transition: box-shadow 160ms var(--ease-out-soft), color 160ms ease, background-color 160ms ease; }
  .sc-chip:hover, .fpill:hover, .lb-tab:hover, .live-chip:hover, .seg-btn:hover { box-shadow: var(--nm-raise); }
  .sc-chip.on, .fpill.on, .lb-tab.active, .seg-btn.on, .live-chip.active-filter {
    background: var(--surface-in); color: var(--gold-soft); box-shadow: var(--nm-press-sm); border-color: transparent; }
  .sc-chip.on .sc-n { background: rgba(245,168,28,.16); color: var(--gold-soft); }

  /* inputs read as carved into the surface - the clearest affordance soft UI has */
  input[type=text], input[type=email], input[type=tel], input[type=number],
  input[type=password], select, textarea, input[type=file], .lb-search input, .faq-search input {
    background: var(--surface-in); border: 1px solid transparent;
    box-shadow: var(--nm-press-sm);
    transition: box-shadow 160ms var(--ease-out-soft), background-color 160ms ease; }
  input:focus, select:focus, textarea:focus, .lb-search input:focus {
    outline: none; background: var(--surface-in);
    box-shadow: var(--nm-press-sm), 0 0 0 2px var(--gold-soft); }
  .field.invalid input, .field.invalid select, .field.invalid textarea {
    box-shadow: var(--nm-press-sm), 0 0 0 2px var(--bad-ink); background: #24141a; }

  /* one focus ring for the whole site, drawn as a ring rather than an outline
     so it follows the rounded soft-UI shapes */
  :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,168,28,.55); }
  .btn:focus-visible { box-shadow: var(--nm-raise-sm), 0 0 0 3px rgba(245,168,28,.55); }

  /* ---- craft: flatten decorative gradients (R1) and drop glows (R2) ---- */
  .pagehead { background: var(--deep); }
  .showcase-wrap { background: var(--sand); }
  .footer { background: var(--sand); }
  .footer::before { display: none; }
  .points-board-head, .live-championship-header { background: var(--deep); border-bottom: 2px solid var(--gold); }
  .vcard { background: var(--surface-2); box-shadow: var(--nm-raise-lg); }
  .cal-cta { background: var(--surface-2); box-shadow: var(--nm-raise); }
  .lbd-next-bar span { background: var(--gold); }
  .lbd-lead { background: var(--surface-2); }
  .lb-podium { background: var(--surface-2); box-shadow: var(--nm-raise-lg); }
  .rank-card.t1 .rank-card-circle, .ov-card.t1 .ov-card-badge, .champ-card-badge {
    background: var(--gold); color: #06202F; box-shadow: var(--nm-raise-sm); }
  .rank-card.t2 .rank-card-circle, .ov-card.t2 .ov-card-badge { background: #B7C4CF; color: #06202F; }
  .rank-card.t3 .rank-card-circle, .ov-card.t3 .ov-card-badge { background: #C98F57; color: #06202F; }
  .stat.lead { box-shadow: var(--nm-raise-lg); border-color: transparent; }
  .stat::before { display: none; }
  .lb-row.t1 { box-shadow: var(--nm-raise); border-color: transparent; }
  .lb-row.t1 .lb-rank { background: var(--gold); color: #06202F; }
  .match-row.live .m-score { background: var(--coral-flat); }
  .bb-item.bb-cta .bb-ic { background: var(--coral-flat); box-shadow: var(--nm-raise); }
  .brand .dot { box-shadow: none; }
  #kbotBtn { background: var(--coral-flat); box-shadow: var(--nm-raise); }
  .btn.primary::after, .btn.gold::after, .btn.def::after { display: none; }

  /* ---- craft: no pure white for text (R7) ---- */
  .def-hero h1, .pagehead h1, .def-state h2, .def-sec-head h2, .sc-ti,
  .news-feat .nf-title, .cat-head, .faq-cat-head, .footer .fb, .wv-card h3 { color: var(--paper); }

  /* ---- craft: motion that means something (R12) ----
     Decorative infinite loops stand down; the live-status pulse stays, because
     it is the only one carrying information. */
  .spark { display: none; }
  .mk-dot { animation: none; }
  .mk-dot::before { animation: none; opacity: 0; }
  .mk.sel .mk-dot::before { opacity: .8; }

  @media (prefers-reduced-motion: reduce) {
    .card.link, .ev-card, .rank-card, .nw-card, .wv-card, .btn { transition: box-shadow 120ms ease; }
    .card.link:hover, .rank-card:hover, .btn:hover, .btn.primary:hover, .btn.gold:hover { transform: none; }
  }

  /* the soft-UI surfaces need a touch more room than a flat card did */
  @media (min-width: 769px) {
    .card { padding: 22px; }
    .panel { padding: 26px; }
  }

  /* two stragglers the layer above did not reach */
  .sc-item.open .sc-node { box-shadow: var(--nm-press-sm); }
  .live-search-btn { background: var(--surface); box-shadow: var(--nm-raise-sm); color: var(--gold-soft); }
  .live-search-btn:active { box-shadow: var(--nm-press-sm); }

  /* .btn.gold / .btn.primary outrank the bare .btn rule, so the elevation has
     to be restated at their specificity or the old coral glow survives */
  .btn.primary, .btn.gold { box-shadow: var(--nm-raise-sm); }
  .btn.primary:hover, .btn.gold:hover { box-shadow: var(--nm-raise); }
  .btn.primary:active, .btn.gold:active { box-shadow: var(--nm-press-sm); }
  .btn.primary:focus-visible, .btn.gold:focus-visible { box-shadow: var(--nm-raise-sm), 0 0 0 3px rgba(245,168,28,.55); }

  /* agenda timeline rows: one elevation language, like every other surface */
  .sc-list .sc-item { background: var(--surface); border-color: transparent; box-shadow: var(--nm-raise-sm); }
  .sc-list .sc-item:hover { border-color: transparent; box-shadow: var(--nm-raise); }
  .sc-list .sc-item.open { border-color: transparent; box-shadow: var(--nm-raise-lg); }
  .sc-dayhead { background: var(--surface-2); border-color: transparent;
    border-inline-start: 4px solid var(--gold) !important; box-shadow: var(--nm-raise-sm); }

  /* ---- icon system: one stroked 24x24 grid, coloured by its context ----
     Icons size from the font-size they inherit, so a heading icon grows with
     the heading and a chip icon stays chip-sized, with no per-slot overrides. */
  .ic-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em;
    flex: 0 0 auto; overflow: visible; }
  /* the fixed slots that used to hold a photo icon */
  svg.sport-icon { width: 42px; height: 42px; color: var(--gold-soft); }
  .points-board-title svg.sport-icon, .live-championship-icon svg.sport-icon { width: 40px; height: 40px; }
  .se-sport svg.sport-icon { width: 26px; height: 26px; }
  .sc-node svg.sport-icon { width: 17px; height: 17px; }
  .fm-p-head svg.sport-icon { width: 22px; height: 22px; }
  .win-card svg.sport-icon { width: 34px; height: 34px; }
  .match-row .m-champ svg.sport-icon { width: 26px !important; height: 26px !important; }
  /* card and portal tiles: the icon is a quiet mark, not a mascot */
  .card .ic { display: inline-flex; color: var(--gold-soft); font-size: 1.6rem; }
  .card .ic .ic-svg { width: 1.5rem; height: 1.5rem; }
  .reg-picked .ic .ic-svg { width: 1.75rem; height: 1.75rem; color: var(--gold-soft); }
  .cw-ic .ic-svg { width: 1.15rem; height: 1.15rem; color: var(--gold-soft); }
  .success-panel .be .ic-svg, .panel .be .ic-svg { width: 2.5rem; height: 2.5rem; color: var(--gold-soft); }
  .sec-h .ic-svg, h2 .ic-svg, h3 .ic-svg { width: .95em; height: .95em; color: var(--gold-soft); margin-inline-end: .35em; }
  @media (max-width: 700px) { svg.sport-icon { width: 34px; height: 34px; } }

  /* ---- results: level tabs, champions podium ---- */
  .res-tabs { justify-content: center; margin-bottom: 22px; }
  .res-tabs .lb-tab { text-decoration: none; }
  .champ-podium { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 30px; }
  .champ-win { position: relative; display: block; border-radius: 14px; overflow: hidden;
    background: var(--surface); box-shadow: var(--nm-raise); isolation: isolate;
    transition: box-shadow 180ms var(--ease-out-soft), transform 180ms var(--ease-out-soft); }
  .champ-win:hover { box-shadow: var(--nm-raise-lg); transform: translateY(-3px); }
  .champ-win img { width: 100%; height: 120px; object-fit: cover; display: block; opacity: .5; }
  .champ-win .cw-body { position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end; gap: 2px; padding: 14px;
    background: linear-gradient(180deg, rgba(5,20,32,.15), rgba(5,20,32,.92)); }
  .champ-win .cw-sport { font-size: .78rem; font-weight: 700; color: var(--muted); }
  .champ-win .cw-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 800;
    color: var(--paper); display: flex; align-items: center; gap: 7px; }
  .champ-win .cw-name .ic-svg { color: var(--gold); }
  .champ-win .cw-pts { font-size: .8rem; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .pts-table td, .pts-table th { font-variant-numeric: tabular-nums; }

  /* the medal rows kept a white gradient from the old light theme, which put
     near-white text on a near-white band — tint the navy instead and let a
     coloured rail carry the rank */
  .pts-table tr.t1, .pts-table tr.t2, .pts-table tr.t3,
  [dir="rtl"] .pts-table tr.t1, [dir="rtl"] .pts-table tr.t2, [dir="rtl"] .pts-table tr.t3 {
    background: var(--surface-2);
  }
  .pts-table tr.t1 td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
  .pts-table tr.t2 td:first-child { box-shadow: inset 3px 0 0 #B7C4CF; }
  .pts-table tr.t3 td:first-child { box-shadow: inset 3px 0 0 #C98F57; }
  [dir="rtl"] .pts-table tr.t1 td:first-child { box-shadow: inset -3px 0 0 var(--gold); }
  [dir="rtl"] .pts-table tr.t2 td:first-child { box-shadow: inset -3px 0 0 #B7C4CF; }
  [dir="rtl"] .pts-table tr.t3 td:first-child { box-shadow: inset -3px 0 0 #C98F57; }
  .pts-table tbody tr:hover { background: var(--surface-in); box-shadow: none; }
  .pts-table td { color: var(--ink); }
  .points-team strong { color: var(--paper); }

  /* ---- agenda: filter bar, add-to-calendar, calendar view ---- */
  .ag-filters { gap: 14px; margin-bottom: 20px; }
  .ag-selects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ag-selects .field { margin-bottom: 0; }
  .ag-views { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ag-views .seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px; }
  .sc-add { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    color: var(--muted); box-shadow: var(--nm-raise-sm); background: var(--surface);
    transition: color 150ms ease, box-shadow 150ms var(--ease-out-soft); }
  .sc-add:hover { color: var(--gold-soft); box-shadow: var(--nm-raise); }
  .sc-add:active { box-shadow: var(--nm-press-sm); }
  .sc-item[hidden], .sc-day[hidden], .agc-ev[hidden], .agc-day[hidden] { display: none !important; }

  .agc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
  .agc-day { background: var(--surface); border-radius: 14px; padding: 14px; box-shadow: var(--nm-raise-sm);
    display: flex; flex-direction: column; gap: 10px; }
  .agc-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line); }
  .agc-date { font-family: var(--font-sport); font-size: 1.35rem; color: var(--gold); line-height: 1; }
  .agc-name { font-size: .82rem; color: var(--muted); font-weight: 600; }
  .agc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .agc-ev { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--surface-in); }
  .agc-t { font-size: .76rem; font-weight: 700; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .agc-ev a { font-size: .88rem; font-weight: 600; color: var(--ink); }
  .agc-ev a:hover { color: var(--gold-soft); }
  .agc-ev small { font-size: .74rem; color: var(--muted); }
  .agc-count { margin-top: auto; font-size: .76rem; color: var(--muted); font-weight: 600; }
  @media (max-width: 640px) { .ag-selects { grid-template-columns: 1fr; } }

  /* ---- application status: reference, state badge, three-stage rail ---- */
  .as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 10px; }
  .as-ref { font-size: .85rem; color: var(--muted); }
  .as-ref b { color: var(--gold-soft); font-size: 1.05rem; letter-spacing: 1px; margin-inline-start: 6px; }
  .as-rail { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .as-rail li { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; position: relative; }
  .as-rail li::before { content: ''; position: absolute; top: 13px; inset-inline-start: -50%;
    width: 100%; height: 2px; background: var(--line); }
  .as-rail li:first-child::before { display: none; }
  .as-rail li.done::before { background: var(--gold); }
  .as-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-in); box-shadow: var(--nm-press-sm); color: var(--muted); position: relative; z-index: 1; }
  .as-rail li.done .as-dot { background: var(--gold); color: #06202F; box-shadow: var(--nm-raise-sm); }
  .as-rail li.done .as-dot .ic-svg { width: 16px; height: 16px; }
  .as-t { font-size: .78rem; font-weight: 600; color: var(--muted); }
  .as-rail li.cur .as-t { color: var(--gold-soft); font-weight: 800; }
  .badge.pending  { background: rgba(251,191,36,.16); color: var(--warn-ink); }
  .badge.accepted { background: rgba(76,194,118,.16); color: var(--ok-ink); }
  .badge.rejected { background: rgba(248,113,113,.16); color: var(--bad-ink); }

  /* ---- admin: export row ---- */
  .adm-export { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
  .adm-export .hint { flex: 1 1 100%; margin-bottom: 2px; }
  .adm-export .btn { text-decoration: none; }

  /* ---- community events + workshops ---- */
  .cw-stats { justify-content: flex-start; gap: 34px; margin-bottom: 28px; }
  .ce-card { display: flex; flex-direction: column; gap: 8px; }
  .ce-top { display: flex; align-items: center; gap: 10px; }
  .ce-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--surface-in); box-shadow: var(--nm-press-sm); color: var(--gold-soft); flex: 0 0 auto; }
  .ce-ic .ic-svg { width: 21px; height: 21px; }
  .ce-card .tt { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
  .ce-meta { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
  .ce-meta li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
  .ce-meta .ic-svg { width: 15px; height: 15px; color: var(--gold-soft); }

  .ws-list { display: grid; gap: 10px; }
  .ws-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--nm-raise-sm); }
  .ws-n { font-family: var(--font-sport); font-size: 1.1rem; color: var(--gold); opacity: .85; }
  .ws-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: var(--surface-in); box-shadow: var(--nm-press-sm); color: var(--gold-soft); }
  .ws-ic .ic-svg { width: 19px; height: 19px; }
  .ws-body { display: grid; gap: 3px; min-width: 0; }
  .ws-t { font-weight: 700; color: var(--ink); }
  .ws-d { font-size: .85rem; color: var(--muted); line-height: 1.6; }
  .ws-meta { font-size: .78rem; color: var(--gold-soft); display: flex; align-items: center;
    gap: 5px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
  .ws-meta .ic-svg { width: 14px; height: 14px; }
  .ws-act .btn { white-space: nowrap; }
  .ws-tba { opacity: .78; }
  @media (max-width: 700px) {
    .ws-row { grid-template-columns: auto 1fr; gap: 10px; }
    .ws-n { grid-row: 1; } .ws-ic { display: none; }
    .ws-body { grid-column: 2; } .ws-act { grid-column: 2; justify-self: start; }
  }

  /* ---- score entry: one fixture per row ---- */
  .sc-form .frow { align-items: flex-end; }
  .se-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
    background: var(--surface); box-shadow: var(--nm-raise-sm); }
  .se-day { font-size: .78rem; font-weight: 700; color: var(--gold-soft); min-width: 96px; }
  .se-row .se-team { flex: 1 1 120px; min-width: 90px; font-weight: 600; color: var(--ink); }
  .se-row .se-team:last-of-type { text-align: end; }
  .se-row input.se-score { width: 62px; flex: 0 0 auto; text-align: center;
    font-variant-numeric: tabular-nums; font-weight: 800; }
  .se-row .se-vs { color: var(--muted); font-weight: 800; }
  .se-row select.se-st { width: auto; flex: 0 0 auto; min-width: 108px; }
  .se-row .btn.sm { flex: 0 0 auto; }
  .se-del { flex: 0 0 auto; width: 40px; min-height: 40px; border: 0; border-radius: 10px;
    background: var(--surface-in); box-shadow: var(--nm-press-sm); color: var(--bad-ink);
    display: grid; place-items: center; cursor: pointer; }
  .se-del:hover { color: #fff; background: #3a1a1e; }
  .se-del .ic-svg { width: 16px; height: 16px; }
  @media (max-width: 700px) {
    .se-row { gap: 8px; }
    .se-day { flex: 1 0 100%; min-width: 0; }
    .se-row .se-team { flex: 1 1 40%; }
  }

  /* ---- admin: subscriber chips, section counts ---- */
  .se-count { margin-inline-start: 8px; font-size: .74rem; font-weight: 700; color: var(--gold-soft);
    background: rgba(245,168,28,.14); border-radius: 999px; padding: 2px 9px; }
  .sub-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .sub-chip { font-size: .8rem; padding: 5px 11px; border-radius: 999px; background: var(--surface-in);
    box-shadow: var(--nm-press-sm); color: var(--gold-soft); }
  .sub-chip:hover { color: var(--paper); }

  /* ---- board switch: the two rankings are different things, so each board
         names itself and offers the other rather than leaving a visitor to
         guess which "leaderboard" they are looking at ---- */
  .board-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .board-switch .bs-on, .board-switch .bs-off {
    display: inline-flex; align-items: center; gap: 7px; min-height: 42px;
    padding: 9px 16px; border-radius: 999px; font-size: .88rem; font-weight: 700; }
  .board-switch .bs-on { background: var(--surface-in); box-shadow: var(--nm-press-sm); color: var(--gold-soft); }
  .board-switch .bs-off { background: var(--surface); box-shadow: var(--nm-raise-sm); color: var(--muted);
    transition: color 160ms ease, box-shadow 160ms var(--ease-out-soft); }
  .board-switch .bs-off:hover { color: var(--ink); box-shadow: var(--nm-raise); }
  .board-switch .ic-svg { width: 16px; height: 16px; }