/* ============================================================
   Hood Sims — Robinhood-inspired reskin.
   ONE dark theme: near-black surfaces, neon-green (#C6F832) accent,
   hairline borders, Inter type. The old light/blue TS4 palette and
   the separate body.dark theme are collapsed into this single look —
   the default (no .dark) and body.dark now render identically.
   ============================================================ */

:root{
  /* --- Hood Sims core palette --- */
  --green:      #C6F832;              /* primary accent (Robinhood green) */
  --green-hi:   #D6FF52;              /* bright hover */
  --green-soft: #BCEF56;              /* lighter green for values/text */
  --green-glow: rgba(198,248,51,.35);   /* accent glow */

  --bg:         #0A0B0D;              /* page background (near-black) */
  --surface:    #131417;             /* card / panel surface */
  --surface-2:  #1A1D22;             /* elevated / hover surface */
  --inset:      #0E1013;             /* insets, feeds, inputs */

  --txt:        #F2F4F6;             /* primary text */
  --txt-soft:   #9BA1A8;             /* muted text */
  --txt-faint:  #6B7178;             /* faint text */

  --line:       rgba(255,255,255,.08);  /* hairline border */
  --line-2:     rgba(255,255,255,.14);  /* stronger border */

  /* --- legacy token names, remapped onto the dark+green system --- */
  --blue-label: var(--green);         /* accent labels/links (was TS4 blue) */
  --blue-deep:  #9FD41F;              /* deeper green for accent bands */
  --green-bar:  var(--green);         /* bar fill */
  --green-play: var(--green);         /* active play */
  --track:      rgba(255,255,255,.08);/* unfilled bar / inset track */
  --ink:        var(--txt);           /* text on surfaces */
  --ink-soft:   var(--txt-soft);

  --frost:      var(--surface);       /* card surface (see glass override below) */
  --frost-line: var(--line);          /* hairline separators */
  --dark:       rgba(19,20,23,.82);   /* dark translucent HUD pill */
  --dark-line:  var(--line-2);

  --gold:   #C99A00;                  /* amber status (thinking) — kept distinct */
  --bob:    var(--green);             /* live/positive accent */
  --amber:  #F2A31E;                  /* warning status */
  --red:    #FF4D4D;                  /* negative / sell / error */

  --shadow-island: 0 6px 22px rgba(0,0,0,.5);

  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font-body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:800; margin:0; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.container{ max-width:1180px; margin-inline:auto; padding-inline:24px; }

/* ============================================================
   Brand mark + live dot
   ============================================================ */
.plumbob{ --s:26px; width:var(--s); height:var(--s);
  display:inline-block; position:relative; flex:0 0 auto;
  background:url("logo.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 8px var(--green-glow));
  animation:bobFloat 3.2s ease-in-out infinite; }
.plumbob--sm{ --s:22px; }
.plumbob--xl{ --s:88px; filter:drop-shadow(0 6px 20px rgba(198,248,51,.45)); }
@keyframes bobFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

.livedot{ width:7px; height:7px; border-radius:50%; background:var(--bob); display:inline-block;
  box-shadow:0 0 7px rgba(198,248,51,.8); animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }

/* ============================================================
   THE GAME FRAME (hero) — full viewport
   ============================================================ */
.game{ position:relative; z-index:1; height:100svh; min-height:640px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 38% at 74% 22%, rgba(198,248,51,.10), transparent 60%),
    radial-gradient(50% 40% at 12% 90%, rgba(198,248,51,.06), transparent 60%),
    linear-gradient(180deg, #0A0B0D 0%, #0E1013 60%, #0A0B0D 100%); }
.game::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 130px rgba(0,0,0,.6); }

/* the world holds the live trade monitor, centred over the scene */
.world{ position:absolute; inset:0; display:grid; place-items:center; padding:96px 18px; }
.world .terminal{ margin:0; width:min(660px, 100%); }

/* shared island base */
.hud{ position:absolute; z-index:3; }

/* ---- top-left: brand card ---- */
.brand{ top:18px; left:18px; width:min(330px, calc(100vw - 36px));
  background:var(--frost); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow-island), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.brand__head{ background:var(--green); color:#0A0B0D;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.14em;
  padding:8px 14px; }
.brand__body{ display:flex; align-items:center; gap:12px; padding:13px 14px 4px; }
.brand__logo{ width:46px; height:46px; border-radius:10px; object-fit:cover; flex:0 0 auto;
  border:2px solid var(--line-2); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.brand__name{ font-size:20px; font-weight:800; letter-spacing:.08em; color:var(--txt); line-height:1.1; }
.brand__tag{ margin:3px 0 0; font-size:12px; font-weight:500; color:var(--txt-soft); line-height:1.35; }
.brand__cta{ display:flex; gap:8px; padding:10px 14px 13px; }
.brand__live{ border-top:1px solid var(--line); padding:8px 14px; display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--txt-soft); }
.brand__live b{ color:var(--green); letter-spacing:.06em; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:8px; border:none; transition:transform .12s, filter .15s, box-shadow .15s; }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn:active{ transform:translateY(0); }
.btn--green{ color:#0A0B0D; background:var(--green);
  box-shadow:0 2px 10px var(--green-glow); }
.btn--white{ color:var(--txt); background:transparent; border:1px solid var(--line-2); }

/* ---- top-right: CONTROL + round buttons ---- */
.ctrl{ top:18px; right:18px; display:flex; align-items:center; gap:14px; }
.ctrl__hint{ display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.1em; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6); }
.ctrl__chip{ font-size:10px; font-weight:600; color:#fff; border:1.5px solid rgba(255,255,255,.5);
  border-radius:7px; padding:2px 6px; background:rgba(255,255,255,.08); }
.ctrl__btns{ display:flex; gap:8px; }
.cbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; padding:0;
  color:#fff; background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.28);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .15s, transform .12s; }
.cbtn svg{ width:19px; height:19px; fill:currentColor; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.cbtn:hover{ background:rgba(198,248,51,.22); transform:translateY(-1px); }

/* ---- bottom-left dock ---- */
.dockl{ left:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }

/* moodlet tooltip */
.tip{ width:min(300px, calc(100vw - 36px)); background:var(--surface); border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow-island); border:1px solid var(--line); }
.tip__head{ background:var(--green); color:#0A0B0D;
  font-family:var(--font-display); font-weight:700; font-size:13px; padding:7px 13px; }
.tip__body{ padding:10px 13px 11px; display:flex; flex-direction:column; gap:3px; }
.tip__body b{ font-size:13.5px; color:var(--txt); }
.tip__sub{ font-size:12px; font-weight:600; color:var(--green); }
.tip__body p{ margin:2px 0 0; font-size:12.5px; color:var(--txt-soft); line-height:1.4; }
.tip__time{ margin-top:5px; font-size:11px; color:var(--txt-faint); }

/* action queue: vertical state + chips */
.qrow{ display:flex; align-items:flex-end; gap:8px; }
.qrow__state{ writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7); padding-bottom:2px; }
.queue{ display:flex; gap:7px; }
.qchip{ position:relative; width:46px; height:46px; border-radius:9px; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.2); box-shadow:0 3px 10px rgba(0,0,0,.5);
  animation:qpop .25s ease backwards; }
.qchip svg{ width:22px; height:22px; fill:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.qchip--now{ background:linear-gradient(180deg, var(--green-hi), var(--green)); }
.qchip--now svg{ fill:#0A0B0D; filter:none; }
.qchip--queued{ background:var(--surface-2); border-color:var(--line-2); }
.qchip--queued svg{ fill:var(--green); filter:none; }
.qchip--now::after{ content:"×"; position:absolute; top:-7px; right:-7px; width:16px; height:16px;
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; border-radius:50%;
  background:var(--red); border:1.5px solid var(--bg); }
@keyframes qpop{ from{ transform:scale(.6); opacity:0; } }

/* funds + home/phone + household */
.frow{ display:flex; align-items:center; gap:8px; }
.funds{ display:inline-flex; align-items:center; color:#fff; font-size:14px; font-weight:600;
  background:var(--dark); border:1px solid var(--dark-line); border-radius:9px; padding:8px 14px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-island); }
.fbtn{ width:38px; height:38px; border-radius:9px; display:grid; place-items:center; padding:0;
  color:var(--green); background:var(--dark); border:1px solid var(--line-2);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .12s, filter .15s; }
.fbtn svg{ width:18px; height:18px; fill:currentColor; }
.fbtn:hover{ transform:translateY(-1px); filter:brightness(1.15); }
.household{ display:flex; gap:6px; }
/* agent legend (bottom-left of the hero) */
.legend{ left:18px; bottom:18px; display:flex; flex-direction:column; gap:8px;
  background:var(--dark); border:1px solid var(--dark-line); border-radius:12px; padding:11px 13px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-island); }
.legend__label{ font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-soft); }
.legend__items{ display:flex; gap:7px; }
.hh{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; padding:0;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff;
  border:2px solid var(--line-2); opacity:.85;
  box-shadow:0 3px 9px rgba(0,0,0,.5), inset 0 -5px 8px rgba(0,0,0,.3);
  transition:transform .12s, opacity .12s, border-color .12s, box-shadow .12s; }
.hh:hover{ transform:translateY(-2px); opacity:1; }
.hh--active{ opacity:1; border-color:var(--bob);
  box-shadow:0 0 14px var(--green-glow), 0 3px 9px rgba(0,0,0,.5), inset 0 0 0 1px rgba(198,248,51,.4); }

/* ---- bottom-center: playback + clock ---- */
.dockc{ left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.transport{ display:flex; align-items:center; gap:2px; padding:6px 10px;
  background:var(--dark); border:1px solid var(--dark-line); border-radius:999px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-island); }
.tbtn{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; padding:0;
  color:var(--txt); background:transparent; border:none; transition:color .15s, background .15s; }
.tbtn svg{ width:16px; height:16px; fill:currentColor; }
.tbtn:hover{ background:rgba(255,255,255,.10); }
.tbtn--active{ color:var(--green-play); background:rgba(198,248,51,.16); }
.clockpill{ color:#fff; font-size:12px; font-weight:500;
  background:var(--dark); border:1px solid var(--dark-line); border-radius:8px; padding:5px 13px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-island); }

/* ---- bottom-right: needs panel + tabs ---- */
.dockr{ right:18px; bottom:18px; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }

/* the needs panel */
.needs{ width:min(430px, calc(100vw - 36px));
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--frost); border:1px solid var(--line); border-radius:9px; overflow:hidden;
  box-shadow:var(--shadow-island), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.need{ padding:9px 14px 11px; border-bottom:1px solid var(--line); }
.need:nth-child(odd){ border-right:1px solid var(--line); }
.need:nth-last-child(-n+2){ border-bottom:none; }
.need__label{ display:block; font-size:13px; font-weight:600; color:var(--green); margin-bottom:6px; }
.need__bar{ position:relative; height:18px; }
.need__icon{ position:absolute; left:-4px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; z-index:2; display:grid; place-items:center;
  background:var(--surface-2); border:1.5px solid var(--line-2); box-shadow:0 2px 4px rgba(0,0,0,.4); }
.need__icon svg{ width:12px; height:12px; fill:var(--ic, var(--green)); }
.need__track{ position:absolute; left:10px; right:0; top:2px; bottom:2px; border-radius:999px; overflow:hidden;
  background:var(--track); box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
.need__fill{ height:100%; width:0; border-radius:999px;
  transition:width 1.1s cubic-bezier(.2,.7,.2,1), background .4s;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.08) 45%, rgba(0,0,0,.18) 100%),
    var(--c, var(--green-bar)); }

/* panel tabs strip */
.tabs{ display:flex; gap:4px; padding:6px 8px;
  background:var(--dark); border:1px solid var(--dark-line); border-radius:9px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-island); }
.tabbtn{ width:32px; height:32px; border-radius:7px; display:grid; place-items:center; padding:0;
  color:var(--txt); background:transparent; border:none; transition:background .15s, color .15s; }
.tabbtn svg{ width:16px; height:16px; fill:currentColor; }
.tabbtn:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ============================================================
   NAV (sticky, appears under the hero)
   ============================================================ */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:20px;
  height:56px; padding:0 clamp(16px,4vw,36px);
  background:rgba(10,11,13,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.nav__brand{ display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.12em; color:var(--txt); }
.nav__brand img{ width:26px; height:26px; border-radius:7px; object-fit:cover; }
.nav__links{ display:flex; gap:2px; margin-left:auto; }
.nav__links a{ font-size:13px; font-weight:600; color:var(--txt-soft); padding:7px 12px; border-radius:8px; transition:.15s; }
.nav__links a:hover{ color:var(--green); background:rgba(198,248,51,.1); }
.nav__live{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--green);
  border:1px solid rgba(198,248,51,.35); border-radius:999px; padding:6px 14px; background:rgba(198,248,51,.1); }

/* ============================================================
   Living background — fixed layer behind the sections
   ============================================================ */
/* animated WebGL nebula background (nebula.js) — recolored to green-on-black.
   When it boots it adds html.has-nebula and hides the CSS blob fallback. */
#shaderbg{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:none; pointer-events:none; }
html.has-nebula .bgfx{ display:none !important; }
html.has-nebula body{ background:#0A0B0D; }
html.has-nebula body.dark{ background:#0A0B0D; }

.bgfx{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(60% 44% at 50% 0%, rgba(198,248,51,.08), transparent 60%),
    linear-gradient(180deg, #0A0B0D 0%, #0E1013 46%, #0A0B0D 100%); }
.bgfx__blob{ position:absolute; border-radius:50%; filter:blur(80px); will-change:transform; }
.bgfx__blob--1{ width:55vmax; height:55vmax; top:-20vmax; left:-14vmax;
  background:radial-gradient(circle, rgba(198,248,51,.30), transparent 64%);
  animation:bgDrift1 44s ease-in-out infinite alternate; }
.bgfx__blob--2{ width:48vmax; height:48vmax; bottom:-18vmax; right:-12vmax;
  background:radial-gradient(circle, rgba(198,248,51,.22), transparent 64%);
  animation:bgDrift2 56s ease-in-out infinite alternate; }
.bgfx__blob--3{ width:40vmax; height:40vmax; top:34%; left:52%;
  background:radial-gradient(circle, rgba(198,248,51,.14), transparent 64%);
  animation:bgDrift3 66s ease-in-out infinite alternate; }
@keyframes bgDrift1{ to{ transform:translate(7vmax,5vmax) scale(1.12); } }
@keyframes bgDrift2{ to{ transform:translate(-6vmax,-4vmax) scale(1.08); } }
@keyframes bgDrift3{ to{ transform:translate(-5vmax,4vmax) scale(1.15); } }

/* soft blurred clouds, slowly crossing */
.bgfx__cloud{ position:absolute; height:120px; width:340px; border-radius:999px;
  background:radial-gradient(closest-side, rgba(198,248,51,.10), rgba(198,248,51,0));
  filter:blur(18px); }
.bgfx__cloud--1{ top:16%; left:-360px; animation:cloudDrift 90s linear infinite; }
.bgfx__cloud--2{ top:58%; left:-360px; width:260px; height:90px; opacity:.7; animation:cloudDrift 120s linear infinite 30s; }
@keyframes cloudDrift{ to{ transform:translateX(calc(100vw + 720px)); } }

/* floating brand marks */
.bgfx__bob{ position:absolute; width:30px; height:30px; opacity:.13;
  background:url("logo.png") center/contain no-repeat;
  filter:drop-shadow(0 0 8px var(--green-glow)); }
.bgfx__bob--1{ top:22%; left:8%;  animation:bobUpFx 11s ease-in-out infinite; }
.bgfx__bob--2{ top:64%; left:88%; animation:bobUpFx 14s ease-in-out infinite 2s; }
.bgfx__bob--3{ top:80%; left:18%; width:22px; height:22px; animation:bobUpFx 16s ease-in-out infinite 1s; }
@keyframes bobUpFx{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-30px) rotate(6deg); } }

.bgfx__grain{ position:absolute; inset:0; opacity:.045; mix-blend-mode:overlay;
  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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

main{ position:relative; z-index:1; }
.section{ padding:clamp(56px,8vw,96px) 0; }
.shead{ display:flex; gap:16px; align-items:flex-start; max-width:640px; margin-bottom:40px; }
.shead__logo{ width:40px; height:40px; border-radius:10px; object-fit:cover; margin-top:4px; flex:0 0 auto;
  border:2px solid var(--line-2); box-shadow:0 4px 12px rgba(0,0,0,.5); }
.shead h2{ font-size:clamp(26px,3.4vw,36px); font-weight:700; letter-spacing:-.02em; color:var(--txt); }
.shead p{ margin:10px 0 0; font-size:15px; color:var(--txt-soft); }

.panel{ background:var(--frost); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* agent cards — identity + real description + tracked-metric names */
.grid5{ display:grid; gap:14px; grid-template-columns:repeat(5,1fr); align-items:stretch; }
.sim{ position:relative; display:flex; flex-direction:column; gap:14px; padding:16px 15px;
  background:var(--frost); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .15s, box-shadow .15s; cursor:pointer; }
.sim:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 0 2px var(--bob); }
.sim__head{ display:flex; align-items:center; gap:10px; }
.sim__avatar{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--font-display); font-weight:800; font-size:16px; color:#fff;
  border:2px solid var(--line-2); box-shadow:0 2px 6px rgba(0,0,0,.4); }
.sim__who{ min-width:0; }
.sim__name{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--txt); line-height:1.1; }
.sim__provider{ font-size:11px; font-weight:600; color:var(--txt-soft); }
.sim__live{ margin-left:auto; flex:0 0 auto; }
.sim__flavor{ margin:0; font-size:13.5px; color:var(--txt-soft); line-height:1.45; }
.sim__tracks{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.sim__tracks-label{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:8px; }
.sim__chips{ display:flex; flex-wrap:wrap; gap:5px; }
.chip{ font-size:10.5px; font-weight:600; color:var(--txt-soft);
  background:rgba(198,248,51,.08); border:1px solid rgba(198,248,51,.2); border-radius:999px; padding:3px 9px; }

/* facts strip — only true numbers */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:32px;
  background:var(--frost); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.4); }
.fact{ display:flex; flex-direction:column; gap:4px; align-items:center; padding:18px 12px; text-align:center; }
.fact + .fact{ border-left:1px solid var(--line); }
.fact__value{ font-size:clamp(18px,2.4vw,24px); font-weight:700; color:var(--txt); }
.fact__value--live{ color:var(--green); }
.fact__label{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--green); }

/* SimScore metric cards */
.grid4{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.mcard{ position:relative; background:var(--frost); border:1px solid var(--line); border-radius:10px; padding:20px 18px;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .15s, box-shadow .15s; }
.mcard:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.55); }
.mcard__dot{ display:block; width:11px; height:11px; border-radius:50%; margin-bottom:12px;
  background:var(--mc, var(--green)); box-shadow:0 0 9px var(--mc, var(--green-glow)); }
.mcard h3{ font-size:16px; font-weight:700; color:var(--txt); margin-bottom:6px; letter-spacing:-.01em; }
.mcard p{ margin:0; font-size:13px; line-height:1.5; color:var(--txt-soft); }

/* about — step cards, flow diagram, quote panel */
.shead--wide{ max-width:760px; }
.grid3{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.step{ background:var(--frost); border:1px solid var(--line); border-radius:10px; padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .15s, box-shadow .15s; }
.step:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); }
.step__head{ display:flex; align-items:center; gap:11px; padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--line); }
.step__icon{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--surface-2); border:1.5px solid var(--line-2); box-shadow:0 2px 5px rgba(0,0,0,.4); }
.step__icon svg{ width:17px; height:17px; fill:var(--ic, var(--green)); }
.step__head h3{ font-size:16px; font-weight:700; color:var(--txt); letter-spacing:-.01em; }
.step__num{ margin-left:auto; font-size:12px; font-weight:600; color:var(--txt-faint); }
.step p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--txt-soft); }

.flow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:32px 0 0; }
.flow__node{ font-size:12.5px; font-weight:500; color:var(--green);
  background:var(--frost); border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04); }
.flow__node--end{ color:var(--green); border-color:rgba(198,248,51,.4); background:rgba(198,248,51,.12); }
.flow__arr{ font-size:15px; color:var(--green); font-weight:600; }

.why{ margin:32px auto 0; max-width:820px; text-align:center;
  background:var(--frost); border:1px solid var(--line); border-radius:12px; padding:28px 32px;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04); }
.why__label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:12px;
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); }
.why p{ margin:0; font-size:15px; line-height:1.7; color:var(--txt); }
.why i{ color:var(--green); }

/* footer */
.footer{ position:relative; z-index:1; background:rgba(10,11,13,.7); border-top:1px solid var(--line); padding:26px 0;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.footer__inner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer__brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.1em; color:var(--txt); }
.footer__brand img{ width:24px; height:24px; border-radius:7px; object-fit:cover; }
.footer__tag{ margin-inline:auto; font-size:12px; color:var(--txt-soft); letter-spacing:.04em; }
.footer__links{ display:flex; align-items:center; gap:18px; }
.footer__x{ font-size:13px; font-weight:600; color:var(--green); }
.footer__x:hover{ text-decoration:underline; }

/* ============================================================
   Loading screen + pie menu (game chrome, dark)
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  background:radial-gradient(80% 80% at 50% 40%, #0E1013 0%, #0A0B0D 55%, #060606 100%);
  cursor:pointer; transition:opacity .5s ease; }
.loader--done{ opacity:0; pointer-events:none; }
.loader .plumbob--xl{ animation:bobFloat 2.8s ease-in-out infinite; }
.loader__txt{ font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.08em; color:var(--txt-soft); margin:0; min-height:1.5em; }
.loader__skip{ position:absolute; bottom:26px; margin:0; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--txt-faint); text-transform:uppercase; }

.piewrap{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:pieFade .18s ease; }
@keyframes pieFade{ from{ opacity:0; } }
.pie{ position:absolute; width:0; height:0; }
.pie__center{ position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:22px; color:#fff;
  border:2px solid rgba(255,255,255,.6); box-shadow:0 6px 24px rgba(0,0,0,.6);
  animation:pieCenter .2s cubic-bezier(.2,.9,.3,1.25); }
@keyframes pieCenter{ from{ transform:translate(-50%,-50%) scale(.4); } }
.pie__petal{ position:absolute; left:0; top:0;
  transform:translate(-50%,-50%) rotate(var(--ang)) translate(102px) rotate(calc(var(--ang) * -1));
  white-space:nowrap; padding:9px 16px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--txt);
  background:rgba(19,20,23,.95); border:1px solid var(--line-2);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  animation:petalIn .22s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:var(--d, 0s);
  transition:background .15s, color .15s, border-color .15s; }
.pie__petal:hover{ background:var(--green); color:#0A0B0D; border-color:var(--green-hi); }
@keyframes petalIn{ from{ opacity:0; transform:translate(-50%,-50%) rotate(var(--ang)) translate(34px) rotate(calc(var(--ang) * -1)) scale(.6); } }

/* ============================================================
   HERO + live pump.fun trade terminal
   ============================================================ */
.hero{ position:relative; z-index:1; text-align:center;
  padding:clamp(40px,7vw,84px) 0 clamp(40px,6vw,72px); }
.hero__in{ display:flex; flex-direction:column; align-items:center; }
.hero__tag{ display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.16em; color:var(--green);
  background:var(--frost); border:1px solid var(--line); border-radius:999px; padding:6px 16px 6px 7px;
  box-shadow:0 4px 14px rgba(0,0,0,.4); margin-bottom:22px; }
.hero__tag-logo{ width:22px; height:22px; border-radius:6px; object-fit:cover; }
.hero__title{ font-size:clamp(34px,6vw,64px); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--txt);
  text-shadow:0 2px 24px rgba(0,0,0,.5); }
.hero__sub{ max-width:60ch; margin:18px auto 0; font-size:clamp(14px,2vw,17px); color:var(--txt-soft); font-weight:500; }

.terminal{ width:min(720px, 100%); margin:34px auto 0; text-align:left;
  background:var(--frost); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.terminal__head{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(198,248,51,.05); }
.terminal__title{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--txt); }
.terminal__src{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--txt-soft);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; background:var(--inset); }
.terminal__mc{ font-size:12px; color:var(--txt-soft); }
.terminal__status{ margin-left:auto; font-size:11.5px; font-weight:600; }
.terminal__status.is-live{ color:var(--green); }
.terminal__status.is-wait{ color:var(--txt-soft); }
.terminal__status.is-down{ color:var(--amber); }

.terminal__cols, .trade{ display:grid; grid-template-columns:60px 96px 1fr 120px 78px; gap:12px; align-items:center; }
.terminal__cols{ padding:9px 16px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green);
  background:var(--inset); }
.terminal__cols span:nth-child(2), .terminal__cols span:nth-child(3){ text-align:right; }
.terminal__cols span:nth-child(5){ text-align:right; }

.terminal__feed{ height:330px; overflow:hidden; background:var(--inset); padding:6px 0; }
.terminal__empty{ display:flex; align-items:center; justify-content:center; height:100%; padding:20px;
  font-size:13px; color:var(--txt-faint); text-align:center; }

.trade{ padding:8px 16px; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.04);
  animation:tradeIn .3s ease; }
@keyframes tradeIn{ from{ opacity:0; transform:translateY(-7px); } }
.trade__type{ font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-align:center;
  border-radius:5px; padding:3px 0; }
.trade--buy  .trade__type{ color:#0A0B0D; background:var(--green); }
.trade--sell .trade__type{ color:#1A0000; background:var(--red); }
.trade__sol{ text-align:right; font-weight:600; }
.trade--buy  .trade__sol{ color:var(--green-soft); }
.trade--sell .trade__sol{ color:#FF8A80; }
.trade__tok{ text-align:right; color:var(--txt-soft); }
.trade__who{ color:var(--txt-faint); }
.trade__time{ text-align:right; color:var(--txt-faint); }

.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.hero__agents{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px; }
.hero__agents-label{ font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-soft); }
.hero__agents .legend__items{ display:flex; gap:8px; }

@media (max-width:1080px){
  .grid5{ grid-template-columns:repeat(3,1fr); }
  .grid4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .terminal__cols, .trade{ grid-template-columns:50px 80px 1fr 70px; }
  .trade__who, .terminal__cols span:nth-child(4){ display:none; }
  .terminal__feed{ height:300px; }
}
@media (max-width:980px){
  .ctrl__hint{ display:none; }
  .world{ padding:90px 16px; }
}
@media (max-width:880px){
  .nav__links{ display:none; }
  .ctrl{ display:none; }                 /* keep the scene uncluttered on tablets/phones */
}
@media (max-width:760px){
  .game{ min-height:680px; }
  .world{ align-items:start; padding:236px 14px 104px; }   /* clear the brand card above + legend below */
  .terminal__feed{ height:248px; }
  .brand{ width:min(320px, calc(100vw - 28px)); }
  .grid3{ grid-template-columns:1fr; }
  .grid5{ grid-template-columns:repeat(2,1fr); }
  .grid4{ grid-template-columns:repeat(2,1fr); }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .fact:nth-child(3){ border-left:none; }
  .fact:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:480px){
  .grid5{ grid-template-columns:1fr; }
  .grid4{ grid-template-columns:1fr; }
  .brand__cta .btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }

/* ============================================================
   Hero live stream (replaces the centre terminal) + ticker HUD
   ============================================================ */
.stream{ position:absolute; inset:0; overflow:hidden; }
.stream__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--inset); }
.stream__scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.5) 100%); }
.stream__badge{ position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:rgba(10,11,13,.7); color:var(--txt); font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.04em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--line-2); }
.stream__offline{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; color:var(--txt-soft); background:radial-gradient(120% 90% at 50% 40%, #131417, #0A0B0D); }
.stream__offline p{ margin:6px 0 0; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--txt); }
.stream__offline small{ font-size:12.5px; color:var(--txt-faint); }

/* trade ticker moved to a compact bottom-right HUD */
.ticker{ right:18px; bottom:18px; width:min(360px, calc(100vw - 36px)); }
.ticker .terminal{ margin:0; width:100%; }
.ticker .terminal__feed{ max-height:188px; }
@media (max-width:980px){ .ticker{ display:none; } }

/* ============================================================
   Direct a mind — donate-prompts
   ============================================================ */
.direct{ background:linear-gradient(180deg, rgba(198,248,51,.05), transparent 40%); }
.dkick{ display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); background:rgba(198,248,51,.12); border:1px solid rgba(198,248,51,.3);
  padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.direct__grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:18px; align-items:start; }
@media (max-width:880px){ .direct__grid{ grid-template-columns:1fr; } }

.desk{ background:var(--frost); border:1px solid var(--line); border-radius:12px; padding:20px 20px 22px;
  box-shadow:0 14px 40px rgba(0,0,0,.5); }
.desk__step{ display:flex; align-items:center; gap:9px; margin:18px 0 11px; }
.desk__step:first-child{ margin-top:0; }
.desk__num{ width:21px; height:21px; border-radius:50%; background:var(--green); color:#0A0B0D;
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:0 0 auto; }
.desk__label{ font-size:13px; font-weight:700; color:var(--txt); letter-spacing:.01em; }

.desk__agents{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.dagent{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer;
  background:var(--inset); border:1.5px solid var(--line); transition:.15s; }
.dagent:hover{ border-color:var(--c); }
.dagent.is-on{ border-color:var(--c); box-shadow:0 0 0 2px var(--c) inset; background:var(--surface-2); }
.dagent__av{ width:24px; height:24px; border-radius:7px; color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto; }
.dagent__nm{ font-size:12.5px; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.modes{ display:flex; gap:6px; background:rgba(255,255,255,.04); padding:4px; border-radius:10px; }
.modes__tab{ flex:1; padding:8px 6px; border:0; background:transparent; border-radius:7px; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--txt-soft); transition:.15s; }
.modes__tab.is-on{ background:var(--surface-2); color:var(--green); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.mode{ margin-top:12px; }
.pokes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
.poke{ padding:10px 12px; border-radius:9px; cursor:pointer; text-align:left;
  background:var(--inset); border:1.5px solid var(--line); font-size:12.5px; font-weight:600; color:var(--txt); transition:.15s; }
.poke:hover{ border-color:var(--bob); }
.poke.is-on{ border-color:var(--bob); background:rgba(198,248,51,.08); box-shadow:0 0 0 1.5px var(--bob) inset; }
.desk__text, .desk__select{ width:100%; box-sizing:border-box; padding:12px 13px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--inset); font-family:var(--font-body); font-size:13.5px; color:var(--txt); resize:vertical; }
.desk__text:focus, .desk__select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(198,248,51,.18); }
.desk__counter{ margin-top:6px; font-size:11px; color:var(--txt-soft); }
.desk__hint{ margin-top:8px; font-size:11.5px; color:var(--amber); font-weight:600; }

.pay{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pay__cur{ display:flex; gap:6px; }
.pay__chip{ padding:7px 11px; border-radius:8px; cursor:pointer; background:var(--inset); border:1.5px solid var(--line);
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--txt-soft); transition:.15s; }
.pay__chip.is-on{ border-color:var(--green); color:var(--green); background:rgba(198,248,51,.1); }
.pay__chip.is-soon, .pay__chip:disabled{ opacity:.5; cursor:not-allowed; }
.pay__price{ font-size:13px; color:var(--txt-soft); }
.pay__price b{ color:var(--txt); }

.desk__cta{ width:100%; margin-top:14px; padding:13px; font-size:14px; }
.desk__status{ margin-top:10px; font-size:12.5px; min-height:16px; color:var(--txt-soft); }
.desk__status.is-ok{ color:var(--green); font-weight:600; }
.desk__status.is-bad{ color:var(--red); font-weight:600; }
.desk__wallet{ margin-top:10px; font-size:12px; color:var(--txt-soft); display:flex; align-items:center; gap:7px; }
.desk__wallet b{ color:var(--txt); }

.board{ background:transparent; border:0; border-radius:0; overflow:visible;
  display:flex; flex-direction:column; }
.board__head{ padding:12px 15px; border-bottom:1px solid var(--line); color:var(--txt);
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.05em; display:flex; align-items:center; gap:8px; }
.board__feed{ padding:8px; overflow-y:auto; flex:1; max-height:420px; }
.board__empty{ padding:26px 14px; text-align:center; color:var(--txt-faint); font-size:12.5px; }
.dline{ padding:9px 10px; border-radius:8px; margin-bottom:6px; background:rgba(255,255,255,.03);
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:12px; animation:tradeIn .3s ease; }
.dline.is-done{ opacity:.62; }
.dline__who{ font-family:var(--font-mono); color:var(--txt-soft); }
.dline__arrow{ color:var(--txt-faint); }
.dline__agent{ font-weight:700; color:var(--txt); }
.dline__txt{ flex:1 1 100%; color:var(--txt-soft); font-style:italic; }
.dline__tag{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--txt-soft); }
.dline.is-live .dline__tag{ color:var(--gold); }

/* ---- hide/show the HUD over the stream ---- */
.hudtoggle{ position:absolute; top:18px; right:18px; z-index:5; display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px; border:1px solid var(--line-2);
  background:rgba(10,11,13,.55); color:var(--txt); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.02em; cursor:pointer; transition:.15s; }
.hudtoggle:hover{ background:rgba(10,11,13,.75); transform:translateY(-1px); }
.hudtoggle svg{ width:17px; height:17px; fill:currentColor; }
.hudtoggle__off{ display:none; }
.game.is-clean .hud{ display:none !important; }
.game.is-clean .hudtoggle__on{ display:none; }
.game.is-clean .hudtoggle__off{ display:inline; }
@media (max-width:560px){ .hudtoggle__lbl{ display:none; } .hudtoggle{ padding:8px; } }

.stream__embed{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; }

/* ============================================================
   Provider logos on avatars (brand.js) + on-air scene state
   ============================================================ */
.sim__avatar, .dagent__av, .hh{ position:relative; overflow:hidden; }
.avletter{ position:relative; z-index:1; }
.brandlogo{ position:absolute; inset:0; margin:auto; width:60%; height:60%; object-fit:contain; z-index:2;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* when a logo is shown, dim the fallback letter underneath */
.brandlogo + .avletter, .avletter:has(+ .brandlogo){ opacity:0; }
.dagent__av .brandlogo{ width:64%; height:64%; }
/* OpenAI mark is black → flip on our dark chips (single dark theme) */
.brandlogo[src*="gpt"]{ filter:invert(1); }

/* legend buttons double as live-screen switchers */
.hh{ cursor:pointer; transition:transform .15s, box-shadow .2s, outline-color .2s; outline:2px solid transparent; outline-offset:2px; }
.hh:hover{ transform:translateY(-2px) scale(1.06); box-shadow:0 6px 16px rgba(0,0,0,.5); }
.hh--onair{ outline-color:var(--red); box-shadow:0 0 0 2px var(--red), 0 0 14px rgba(255,77,77,.6); }
.hh--onair::after{ content:"ON AIR"; position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.06em; color:var(--red); white-space:nowrap; z-index:3; }

/* ============================================================
   Lively hover animations (#4)
   ============================================================ */
/* shine sweep on primary buttons */
.btn{ position:relative; overflow:hidden; }
.btn::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); transition:left .55s ease; }
.btn:hover::before{ left:130%; }
.btn--green:hover{ box-shadow:0 8px 22px var(--green-glow); }
.btn--white:hover{ box-shadow:0 8px 20px rgba(0,0,0,.4); background:rgba(255,255,255,.06); }

.poke, .dagent, .pay__chip, .modes__tab, .livechip, .footer__x, .nav__links a, .desk__cta{
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .15s ease; }
.poke:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 8px 20px rgba(198,248,51,.22); }
.dagent:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.dagent.is-on{ animation:agentPop .25s ease; }
@keyframes agentPop{ 0%{ transform:scale(.96); } 60%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
.pay__chip:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,.4); }
.sim:hover .sim__avatar .brandlogo{ transform:scale(1.08); transition:transform .2s; }
.footer__x:hover{ transform:translateY(-1px); }
.cta-pulse{ animation:ctaPulse 2.2s ease-in-out infinite; }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 2px 6px rgba(198,248,51,.4); } 50%{ box-shadow:0 4px 20px rgba(198,248,51,.7); } }
.hudtoggle:hover{ transform:translateY(-1px) scale(1.03); }
@media (prefers-reduced-motion: reduce){ .btn::before{ display:none; } .dagent.is-on{ animation:none; } .cta-pulse{ animation:none; } }

/* ============================================================
   Avatars: dark chip + brand-color logo + colored ring
   ============================================================ */
.sim__avatar, .dagent__av{ background:var(--inset); border:2px solid var(--c, var(--line-2)); }
.hh{ background:var(--inset); border:2px solid var(--c, var(--line-2)); }
.brandlogo{ width:66%; height:66%; filter:none; }
.hh .brandlogo{ width:60%; height:60%; }
.avletter{ color:var(--c, var(--txt)); font-weight:800; }

/* ============================================================
   Single dark theme (body.dark collapsed to match the default)
   ============================================================ */
:root{ --page:var(--bg); }
body{ background:var(--page); transition:background .45s ease, color .3s ease; }
body.dark{
  --ink:var(--txt); --ink-soft:var(--txt-soft); --blue-label:var(--green); --blue-deep:#9FD41F;
  --frost:var(--surface); --frost-line:var(--line); --page:var(--bg);
}
body.dark .game{ background:
  radial-gradient(60% 38% at 74% 22%, rgba(198,248,51,.10), transparent 60%),
  radial-gradient(50% 40% at 12% 90%, rgba(198,248,51,.06), transparent 60%),
  linear-gradient(180deg, #0A0B0D 0%, #0E1013 60%, #0A0B0D 100%); }
body.dark .nav{ background:rgba(10,11,13,.85); }
body.dark .brand, body.dark .ticker .terminal, body.dark .desk, body.dark .sim, body.dark .panel,
body.dark .mcard, body.dark .fact, body.dark .gbanner, body.dark .step .card{ background:var(--frost); border-color:var(--line); }
body.dark .brand__name, body.dark .shead h2, body.dark .desk__label, body.dark .sname,
body.dark .sim__name, body.dark .fact__value, body.dark .footer__brand{ color:var(--txt); }
body.dark .footer{ background:rgba(10,11,13,.7); }
body.dark .sim__avatar, body.dark .dagent__av, body.dark .hh{ background:var(--inset); }
body.dark .poke, body.dark .dagent, body.dark .pay__chip, body.dark input, body.dark select,
body.dark .desk__text, body.dark .desk__select{ background:var(--inset); color:var(--txt); border-color:var(--line); }
body.dark .brandlogo[src*="gpt"]{ filter:invert(1); }   /* OpenAI mark is black → flip on dark chip */

.themebtn{ background:none; border:1px solid var(--line-2); border-radius:9px; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer; color:var(--green); font-size:16px; transition:.15s; }
.themebtn:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
/* contract-address copy pill (revealed once a token mint is configured) */
.nav__ca{ font:600 12px/1 var(--font-mono,monospace); color:var(--green); background:rgba(198,248,51,.1);
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; cursor:pointer; white-space:nowrap; transition:.15s; }
.nav__ca:hover{ background:rgba(198,248,51,.18); transform:translateY(-1px); }
.nav__ca[hidden]{ display:none; }
body.dark .nav__ca{ color:var(--green); background:rgba(198,248,51,.1); border-color:var(--line); }

/* ============================================================
   Richer animated background (mesh + drifting dot grid)
   ============================================================ */
.bgfx__mesh{ position:absolute; inset:-30%; pointer-events:none; opacity:.55; filter:blur(64px);
  background:
    radial-gradient(34% 34% at 20% 28%, rgba(198,248,51,.35), transparent 60%),
    radial-gradient(30% 30% at 82% 24%, rgba(198,248,51,.22), transparent 60%),
    radial-gradient(40% 40% at 62% 82%, rgba(198,248,51,.28), transparent 62%);
  animation:meshSpin 34s ease-in-out infinite alternate; }
@keyframes meshSpin{ to{ transform:rotate(22deg) scale(1.18); } }
body.dark .bgfx__mesh{ opacity:.5; }
.bgfx__pattern{ position:absolute; inset:-25%; pointer-events:none; opacity:.6;
  background-image:radial-gradient(circle at center, var(--dotc, rgba(198,248,51,.12)) 1.5px, transparent 1.7px);
  background-size:44px 44px; animation:patternDrift 38s linear infinite; }
@keyframes patternDrift{ to{ transform:translate(44px,44px); } }
body.dark .bgfx__pattern{ --dotc:rgba(198,248,51,.10); }
@media (prefers-reduced-motion: reduce){ .bgfx__mesh,.bgfx__pattern{ animation:none; } }

/* ============================================================
   CSS blob fallback (shown only when the WebGL nebula isn't active)
   ============================================================ */
html:not(.has-nebula) #shaderbg{ display:none !important; } /* hidden only when the WebGL nebula isn't active */
html.has-nebula #shaderbg{ display:block !important; }
.bgfx{ display:block !important; position:fixed !important; inset:-12% !important; z-index:-1 !important;
  pointer-events:none; overflow:hidden; }
.bgfx__mesh, .bgfx__pattern, .bgfx__grain, .bgfx__cloud, .bgfx__cloud--1, .bgfx__cloud--2,
.bgfx__bob, .bgfx__bob--1, .bgfx__bob--2, .bgfx__bob--3{ display:none !important; }
.bgfx__blob{ position:absolute !important; border-radius:50% !important; filter:blur(60px) !important;
  opacity:.55 !important; width:54vw !important; height:54vw !important; will-change:transform; }
.bgfx__blob--1{ background:radial-gradient(circle at 50% 50%, #C6F832 0%, rgba(198,248,51,0) 70%) !important;
  top:-10%; left:-8%; right:auto; bottom:auto; animation:blobA 10s ease-in-out infinite; }
.bgfx__blob--2{ background:radial-gradient(circle at 50% 50%, #9FD41F 0%, rgba(0,160,4,0) 70%) !important;
  top:14%; right:-12%; left:auto; bottom:auto; animation:blobB 12s ease-in-out infinite; }
.bgfx__blob--3{ background:radial-gradient(circle at 50% 50%, #D6FF52 0%, rgba(0,230,6,0) 70%) !important;
  bottom:-14%; left:28%; top:auto; right:auto; animation:blobC 14s ease-in-out infinite; }
/* clearly-noticeable but smooth: 4-point drift + scale + opacity breathing */
@keyframes blobA{ 0%{transform:translate(0,0) scale(1);opacity:.55} 33%{transform:translate(34vw,14vh) scale(1.45);opacity:.7} 66%{transform:translate(14vw,32vh) scale(.88);opacity:.45} 100%{transform:translate(0,0) scale(1);opacity:.55} }
@keyframes blobB{ 0%{transform:translate(0,0) scale(1);opacity:.5} 33%{transform:translate(-30vw,22vh) scale(1.35);opacity:.44} 66%{transform:translate(-10vw,-14vh) scale(1.08);opacity:.66} 100%{transform:translate(0,0) scale(1);opacity:.5} }
@keyframes blobC{ 0%{transform:translate(0,0) scale(1.1);opacity:.5} 33%{transform:translate(22vw,-22vh) scale(.84);opacity:.62} 66%{transform:translate(-16vw,-8vh) scale(1.3);opacity:.42} 100%{transform:translate(0,0) scale(1.1);opacity:.5} }

/* ============================================================
   LIVE AGENT DASHBOARD (on-stream overlay, native) + DIRECT panel + queue
   ============================================================ */
.board{ margin-top:18px; display:flex; flex-direction:column; gap:16px; }
.board__minds{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.mind{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--c,var(--green)); border-radius:12px;
  padding:12px; min-width:0; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.mind__top{ display:flex; align-items:center; gap:7px; }
.mind__dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.mind__dot.is-live{ background:var(--green); } .mind__dot.is-off{ background:var(--txt-faint); }
.mind__dot.is-think{ background:var(--gold); animation:mindpulse 1.1s ease-in-out infinite; }
@keyframes mindpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.mind__name{ font-weight:700; color:var(--txt); font-size:13.5px; }
.mind__model{ margin-left:auto; font:600 10px/1 var(--font-mono,monospace); color:var(--txt-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92px; }
.mind__act{ margin-top:8px; font-size:12.5px; font-weight:600; color:var(--c,var(--green)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mind__thought{ margin-top:5px; font-size:12px; line-height:1.45; color:var(--txt-soft); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

.board__row{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:stretch; }
.direct{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.direct__head{ font:700 16px/1.2 var(--font-display,sans-serif); color:var(--txt); }
.direct__sub{ margin:6px 0 12px; font-size:12.5px; line-height:1.4; color:var(--txt-soft); }
.direct__agents{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.pick{ cursor:pointer; border:1.5px solid var(--line-2); background:transparent; color:var(--txt); border-radius:999px; padding:6px 13px; font-weight:600; font-size:13px; }
.pick.is-on{ background:var(--c,var(--green)); color:#fff; border-color:var(--c,var(--green)); }
.direct__input{ width:100%; padding:11px 12px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; background:var(--inset); color:var(--txt); }
.direct__input:focus{ outline:none; border-color:var(--green); }
/* pre-approved directive menu (replaces the free-text input) */
.direct__catalog{ display:flex; flex-direction:column; gap:9px; margin-bottom:10px; }
.dcat__empty{ color:var(--txt-soft); font-size:13px; padding:4px 0; }
.dcat__group{ display:flex; flex-direction:column; gap:5px; }
.dcat__glabel{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-faint); }
.dcat__row{ display:flex; flex-wrap:wrap; gap:6px; }
.dcat{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1.5px solid var(--line-2); background:var(--inset);
  color:var(--txt); border-radius:9px; padding:6px 10px; font-size:12.5px; font-weight:600; line-height:1.15; transition:border-color .12s, background .12s; }
.dcat:hover{ border-color:var(--green); }
.dcat.is-on{ border-color:var(--green); background:rgba(198,248,51,.12); }
.dcat__price{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--green); }
.dcat.is-on .dcat__price{ color:var(--green); }
/* target picker (two_sim directives only) */
.direct__target{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 10px;
  padding:8px 10px; border:1px dashed var(--line-2); border-radius:10px; background:color-mix(in srgb, var(--green) 5%, transparent); }
.direct__tlabel{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-faint); margin-right:2px; }
.direct__cur{ display:flex; gap:6px; margin:10px 0; }
.direct__cur{ flex-wrap:wrap; }
.direct__cur .pay__chip{ cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--txt-soft); border-radius:8px; padding:5px 11px; font-size:12.5px; }
.direct__cur .pay__chip.is-on{ background:var(--green); color:#0A0B0D; border-color:var(--green); }
.pay__chip .pay__bal{ opacity:.7; font-family:var(--font-mono); font-size:11px; }
.pay__chip.is-on .pay__bal{ opacity:.85; }
.pay__scanlabel, .pay__hint{ width:100%; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-faint); margin-bottom:2px; }
.pay__hint{ text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:12.5px; color:var(--txt-soft); }
.direct__wallet{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.direct__connect, .direct__buy{ padding:8px 13px; border:0; border-radius:10px; background:var(--green); color:#0A0B0D; font-weight:700; cursor:pointer; font-size:13px; }
.direct__wal{ display:flex; align-items:center; gap:6px; color:var(--txt); font-size:13px; }
.direct__send{ width:100%; }
.direct__send:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.direct__status{ margin-top:8px; font-size:13px; min-height:16px; }
.direct__status.is-bad{ color:var(--red); } .direct__status.is-ok{ color:var(--green); }

/* queue card stretches to match the Direct panel height; long queues scroll INSIDE, never grow past it */
.board__queue{ position:relative; min-height:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.board__qhead{ display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; color:var(--txt); }
.board__qfeed{ position:absolute; left:0; right:0; top:46px; bottom:0; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:6px; }
.board__empty{ color:var(--txt-soft); font-size:13px; text-align:center; margin:auto; padding:16px 0; }
.qrow{ font-size:12.5px; color:var(--txt); display:flex; align-items:baseline; gap:6px; line-height:1.4; }
.qtag{ flex:none; font-size:12px; }
.qrow__agent{ font-weight:700; color:var(--c,var(--green)); flex:none; }
.qrow__txt{ color:var(--txt-soft); word-break:break-word; }

/* ── agent-card focus flash: jump + pulse the card a directive just landed on ── */
.mind{ scroll-margin-top:84px; transition:box-shadow .25s, transform .25s, border-color .25s; }
.mind--focus{ border-color:var(--c,var(--green)); transform:translateY(-3px);
  box-shadow:0 0 0 3px var(--c,var(--green)), 0 16px 40px rgba(0,0,0,.6); animation:mindFlash 1.2s ease-in-out 2; }
@keyframes mindFlash{ 0%,100%{ box-shadow:0 0 0 2px var(--c,var(--green)), 0 14px 30px rgba(0,0,0,.5); }
  50%{ box-shadow:0 0 0 6px var(--c,var(--green)), 0 18px 46px rgba(0,0,0,.7); } }

/* ── leaderboard (20-min round, share of a SOL pool) ── */
.lboard{ margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.lboard__head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lboard__title{ font:700 16px/1.2 var(--font-display,sans-serif); color:var(--txt); }
.lboard__round{ font-size:13px; color:var(--txt-soft); } .lboard__round b{ color:var(--red); font-variant-numeric:tabular-nums; }
.lboard__pool{ margin-left:auto; font-size:13px; color:var(--txt-soft); } .lboard__pool b{ color:var(--green); font-size:15px; }
.lboard__sub{ margin:6px 0 12px; font-size:12.5px; line-height:1.4; color:var(--txt-soft); }
.lboard__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lboard__empty{ color:var(--txt-soft); font-size:13px; text-align:center; padding:14px 0; }
.lbrow{ display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.04); }
.lbrow--top{ background:linear-gradient(90deg, rgba(198,248,51,.16), rgba(198,248,51,.03)); }
.lbrow__rank{ font-weight:800; color:var(--txt-soft); text-align:center; } .lbrow--top .lbrow__rank{ color:var(--green); }
.lbrow__who{ font-family:var(--font-mono,monospace); font-size:13px; color:var(--txt); overflow:hidden; text-overflow:ellipsis; }
.lbrow__amt{ font-weight:700; font-size:13px; color:var(--txt); font-variant-numeric:tabular-nums; }
.lboard__last{ margin-top:10px; font-size:12px; color:var(--txt-soft); }

/* ── payout console (operator only, ?admin=KEY) ── */
.payout{ margin-top:14px; background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:16px 18px; color:var(--txt); }
.payout[hidden]{ display:none; }
.payout__head{ font-weight:700; display:flex; align-items:center; gap:8px; }
.payout__tag{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; background:var(--red); color:#fff; padding:2px 7px; border-radius:6px; }
.payout__wallet{ margin:8px 0; font-size:13px; color:var(--txt-soft); }
.payout__round{ border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; margin-top:10px; }
.payout__round.is-paid{ opacity:.5; }
.payout__win{ display:flex; justify-content:space-between; gap:10px; font-family:var(--font-mono,monospace); font-size:12px; padding:2px 0; }
.payout__btn,.payout__connect{ margin-top:8px; border:0; border-radius:9px; padding:8px 14px; background:var(--green); color:#0A0B0D; font-weight:700; cursor:pointer; font-size:13px; }
.payout__btn:disabled{ opacity:.5; cursor:default; }
.payout__status{ margin-top:8px; font-size:13px; min-height:16px; }
.payout__status.is-bad{ color:#FF8A80; } .payout__status.is-ok{ color:#9AE6A0; }
body.dark .lboard{ background:var(--surface); border-color:var(--line); }
body.dark .lbrow{ background:rgba(255,255,255,.05); }
body.dark .lbrow__who, body.dark .lbrow__amt, body.dark .lboard__title{ color:var(--txt); }

@media (max-width:880px){
  .board__minds{ grid-template-columns:repeat(2,1fr); }
  .board__row{ grid-template-columns:1fr; }
  /* stacked: queue flows normally with its own scroll cap (the absolute fill only makes sense beside Direct) */
  .board__qfeed{ position:static; top:auto; max-height:320px; }
}
body.dark .mind, body.dark .direct, body.dark .board__queue{ background:var(--surface); border-color:var(--line); box-shadow:0 10px 30px rgba(0,0,0,.45); }
body.dark .mind__name, body.dark .direct__head, body.dark .board__qhead, body.dark .qrow, body.dark .direct__wal{ color:var(--txt); }
body.dark .mind__thought, body.dark .qrow__txt, body.dark .direct__sub, body.dark .mind__model{ color:var(--txt-soft); }
body.dark .direct__input{ background:var(--inset); color:var(--txt); border-color:var(--line-2); }
body.dark .pick, body.dark .direct__cur .pay__chip{ color:var(--txt); border-color:var(--line-2); }
@media (prefers-reduced-motion: reduce){ .bgfx__blob{ animation:none !important; } }
body.dark .bgfx__blob{ opacity:.5 !important; }
body.dark .bgfx__blob--1{ background:radial-gradient(circle at 50% 50%, #C6F832 0%, rgba(198,248,51,0) 70%) !important; }
body.dark .bgfx__blob--2{ background:radial-gradient(circle at 50% 50%, #9FD41F 0%, rgba(0,160,4,0) 70%) !important; }
body.dark .bgfx__blob--3{ background:radial-gradient(circle at 50% 50%, #D6FF52 0%, rgba(0,230,6,0) 70%) !important; }
body{
  background:linear-gradient(125deg,#0A0B0D,#0E1013,#0A0B0D,#0E1013,#0A0B0D) !important;
  background-attachment:fixed !important;
}
body.dark{
  background:linear-gradient(125deg,#0A0B0D,#0E1013,#0A0B0D,#0E1013,#0A0B0D) !important;
  background-attachment:fixed !important;
}
/* CRITICAL: .stream__offline uses display:flex, which overrides [hidden] — without
   this the "starts soon" poster stays ON TOP of the live video. Force it to hide. */
#streamOffline[hidden]{ display:none !important; }
/* HUD removed from the stream view (brand card + Hide-UI toggle) — keeps the hero clean */
.hud.brand, .hudtoggle{ display:none !important; }

/* ============================================================
   LANDING REDESIGN — pitch hero, then stream + chat (not fullscreen)
   ============================================================ */
.hero{ min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:90px 20px 56px; position:relative; }
.hero__inner{ max-width:780px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero__logo{ width:74px; height:74px; border-radius:18px; box-shadow:0 12px 34px rgba(0,0,0,.55); }
.hero__kicker{ font:700 11.5px/1 var(--font-mono,"JetBrains Mono",monospace); letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); background:rgba(198,248,51,.12); padding:6px 13px; border-radius:999px; }
.hero__title{ font:800 clamp(34px,6vw,62px)/1.05 var(--font-display,"Inter",sans-serif); margin:4px 0; color:var(--txt); letter-spacing:-.01em; }
.hero__sub{ margin:0; font-size:clamp(15px,2.1vw,19px); line-height:1.55; color:var(--txt-soft); max-width:640px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.btn--lg{ padding:14px 28px; font-size:16px; }
.hero__steps{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.hero__steps span{ font-size:13px; color:var(--txt-soft); background:rgba(255,255,255,.04);
  border:1px solid var(--line); padding:8px 14px; border-radius:999px; }
.hero__steps b{ color:var(--green); }
.hero__down{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:26px;
  color:var(--txt-soft); text-decoration:none; animation:hbob 1.8s ease-in-out infinite; }
@keyframes hbob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,9px) } }

.watch{ padding:26px 0 54px; }
/* the LIVE section breaks out wider than the 1180 site grid so the player is big */
.watch .container{ max-width:1460px; }
.watch__grid{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.watch__main{ min-width:0; }
/* override the old fullscreen .stream → a contained 16:9 player */
.watch .stream{ position:relative; inset:auto; width:100%; aspect-ratio:16/9; border-radius:16px;
  overflow:hidden; background:var(--inset); box-shadow:0 18px 50px rgba(0,0,0,.55); }
.watch__cap{ margin:10px 0 0; text-align:center; font-size:14px; color:var(--txt-soft); }
/* fullscreen toggle on the stream */
.stream__fs{ position:absolute; top:10px; right:10px; z-index:4; width:34px; height:34px; border:0; border-radius:9px;
  background:rgba(0,0,0,.45); color:#fff; font-size:15px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); }
.stream__fs:hover{ background:rgba(0,0,0,.7); }
/* one-tap unmute (browsers force muted autoplay) — clearly visible, bottom-center */
.stream__unmute{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:5;
  border:0; border-radius:999px; padding:9px 16px; cursor:pointer; font-weight:700; font-size:13.5px;
  background:rgba(10,11,13,.8); color:#fff; backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.45);
  display:flex; align-items:center; gap:6px; animation:unmutePulse 1.8s ease-in-out infinite; }
.stream__unmute:hover{ background:var(--green); color:#0A0B0D; }
.stream__unmute[hidden]{ display:none; }
@keyframes unmutePulse{ 0%,100%{ box-shadow:0 6px 18px rgba(0,0,0,.45); } 50%{ box-shadow:0 6px 26px rgba(198,248,51,.7); } }
.stream:fullscreen{ width:100vw; height:100vh; aspect-ratio:auto; border-radius:0; }
.stream:fullscreen .stream__video{ object-fit:contain; background:#000; }
.stream:-webkit-full-screen{ width:100vw; height:100vh; border-radius:0; }
.stream:-webkit-full-screen .stream__video{ object-fit:contain; background:#000; }

/* chat panel */
.chat{ display:flex; flex-direction:column; height:clamp(440px,52vw,600px);
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5); }
.chat__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--line); font-weight:700; color:var(--txt); }
.chat__title{ display:flex; align-items:center; gap:8px; }
.chat__help{ font:600 12px/1 var(--font-mono,monospace); color:var(--green); background:rgba(198,248,51,.12);
  border:0; border-radius:999px; padding:6px 11px; cursor:pointer; }
.chat__feed{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.chat__empty{ margin:auto; text-align:center; color:var(--txt-soft); font-size:14px; line-height:1.5; }
.chat__empty code, .cmsg code{ background:rgba(198,248,51,.12); color:var(--green); padding:1px 6px; border-radius:6px; font-size:.9em; }
.cmsg{ font-size:14px; line-height:1.45; word-break:break-word; color:var(--txt); position:relative; }
.cmsg__who{ font-weight:700; color:var(--green); margin-right:6px; }
/* operator chat moderation (shown only with ?admin=KEY) */
.cmsg__del{ border:0; background:transparent; color:var(--red); cursor:pointer; font-size:12px; opacity:0; margin-left:6px; padding:0 4px; transition:opacity .12s; }
.cmsg:hover .cmsg__del{ opacity:.85; }
.cmsg__del:hover{ opacity:1; }
.chat__clear{ border:1px solid rgba(255,77,77,.4); background:rgba(255,77,77,.1); color:var(--red); border-radius:8px; padding:4px 9px; font-size:12px; font-weight:600; cursor:pointer; }
.chat__clear:hover{ background:rgba(255,77,77,.18); }
.cmsg.is-mine .cmsg__who{ color:var(--green-soft); }
.cmsg__arr{ color:var(--txt-soft); margin:0 5px; }
.cmsg.cdir{ background:rgba(198,248,51,.08); border:1px solid rgba(198,248,51,.18); border-radius:10px; padding:8px 10px; }
.cmsg__agent{ font-weight:700; color:var(--c,var(--green)); }
.cmsg__tag{ font-size:11px; margin-left:6px; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.cmsg__tag.is-live{ background:rgba(201,154,0,.18); color:var(--gold); }
.cmsg__tag.is-done{ background:rgba(198,248,51,.16); color:var(--green); }
.cmsg__tag.is-skip{ background:rgba(255,77,77,.14); color:var(--red); }
.cmsg__sys{ font-size:13px; font-style:italic; color:var(--txt-soft); }
.cmsg__sys.bad{ color:var(--red); font-style:normal; } .cmsg__sys.ok{ color:var(--green); font-style:normal; }
.chat__bar{ padding:9px 12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px; }
.chat__connect{ width:100%; }
.chat__connect, .chat__buy{ padding:9px 13px; border:0; border-radius:10px; background:var(--green); color:#0A0B0D; font-weight:700; cursor:pointer; font-size:13.5px; }
.chat__buy{ flex:1 0 100%; margin-top:4px; }
.chat__wal{ display:flex; align-items:center; gap:6px; color:var(--txt); }
.chat__curs{ display:inline-flex; gap:4px; }
.chat__cur{ cursor:pointer; color:var(--txt-soft); background:transparent; border:1px solid var(--line-2); border-radius:8px; padding:4px 9px; font-size:12.5px; white-space:nowrap; }
.chat__cur.is-on{ background:var(--green); color:#0A0B0D; border-color:var(--green); }
body.dark .chat__cur{ color:var(--txt-soft); border-color:var(--line-2); }
.chat__form{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }
.chat__input{ flex:1; min-width:0; padding:11px 12px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; background:var(--inset); color:var(--txt); }
.chat__input:focus{ outline:none; border-color:var(--green); }
.chat__send{ width:44px; border:0; border-radius:10px; background:var(--green); color:#0A0B0D; font-size:15px; cursor:pointer; }
.chat__status{ padding:0 14px 11px; font-size:13px; min-height:17px; }
.chat__status.is-bad{ color:var(--red); } .chat__status.is-ok{ color:var(--green); }

@media (max-width:880px){
  .watch__grid{ grid-template-columns:1fr; }
  .chat{ height:460px; }
  .hero{ min-height:74vh; }
}

/* single dark theme: body.dark mirrors the default */
body.dark .hero__steps span{ background:rgba(255,255,255,.04); border-color:var(--line); color:var(--txt-soft); }
body.dark .chat{ background:var(--surface); border-color:var(--line); box-shadow:0 18px 50px rgba(0,0,0,.5); }
body.dark .chat__head{ border-color:var(--line); color:var(--txt); }
body.dark .cmsg{ color:var(--txt); }
body.dark .cmsg__who{ color:var(--green); }
body.dark .chat__input{ background:var(--inset); color:var(--txt); border-color:var(--line-2); }
body.dark .chat__form, body.dark .chat__bar{ border-color:var(--line); }
body.dark .cmsg.cdir{ background:rgba(198,248,51,.08); border-color:rgba(198,248,51,.18); }
.bgfx{ display:none; }  /* CSS blobs/mesh/pattern replaced by the shader */

/* readability over the animated background — a dark halo so text pops over the busy shader */
.shead h2, .shead p, .section__sub, .dkick{ text-shadow:0 1px 2px rgba(0,0,0,.85), 0 1px 16px rgba(0,0,0,.6); }
body.dark .shead h2, body.dark .shead p, body.dark .section__sub, body.dark .dkick{ text-shadow:0 1px 3px rgba(0,0,0,.8), 0 1px 16px rgba(0,0,0,.6); }

/* single dark theme: make sure NO text stays dark-on-dark (catch-all) */
body.dark{ color:var(--txt); }
body.dark h1, body.dark h2, body.dark h3{ color:var(--txt); }
body.dark p, body.dark .shead p, body.dark .sim__flavor, body.dark .mcard, body.dark .fact__label,
body.dark .sim__provider, body.dark .desk__counter, body.dark .desk__hint, body.dark .pay__price,
body.dark .board__empty, body.dark .footer__tag{ color:var(--txt-soft); }
body.dark .chip, body.dark .sim__tracks-label, body.dark .nav__links a, body.dark .footer__x{ color:var(--txt-soft); }
body.dark .desk__num, body.dark .btn--green{ color:#0A0B0D; }
/* pay/send text: these were hardcoded dark → invisible/dim on the dark panel */
body.dark .pay__price b{ color:var(--txt); }
body.dark .desk__status.is-ok{ color:#5FE0A0; }
body.dark .desk__status.is-bad{ color:#FF8F7E; }
body.dark .modes__tab.is-on{ color:var(--green); background:rgba(255,255,255,.08); }

/* ============================================================
   Glassier blocks over the shader (less "in your face")
   ============================================================ */
:root{ --frost: rgba(19,20,23,.72); }
body.dark{ --frost: rgba(19,20,23,.72); }
.panel, .sim, .mcard, .fact, .desk, .gbanner, .brand, .ticker .terminal, .step .card{
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); }
/* metric + fact cards: most translucent (these were too prominent) */
.mcard{ background:rgba(19,20,23,.55); border-color:var(--line); }
.fact{ background:rgba(19,20,23,.5); }
body.dark .mcard{ background:rgba(19,20,23,.55); border-color:var(--line); }
body.dark .fact{ background:rgba(19,20,23,.5); }