/* ============================================================
   5imulites v6 — one frame of The Sims 4, replicated from the
   reference screenshot: sunny world, floating HUD islands,
   white frosted needs panel with blue labels, dark pill bars.
   ============================================================ */

:root{
  /* TS4 live-mode palette (sampled from the reference) */
  --blue-label: #336b9d;          /* needs labels */
  --blue-deep:  #24477c;          /* tooltip header */
  --green-bar:  #57c63f;          /* bar fill */
  --green-play: #58c443;          /* active play */
  --track:      rgba(43,58,40,.8);/* unfilled bar */
  --ink:        #2c4a61;          /* text on light panels */
  --ink-soft:   #5f7d93;

  --frost:      rgba(250,253,255,.9);     /* white frosted panel */
  --frost-line: rgba(110,145,175,.28);    /* hairline separators */
  --dark:       rgba(36,42,48,.78);       /* dark translucent pill */
  --dark-line:  rgba(255,255,255,.14);

  --gold:   #c98f00;
  --bob:    #33d658;
  --amber:  #f2a31e;
  --red:    #e8533a;

  --shadow-island: 0 6px 22px rgba(15,40,60,.30);

  --font-display: "Sora", 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:#e8f4fc; color:var(--ink);
  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); 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; }

/* ============================================================
   Plumbob + live dot
   ============================================================ */
/* brand mark (our logo, no background) — replaces the old green plumbob */
.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 rgba(47,120,200,.35));
  animation:bobFloat 3.2s ease-in-out infinite; }
.plumbob--sm{ --s:22px; }
.plumbob--xl{ --s:88px; filter:drop-shadow(0 6px 20px rgba(47,120,200,.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(51,214,88,.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(255,250,210,.34), transparent 60%),
    radial-gradient(50% 40% at 12% 90%, rgba(120,210,140,.22), transparent 60%),
    linear-gradient(180deg, #8ec3e8 0%, #a6d3ec 32%, #8fbf6e 60%, #6fae4a 100%); }
.game::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 130px rgba(20,40,60,.22); }

/* 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 as a TS4 notification ---- */
.brand{ top:18px; left:18px; width:min(330px, calc(100vw - 36px));
  background:var(--frost); border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow-island), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.brand__head{ background:linear-gradient(180deg, #3c79c4, var(--blue-deep)); color:#fff;
  font-family:var(--font-display); font-weight:600; 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 #fff; box-shadow:0 2px 8px rgba(15,40,60,.25); }
.brand__name{ font-size:20px; font-weight:700; letter-spacing:.08em; color:#1d3a52; line-height:1.1; }
.brand__tag{ margin:3px 0 0; font-size:12px; font-weight:500; color:var(--ink-soft); line-height:1.35; }
.brand__cta{ display:flex; gap:8px; padding:10px 14px 13px; }
.brand__live{ border-top:1px solid var(--frost-line); padding:8px 14px; display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--ink-soft); }
.brand__live b{ color:#c83a2a; letter-spacing:.06em; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-display); font-weight:600; 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:#fff; background:linear-gradient(180deg, #66d44e, #3fae2e);
  box-shadow:0 2px 6px rgba(50,140,40,.4), inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.25); }
.btn--white{ color:var(--blue-label); background:#fff; border:1px solid var(--frost-line);
  box-shadow:0 2px 6px rgba(15,40,60,.12); }

/* ---- 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:600; font-size:13px; letter-spacing:.1em; color:#fff;
  text-shadow:0 1px 4px rgba(15,40,60,.6); }
.ctrl__chip{ font-size:10px; font-weight:600; color:#fff; border:1.5px solid rgba(255,255,255,.85);
  border-radius:7px; padding:2px 6px; background:rgba(255,255,255,.12); }
.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,.22); border:1.5px solid rgba(255,255,255,.6);
  box-shadow:0 3px 10px rgba(15,40,60,.25), inset 0 1px 0 rgba(255,255,255,.35);
  -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(15,40,60,.4)); }
.cbtn:hover{ background:rgba(255,255,255,.38); transform:translateY(-1px); }

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

/* moodlet tooltip (white card, blue header) */
.tip{ width:min(300px, calc(100vw - 36px)); background:#fff; border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow-island); }
.tip__head{ background:linear-gradient(180deg, #3c79c4, var(--blue-deep)); color:#fff;
  font-family:var(--font-display); font-weight:600; 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:#16334a; }
.tip__sub{ font-size:12px; font-weight:600; color:#3c79c4; }
.tip__body p{ margin:2px 0 0; font-size:12.5px; color:#39536b; line-height:1.4; }
.tip__time{ margin-top:5px; font-size:11px; color:#7b93a8; }

/* 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(15,40,60,.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,.75); box-shadow:0 3px 10px rgba(15,40,60,.3);
  animation:qpop .25s ease backwards; }
.qchip svg{ width:22px; height:22px; fill:#fff; filter:drop-shadow(0 1px 1px rgba(15,40,60,.4)); }
.qchip--now{ background:linear-gradient(180deg, #4d9be8, #2c66b8); }
.qchip--queued{ background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 32%), rgba(230,246,228,.85);
  border-color:rgba(255,255,255,.85); }
.qchip--queued svg{ fill:#3f8f37; 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:#c83a2a; border:1.5px solid #fff; }
@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(--blue-label); background:var(--frost); border:1px solid rgba(255,255,255,.8);
  box-shadow:0 3px 10px rgba(15,40,60,.22), inset 0 1px 0 #fff;
  -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.04); }
.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:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#cfe0ea; }
.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:700; font-size:15px; color:#fff;
  border:2px solid rgba(255,255,255,.65); opacity:.85;
  box-shadow:0 3px 9px rgba(15,40,60,.3), inset 0 -5px 8px rgba(0,0,0,.18);
  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 rgba(51,214,88,.7), 0 3px 9px rgba(15,40,60,.3), inset 0 0 0 1px rgba(255,255,255,.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:#e8f0f6; background:transparent; border:none; transition:color .15s, background .15s; }
.tbtn svg{ width:16px; height:16px; fill:currentColor; }
.tbtn:hover{ background:rgba(255,255,255,.12); }
.tbtn--active{ color:var(--green-play); background:rgba(88,196,67,.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 — white frosted, blue labels, grid separators */
.needs{ width:min(430px, calc(100vw - 36px));
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--frost); border:1px solid var(--frost-line); border-radius:9px; overflow:hidden;
  box-shadow:var(--shadow-island), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.need{ padding:9px 14px 11px; border-bottom:1px solid var(--frost-line); }
.need:nth-child(odd){ border-right:1px solid var(--frost-line); }
.need:nth-last-child(-n+2){ border-bottom:none; }
.need__label{ display:block; font-size:13px; font-weight:600; color:var(--blue-label); 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:#fff; border:1.5px solid rgba(110,145,175,.4); box-shadow:0 2px 4px rgba(15,40,60,.28); }
.need__icon svg{ width:12px; height:12px; fill:var(--ic, #3f8f37); }
.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,.35); }
.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,.45) 0%, rgba(255,255,255,.12) 45%, rgba(0,0,0,.12) 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:#dbe7f0; background:transparent; border:none; transition:background .15s, color .15s; }
.tabbtn svg{ width:16px; height:16px; fill:currentColor; }
.tabbtn:hover{ background:rgba(255,255,255,.14); 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(250,253,255,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--frost-line); }
.nav__brand{ display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.12em; color:#1d3a52; }
.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(--ink-soft); padding:7px 12px; border-radius:8px; transition:.15s; }
.nav__links a:hover{ color:var(--blue-label); background:rgba(60,121,196,.1); }
.nav__live{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.1em; color:#2f7d28;
  border:1px solid rgba(87,198,63,.35); border-radius:999px; padding:6px 14px; background:rgba(87,198,63,.1); }

/* ============================================================
   Sections — light TS4 frosted panels on a soft sky
   ============================================================ */
/* ============================================================
   Living background — fixed layer behind the sections:
   animated pastel mesh + drifting clouds + floating plumbobs
   ============================================================ */
.bgfx{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(60% 44% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, #c4e0f8 0%, #e3f2fd 46%, #cfe8f7 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(70,145,240,.42), 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(60,200,140,.36), 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(150,135,245,.24), 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(255,255,255,.85), rgba(255,255,255,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 plumbobs */
.bgfx__bob{ position:absolute; width:30px; height:30px; opacity:.13;
  background:url("logo.png") center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(47,120,200,.4)); }
.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:multiply;
  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 #fff; box-shadow:0 4px 12px rgba(30,70,110,.25); }
.shead h2{ font-size:clamp(26px,3.4vw,36px); font-weight:600; letter-spacing:-.02em; color:#1d3a52; }
.shead p{ margin:10px 0 0; font-size:15px; color:var(--ink-soft); }

.panel{ background:var(--frost); border:1px solid rgba(255,255,255,.9); border-radius:10px;
  box-shadow:0 10px 26px rgba(30,70,110,.10), inset 0 1px 0 rgba(255,255,255,.95);
  -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 rgba(255,255,255,.9); border-radius:10px;
  box-shadow:0 10px 26px rgba(30,70,110,.10), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .15s, box-shadow .15s; cursor:pointer; }
.sim:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(30,70,110,.16), 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:700; font-size:16px; color:#fff;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(30,70,110,.25); }
.sim__who{ min-width:0; }
.sim__name{ font-family:var(--font-display); font-weight:600; font-size:15px; color:#1d3a52; line-height:1.1; }
.sim__provider{ font-size:11px; font-weight:600; color:var(--ink-soft); }
.sim__live{ margin-left:auto; flex:0 0 auto; }
.sim__flavor{ margin:0; font-size:13.5px; color:var(--ink); line-height:1.45; }
.sim__tracks{ margin-top:auto; padding-top:12px; border-top:1px solid var(--frost-line); }
.sim__tracks-label{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-label); margin-bottom:8px; }
.sim__chips{ display:flex; flex-wrap:wrap; gap:5px; }
.chip{ font-size:10.5px; font-weight:600; color:var(--ink-soft);
  background:rgba(60,121,196,.08); border:1px solid rgba(60,121,196,.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 rgba(255,255,255,.9); border-radius:10px; overflow:hidden;
  box-shadow:0 10px 26px rgba(30,70,110,.10); }
.fact{ display:flex; flex-direction:column; gap:4px; align-items:center; padding:18px 12px; text-align:center; }
.fact + .fact{ border-left:1px solid var(--frost-line); }
.fact__value{ font-size:clamp(18px,2.4vw,24px); font-weight:600; color:#1d3a52; }
.fact__value--live{ color:#2f9e3f; }
.fact__label{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--blue-label); }

/* SimScore metric cards */
.grid4{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.mcard{ position:relative; background:var(--frost); border:1px solid rgba(255,255,255,.9); border-radius:10px; padding:20px 18px;
  box-shadow:0 10px 26px rgba(30,70,110,.10), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .15s, box-shadow .15s; }
.mcard:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(30,70,110,.15); }
.mcard__dot{ display:block; width:11px; height:11px; border-radius:50%; margin-bottom:12px;
  background:var(--mc, var(--blue-label)); box-shadow:0 0 9px var(--mc, var(--blue-label)); }
.mcard h3{ font-size:16px; font-weight:600; color:#1d3a52; margin-bottom:6px; letter-spacing:-.01em; }
.mcard p{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-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 rgba(255,255,255,.9); border-radius:10px; padding:18px;
  box-shadow:0 10px 26px rgba(30,70,110,.10), inset 0 1px 0 rgba(255,255,255,.95);
  -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(30,70,110,.15), inset 0 1px 0 rgba(255,255,255,.95); }
.step__head{ display:flex; align-items:center; gap:11px; padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--frost-line); }
.step__icon{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:#fff; border:1.5px solid rgba(110,145,175,.35); box-shadow:0 2px 5px rgba(15,40,60,.18); }
.step__icon svg{ width:17px; height:17px; fill:var(--ic, var(--blue-label)); }
.step__head h3{ font-size:16px; font-weight:600; color:#1d3a52; letter-spacing:-.01em; }
.step__num{ margin-left:auto; font-size:12px; font-weight:600; color:rgba(95,125,147,.45); }
.step p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-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(--blue-label);
  background:var(--frost); border:1px solid rgba(255,255,255,.9); border-radius:999px; padding:9px 18px;
  box-shadow:0 4px 12px rgba(30,70,110,.10), inset 0 1px 0 rgba(255,255,255,.95); }
.flow__node--end{ color:#2f7d28; border-color:rgba(87,198,63,.4); background:rgba(230,248,228,.85); }
.flow__arr{ font-size:15px; color:#57c63f; font-weight:600; }

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

/* footer */
.footer{ position:relative; z-index:1; background:rgba(250,253,255,.7); border-top:1px solid var(--frost-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:700; font-size:13px; letter-spacing:.1em; color:#1d3a52; }
.footer__brand img{ width:24px; height:24px; border-radius:7px; object-fit:cover; }
.footer__tag{ margin-inline:auto; font-size:12px; color:var(--ink-soft); letter-spacing:.04em; }
.footer__links{ display:flex; align-items:center; gap:18px; }
.footer__x{ font-size:13px; font-weight:600; color:var(--blue-label); }
.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%, #0c2138 0%, #081526 55%, #060e1a 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:#9db5cc; 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:#5d7390; text-transform:uppercase; }

.piewrap{ position:fixed; inset:0; z-index:80; background:rgba(10,25,40,.45);
  -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:700; font-size:22px; color:#fff;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 6px 24px rgba(0,0,0,.5);
  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:#e8f0f6;
  background:rgba(22,40,58,.93); border:1px solid rgba(150,190,225,.35);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  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:#3c79c4; color:#fff; border-color:#fff; }
@keyframes petalIn{ from{ opacity:0; transform:translate(-50%,-50%) rotate(var(--ang)) translate(34px) rotate(calc(var(--ang) * -1)) scale(.6); } }

/* ============================================================
   Responsive
   ============================================================ */
/* ============================================================
   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:600; font-size:11.5px; letter-spacing:.16em; color:var(--blue-label);
  background:var(--frost); border:1px solid rgba(255,255,255,.9); border-radius:999px; padding:6px 16px 6px 7px;
  box-shadow:0 4px 14px rgba(30,70,110,.12); 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:700; line-height:1.05; letter-spacing:-.03em; color:#15324a;
  text-shadow:0 2px 0 rgba(255,255,255,.6); }
.hero__sub{ max-width:60ch; margin:18px auto 0; font-size:clamp(14px,2vw,17px); color:#3c5e72; font-weight:500; }

.terminal{ width:min(720px, 100%); margin:34px auto 0; text-align:left;
  background:var(--frost); border:1px solid rgba(255,255,255,.9); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 44px rgba(24,70,98,.18), inset 0 1px 0 rgba(255,255,255,.95);
  -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(--frost-line);
  background:rgba(60,121,196,.06); }
.terminal__title{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14px; color:#1d3a52; }
.terminal__src{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
  border:1px solid var(--frost-line); border-radius:999px; padding:3px 10px; background:#fff; }
.terminal__mc{ font-size:12px; color:var(--ink-soft); }
.terminal__status{ margin-left:auto; font-size:11.5px; font-weight:600; }
.terminal__status.is-live{ color:#2f9e3f; }
.terminal__status.is-wait{ color:var(--ink-soft); }
.terminal__status.is-down{ color:#d8662a; }

.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(--blue-label);
  background:#0e1c2c; }
.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:#0c1825; padding:6px 0; }
.terminal__empty{ display:flex; align-items:center; justify-content:center; height:100%; padding:20px;
  font-size:13px; color:#7e93a8; 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:#0a2a12; background:#3fce62; }
.trade--sell .trade__type{ color:#2a0d08; background:#ff6a4d; }
.trade__sol{ text-align:right; font-weight:600; }
.trade--buy  .trade__sol{ color:#5fe07e; }
.trade--sell .trade__sol{ color:#ff8266; }
.trade__tok{ text-align:right; color:#c5d4e2; }
.trade__who{ color:#7e93a8; }
.trade__time{ text-align:right; color:#5f7488; }

.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:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-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(--frost-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:#0c1825; }
.stream__scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,18,30,.28) 0%, transparent 22%, transparent 62%, rgba(8,18,30,.42) 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(8,18,30,.62); color:#eaf2fb; 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 rgba(255,255,255,.14); }
.stream__offline{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; color:#cfe0f0; background:radial-gradient(120% 90% at 50% 40%, #15314a, #0a1825); }
.stream__offline p{ margin:6px 0 0; font-family:var(--font-display); font-weight:600; font-size:18px; color:#eaf2fb; }
.stream__offline small{ font-size:12.5px; color:#8fb0cb; }

/* 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(233,244,252,.5), transparent 40%); }
.dkick{ display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#1f7a4d; background:rgba(51,214,88,.12); border:1px solid rgba(51,214,88,.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 rgba(255,255,255,.9); border-radius:12px; padding:20px 20px 22px;
  box-shadow:0 14px 40px rgba(30,70,110,.1); }
.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(--blue-label); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:0 0 auto; }
.desk__label{ font-size:13px; font-weight:700; color:#1d3a52; 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:#fff; border:1.5px solid var(--frost-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:rgba(255,255,255,1); }
.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(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.modes{ display:flex; gap:6px; background:rgba(60,121,196,.08); 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(--ink-soft); transition:.15s; }
.modes__tab.is-on{ background:#fff; color:var(--blue-label); box-shadow:0 2px 8px rgba(30,70,110,.12); }
.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:#fff; border:1.5px solid var(--frost-line); font-size:12.5px; font-weight:600; color:var(--ink); transition:.15s; }
.poke:hover{ border-color:var(--bob); }
.poke.is-on{ border-color:var(--bob); background:rgba(51,214,88,.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(--frost-line); background:#fff; font-family:var(--font-body); font-size:13.5px; color:var(--ink); resize:vertical; }
.desk__text:focus, .desk__select:focus{ outline:none; border-color:var(--blue-label); box-shadow:0 0 0 3px rgba(60,121,196,.14); }
.desk__counter{ margin-top:6px; font-size:11px; color:var(--ink-soft); }
.desk__hint{ margin-top:8px; font-size:11.5px; color:#b9731b; 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:#fff; border:1.5px solid var(--frost-line);
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-soft); transition:.15s; }
.pay__chip.is-on{ border-color:var(--blue-label); color:var(--blue-label); background:rgba(60,121,196,.07); }
.pay__chip.is-soon, .pay__chip:disabled{ opacity:.5; cursor:not-allowed; }
.pay__price{ font-size:13px; color:var(--ink-soft); }
.pay__price b{ color:#1d3a52; }

.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(--ink-soft); }
.desk__status.is-ok{ color:#1f7a4d; font-weight:600; }
.desk__status.is-bad{ color:#c0392b; font-weight:600; }
.desk__wallet{ margin-top:10px; font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; }
.desk__wallet b{ color:#1d3a52; }

.board{ background:#0c1825; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; min-height:280px; }
.board__head{ padding:12px 15px; border-bottom:1px solid rgba(255,255,255,.08); color:#eaf2fb;
  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:#6f8499; 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:#8fb0cb; }
.dline__arrow{ color:#5f7387; }
.dline__agent{ font-weight:700; color:#eaf2fb; }
.dline__txt{ flex:1 1 100%; color:#b9cadb; font-style:italic; }
.dline__tag{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:#8fb0cb; }
.dline.is-live .dline__tag{ color:#ffd166; }

/* ---- 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 rgba(255,255,255,.45);
  background:rgba(8,18,30,.42); color:#eaf2fb; -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(8,18,30,.62); 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%; }

/* 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(15,40,60,.3); }
.hh--onair{ outline-color:#ff4d4d; box-shadow:0 0 0 2px #ff4d4d, 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:#ff5a5a; 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,.45), transparent); transform:skewX(-18deg); transition:left .55s ease; }
.btn:hover::before{ left:130%; }
.btn--green:hover{ box-shadow:0 8px 22px rgba(50,160,40,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--white:hover{ box-shadow:0 8px 20px rgba(30,70,110,.2); }

.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(51,214,88,.22); }
.dagent:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,70,110,.16); }
.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(30,70,110,.16); }
.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(50,140,40,.4); } 50%{ box-shadow:0 4px 20px rgba(80,200,60,.65); } }
.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: white chip + brand-color logo + colored ring
   ============================================================ */
.sim__avatar, .dagent__av{ background:#fff; border:2px solid var(--c, var(--frost-line)); }
.hh{ background:#fff; border:2px solid var(--c, #fff); }
.brandlogo{ width:66%; height:66%; filter:none; }
.hh .brandlogo{ width:60%; height:60%; }
.avletter{ color:var(--c, var(--ink)); font-weight:800; }

/* ============================================================
   Light / dark theme
   ============================================================ */
:root{ --page:#e8f4fc; }
body{ background:var(--page); transition:background .45s ease, color .3s ease; }
body.dark{
  --ink:#e2ebf5; --ink-soft:#9db0c4; --blue-label:#86b9ec; --blue-deep:#3a6aa8;
  --frost:rgba(24,32,46,.80); --frost-line:rgba(150,180,215,.16); --page:#080c14;
}
body.dark .game{ background:
  radial-gradient(60% 38% at 74% 22%, rgba(60,90,180,.28), transparent 60%),
  radial-gradient(50% 40% at 12% 90%, rgba(40,130,95,.20), transparent 60%),
  linear-gradient(180deg,#0c1526 0%,#0a1830 38%,#0d2440 68%,#0a1a2e 100%); }
body.dark .nav{ background:rgba(12,18,30,.74); }
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, body.dark .flow{ background:var(--frost); border-color:var(--frost-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(--ink); }
body.dark .footer{ background:rgba(12,18,30,.6); }
body.dark .sim__avatar, body.dark .dagent__av, body.dark .hh{ background:#0e1626; }
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:#0e1626; color:var(--ink); border-color:var(--frost-line); }
body.dark .brandlogo[src*="gpt"]{ filter:invert(1); }   /* OpenAI mark is black → flip on dark chip */

.themebtn{ background:none; border:1px solid var(--frost-line); border-radius:9px; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer; color:var(--blue-label); font-size:16px; transition:.15s; }
.themebtn:hover{ background:rgba(120,160,210,.14); transform:translateY(-1px); }

/* ============================================================
   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(80,150,255,.55), transparent 60%),
    radial-gradient(30% 30% at 82% 24%, rgba(140,90,255,.45), transparent 60%),
    radial-gradient(40% 40% at 62% 82%, rgba(60,220,150,.40), 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(50,110,180,.16)) 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(130,175,235,.13); }
@media (prefers-reduced-motion: reduce){ .bgfx__mesh,.bgfx__pattern{ animation:none; } }

/* ============================================================
   WebGL "stripe gradient" shader background (shader-bg.js)
   ============================================================ */
#shaderbg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; display:block; pointer-events:none; }
.bgfx{ display:none; }  /* CSS blobs/mesh/pattern replaced by the shader */

/* readability over the animated background */
.shead h2, .shead p, .section__sub, .dkick{ text-shadow:0 1px 3px rgba(255,255,255,.35); }
body.dark .shead h2, body.dark .shead p, body.dark .section__sub, body.dark .dkick{ text-shadow:0 1px 4px rgba(0,0,0,.5); }

/* dark theme: make sure NO text stays dark-on-dark (catch-all) */
body.dark{ color:var(--ink); }
body.dark h1, body.dark h2, body.dark h3{ color:var(--ink); }
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(--ink-soft); }
body.dark .chip, body.dark .sim__tracks-label, body.dark .nav__links a, body.dark .footer__x{ color:var(--ink-soft); }
body.dark .desk__num, body.dark .btn--green{ color:#06121f; }
body.dark .modes__tab.is-on{ color:var(--ink); background:rgba(255,255,255,.08); }

/* ============================================================
   Glassier blocks over the shader (less "in your face")
   ============================================================ */
:root{ --frost: rgba(250,253,255,.64); }
body.dark{ --frost: rgba(20,28,42,.52); }
.panel, .sim, .mcard, .fact, .desk, .gbanner, .brand, .flow, .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(255,255,255,.38); border-color:rgba(255,255,255,.55); }
.fact{ background:rgba(255,255,255,.34); }
body.dark .mcard{ background:rgba(22,30,46,.40); border-color:rgba(150,180,215,.16); }
body.dark .fact{ background:rgba(22,30,46,.36); }