@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* CUE — "Luminous" shared theme (Concept C). Loaded AFTER each page's inline <style> +
   cue-a11y.css, so it overrides the page's :root tokens and base components site-wide.
   Deep indigo space, glass panels, cue-blue/violet accents, Bricolage display + Plex Mono.
   NOT loaded on /watch or /tv (they keep their immersive theatre palette). */

:root{
  --bg:#070713; --panel:rgba(22,24,46,.55); --panel2:#161830; --line:rgba(150,160,255,.16);
  --ink:#eef0ff; --muted:#9aa0c4; --dim:#6b6f93;
  --accent:#3aa7ff; --accent2:#9b6bff; --hot:#ff5ec8;
  --disp:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* page canvas + drifting gradient-mesh atmosphere */
body{ background:var(--bg) !important; color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; position:relative; }
body::before{ content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 48% at 18% 16%, rgba(58,167,255,.18), transparent 60%),
    radial-gradient(42% 52% at 84% 14%, rgba(155,107,255,.18), transparent 60%),
    radial-gradient(46% 50% at 62% 96%, rgba(255,94,200,.10), transparent 60%);
  filter:blur(24px); animation:cuethemeDrift 22s ease-in-out infinite alternate; }
@keyframes cuethemeDrift{ to{ transform:translate3d(-3%,2%,0) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ body::before{ animation:none; } }

h1,h2,h3,.brand{ font-family:var(--disp); letter-spacing:-.01em; }
a{ color:var(--accent); transition:color .15s ease; }
a:hover{ color:#7fc4ff; }

/* eyebrow / kicker — mono, cue-blue, leading tick */
.kick{ font-family:var(--mono) !important; display:inline-flex; align-items:center; gap:10px; color:var(--accent) !important;
  font-weight:500 !important; letter-spacing:.18em !important; font-size:12px !important; text-transform:uppercase; }
.kick::before{ content:""; width:24px; height:1px; background:linear-gradient(90deg,transparent,var(--accent)); }

/* ── CUE logo lockup ───────────────────────────────────────────────────────
   The orb is the constant brand element; its COLOUR is the live story colour
   (driven by cue.js → --cue). Drop anywhere:  <a class="cue-logo" href="/">
     <span class="cue-orb" aria-hidden="true"></span>CUE</a>
   Size with font-size; the orb scales to the type. The wordmark stays mono-white
   so the orb carries the colour (per the brand rule). */
.cue-logo{ display:inline-flex; align-items:center; gap:.62em; font-family:var(--disp);
  font-weight:800; letter-spacing:.02em; font-size:20px; line-height:1; color:var(--ink);
  text-decoration:none; -webkit-font-smoothing:antialiased; }
.cue-logo:hover{ color:var(--ink); }
.cue-orb{ --o:.72em; width:var(--o); height:var(--o); border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%, #fff 0%, var(--cue,#3aa7ff) 46%, #081026 100%);
  box-shadow:0 0 .85em -.05em var(--cue,#3aa7ff), 0 0 .2em var(--cue,#3aa7ff) inset;
  position:relative; }
.cue-orb::after{ content:""; position:absolute; inset:-30%; border-radius:50%;
  background:radial-gradient(circle, var(--cue,#3aa7ff) 0%, transparent 62%); opacity:.45;
  animation:cueOrbPulse 3.2s ease-in-out infinite; }
@keyframes cueOrbPulse{ 0%,100%{ transform:scale(.9); opacity:.30; } 50%{ transform:scale(1.12); opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .cue-orb::after{ animation:none; } }

/* the button system — depth, lift, press (kills flat fills site-wide) */
button, .btn, input[type=submit], input[type=button]{
  background:linear-gradient(180deg,#5bb8ff,#2f93ec); color:#04132b; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px -12px rgba(58,167,255,.85), 0 2px 6px rgba(0,0,0,.35);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
button:hover, .btn:hover{ transform:translateY(-1px); filter:saturate(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 36px -12px rgba(58,167,255,1), 0 3px 8px rgba(0,0,0,.4); }
button:active, .btn:active{ transform:translateY(0); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 16px -10px rgba(58,167,255,.8); }
button:disabled{ opacity:.55; cursor:wait; transform:none; filter:saturate(.6); box-shadow:none; }
.copybtn, .secondary{ background:linear-gradient(180deg,#b08bff,#8a5cff) !important; color:#0c0630 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 28px -12px rgba(155,107,255,.8), 0 2px 6px rgba(0,0,0,.35) !important; }

/* inputs — glass */
input[type=email], input[type=text], input[type=search], textarea{
  background:rgba(10,12,26,.6); border:1px solid var(--line); color:var(--ink); border-radius:12px;
  transition:border-color .16s ease, box-shadow .16s ease; }
input::placeholder, textarea::placeholder{ color:#6b6f93; }
input:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(58,167,255,.2); outline:none; }

/* cards / panels — glass */
.card, .panel{ background:var(--panel); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px -40px #000; }

/* tables (leaderboard etc.) */
th{ color:var(--dim); font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; }
tbody tr{ transition:background .15s ease; }
tbody tr:hover td{ background:rgba(58,167,255,.06); }

/* dividers + footer */
hr{ border:0; border-top:1px solid var(--line); }
.cue-foot{ border-top:1px solid var(--line); }
.cue-foot nav a:hover, .cue-foot nav a:focus-visible{ color:var(--accent); }