/* overlay.css — the stream overlays (overlay/index.html, js/overlay.js): OBS browser
   sources a streamer pastes by URL. The store's palette and faces, so the
   stream and the site read as one thing; a transparent ground, because OBS
   lays each one over the game. Ported from the Gates stream kit
   (AnthonE/Gates#486). */
@font-face { font-family: "Space Grotesk";
  src: url("../fonts/spacegrotesk.woff2") format("woff2");
  font-weight: 400 700; font-display: block; }
@font-face { font-family: "JetBrains Mono";
  src: url("../fonts/jbmono.woff2") format("woff2");
  font-weight: 100 800; font-display: block; }

:root {
  --bg: #0a0c0a;
  --hull: #0e1210;
  --panel: #161b17;
  --line: #2b332c;
  --line-2: #3a453c;
  --ink: #e8f0e9;
  --muted: #a0aa95;
  --dim: #8a9689;
  --lime: #b8ff38;   /* the Elo Pros mark */
  --live: #00c805;
  --gold: #c9a227;   /* the gate ring */
  --red: #ff3b30;
  --sg: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --hud: .7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow: hidden; color: var(--ink); font-family: var(--sg); -webkit-font-smoothing: antialiased; background: transparent; }
[hidden] { display: none !important; }
.kind { position: absolute; inset: 0; }

/* ---- the Elo Pros mark ---- */
.mark { display: inline-block; flex: none; background: url("/favicon.svg") center / contain no-repeat; }

/* ---- corner brackets: frame anything without boxing it in ---- */
.brackets { position: absolute; inset: 0; pointer-events: none; }
.brackets i { position: absolute; width: 22px; height: 22px; border: 3px solid var(--lime); }
.brackets i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brackets i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.brackets i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.tag {
  font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 9px; background: var(--lime); color: var(--bg);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none;
  animation: livepulse 1.6s ease-out infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); }
  100% { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0); }
}

/* ---- the ticker strip ---- */
.ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  display: flex; align-items: stretch;
  background: rgba(10, 12, 10, .9);
  border-top: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(184, 255, 56, .08);
  font: 500 19px/1 var(--mono);
}
.ticker .prices {
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
  background: var(--hull); border-right: 1px solid var(--line-2); flex: none;
}
.ticker .prices:empty { display: none; }
.ticker .px { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.ticker .px b { font-weight: 700; color: var(--lime); }
.ticker .px .chain { font-size: 12px; letter-spacing: .12em; color: var(--dim); border: 1px solid var(--line-2); padding: 2px 5px; align-self: center; }
.ticker .px .chg { font-size: 15px; }
.ticker .px .up { color: var(--live); }
.ticker .px .down { color: var(--red); }
.ticker .px .sub { color: var(--dim); font-size: 15px; }
.ticker .lane {
  position: relative; flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ticker .belt {
  position: absolute; top: 0; bottom: 0; left: 0;
  display: flex; align-items: center; white-space: nowrap; will-change: transform;
}
.ticker .belt span { color: var(--ink); padding: 0 8px; }
.ticker .belt em { font-style: normal; color: var(--gold); padding: 0 22px; }
.ticker .end {
  display: flex; align-items: center; gap: 10px; padding: 0 22px; flex: none;
  background: var(--lime); color: var(--bg); font-weight: 700; letter-spacing: .04em;
}

/* ==== kind=card: Starting soon, BRB, Ending (1920x1080, opaque) ==== */
body[data-kind="card"] { width: 1920px; height: 1080px; background: var(--bg); }
.slides { position: absolute; inset: 0; }
.slides div {
  position: absolute; inset: -4%; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 2.4s ease;
  filter: saturate(.85) contrast(1.05);
}
.slides div.on { opacity: 1; animation: push 14s linear forwards; }
@keyframes push { from { transform: scale(1) translateX(0); } to { transform: scale(1.08) translateX(-1.5%); } }
.shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,12,10,.97) 0%, rgba(10,12,10,.9) 38%, rgba(10,12,10,.45) 70%, rgba(10,12,10,.6) 100%),
    linear-gradient(0deg, rgba(10,12,10,.95) 0%, transparent 30%);
}
.grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
}
canvas.spores { position: absolute; inset: 0; width: 100%; height: 100%; }

.copy { position: absolute; left: 120px; top: 110px; width: 980px; }
.eyebrow { display: flex; align-items: center; gap: 16px; font: 700 18px/1 var(--mono); letter-spacing: .28em; color: var(--muted); text-transform: uppercase; }
.eyebrow .mark { width: 42px; height: 42px; }
.copy h1 {
  margin-top: 30px; font: 700 200px/.82 var(--sg); letter-spacing: -.02em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.state {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 18px;
  font: 700 54px/1 var(--sg); letter-spacing: .08em; text-transform: uppercase; color: var(--lime);
}
.state::before { content: ""; width: 14px; height: 54px; background: var(--lime); }
.tagline { margin-top: 22px; font: 500 30px/1.35 var(--sg); color: var(--muted); max-width: 860px; }

.box {
  margin-top: 28px; max-width: 900px; padding: 18px 26px; position: relative;
  background: rgba(22,27,23,.82); border: 1px solid var(--line-2); border-left: 4px solid var(--gold);
}
.box small { display: block; font: 700 15px/1 var(--mono); letter-spacing: .2em; color: var(--gold); margin-bottom: 14px; text-transform: uppercase; }
.box p { font: 500 28px/1.3 var(--sg); }
.box p + p { margin-top: 8px; font-size: 22px; color: var(--muted); }
.box.patch { border-left-color: var(--lime); }
.box.patch small { color: var(--lime); }

.socials { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 0; font: 500 26px/1 var(--mono); }
.socials:empty { display: none; }
.socials div { display: flex; align-items: baseline; gap: 12px; margin-right: 34px; white-space: nowrap; }
.socials dt { color: var(--dim); text-transform: uppercase; font-size: 16px; letter-spacing: .18em; }
.socials dd { color: var(--ink); }
.cta {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 18px; padding: 22px 30px;
  background: var(--lime); color: var(--bg); font: 700 34px/1 var(--sg);
}
.cta b { font-weight: 700; }
.cta span { font: 700 30px/1 var(--mono); }

.gate { position: absolute; right: 150px; top: 150px; width: 640px; height: 640px; }
.gate svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gate .ring { transform-origin: 50% 50%; animation: spin 90s linear infinite; }
.gate .ticks { transform-origin: 50% 50%; animation: spin 140s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.gate .core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.gate .big { font: 700 128px/1 var(--mono); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(184,255,56,.25); }
.gate .small { font: 700 18px/1 var(--mono); letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.gate.soon .big { font-size: 64px; letter-spacing: .02em; color: var(--lime); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
.gate .live-line { position: absolute; left: 0; right: 0; top: calc(100% + 26px); text-align: center; font: 700 22px/1.4 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.gate .live-line b { color: var(--lime); }

.card-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; }

body[data-card="brb"] .socials, body[data-card="brb"] .cta,
body[data-card="start"] .cta, body[data-card="end"] .today, body[data-card="end"] .patch { display: none; }

/* ==== kind=bug: the corner mark and the ticker over the game (1920x1080) ==== */
body[data-kind="bug"] { width: 1920px; height: 1080px; }
.bug, .bug-ticker { zoom: var(--hud); }
.bug {
  position: absolute; top: 28px; left: 28px;
  display: flex; align-items: center; gap: 16px; padding: 12px 20px 12px 12px;
  background: rgba(10, 12, 10, .84); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 30px rgba(0,0,0,.35);
  animation: in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes in { from { opacity: 0; transform: translateX(-24px); } }
.bug .mark { width: 52px; height: 52px; }
.bug .name { font: 700 34px/1 var(--sg); letter-spacing: .02em; text-transform: uppercase; }
.bug .rule { width: 1px; height: 40px; background: var(--line-2); }
.bug .stack { display: flex; flex-direction: column; gap: 7px; }
.bug .url { font: 700 21px/1 var(--mono); color: var(--lime); }
.bug .sub { display: flex; align-items: center; gap: 9px; font: 500 14px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bug .sub b { color: var(--ink); font-weight: 700; }
.bug::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -4px; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0 60%, transparent 60% 66%, var(--gold) 66%);
}
.bug-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; animation: up .8s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(100%); } }

/* ==== kind=ticker: the strip alone, any width ==== */
body[data-kind="ticker"] { width: 100vw; height: 100vh; }
.solo-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; }

/* ==== kind=frame: over a cam, a chat or an alert box (any size) ==== */
body[data-kind="frame"] { width: 100vw; height: 100vh; }
.frame { position: absolute; inset: 14px 0 0 0; border: 1px solid rgba(184,255,56,.22); }
.frame.panel { background: rgba(10,12,10,.72); border-color: var(--line-2); }
.frame-head { position: absolute; left: 14px; top: 14px; transform: translateY(-50%); display: flex; align-items: center; }
.frame-head .name {
  font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; background: rgba(10,12,10,.9); color: var(--muted); border: 1px solid var(--line-2); border-left: 0;
}
.frame-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(184,255,56,.35), transparent); animation: sweep 7s linear infinite; }
@keyframes sweep { from { top: 0; } to { top: 100%; } }

/* ==== kind=island: the live server, a panel beside the game (460x300) ==== */
body[data-kind="island"] { width: 100vw; height: 100vh; }
.island {
  position: absolute; left: 0; top: 0; width: 460px; padding: 18px 20px 16px;
  background: rgba(10, 12, 10, .86); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 30px rgba(0,0,0,.35);
  zoom: var(--hud-island, 1);
}
.island-head { display: flex; align-items: center; gap: 12px; font: 700 15px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.island-head .mark { width: 28px; height: 28px; }
.island-head b { color: var(--ink); }
.island-head .live-dot { margin-left: auto; }
.island-big { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
.island-big strong { font: 700 72px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.island-big span { font: 500 18px/1.3 var(--sg); color: var(--muted); }
.island-rows { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font: 500 17px/1.2 var(--mono); }
.island-rows dt { color: var(--dim); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; align-self: center; }
.island-rows dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.island-rows dd.warn { color: var(--gold); }
.island-board { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.island-board small { display: block; font: 700 13px/1 var(--mono); letter-spacing: .2em; color: var(--gold); margin-bottom: 10px; text-transform: uppercase; }
.island-board ol { list-style: none; display: grid; gap: 6px; font: 500 17px/1.2 var(--mono); }
.island-board li { display: flex; gap: 12px; }
.island-board li i { font-style: normal; color: var(--dim); width: 1.4em; }
.island-board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.island-board li b { color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.island-off { margin-top: 16px; font: 500 18px/1.4 var(--sg); color: var(--muted); }

.next-stream { margin-top: 28px; font: 700 26px/1.2 var(--mono); letter-spacing: .08em; color: var(--lime); text-transform: uppercase; }

/* ==== kind=agent: an agent's card (520x360) ==== */
body[data-kind="agent"], body[data-kind="commands"], body[data-kind="chart"], body[data-kind="tape"],
body[data-kind="alert"], body[data-kind="coins"], body[data-kind="pnl"], body[data-kind="season"] { width: 100vw; height: 100vh; }
.agent, .cmds, .trade-box {
  position: absolute; left: 0; top: 0; padding: 18px 20px 16px;
  background: rgba(10, 12, 10, .88); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 30px rgba(0,0,0,.35);
}
.agent { width: 520px; }
.agent-head { display: flex; align-items: center; gap: 14px; }
.agent-pic { width: 72px; height: 72px; flex: none; object-fit: cover; border: 2px solid var(--lime); background: var(--panel); }
.agent-blank { display: grid; place-items: center; }
.agent-blank .mark { width: 40px; height: 40px; }
.agent-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.agent-who b { font: 700 32px/1 var(--sg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-who span { font: 500 14px/1.2 var(--mono); letter-spacing: .08em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-on { align-self: flex-start; font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 6px 8px; background: var(--live); color: var(--bg); }
.agent-on.off { background: var(--line-2); color: var(--muted); }
.agent-rank { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; font: 500 16px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.agent-rank strong { font: 700 40px/1 var(--mono); color: var(--gold); letter-spacing: -.02em; }
.agent-rank b { margin-left: auto; font: 700 24px/1 var(--mono); color: var(--lime); }
.agent-now { margin-top: 14px; padding: 12px 14px; background: rgba(22,27,23,.9); border-left: 4px solid var(--lime); }
.agent-now small { display: block; font: 700 12px/1 var(--mono); letter-spacing: .2em; color: var(--lime); text-transform: uppercase; margin-bottom: 8px; }
.agent-now p { font: 600 24px/1.25 var(--sg); }
.agent-now .agent-why { margin-top: 6px; font: 500 17px/1.35 var(--sg); color: var(--muted); }
.agent-log { list-style: none; margin-top: 10px; display: grid; gap: 4px; font: 500 15px/1.2 var(--mono); color: var(--dim); }
.agent-log li { display: flex; gap: 10px; }
.agent-log li b { flex: 1; font-weight: 500; color: var(--muted); }
.agent-off { margin-top: 12px; font: 500 18px/1.4 var(--sg); color: var(--muted); }

/* ==== kind=commands: what to type (360 wide) ==== */
.cmds { width: 360px; }
.cmds-head { display: flex; align-items: center; gap: 10px; font: 700 14px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cmds-head .mark { width: 24px; height: 24px; }
.cmds dl { margin-top: 12px; display: grid; gap: 8px; }
.cmds dl div { display: flex; align-items: baseline; gap: 12px; }
.cmds dt { font: 700 20px/1 var(--mono); color: var(--lime); min-width: 6.4em; }
.cmds dd { font: 500 17px/1.2 var(--sg); color: var(--ink); }

/* ==== the market overlays ==== */
.trade-head { display: flex; align-items: center; gap: 12px; font: 700 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.trade-head b { font: 700 24px/1 var(--mono); color: var(--ink); letter-spacing: .02em; }
.trade-head .mark { width: 26px; height: 26px; }
.trade-head .trade-px { font: 700 24px/1 var(--mono); color: var(--lime); letter-spacing: 0; text-transform: none; }
.trade-head .trade-tf { margin-left: auto; color: var(--dim); }
.chain { font: 700 12px/1 var(--mono); letter-spacing: .12em; color: var(--dim); border: 1px solid var(--line-2); padding: 3px 5px; }
.chg { font: 700 15px/1 var(--mono); letter-spacing: 0; text-transform: none; }
.chg.up, .up { color: var(--live); }
.chg.down, .down { color: var(--red); }
.trade-off { margin-top: 12px; font: 500 17px/1.4 var(--sg); color: var(--muted); }
.trade-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 700 15px/1 var(--mono); color: var(--lime); }
.nfa { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.chart { width: 640px; }
.chart canvas { display: block; width: 100%; height: 260px; margin-top: 12px; }

.tape { width: 500px; }
.tape-rows { list-style: none; margin-top: 12px; display: grid; gap: 6px; font: 500 15px/1.2 var(--mono); }
.tape-rows li { display: grid; grid-template-columns: 3.3em 7.2em 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 8px; background: rgba(22,27,23,.8); border-left: 3px solid var(--line-2); white-space: nowrap; overflow: hidden; animation: in .5s cubic-bezier(.2,.8,.2,1) both; }
.tape-rows li.buy { border-left-color: var(--live); }
.tape-rows li.sell { border-left-color: var(--red); }
.tape-rows li b { font-weight: 700; }
.tape-rows li.buy b { color: var(--live); }
.tape-rows li.sell b { color: var(--red); }
.tape-rows li .usd { color: var(--ink); }
.tape-rows li i, .tape-rows li em { font-style: normal; color: var(--dim); font-size: 13px; text-align: right; }

.pop {
  position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 40px 20px;
  background: rgba(10, 12, 10, .94); border: 2px solid var(--live); min-width: 460px;
  box-shadow: 0 0 40px rgba(0, 200, 5, .35);
  animation: popin .5s cubic-bezier(.2,1.4,.4,1) both;
}
.pop.sell { border-color: var(--red); box-shadow: 0 0 40px rgba(255, 59, 48, .35); }
@keyframes popin { from { opacity: 0; transform: translateX(-50%) scale(.7); } }
.pop small { font: 700 16px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--live); }
.pop.sell small { color: var(--red); }
.pop strong { font: 700 56px/1 var(--mono); letter-spacing: -.02em; }
.pop span { font: 700 26px/1 var(--mono); color: var(--lime); }
.pop em { font: 500 14px/1 var(--mono); font-style: normal; color: var(--dim); letter-spacing: .1em; }

.coins { width: 420px; }
.coin-rows { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.coin-rows li { display: grid; grid-template-columns: 4.6em auto 1fr auto; gap: 10px; align-items: center; font: 500 20px/1 var(--mono); }
.coin-rows li b { color: var(--lime); font-weight: 700; }
.coin-rows li .px { text-align: right; }

.pnl { width: 460px; }
.pnl-big { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
.pnl-big strong { font: 700 38px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.pnl-big span { font: 700 22px/1 var(--mono); color: var(--muted); }
.pnl-usd { margin-top: 8px; font: 500 16px/1.3 var(--sg); color: var(--muted); }
.pnl-rows { margin-top: 12px; display: grid; gap: 6px; font: 500 16px/1.2 var(--mono); }
.pnl-rows div { display: flex; justify-content: space-between; gap: 12px; }
.pnl-rows dt { color: var(--dim); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }

.season { width: 440px; }
.season-line { margin-top: 8px; font: 500 16px/1.3 var(--sg); color: var(--muted); }
.season-pot { margin-top: 8px; font: 700 20px/1.2 var(--mono); color: var(--gold); }
.season-rows { list-style: none; margin-top: 12px; display: grid; gap: 6px; font: 500 17px/1.2 var(--mono); }
.season-rows li { display: flex; gap: 12px; }
.season-rows li i { font-style: normal; color: var(--dim); width: 1.4em; }
.season-rows li span { flex: 1; }
.season-rows li b { color: var(--lime); }
.season-me { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font: 700 16px/1.3 var(--mono); color: var(--ink); }