:root{
      --navy-900:#071423; --navy-800:#0b1a2b; --navy-700:#0f2136;
      --ink:#ffffff; --muted:#bcd0ef;
      --gold:#e9b84b; --gold-2:#ffcb66;
      --blue-1:#1555ff; --blue-2:#33a6ff;
      --stroke:rgba(156,179,212,.22);
      --rad:22px; --shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
      --seg-bg: rgba(255,255,255,.06);
      --seg-border: rgba(255,255,255,.18);
      --seg-text: #d7e3ff;
    }
    /* Light theme */
    :root[data-bs-theme="light"]{
      --ink:#0c1730; --muted:#4a5a78;
      --stroke:rgba(12,23,48,.12);
      --navy-900:#f6f8fb; --navy-800:#eef2f8; --navy-700:#e7eef8;
      --seg-bg:#ffffffea; --seg-border:#0000001a; --seg-text:#23304b;
    }
    *{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

    /* Animated background */
    body{ background:var(--navy-900); color:var(--ink); }
    .bg-layer,.bg-layer2{
      position:fixed; inset:-20vmax; pointer-events:none; z-index:-3;
      filter:blur(60px); will-change:transform,opacity;
      background:
        radial-gradient(40vmax 30vmax at 20% 10%, #1555ff22, transparent 60%),
        radial-gradient(35vmax 25vmax at 80% 0%,  #ffcb6620, transparent 60%);
    }
    .bg-layer2{ z-index:-4; filter:blur(90px); opacity:.6; }
    @keyframes driftA{ from{ transform:translate3d(-2%,0,0) rotate(0deg) } to{ transform:translate3d(2%,1%,0) rotate(8deg) } }
    @keyframes driftB{ from{ transform:translate3d(1%,-1%,0) rotate(-6deg)} to{ transform:translate3d(-1%,2%,0) rotate(6deg)} }
    .bg-layer{ animation: driftA 24s ease-in-out infinite alternate; }
    .bg-layer2{ animation: driftB 32s ease-in-out infinite alternate; }
    @media (prefers-reduced-motion:reduce){ .bg-layer,.bg-layer2{ animation:none } }
    @media (max-width:480px), (prefers-reduced-data:reduce){
      .bg-layer{ filter:blur(30px) }
      .bg-layer2{ filter:blur(45px); opacity:.45 }
    }

    a{text-decoration:none}
    .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;border-radius:.5rem;z-index:10000}
    :focus-visible{outline:2px solid #ffcb66;outline-offset:2px}
    .btn:focus-visible{outline:2px solid #ffcb66;outline-offset:2px}

    /* Navbar */
    .navbar{
      background:linear-gradient(180deg,rgba(10,23,39,.72),rgba(10,23,39,.42));
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--stroke);
      padding-top: calc(.5rem + env(safe-area-inset-top));
    }
    :root[data-bs-theme="light"] .navbar{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65))}
    .logo-type{font-family:'Bebas Neue';font-size:1.6rem;letter-spacing:.7px;color:#fff}
    :root[data-bs-theme="light"] .logo-type{color:#0c1730}
    /* Light theme: make navbar links dark (override any .text-light) */
    :root[data-bs-theme="light"] .navbar .nav-link,
    :root[data-bs-theme="light"] .navbar .nav-link.text-light { color:#0c1730 !important; }
    :root[data-bs-theme="light"] .navbar .nav-link:hover,
    :root[data-bs-theme="light"] .navbar .nav-link:focus { color:#0c1730 !important; opacity:.8; }

    /* Buttons */
    .btn-gold{
      background:linear-gradient(180deg,var(--gold-2),var(--gold));
      color:#1b1407;border:none;font-weight:700; transition:transform .2s, box-shadow .2s
    }
    .btn-gold:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(233,184,75,.25)}
    .btn-outline-light{color:#fff; border-color:rgba(255,255,255,.28)}
    .btn-outline-light:hover{color:#fff!important; background:rgba(255,255,255,.08)}
    :root[data-bs-theme="light"] .btn-outline-light{color:#0c1730; border-color:rgba(12,23,48,.25)}
    :root[data-bs-theme="light"] .btn-outline-light:hover{background:#eef2f8; color:#0c1730!important}

    /* Liquid Glass */
    .glass{
      position:relative; border-radius:var(--rad);
      background-image:
        radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      border:1px solid var(--stroke); box-shadow:var(--shadow);
      overflow:hidden; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    }
    /* Light mode refined glass */
    :root[data-bs-theme="light"] .glass{
      background-image:
        radial-gradient(120% 180% at 10% 0%, rgba(0,0,0,.04), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
      box-shadow: 0 12px 28px rgba(12,23,48,.12), inset 0 1px 0 rgba(255,255,255,.8);
    }

    /* Soft animated inner glow */
    .glass::after{
      content:""; position:absolute; inset:-20%; pointer-events:none;
      background:
        radial-gradient(30% 50% at 10% 5%, rgba(255,255,255,.08), transparent 60%),
        radial-gradient(40% 60% at 90% 10%, rgba(21,85,255,.08), transparent 70%),
        radial-gradient(50% 70% at 50% 120%, rgba(255,203,102,.08), transparent 60%);
      mix-blend-mode:soft-light; filter:blur(16px);
      animation:pulseGlow 8s ease-in-out infinite alternate;
    }
    @keyframes pulseGlow{
      0%{ transform:translate3d(-2%, -1%,0) scale(1); opacity:.9 }
      100%{ transform:translate3d(2%, 1%,0) scale(1.02); opacity:1 }
    }
    @media (prefers-reduced-motion:reduce){ .glass::after{ animation:none } }

    /* Micro-interactions */
    .lift{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
    .lift:hover{transform:translateY(-4px)}
    @media (prefers-reduced-motion:reduce){.lift{transition:none}}

    /* Hero */
    .hero{
      position:relative;overflow:hidden;
      border-radius:0; /* FIX: squared bottom corners */
      background:linear-gradient(180deg,#0a1a2e 0%,#0a1530 100%);border-bottom:1px solid var(--stroke)
    }
    :root[data-bs-theme="light"] .hero{background:linear-gradient(180deg,#eef2f8 0%,#e7eef8 100%)}
    .hero-inner{padding:36px 0 24px}
    .hero h1{font-family:'Bebas Neue';font-size:3rem;letter-spacing:1px;margin:0}
    .hero p{color:var(--muted)}

    /* KPI strip */
    .kpi-strip{background:linear-gradient(90deg, rgba(19,114,255,.25), rgba(9,77,211,.25));border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
    :root[data-bs-theme="light"] .kpi-strip{background:linear-gradient(90deg,#e9f1ff,#f3f7ff)}
    .kpi-box{display:flex;gap:.9rem;align-items:center;padding:1rem 0}
    .kpi-box .num{font-size:2rem;font-weight:800;line-height:1}
    .kpi-label{font-weight:600;letter-spacing:.6px}

    /* Headings */
    .eyebrow{font-size:.75rem;letter-spacing:.14rem;color:var(--gold-2);text-transform:uppercase;font-weight:800}
    .section-title{font-family:'Bebas Neue';letter-spacing:.6px;font-size:2rem;margin:0}

    /* KPI cards */
    .kpi-card,.kpi-card .label,.kpi-card .num{color:#fff!important}
    :root[data-bs-theme="light"] .kpi-card,
    :root[data-bs-theme="light"] .kpi-card .label,
    :root[data-bs-theme="light"] .kpi-card .num{ color:var(--ink)!important }
    .kpi-card .num{font-size:2rem;font-weight:800}

    /* Charts */
    .spark{height: 80%;}.chart{height:260px}

    /* Tournament cards & chips */
    .tour-wrap{padding:1rem;border-radius:28px; content-visibility:auto; contain-intrinsic-size: 900px;}
    .t-card{ position:relative; }
    .t-card .card-body{min-height:300px;display:flex;flex-direction:column}
    .t-chip{display:inline-flex;align-items:center;gap:.4rem;padding: 0.65rem 0.45rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-size: 0.8rem;color:var(--ink);font-weight: 700;}
    .entrant-box span:nth-child(1), .entrant-box span:nth-child(2) {
        color: yellow;
        background: black;
    }
    :root[data-bs-theme="light"] .t-chip{ background:#ffffffd9; border-color:#0000001a; color:#0c1730; }
    :root[data-bs-theme="light"] .t-chip:hover{ background:#fff; border-color:#00000022; }
    .t-cta .btn{min-width:140px}
    .featured{
      /* FIX: include default glass shadow + featured ring */
      border:2px solid rgba(51,166,255,.35);
      box-shadow:var(--shadow), 0 0 0 4px rgba(51,166,255,.08);
    }
    .t-card.lift:hover{box-shadow:0 18px 48px rgba(21,85,255,.18), inset 0 1px 0 rgba(255,255,255,.04)}
    .t-title{text-wrap:balance}

    /* Full-card interactivity affordance */
    .t-card[role="button"]{ cursor:pointer; }
    .t-card:focus-visible {
      outline: 2px solid #66a3ff;
      outline-offset: 3px;
      border-radius: var(--rad);
    }
    .t-card[role="button"]:hover,
    .t-card[role="button"]:focus-within{
      outline: 1px solid rgba(51,166,255,.35);
      box-shadow: 0 18px 48px rgba(21,85,255,.18), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .t-card .stretched-link{ z-index:1; }

    /* Segmented Tabs (Live / Upcoming / Past) */
    .seg {
      --seg-gap:.375rem;
      display:inline-flex; gap:var(--seg-gap);
      padding:.375rem; border-radius:999px;
      background:var(--seg-bg); border:1px solid var(--seg-border);
      position:relative; isolation:isolate;
    }
    .seg .nav-link{
      position:relative; z-index:2;
      border:0; border-radius:999px;
      padding:.45rem 1rem; font-weight:600;
      color:var(--seg-text); background:transparent;
      transition:color .2s ease, transform .2s ease, text-shadow .2s ease;
    }
    .seg .nav-link:hover{ transform:translateY(-1px) }
    .seg .nav-link:focus-visible{ outline:2px solid var(--gold-2) }
    .seg .nav-link.active{
      color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.25);
      background:linear-gradient(180deg,var(--blue-2),var(--blue-1));
      box-shadow:0 8px 22px rgba(21,85,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
    }
    :root[data-bs-theme="light"] .seg .nav-link.active{ color:#fff }

    .seg::after{
      content:""; position:absolute; inset:3px; border-radius:999px; z-index:1; pointer-events:none;
      background: radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.12), transparent 66%),
                  radial-gradient(120% 80% at 0% 50%, rgba(51,166,255,.08), transparent 60%),
                  radial-gradient(120% 80% at 100% 50%, rgba(255,203,102,.09), transparent 60%);
      filter:blur(10px); opacity:.9; animation:segGlow 10s ease-in-out infinite alternate;
    }
    /* Stronger segmented glow in light theme (requested) */
    :root[data-bs-theme="light"] .seg::after {
      background:
        radial-gradient(60% 120% at 50% 0%, rgba(0,0,0,.05), transparent 66%),
        radial-gradient(120% 80% at 0% 50%, rgba(51,166,255,.12), transparent 60%),
        radial-gradient(120% 80% at 100% 50%, rgba(233,184,75,.15), transparent 60%);
      filter: blur(12px);
      opacity: 1;
    }
    @keyframes segGlow{
      0%{ transform:translateX(-2%) scale(1) }
      100%{ transform:translateX(2%) scale(1.02) }
    }
    @media (prefers-reduced-motion:reduce){ .seg::after{ animation:none } }

    /* Badges */
    .badge-dark-soft{ color:#e9eefc; background:#111a2a; border:1px solid rgba(255,255,255,.18); }
    :root[data-bs-theme="light"] .badge-dark-soft{ color:#23304b; background:#eef2f8; border:1px solid #00000010; }

    /* Skeletons */
    .skeleton{position:relative;background:rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
    .skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));transform:translateX(-100%);animation:shimmer 1.2s infinite}
    @keyframes shimmer{100%{transform:translateX(100%)}}
    @media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}.glass.sheen::after{display:none}}

    /* Chat CLS guard */
    .public-chat{ content-visibility:auto; contain-intrinsic-size: 400px; }
    .public-chat .p-3[style*="max-height"]{ min-height:180px; }

    /* Small screens */
    @media (max-width:767.98px){
      .cta-row .btn{width:100%}
      .seg .nav-link{ padding:.6rem 1rem; } /* larger tap targets */
    }

    /* Sticky segmented control inside Available Tournaments */
    .tour-wrap .seg{ position: sticky; top: .5rem; z-index: 2; }

    /* Toast position */
    .toast-container{position:fixed;bottom:1rem;right:1rem;z-index:1080}

    /* Tables: theme-aware surface (replaces .table-dark) */
    .table-surface{
      background: var(--navy-800);
      color: var(--ink);
      --bs-table-bg: transparent;
      --bs-table-color: inherit;
      --bs-table-border-color: var(--stroke);
      --bs-table-striped-bg: rgba(255,255,255,.04);
      --bs-table-hover-bg: rgba(255,255,255,.07);
    }
    :root[data-bs-theme="light"] .table-surface{
      background:#fff;
      --bs-table-border-color: rgba(12,23,48,.12);
      --bs-table-striped-bg:#f6f8fb;
      --bs-table-hover-bg:#eef2f8;
    }

    /* Performance: large tables lazy-paint */
    .table-responsive{ content-visibility:auto; contain-intrinsic-size: 600px; }

    /* CTA band safe-area */
    section.py-4{ padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

    /* Pause animations when tab hidden */
    .paused .bg-layer,
    .paused .bg-layer2,
    .paused .glass::after,
    .paused .seg::after{ animation-play-state: paused; }

    /* Accessibility: high-contrast users */
    @media (prefers-contrast: more){
      :root{ --stroke: rgba(255,255,255,.5); }
      .seg .nav-link.active{ box-shadow: 0 0 0 2px rgba(0,0,0,.15), inset 0 1px 0 #fff; }
      .btn-gold{ box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
    }

    /* Reduce transparency if user requests */
    @media (prefers-reduced-transparency: reduce){
      .glass{ backdrop-filter:none; -webkit-backdrop-filter:none; background: var(--navy-800); }
      :root[data-bs-theme="light"] .glass{ background:#fff; }
    }
    main.app-container {
        overflow: hidden;
    }
    body.light-theme {
        background: white;
    }

    body.light-theme .glass, body.light-theme .sheen,body.light-theme .kpi-card {
        color: black !important;
    }

    body.light-theme .glass, body.light-theme .sheen, body.light-theme .kpi-card div {
        color: black !important;
    }

    body.light-theme  button.btn.btn-sm.btn-outline-light {
        border-color: black;
        color: black;
    }

    body.light-theme span.t-chip {
        color: black;
        border-color: black;
    }

    body.light-theme .spark polyline {fill: #22304a;}

    body.light-theme ul#tourTabs {
        border-color: grey;
    }

    body.light-theme ul#tourTabs li button {
        color: black;
    }

    body.light-theme  span.badge.rounded-pill.text-bg-dark.border {
        background: #333;
    }
    body.light-theme  span.badge.rounded-pill.text-bg-dark.border {
        color: white;
    }