:root { --signal:#0052E7; --electric:#0081FD; --slate:#8C97A6; --gold:#E8B44A; --brief:#0b1220; }
html, body { background:#000; }
body { font-feature-settings:"ss01","cv01"; -webkit-font-smoothing:antialiased; }
.mono { font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.field::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 0%, rgba(0,82,231,0.28), transparent 60%),
    radial-gradient(50% 45% at 92% 8%, rgba(0,129,253,0.20), transparent 55%),
    radial-gradient(40% 40% at 50% 120%, rgba(0,82,231,0.16), transparent 60%);
}
.grain::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* Every surface edge on the site is a thin gold line. Keep the alpha low:
   at full strength the gold reads as a border treatment rather than an edge. */
.hairline { border:1px solid rgba(232,180,74,0.42); }

/* ---- gold on everything clickable ---- */

/* Top menu items sit in gold-outlined pills. */
.nav-pill {
  border:1px solid rgba(232,180,74,0.32);
  border-radius:10px;
  padding:6px 12px;
  transition: border-color .25s ease, background-color .25s ease, color .2s ease;
}
.nav-pill:hover { border-color:rgba(232,180,74,0.85); background:rgba(232,180,74,0.08); }
.nav-pill[aria-current="page"] {
  border-color:rgba(232,180,74,0.9);
  background:rgba(232,180,74,0.12);
  color:#fff;
}

/* Solid blue buttons get a gold ring so the primary action reads gold too. */
.gold-ring {
  box-shadow:
    0 0 0 1px rgba(232,180,74,0.85),
    0 0 0 4px rgba(232,180,74,0.10),
    0 24px 60px -24px rgba(0,82,231,0.55);
}
.gold-ring:hover {
  box-shadow:
    0 0 0 1px rgba(232,180,74,1),
    0 0 0 5px rgba(232,180,74,0.16),
    0 24px 60px -24px rgba(0,82,231,0.7);
}

/* Plain text links pick up a gold underline on hover. */
.link-gold { transition: color .2s ease, text-decoration-color .2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.link-gold:hover { color:var(--gold); text-decoration-color: rgba(232,180,74,0.7); }

/* Gold ring for the logo, in the nav, the footer and the brief cards. */
.logo-ring {
  border:1px solid rgba(232,180,74,0.85);
  box-shadow: 0 0 0 1px rgba(232,180,74,0.22), 0 6px 20px -6px rgba(232,180,74,0.6);
}
/* Apply to an absolutely positioned overlay div, never to an element that holds
   content: the radial mask would fade out that element's own text. */
.grid-lines {
  background-image:
    linear-gradient(rgba(232,180,74,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,180,74,0.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 80%);
          mask-image:radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 80%);
}
.text-gradient { background:linear-gradient(180deg,#fff 0%, #cdd6e3 60%, #8C97A6 140%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.iq-gradient { background:linear-gradient(180deg,#0A84FF, #0052E7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-gradient { background:linear-gradient(180deg,#F5D48A, #E8B44A); -webkit-background-clip:text; background-clip:text; color:transparent; }

.lift { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.lift:hover { transform: translateY(-4px); }
.btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background-color .25s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
a, button { outline:none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--electric); outline-offset:3px; border-radius:10px;
}

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

@keyframes pulseDot { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
.livedot { animation:pulseDot 1.8s ease-in-out infinite; }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] .chev { transform:rotate(45deg); }
.chev { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

/* ---- brief card: navy + gold, mirrors the published brief images ---- */
.brief-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(232,180,74,0.10), transparent 55%),
    linear-gradient(180deg, #101a2e 0%, var(--brief) 55%, #080e1a 100%);
  border:1px solid rgba(232,180,74,0.42);
}
.brief-rule { border-top:1px solid rgba(232,180,74,0.18); }
.brief-chip { background:rgba(232,180,74,0.10); border:1px solid rgba(232,180,74,0.30); color:var(--gold); }

/* ---- scoreboard table ---- */
.sb-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sb { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; }
.sb th {
  position:sticky; top:0; z-index:1; text-align:left; white-space:nowrap;
  background:#0E1016; color:#8C97A6; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  padding:12px 16px; border-bottom:1px solid rgba(232,180,74,0.35);
}
.sb td { padding:14px 16px; vertical-align:top; border-bottom:1px solid rgba(232,180,74,0.14); font-size:14px; }
.sb tbody tr { transition: background-color .2s ease; }
.sb tbody tr:hover { background:rgba(255,255,255,0.025); }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.pill-yes { background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.35); color:#34d399; }
.pill-no  { background:rgba(251,113,133,0.12); border:1px solid rgba(251,113,133,0.35); color:#fb7185; }
.pill-na  { background:rgba(140,151,166,0.10); border:1px solid rgba(140,151,166,0.30); color:#8C97A6; }
.pill-open{ background:rgba(0,129,253,0.12); border:1px solid rgba(0,129,253,0.35); color:#0A84FF; }

.meter { height:6px; border-radius:999px; background:rgba(140,151,166,0.16); overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#0A84FF,#0052E7); }

.locked { position:relative; }
.locked::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); pointer-events:none; }