/* ===================== GullySport — website & app design (GS-20, GS-27) =====================
   The website's design, and since GS-27 the app's as well: scripts/build-www.mjs
   builds the app from these pages and no longer marks them class="app", so
   every html:not(.app) { … } block below applies in both. (The selector stays
   as it was so this change is a no-op on the website.) The app adds only
   css/app-frame.css: safe areas and screen transitions.

   Look: logo navy #063163 title bands, Montserrat italic headings, white cards
   on paper #F4F7FA, pill buttons (navy primary, deep orange #C2410C for the
   main call to action; white text passes on both). Design: the GullySport
   Redesign canvas (REQUIREMENTS GS-20).
   ========================================================================== */

html:not(.app) {
  --gw-navy: #063163;
  --gw-navy-2: #0A3F7D;
  --gw-ink: #0B1F3A;
  --gw-ink-2: #2A3D5A;
  --gw-dim: #4A5B74;
  --gw-line: #DCE3EC;
  --gw-line-2: #E8EDF3;
  --gw-paper: #F4F7FA;
  --gw-acc: #C2410C;
  --gw-acc-ink: #B13D0B;
  --gw-orange: #ED601B;
  --gw-green: #0E7A4E;
  --gw-red: #E0362C;

  /* ---------- Base ---------- */
  body { background: var(--gw-paper); color: var(--gw-ink-2); }
  h1, h2, .section-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--gw-navy); letter-spacing: -0.01em; }
  h3 { color: var(--gw-ink); }
  .lead { color: var(--gw-dim); }
  .eyebrow { background: #E6ECF3; color: var(--gw-navy); box-shadow: none; }

  /* ---------- Buttons ---------- */
  .btn { border-radius: 999px; min-height: 46px; font-weight: 800; }
  .btn-primary { background: var(--gw-navy); color: #fff; box-shadow: none; }
  .btn-primary:hover { background: var(--gw-navy-2); transform: none; }
  .btn-accent { background: var(--gw-acc); color: #fff; box-shadow: none; }
  .btn-accent:hover { background: #A8380A; transform: none; }
  .btn-ghost { background: #fff; color: var(--gw-navy); border: 1.5px solid #C9D3E0; }

  /* ---------- Cards, tags, forms ---------- */
  .card, .form-card, .eg-card { background: #fff; border: 1px solid var(--gw-line); border-radius: 18px; box-shadow: 0 6px 18px rgba(6, 49, 99, 0.06); }
  .card:hover { transform: none; }
  .tag { border-radius: 999px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: 14px; border: 1.5px solid #C9D3E0; min-height: 46px; background: #fff; }
  textarea { min-height: 96px; }
  .callout { border-radius: 16px; }

  /* ---------- Header ---------- */
  .site-header { background: #fff; border-bottom: 1px solid var(--gw-line); backdrop-filter: none; }
  .nav { padding: 12px 24px; gap: 16px; }
  #nav-auth-area, #nav-auth, .nav-toggle { display: none !important; }
  .nav-links { display: flex; flex: 1; justify-content: center; }
  .gw-auth { display: flex; align-items: center; gap: 10px; }
  .gw-auth .btn { min-height: 42px; padding: 9px 18px; font-size: 0.9rem; }

  .nv { display: flex; align-items: center; gap: 4px; }
  .nv-top { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 9px 15px; border-radius: 999px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--gw-ink-2); }
  .nv-top:hover, .nv-group.open > .nv-top { color: var(--gw-navy); background: #EEF2F8; }
  .nv-top.is-active { color: #fff; background: var(--gw-navy); }
  .nv-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .nv-chev { width: 14px; height: 14px; stroke-width: 2.4; transition: transform 0.15s ease; }
  .nv-group.open .nv-chev { transform: rotate(180deg); }
  .nv-group { position: relative; }
  .nv-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; z-index: 120; padding: 8px; background: #fff; border: 1px solid var(--gw-line); border-radius: 16px; box-shadow: 0 18px 40px rgba(6, 49, 99, 0.16); }
  .nv-menu-right { left: auto; right: 0; min-width: 220px; }
  .nv-group.open > .nv-menu { display: flex; flex-direction: column; }
  .nv-menu a, .nv-menu button { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--gw-ink); }
  .nv-menu a:hover, .nv-menu button:hover { background: #EEF2F8; }
  .nv-menu b { font-size: 0.92rem; font-weight: 700; }
  .nv-menu small { font-size: 0.78rem; color: var(--gw-dim); }
  .nv-logout { border-top: 1px solid var(--gw-line) !important; border-radius: 0 0 10px 10px !important; margin-top: 4px; }
  .nv-logout b { color: #B4231A; }
  .nv-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gw-red); box-shadow: 0 0 0 2px #fff; animation: gw-pulse 1.6s ease-in-out infinite; }
  .nv-dot[hidden] { display: none; }
  .nv-me-btn { gap: 8px; padding-left: 6px; }
  .nv-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gw-orange); color: #fff; font-weight: 800; font-size: 0.82rem; }
  @media (hover: hover) and (min-width: 721px) {
    .nv-group:hover > .nv-menu, .nv-group:focus-within > .nv-menu { display: flex; flex-direction: column; }
    .nv-group:hover > .nv-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  }
  @media (max-width: 860px) { .nv-top { padding: 9px 10px; font-size: 0.9rem; } }

  /* Phones: navy header with the logo; the menu moves to the tab bar. */
  @media (max-width: 720px) {
    .site-header { background: var(--gw-navy); border-bottom: 0; }
    .nav { padding: 10px 16px; }
    .bw-gully { color: #fff; }
    .brand-sub { color: #C9D6E8; }
    .nav-links { display: none !important; }
    .gw-auth .btn-ghost, .gw-auth .nv-me { display: none; }
    .gw-auth .btn-primary { background: #fff; color: var(--gw-navy); }
  }

  /* ---------- Phone tab bar + sheet ---------- */
  .nv-tabbar, .nv-sheet { display: none; }
  @media (max-width: 720px) {
    body.has-nv-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .nv-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--gw-line); box-shadow: 0 -6px 24px rgba(6, 49, 99, 0.08); }
    .nv-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 0 2px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.7rem; font-weight: 700; color: #5C6C84; }
    .nv-tab .nv-ic { width: 24px; height: 24px; }
    .nv-tab[aria-current="page"] { color: var(--gw-navy); }
    .nv-tab[aria-current="page"]::before { content: ""; position: absolute; top: -6px; left: 32%; right: 32%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gw-orange); }
    .nv-tab .nv-dot { top: 4px; right: calc(50% - 16px); }
    .nv-sheet { display: flex; position: fixed; inset: 0; z-index: 140; align-items: flex-end; background: rgba(8, 20, 34, 0.42); }
    .nv-sheet[hidden] { display: none; }
    .nv-sheet-panel { width: 100%; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 8px 14px calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; }
    .nv-sheet-panel h3 { margin: 4px 6px 6px; font-size: 1.05rem; }
    .nv-grip { align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--gw-line); margin: 4px 0 8px; }
    .nv-sheet-item { display: flex; flex-direction: column; gap: 1px; padding: 12px 10px; border-radius: 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--gw-ink); cursor: pointer; }
    .nv-sheet-item:active { background: #EEF2F8; }
    .nv-sheet-item b { font-size: 1rem; }
    .nv-sheet-item small { font-size: 0.8rem; color: var(--gw-dim); }
    body.nv-sheet-open { overflow: hidden; }
    .has-nv-tabbar .st-actionbar { bottom: calc(64px + env(safe-area-inset-bottom)); }
  }

  /* ---------- Page title band ---------- */
  .page-hero { background: var(--gw-navy); color: #fff; padding: 40px 0 44px; border-bottom: 0; }
  .page-hero::before, .page-hero::after { display: none; }
  .page-hero h1 { color: #fff; }
  .page-hero p, .page-hero .lead { color: #C9D6E8; }
  .page-hero .eyebrow, .gw-band .eyebrow { color: #FFD7BD; background: rgba(255, 255, 255, 0.12); }
  .page-hero a:not(.btn) { color: #FFD7BD; }
  @media (max-width: 720px) { .page-hero { padding: 18px 0 26px; border-radius: 0 0 26px 26px; } .page-hero h1 { font-size: 1.9rem; } }

  /* ---------- Footer ---------- */
  .site-footer { background: #061B38; color: #C9D6E8; border-top: 0; }
  .site-footer a { color: #C9D6E8; }
  .site-footer h4 { color: #fff; }
  .site-footer .bw-gully { color: #fff; }

  /* ---------- Shared redesign parts (gw-*) ---------- */
  .gw-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
  @media (max-width: 720px) { .gw-wrap { padding: 0 16px; } }
  .gw-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .gw-ic-s { width: 16px; height: 16px; }
  .gw-band { background: var(--gw-navy); color: #fff; }
  .gw-h1 { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; color: #fff; margin: 0; }
  .gw-h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.15; color: var(--gw-navy); margin: 0; }
  .gw-h3 { font-size: 1.05rem; font-weight: 800; color: var(--gw-ink); margin: 0; }
  .gw-muted { color: var(--gw-dim); font-size: 0.85rem; }
  .gw-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gw-dim); }
  .gw-link { color: var(--gw-acc-ink); font-weight: 700; font-size: 0.9rem; }
  .gw-num { font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--gw-navy); }
  .gw-sec { display: flex; flex-direction: column; gap: 12px; }
  .gw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .gw-row { display: flex; align-items: center; gap: 10px; }
  .gw-grow { flex: 1; min-width: 0; }
  .gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
  .gw-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .gw-scroll > * { scroll-snap-align: start; }
  .gw-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--gw-line); border-radius: 18px; padding: 16px; box-shadow: 0 6px 18px rgba(6, 49, 99, 0.06); color: inherit; }
  a.gw-card:hover { border-color: #B9C6D8; }
  .gw-card-navy { display: flex; gap: 14px; align-items: center; background: var(--gw-navy); color: #fff; border-radius: 20px; padding: 18px; }
  .gw-card-navy .gw-muted { color: #C9D6E8; }
  .gw-list { background: #fff; border: 1px solid var(--gw-line); border-radius: 18px; overflow: hidden; }
  .gw-li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--gw-line-2); min-height: 56px; color: inherit; }
  .gw-li:first-child { border-top: 0; }
  a.gw-li:hover { background: #F8FAFC; }
  .gw-li-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #EEF2F8; color: var(--gw-navy); flex: none; }
  .gw-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gw-navy); color: #fff; font-weight: 800; font-size: 0.9rem; flex: none; overflow: hidden; }
  .gw-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .gw-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .gw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--gw-line); font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--gw-ink); cursor: pointer; white-space: nowrap; }
  .gw-chip[aria-pressed="true"] { background: var(--gw-navy); border-color: var(--gw-navy); color: #fff; }
  .gw-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
  .gw-tag-open { background: #DDF3E7; color: #0B5F33; }
  .gw-tag-soon { background: #FFE9DC; color: #8F3209; }
  .gw-tag-done { background: #E8EDF3; color: var(--gw-dim); }
  .gw-tag-free { background: var(--gw-green); color: #fff; }
  .gw-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--gw-red); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; }
  .gw-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
  .gw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 999px; border: 0; background: var(--gw-navy); color: #fff; font: inherit; font-size: 0.95rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
  .gw-btn:hover { background: var(--gw-navy-2); }
  .gw-btn-acc { background: var(--gw-acc); }
  .gw-btn-acc:hover { background: #A8380A; }
  .gw-btn-ghost { background: #fff; color: var(--gw-navy); border: 1.5px solid #C9D3E0; }
  .gw-btn-ghost:hover { background: #F4F7FA; }
  .gw-btn-white { background: #fff; color: var(--gw-navy); }
  .gw-btn-white:hover { background: #EEF2F8; }
  .gw-btn-line { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.45); }
  .gw-btn-line:hover { background: rgba(255, 255, 255, 0.1); }
  .gw-btn-sm { min-height: 40px; padding: 8px 14px; font-size: 0.85rem; }
  .gw-seg { display: flex; background: #E6ECF3; border-radius: 999px; padding: 4px; gap: 4px; }
  .gw-seg > * { flex: 1; text-align: center; padding: 9px 6px; min-height: 40px; border-radius: 999px; border: 0; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--gw-dim); cursor: pointer; }
  .gw-seg > [aria-selected="true"], .gw-seg > [aria-current="page"] { background: #fff; color: var(--gw-navy); box-shadow: 0 2px 8px rgba(6, 49, 99, 0.12); }
  .gw-band .gw-seg { background: rgba(255, 255, 255, 0.12); }
  .gw-band .gw-seg > * { color: #fff; }
  .gw-band .gw-seg > [aria-selected="true"], .gw-band .gw-seg > [aria-current="page"] { color: var(--gw-navy); }
  .gw-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1.5px solid #C9D3E0; color: var(--gw-dim); }
  .gw-search input { border: 0 !important; min-height: 44px; padding: 0; flex: 1; background: none; font: inherit; outline: none; }
  .gw-bar { height: 6px; border-radius: 6px; background: #E6ECF3; overflow: hidden; }
  .gw-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--gw-acc); }
  .gw-empty { background: #fff; border: 1px dashed #C9D3E0; border-radius: 18px; padding: 22px; text-align: center; color: var(--gw-dim); }
  .gw-skel { background: linear-gradient(90deg, #E8EDF3 0%, #F2F5F9 50%, #E8EDF3 100%); background-size: 200% 100%; animation: gw-shimmer 1.2s linear infinite; border-radius: 18px; }
  .mb-badge { vertical-align: middle; }

  /* ---------- Home (index.html) ---------- */
  body:has(> #gw-home) > section { display: none; }
  .gw-announce { background: var(--gw-green); color: #fff; font-size: 0.9rem; }
  .gw-announce .gw-wrap { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .gw-announce a { color: #fff; font-weight: 800; text-decoration: underline; }
  .gw-announce button { border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .gw-hero .gw-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 48px; align-items: center; }
  .gw-hero p { color: #C9D6E8; font-size: 1.1rem; max-width: 540px; margin: 14px 0 0; }
  .gw-hero .gw-city { align-self: flex-start; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
  .gw-stat { background: rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 16px; }
  .gw-stat .gw-num { color: #FFB27A; font-size: 1.8rem; }
  .gw-stat span { display: block; color: #C9D6E8; font-size: 0.82rem; }
  /* Hero boxes: outlined tiles on the left, a stack of wide boxes on the right
     (icon at the left, figure and label centred). */
  .gw-hero .gw-stat { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; text-decoration: none; }
  @media (min-width: 960px) { .gw-hero--me .gw-wrap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
  .gw-htiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
  .gw-htiles .gw-stat { padding: 14px 16px; }
  .gw-hstack { display: flex; flex-direction: column; gap: 14px; }
  .gw-hstat { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 12px; padding: 18px 20px; color: #fff; }
  .gw-hstat > svg { width: 28px; height: 28px; opacity: 0.7; }
  .gw-hstat-body { text-align: center; }
  .gw-hstat .gw-num { display: block; font-size: 2.2rem; line-height: 1.1; }
  .gw-hstat .gw-hstat-body > span:last-child { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.78rem; margin-top: 2px; }
  .gw-main { display: flex; flex-direction: column; gap: 40px; padding-top: 36px; padding-bottom: 56px; }
  @media (max-width: 720px) {
    .gw-hero { border-radius: 0 0 26px 26px; }
    .gw-hero .gw-wrap { padding-top: 22px; padding-bottom: 26px; gap: 18px; }
    .gw-main { gap: 26px; padding-top: 20px; }
    .gw-hide-phone { display: none !important; }
    .gw-htiles { gap: 8px; }
    .gw-htiles .gw-stat { padding: 12px; }
  }
  .gw-tcard .gw-num { font-size: 1.9rem; }
  .gw-scroll .gw-tcard { flex: 0 0 min(86%, 340px); }

  /* ---------- Tournaments (tournaments.html) ---------- */
  body:has(> #gw-tournaments) > section { display: none; }
  .gw-thead .gw-wrap { padding-top: 32px; padding-bottom: 30px; display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; }
  .gw-thead p { color: #C9D6E8; margin: 8px 0 0; }
  .gw-thead .gw-seg { width: min(100%, 420px); }
  @media (max-width: 720px) { .gw-thead { border-radius: 0 0 26px 26px; } .gw-thead .gw-wrap { padding-top: 18px; padding-bottom: 22px; } }

  /* ---------- Rankings (leaderboard.html) ---------- */
  body:has(> #gw-rankings) > section { display: none; }
  .gw-podium { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; align-items: end; max-width: 560px; }
  .gw-podium > * { text-align: center; }
  .gw-podium .gw-card { align-items: center; padding: 14px 8px; }
  .gw-podium .gw-first { background: var(--gw-navy); color: #fff; border: 0; }
  .gw-podium .gw-first .gw-num { color: #FFB27A; }
  .gw-podium .gw-open { border-style: dashed; box-shadow: none; }

  /* ---------- Live pages: section tabs ---------- */
  .gw-livetabs { background: var(--gw-navy); }
  .gw-livetabs .gw-wrap { padding-top: 10px; padding-bottom: 14px; }
  .gw-livetabs .gw-seg { max-width: 420px; }

  /* ---------- Log in / sign up ---------- */
  .auth-shell { background: var(--gw-navy); padding-top: 28px; }
  .auth-card { border-radius: 26px; border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
  .auth-card h1 { color: var(--gw-navy); }
  @media (max-width: 720px) { .auth-shell { padding: 18px 0 0; } .auth-card { border-radius: 26px 26px 0 0; } }

  /* ---------- Tournament page: sticky register bar (phones) ---------- */
  .gw-tbar { display: none; }
  @media (max-width: 720px) {
    .gw-tbar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 140; padding: 10px 16px; background: #fff; border-top: 1px solid var(--gw-line); box-shadow: 0 -8px 24px rgba(6, 49, 99, 0.08); }
    body.gw-has-tbar { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  }
}

@keyframes gw-pulse { 50% { opacity: 0.45; } }
@keyframes gw-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { html:not(.app) .nv-dot, html:not(.app) .gw-skel { animation: none; } }

html:not(.app) {
  .gw-tcard { position: relative; }
  .gw-stretch { color: inherit; }
  .gw-stretch::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
  .gw-tcard .gw-btn, .gw-tcard button { position: relative; z-index: 1; }
  .gw-tcard:hover { border-color: #B9C6D8; }
  .gw-stretch:focus-visible { outline: none; }
  .gw-stretch:focus-visible::after { outline: 3px solid var(--gw-orange); outline-offset: 2px; }
}

html:not(.app) {
  select.gw-chip { width: auto; min-height: 40px; padding-right: 32px; border-radius: 999px; }
  #gw-h-players:empty, #gw-h-practise:empty, #gw-h-how:empty, #gw-h-next:empty, #gw-h-live:empty, #gw-h-plans:empty, #gw-h-quick:empty { display: none; }
}

html:not(.app) {
  /* Log in / sign up: card sits near the top on phones, not centred in a tall band. */
  @media (max-width: 720px) {
    .auth-shell { min-height: 0; align-items: flex-start; padding: 18px 0 0; }
    .auth-card { padding: 28px 22px 32px; }
  }
  /* Rankings podium */
  .gw-podium a.gw-card { color: var(--gw-ink); }
  .gw-podium .gw-first, .gw-podium a.gw-first { color: #fff; }
  .gw-podium .gw-first .gw-avatar { background: var(--gw-orange); }
}

html:not(.app) {
  .gw-seg > * { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
}

html:not(.app) {
  /* Tournament page: the title area becomes the navy band (branded tournaments keep their colours). */
  .t-hero:not(.is-branded) { background: var(--gw-navy); border-bottom: 0; }
  .t-hero:not(.is-branded) h1 { color: #fff; }
  .t-hero:not(.is-branded) .t-hero-meta, .t-hero:not(.is-branded) .t-tagline, .t-hero:not(.is-branded) .form-note { color: #C9D6E8; }
  .t-hero:not(.is-branded) [data-share-bar] { color: #C9D6E8; }
  .t-hero:not(.is-branded) .btn-ghost { background: #fff; }
  @media (max-width: 720px) { .t-hero:not(.is-branded) { border-radius: 0 0 26px 26px; } }
}

html:not(.app) {
  .page-hero a.st-cart-btn { color: var(--gw-navy); background: #fff; border-color: #fff; }
  /* Player card */
  .pf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; }
  .pf-stat .n { font-family: var(--font-display); font-style: italic; color: var(--gw-navy); }
  .pf-stat--hero .n { color: var(--gw-acc-ink); }
  @media (max-width: 720px) {
    .pf-stat { padding: 12px 6px; }
    .pf-stat .n { font-size: 1.35rem; }
    .pf-form-row { grid-template-columns: 1fr auto; row-gap: 2px; }
    .pf-form-row > :first-child { grid-column: 1; grid-row: 1; }
    .pf-form-fig { grid-column: 1; grid-row: 2; }
    .pf-form-pts { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; }
  }
}

html:not(.app) {
  .t-hero:not(.is-branded) .t-fact { background: #fff; border-color: transparent; }
  .t-hero:not(.is-branded) .t-fact .v { color: var(--gw-ink); }
  .t-hero:not(.is-branded) .t-fact .k { color: var(--gw-dim); }
  /* The plain hero is navy on the website: a navy "Share…" pill vanished into it. */
  .t-hero:not(.is-branded) .share-bar-label { color: rgba(255,255,255,0.85); }
  .t-hero:not(.is-branded) .share-native { background: #fff; border-color: #fff; color: var(--gw-navy); }
  .badge.gw-finished { background: #E8EDF3; color: var(--gw-dim); }
}

/* ===================== Phase 2 (GS-20) ===================== */
html:not(.app) {
  .gw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- Me hub (dashboard.html) ---------- */
  section:has(> .container > #eg-hub) { display: none; }
  .gw-me { padding: 20px 0 8px; }
  .gw-me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
  .gw-nudge { border-color: #FBD5BC; background: #FFF6EF; }
  .dash-header h1 { color: #fff; }
  .dash-header p { color: #C9D6E8; }
  .avatar-circle { background: var(--gw-orange); color: #fff; }

  /* ---------- Organizer tools ---------- */
  #org-main > .eyebrow, #org-main > h1, #org-main > h1 + p { display: none; }
  .gw-orgband { border-radius: 22px; padding: 22px; }
  .gw-orgtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
  #gw-org { margin-bottom: 26px; }
  .dash-section h3 { font-family: var(--font-display); font-style: italic; font-weight: 800; color: var(--gw-navy); }

  /* ---------- Partner sign-up role cards ---------- */
  .gw-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
  .gw-role { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--gw-line); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--gw-ink); }
  .gw-role[aria-checked="true"] { border: 2px solid var(--gw-navy); box-shadow: 0 6px 16px rgba(6, 49, 99, 0.12); }
  .gw-role[aria-checked="true"] .gw-li-ic { background: var(--gw-navy); color: #fff; }
  .gw-role .gw-muted { font-size: 0.78rem; }

  /* ---------- Store ---------- */
  .gw-pm { display: block; font-family: var(--font-sans); font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--gw-dim); margin-top: 2px; }
  .pl-card { border-radius: 18px; }
  .pl-price { font-family: var(--font-display); font-style: italic; color: var(--gw-navy); }
  .st-seg button[aria-selected="true"] { color: var(--gw-navy); }

  /* ---------- Live, feed, videos, contests, teams (engage.css parts) ---------- */
  .eg-card, .lv-card { border-radius: 18px; border-color: var(--gw-line); }
  .lv-card.is-live { box-shadow: inset 0 0 0 2px var(--gw-red); }
  .lv-live { border-radius: 999px; padding: 2px 8px; background: var(--gw-red); }
  .eg-chip { min-height: 40px; }
  .eg-chip[aria-pressed="true"], .eg-chip.on { background: var(--gw-navy); border-color: var(--gw-navy); color: #fff; }
  .eg-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; color: var(--gw-navy); font-size: 1.25rem; }
  .lv-score { background: var(--gw-navy); color: #fff; border-radius: 22px; }
  .lv-score * { border-color: rgba(255, 255, 255, 0.15); }
  .up-item { border-radius: 16px; }

  /* ---------- Scorer keypad (score.html) ---------- */
  .sc-pad { gap: 10px; }
  .sc-pad button { min-height: 64px; border-radius: 18px; border: 1.5px solid #C9D3E0; background: #fff; color: var(--gw-navy); font-family: var(--font-display); font-style: italic; }
  .sc-pad .sc-4, .sc-pad .sc-6 { background: var(--gw-navy); color: #fff; border: 0; }
  .sc-pad .sc-x { font-family: var(--font-sans); font-style: normal; font-size: 0.9rem; background: #fff; }
  .sc-pad .sc-x[aria-pressed="true"] { background: var(--gw-orange); color: #fff; border-color: var(--gw-orange); }
  .sc-pad .sc-w { background: #B4231A; color: #fff; border: 0; font-family: var(--font-sans); font-style: normal; }
  .sc-pad .sc-undo { font-family: var(--font-sans); font-style: normal; font-size: 0.9rem; }
  .sc-at div { border-radius: 14px; }
  .sc-at .on { border: 2px solid var(--gw-orange); }

  /* ---------- Rewards ---------- */
  #rw-balance { background: var(--gw-navy); border-radius: 22px; }
  #rw-balance .pc-name { font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: #fff; }
  #rw-balance .pc-meta { color: #C9D6E8; }

  /* ---------- Profile, forms ---------- */
  .form-card { padding: 24px; }
  .form-card h2, .form-card h3, .form-section h4 { font-family: var(--font-display); font-style: italic; font-weight: 800; color: var(--gw-navy); }
  label { color: var(--gw-ink); font-weight: 700; }
  @media (max-width: 720px) { .form-card { padding: 18px; } }

  /* ---------- Store pages (product, cart, passes) ---------- */
  .st-prod, .st-fac, .st-pass { border-radius: 18px; }
  .st-price { font-family: var(--font-display); font-style: italic; color: var(--gw-navy); }
  .st-actionbar .btn-primary, .st-actionbar .btn-accent { background: var(--gw-acc); }

  /* ---------- Sponsorship ---------- */
  #gw-spons { padding-top: 4px; }
}

html:not(.app) {
  /* Sponsorship: the old empty "Open Opportunities" box repeats the new list. */
  h2:has(+ #sponsorship-grid > .empty-state), #sponsorship-grid:has(> .empty-state) { display: none; }
}

/* ===================== Quality pass (GS-21) ===================== */
html:not(.app) {
  /* Footer headings are h2 (page outline), styled as before. */
  .site-footer .gw-fh { font-family: var(--font-sans); font-style: normal; font-size: 0.95rem; font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: 0; }
  .footer-bottom, .footer-bottom span { color: #9FB0C6; }

  /* Contrast (WCAG AA 4.5:1 for small text) */
  .mb-plus { background: #0E7A4E; }
  .nv-avatar, .gw-podium .gw-first .gw-avatar, .avatar-circle { background: #C2410C; }
  .st-off { color: #0A6E4A; }

  /* No layout jumps: page bodies hold a screen's height while they load, so the
     footer starts below the fold instead of being pushed down. */
  #gw-home, #gw-tournaments, #gw-rankings, #gw-team, #gw-orgprofile, #gw-main, #t-loading, #p-loading, #t-main, main#gw-team { min-height: calc(100vh - 64px); }
}

/* ===================== Continue with Google (GS-22) ===================== */
html:not(.app) {
  .gw-google-wrap { margin: 4px 0 18px; }
  .gw-google { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; border: 1.5px solid #C9D3E0; background: #fff; color: #1F1F1F; font: inherit; font-size: 0.98rem; font-weight: 700; cursor: pointer; }
  .gw-google:hover { background: #F7F9FC; border-color: #9FB0C6; }
  .gw-google:disabled { opacity: 0.6; cursor: wait; }
  .gw-or { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--gw-dim); font-size: 0.82rem; }
  .gw-or::before, .gw-or::after { content: ""; flex: 1; height: 1px; background: var(--gw-line); }
}