/* PumpTank page shell: design tokens, header, stream info, queue, sidebar (chat, results, rules) and the
   pitch dialog. The broadcast itself (stage, HUD, set) is in studio.css.
   Design: a streaming-platform layout. Flat zinc surfaces separated by hairlines rather than boxed cards,
   one accent (pump green) reserved for actions, money and live state, Inter for UI, the display face only for brand moments. */
:root {
  /* Surfaces */
  --bg: #0a0a0c;
  --surface-1: #111114;
  --surface-2: #17171b;
  --surface-3: #1f1f24;
  --surface-4: #27272d;
  --surface-5: #303036;
  /* Text */
  --text: #d4d4d8;
  --text-strong: #fafafa;
  --muted: #a1a1aa;
  --subtle: #71717a;
  /* Accent (pump green) */
  --accent: #86efac;
  --accent-2: #a7f3c4;
  --accent-3: #22c55e;
  --accent-ink: #052e16;
  --accent-soft: rgba(134, 239, 172, .1);
  --accent-line: rgba(134, 239, 172, .32);
  --accent-glow: rgba(134, 239, 172, .4);
  /* Decorative + status */
  --blue: #60a5fa;
  --orange: #fb923c;
  --pink: #f472b6;
  --purple: #c084fc;
  --lime: #cafe03;
  --warning: #facc15;
  --warning-ink: #422006;
  --error: #f87171;
  --live: #ef4444;
  --error-ink: #450a0a;
  /* Lines */
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .12);
  /* Shape + type */
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 60px;
  --display: 'Big Shoulders Display', 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-weight: 600; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-5) transparent; }

/* ─── Icons (inline SVG sprite in index.html, Lucide shapes) ── */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); }
.btn-ghost { background: var(--surface-2); border-color: var(--line-strong); color: var(--text-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.linkish { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-weight: 600; }
.linkish:hover { text-decoration: underline; }
/* Quiet toggle buttons (sound, chat overlay). Pressed = accent. */
.tool { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); font: 500 13px/1 var(--sans); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.tool:hover { color: var(--text-strong); background: var(--surface-2); }
.tool[aria-pressed=true] { color: var(--accent); border-color: var(--accent-line); }
.tool .on-only { display: none; }
.tool[aria-pressed=true] .on-only { display: inline; }
.tool[aria-pressed=true] .off-only { display: none; }
.tool.nudge:not([aria-pressed=true]) { animation: pulse 1.6s ease-in-out 4; }

/* ─── Header ──────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; gap: 20px; padding: 0 20px; background: rgba(10, 10, 12, .82); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.brand .wordmark { height: 25px; width: auto; display: block; }
.env-chip { font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; color: #fcd34d; background: rgba(250, 204, 21, .1); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Pot: a stat, not a pill. Opens the breakdown. */
.pot-pill { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; padding: 4px 10px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; }
.pot-pill:hover { background: var(--surface-2); }
.pot-label { grid-column: 1 / -1; font: 500 11px/1.2 var(--sans); color: var(--muted); }
.pot-value { font: 700 17px/1.2 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.pot-unit { font: 600 12px/1 var(--sans); color: var(--muted); }
.pot-wrap { position: relative; }
.pot-detail { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, calc(100vw - 32px)); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); font-size: 13px; z-index: 30; }
.pot-detail dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 10px; }
.pot-detail dt { color: var(--muted); }
.pot-detail dd { margin: 0; text-align: right; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pot-detail p { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 12px; }

/* Demo / devnet notice: one quiet line, not a hazard stripe. */
.mode-banner { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; margin-bottom: 14px; font-size: 13px; color: var(--muted); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mode-banner > span { flex: 1; min-width: 0; }
.mode-banner::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex: none; }
.mode-banner b { color: var(--text-strong); font-weight: 600; }
.mode-banner .btn { margin-left: auto; }

/* ─── Layout ──────────────────────────────────────────────── */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: calc(100vh - var(--header-h)); }
.stage-col { min-width: 0; padding: 20px 28px 40px; }
.stage-col > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.stage { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }

/* ─── Stream info (title row under the player, like a streaming site) ── */
.stream-info { display: flex; align-items: center; gap: 16px; padding: 16px 2px 18px; border-bottom: 1px solid var(--line); }
.now-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.now-info .ni-avatar svg { width: 44px; height: 44px; border-radius: 10px; display: block; }
.now-info .ni-text { min-width: 0; }
.now-info h1 { font: 600 18px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-info .ni-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; color: var(--muted); }
.now-info .ni-meta b { color: var(--accent); font-weight: 600; }
.now-info .ni-meta .sep { color: var(--surface-5); }
.live-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; background: var(--live); color: #fff; font: 700 10px/1 var(--sans); letter-spacing: .08em; }
.live-tag .live-dot { width: 6px; height: 6px; background: #fff; box-shadow: none; }
.idle-tag { padding: 3px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); font: 700 10px/1 var(--sans); letter-spacing: .08em; }
.stream-tools { display: flex; gap: 8px; flex: none; }

/* ─── Queue ───────────────────────────────────────────────── */
.queue-strip { padding: 20px 0 4px; }
.section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { font: 600 15px/1.2 var(--sans); }
.section-head .count { font: 600 12px/1 var(--sans); color: var(--muted); background: var(--surface-3); padding: 3px 7px; border-radius: 999px; }
.queue-hint { margin-left: auto; font-size: 13px; color: var(--muted); }
.queue-hint b { color: var(--accent); font-weight: 600; }
.queue-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.qcard { flex: 0 0 236px; scroll-snap-align: start; display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--line); animation: fadein .35s ease both; }
.qcard.live { border-color: rgba(239, 68, 68, .4); }
.qcard.me { border-color: var(--accent-line); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface-1); }
.qcard-top { display: flex; align-items: center; justify-content: space-between; min-height: 18px; font: 600 11px/1 var(--sans); color: var(--subtle); }
.qcard.live .qcard-label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; background: var(--live); color: #fff; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.qcard.live .qcard-label .live-dot { width: 6px; height: 6px; background: #fff; box-shadow: none; }
.qcard.next .qcard-label { color: var(--accent); }
.qcard .you { background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 3px 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.qcard-main { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.qcard .qavatar svg { width: 36px; height: 36px; border-radius: 8px; display: block; }
.qcard .qtitle { font: 600 14px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); }
.qcard .qmeta { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.qcard .qmeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcard .qmeta b { color: var(--text-strong); white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.qcard.join { flex-basis: 190px; align-content: center; gap: 4px; cursor: pointer; text-align: left; background: none; color: var(--text-strong); font: inherit; transition: border-color .15s, background .15s; }
.qcard.join:hover { border-color: var(--line-strong); background: var(--surface-1); }
.qcard.join .join-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.qcard.join .join-title .icon { color: var(--accent); }
.qcard.join small { color: var(--muted); font-size: 12px; }
.queue-empty { position: relative; overflow: hidden; isolation: isolate; flex: 1; display: flex; align-items: center; gap: 16px; padding: 14px 16px 30px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--line); }
.queue-empty > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.queue-empty > div b { color: var(--text-strong); font-weight: 600; }
.queue-empty > div span { color: var(--muted); font-size: 13px; }
.queue-empty .btn-tank { flex: none; }
/* A small shark patrols the empty line, behind the text. */
.q-water { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(134, 239, 172, .06)); border-top: 1px dashed rgba(134, 239, 172, .12); }
.q-shark { position: absolute; bottom: 3px; left: 0; width: 38px; height: 17px; fill: var(--accent); opacity: .45; animation: q-patrol 16s ease-in-out infinite; }
@keyframes q-patrol {
  0% { left: -60px; scale: 1 1; }
  46% { left: calc(100% + 10px); scale: 1 1; }
  50% { left: calc(100% + 10px); scale: -1 1; }
  96% { left: -60px; scale: -1 1; }
  100% { left: -60px; scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) { .q-shark { animation: none; left: 12px; } }

/* ─── How it works (one quiet row) ────────────────────────── */
.how { list-style: none; margin: 16px auto 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); counter-reset: step; }
.how li { display: flex; gap: 12px; align-items: flex-start; padding: 0 20px 0 0; font-size: 13px; color: var(--muted); }
.how li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.how li b { flex: none; font: 600 12px/20px var(--sans); color: var(--subtle); font-variant-numeric: tabular-nums; }
.how li b::before { content: '0'; }
.how li span { display: grid; gap: 2px; color: var(--text-strong); font-weight: 600; font-size: 14px; }
.how em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); }

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; min-height: 0; background: var(--surface-1); border-left: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; flex: none; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button:focus-visible { outline-offset: -6px; }   /* keep the keyboard focus ring inside the tab strip (it clips overflow) */
.tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 8px; background: none; border: 0; font: 600 13px/1 var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--text-strong); }
.tabs button[aria-selected=true] { color: var(--text-strong); }
.tabs button[aria-selected=true]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.count { display: inline-block; min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font: 600 11px/1.2 var(--sans); text-align: center; }
.count.live { background: var(--live); color: #fff; }
.count.live:empty { display: none; }
.panel { overflow-y: auto; min-height: 0; flex: 1; padding: 6px 16px 16px; }

/* Chat */
.chat-panel { display: flex; flex-direction: column; padding: 0; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-list:empty::before { content: 'Welcome to the chat. Say hi to everyone watching.'; display: block; margin-top: 24px; text-align: center; color: var(--subtle); font-size: 13px; }
.chat-msg { padding: 3px 6px; margin: 0 -6px; border-radius: 6px; color: var(--text); }
.chat-msg:hover { background: var(--surface-2); }
.chat-msg b { font-weight: 700; margin-right: 6px; }
.chat-msg.system { margin: 8px -6px; padding: 6px; color: var(--muted); font-size: 12.5px; }
.chat-msg.system:hover { background: none; }
.sys-tag { display: inline-block; margin-right: 8px; padding: 2px 6px; border-radius: 4px; font: 700 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; background: var(--surface-3); color: var(--text); }
.chat-msg.live .sys-tag { background: var(--live); color: #fff; }
.chat-msg.deal .sys-tag { background: var(--accent); color: var(--accent-ink); }
.chat-form { flex: none; display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.chat-input { display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-strong); transition: border-color .15s, box-shadow .15s; }
.chat-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-input input { flex: 1; min-width: 0; margin: 0; padding: 7px 0; border: 0; background: none; box-shadow: none; color: var(--text-strong); font-size: 14px; }
.chat-input input:focus { box-shadow: none; }
.chat-input .send { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.chat-input .send:hover { background: var(--accent-2); }
.chat-id { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--subtle); }
.chat-id input { width: 12ch; flex: none; margin: 0; padding: 2px 6px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--text); font-size: 12px; font-weight: 600; }
.chat-id input:hover { border-color: var(--line-strong); }
.chat-id input:focus { border-color: var(--accent); background: var(--surface-2); box-shadow: none; }
.chat-error { margin: 0; padding: 0 16px 10px; color: var(--error); font-size: 12px; }
.chat-error:empty { display: none; }

/* Results and "My pitches" lists */
.qitem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); animation: fadein .35s ease both; }
.qitem:last-child { border-bottom: 0; }
.qavatar svg { display: block; width: 36px; height: 36px; border-radius: 8px; }
.qtitle { font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 3px; }
.qresult { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.res { font-weight: 600; }
.res.funded { color: var(--accent); } .res.rejected { color: var(--muted); } .res.tech { color: var(--warning); }
.pay { color: var(--muted); }
.pay.confirmed { color: var(--accent); }
.badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); }
.badge.new { color: var(--accent); background: var(--accent-soft); }
.badge.existing { color: var(--purple); background: rgba(192, 132, 252, .12); }
.badge.ref { color: var(--text); text-transform: none; letter-spacing: 0; }
.empty { text-align: center; padding: 40px 12px; color: var(--muted); }
.empty h4 { margin: 0 0 4px; }
.empty p { margin: 0; }
.clar-box { margin-top: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.clar-box p { margin: 0 0 8px; font-size: 13px; }
.clar-box textarea { margin-bottom: 8px; }
.rules { font-size: 13.5px; color: var(--text); }
.rules h3 { font: 600 15px/1.3 var(--sans); margin: 14px 0 10px; }
.rules ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.rules li { position: relative; padding-left: 16px; }
.rules li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--surface-5); }
.rules b { color: var(--text-strong); font-weight: 600; }
.rules .muted { font-size: 12px; color: var(--subtle); }

/* ─── Footer credits ──────────────────────────────────────── */
.credits { padding: 18px 28px 28px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.6; color: var(--subtle); }
.credits a { color: var(--muted); }

/* ─── Pitch dialog ────────────────────────────────────────── */
dialog.submit { width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-1); color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); }
dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.submit-inner { padding: 20px 24px 24px; }
.submit-inner header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin: 0 -24px 4px; padding-inline: 24px; border-bottom: 1px solid var(--line); }
.submit-inner h2 { font: 900 28px/1.1 var(--display); letter-spacing: .02em; }
.x { display: grid; place-items: center; width: 32px; height: 32px; background: none; border: 0; border-radius: 6px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.x:hover { background: var(--surface-3); color: var(--text-strong); }
.wallet-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 14px 0 4px; color: var(--muted); }
.wallet-row b { color: var(--text-strong); }
.field { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong); margin: 16px 0 0; }
.field .opt, .counter { font-weight: 400; color: var(--subtle); float: right; }
input, textarea { width: 100%; margin-top: 7px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-strong); font: 400 14px/1.4 var(--sans); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
.seg { border: 0; padding: 0; margin: 16px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.seg legend { font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text-strong); }
.seg label { flex: 1; min-width: 140px; display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seg input { width: auto; margin: 0; accent-color: var(--accent-3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.difficulty { margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 20px; }
.difficulty b { color: var(--text-strong); }
.difficulty .bad { color: var(--error); }
.meter { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-bottom: 8px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--warning), var(--error)); }
.avatars { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.avatars button { padding: 3px; border-radius: 12px; border: 2px solid transparent; background: none; cursor: pointer; }
.avatars button[aria-checked=true] { border-color: var(--accent); }
.avatars svg { display: block; border-radius: 9px; }
.characters { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.characters button { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 500 12px/1.25 var(--sans); cursor: pointer; transition: border-color .15s, background .15s; }
.characters button:hover { background: var(--surface-3); }
.characters button[aria-checked=true] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-strong); }
.characters img { width: 60px; height: 60px; object-fit: contain; }
.characters .dice { display: grid; place-items: center; width: 60px; height: 60px; font: 900 30px/1 var(--display); color: var(--muted); }
.form-error { color: var(--error); min-height: 1.2em; font-size: 13px; margin: 12px 0 0; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.review { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface-2); margin-top: 16px; }
.rv-head { display: flex; gap: 12px; align-items: center; }
.rv-head svg { border-radius: 12px; }
.rv-title { font: 600 18px/1.25 var(--sans); color: var(--text-strong); }
.rv-pitch { white-space: pre-wrap; font-size: 14px; color: var(--text); max-height: 160px; overflow: auto; }
.rv-money { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.rv-money dt { color: var(--muted); } .rv-money dd { margin: 0; font-weight: 600; color: var(--text-strong); }
.terms { font-size: 13px; color: var(--muted); padding-left: 18px; margin: 16px 0; display: grid; gap: 4px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-strong); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-3); }
.done { text-align: center; padding: 18px 0 6px; }
.done-badge { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--accent-ink); background: var(--accent); }
.done h3 { font: 900 28px/1.1 var(--display); letter-spacing: .02em; margin: 4px 0; }
.simtag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(250, 204, 21, .1); color: #fcd34d; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .stage-col { padding: 16px 20px 32px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .stage-col { padding: 12px 12px 8px; }
  .sidebar { position: static; height: auto; border-left: 0; border-top: 1px solid var(--line); }
  .chat-list { height: 50vh; flex: none; }
  .panel:not(.chat-panel) { max-height: 70vh; }
}
@media (max-width: 600px) {
  :root { --header-h: 56px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand .wordmark { height: 20px; }
  .pot-label { display: none; }
  .env-chip { display: none; }   /* the notice under the header already says it */
  .brand img { width: 22px; height: 22px; }
  .top-actions { gap: 4px; }
  .pot-pill { padding: 4px 6px; }
  #walletBtn { display: none; }
  .top-actions .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .mode-banner { flex-wrap: wrap; font-size: 12px; margin-bottom: 10px; }
  .mode-banner .btn { margin-left: 0; }
  .stream-info { flex-wrap: wrap; padding: 12px 0 14px; }
  .stream-tools { width: 100%; }
  .stream-tools .tool { flex: 1; justify-content: center; }
  .now-info h1 { font-size: 16px; white-space: normal; }
  .qcard { flex-basis: 210px; }
  .how { grid-template-columns: 1fr; gap: 12px; }
  .how li, .how li + li { padding: 0; border-left: 0; }
  .row2 { grid-template-columns: 1fr; }
  .submit-inner { padding: 16px 16px 20px; }
  .submit-inner header { margin: 0 -16px 4px; padding-inline: 16px; }
}

/* ─── "Pitch the Tank": the button is a little tank ───────────────────────────────────────────
   Hover: water rises in two moving waves, a fin cruises through and bubbles float up.
   Click: jaws snap shut, a bite comes out of the corner (like the logo) and droplets splash. */
.btn-tank { position: relative; overflow: visible; isolation: isolate; transition: background .2s, box-shadow .3s; }
.btn-tank:hover { box-shadow: 0 0 0 3px rgba(134, 239, 172, .18), 0 10px 28px -10px var(--accent-glow); }
.btn-tank .tank-label { position: relative; z-index: 3; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.btn-tank:hover .tank-label { transform: translateY(-1px); }
.tank-water, .tank-jaws { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.tank-water { z-index: 1; }
.tank-jaws { z-index: 4; }
/* Waves: repeating SVG crests sliding in opposite directions; they rise from below on hover. */
.tank-water .wave { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background-repeat: repeat-x; background-size: 34px 100%; transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .9, .3, 1); }
.tank-water .w1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q10 0 20 5 T40 5 V10 H0Z' fill='rgba(5,46,22,.16)'/%3E%3C/svg%3E"); }
.tank-water .w2 { height: 38%; background-size: 46px 100%; transition-delay: .05s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q10 0 20 5 T40 5 V10 H0Z' fill='rgba(5,46,22,.24)'/%3E%3C/svg%3E"); }
.btn-tank:hover .tank-water .w1 { transform: none; animation: tank-wave-l 1.6s linear infinite; }
.btn-tank:hover .tank-water .w2 { transform: none; animation: tank-wave-r 2.3s linear infinite; }
/* Fin: rides the water across, turns, and swims back. */
.tank-fin { position: absolute; bottom: 5px; left: -18px; width: 13px; height: 14px; fill: #052e16; opacity: 0; transform-origin: 50% 100%; }
.btn-tank:hover .tank-fin { opacity: .9; animation: tank-swim 3.2s ease-in-out infinite; }
/* Bubbles: three tiny rings rising at different speeds. */
.tank-water .bubble { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; border: 1px solid rgba(5, 46, 22, .45); opacity: 0; }
.tank-water .bubble:nth-of-type(3) { left: 22%; }
.tank-water .bubble:nth-of-type(4) { left: 61%; width: 3px; height: 3px; }
.tank-water .bubble:nth-of-type(5) { left: 83%; }
.btn-tank:hover .tank-water .bubble { animation: tank-bubble 1.8s ease-in infinite; }
.btn-tank:hover .tank-water .bubble:nth-of-type(4) { animation-duration: 1.4s; animation-delay: .5s; }
.btn-tank:hover .tank-water .bubble:nth-of-type(5) { animation-duration: 2.1s; animation-delay: .9s; }
/* Jaws: a dark mouth with white teeth closes from top and bottom, then opens again. */
.jaw { position: absolute; left: -2px; right: -2px; height: 58%; background: #0a0a0c; }
.jaw.top { top: 0; transform: translateY(-120%); }
.jaw.bottom { bottom: 0; transform: translateY(120%); }
.jaw::after { content: ''; position: absolute; left: 0; right: 0; height: 7px; background-size: 9px 7px; background-repeat: repeat-x; }
.jaw.top::after { top: 100%; background-image: conic-gradient(from 135deg at 50% 100%, #f4f4f5 0 90deg, transparent 0); }
.jaw.bottom::after { bottom: 100%; background-image: conic-gradient(from -45deg at 50% 0%, #f4f4f5 0 90deg, transparent 0); }
.btn-tank.chomp .jaw.top { animation: tank-jaw-top .5s cubic-bezier(.5, 0, .3, 1) both; }
.btn-tank.chomp .jaw.bottom { animation: tank-jaw-bottom .5s cubic-bezier(.5, 0, .3, 1) both; }
/* The bite: a scalloped notch out of the top-right corner, then it heals. */
.btn-tank.chomp { animation: tank-bitten .9s ease-out both; }
/* Splash: droplets fly up from where you clicked. */
.tank-splash { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; z-index: 5; pointer-events: none; }
.tank-splash i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50% 50% 50% 0; background: var(--accent); opacity: 0; }
.btn-tank.chomp .tank-splash i { animation: tank-drop .65s cubic-bezier(.2, .7, .4, 1) .18s both; }
.tank-splash i:nth-child(1) { --dx: -30px; --dy: -26px; }
.tank-splash i:nth-child(2) { --dx: -14px; --dy: -38px; }
.tank-splash i:nth-child(3) { --dx: 4px; --dy: -42px; }
.tank-splash i:nth-child(4) { --dx: 20px; --dy: -34px; }
.tank-splash i:nth-child(5) { --dx: 34px; --dy: -20px; }
.tank-splash i:nth-child(6) { --dx: -38px; --dy: -10px; }
.btn-tank.chomp .tank-label { animation: tank-bump .45s ease-out; }
@keyframes tank-wave-l { to { background-position-x: -34px; } }
@keyframes tank-wave-r { to { background-position-x: 46px; } }
@keyframes tank-swim {
  0% { left: -16px; translate: 0 3px; scale: 1 1; rotate: -4deg; }
  20% { translate: 0 0; rotate: 4deg; }
  45% { left: calc(100% - 4px); translate: 0 2px; scale: 1 1; rotate: -3deg; }
  50% { left: calc(100% - 4px); scale: -1 1; }
  75% { translate: 0 0; rotate: 4deg; }
  95% { left: -16px; scale: -1 1; translate: 0 3px; }
  100% { left: -16px; scale: 1 1; }
}
@keyframes tank-bubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, -24px); } }
@keyframes tank-jaw-top { 0% { transform: translateY(-120%); } 40%, 55% { transform: translateY(-8%); } 100% { transform: translateY(-120%); } }
@keyframes tank-jaw-bottom { 0% { transform: translateY(120%); } 40%, 55% { transform: translateY(8%); } 100% { transform: translateY(120%); } }
@keyframes tank-bitten {
  0%, 38% { -webkit-mask-image: none; mask-image: none; }
  42% { transform: rotate(-2deg) scale(.97); }
  45%, 80% {
    -webkit-mask-image: radial-gradient(circle at calc(100% - 6px) -2px, transparent 11px, #000 11.5px), radial-gradient(circle at calc(100% - 20px) -4px, transparent 8px, #000 8.5px), radial-gradient(circle at calc(100% + 2px) 12px, transparent 7px, #000 7.5px);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle at calc(100% - 6px) -2px, transparent 11px, #000 11.5px), radial-gradient(circle at calc(100% - 20px) -4px, transparent 8px, #000 8.5px), radial-gradient(circle at calc(100% + 2px) 12px, transparent 7px, #000 7.5px);
    mask-composite: intersect; transform: none;
  }
  100% { -webkit-mask-image: none; mask-image: none; }
}
@keyframes tank-drop { 0% { opacity: 1; transform: translate(0, 0) rotate(-45deg) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 30px)) rotate(-45deg) scale(.5); } }
@keyframes tank-bump { 35% { transform: scale(.92); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tank-water, .tank-jaws, .tank-splash { display: none; } .btn-tank.chomp { animation: none; } }

/* ─── Chat vote buttons and the pitcher's counter-offer box ─── */
.vote { display: inline-flex; gap: 6px; }
.vote-btn b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.vote-btn[aria-pressed=true] b { color: var(--accent); }
.counter-box { border-color: rgba(250, 204, 21, .45); background: rgba(250, 204, 21, .08); }
.counter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.counter-row input { width: 7em; height: 32px; }

/* ─── Results: one compact row per finished pitch, outcome on the right ─── */
#resultsList { display: grid; gap: 6px; }
.res-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--line); animation: fadein .35s ease both; transition: background .15s, border-color .15s; }
.res-row:hover { background: var(--surface-2); }
.res-row.won { border-color: rgba(134, 239, 172, .22); background: linear-gradient(90deg, rgba(134, 239, 172, .07), transparent 55%), var(--surface-1); }
.res-row.won:hover { background: linear-gradient(90deg, rgba(134, 239, 172, .1), transparent 55%), var(--surface-2); }
.res-avatar svg { display: block; width: 36px; height: 36px; border-radius: 9px; }
.res-title { font: 600 13.5px/1.25 var(--sans); color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.res-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.res-meta .kind { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.res-meta .kind.existing { color: var(--purple); }
.res-meta .kind::after { content: '·'; margin-left: 6px; color: var(--muted); }
.res-out { display: grid; justify-items: end; gap: 3px; }
.res-amount { display: inline-flex; align-items: baseline; gap: 3px; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.res-amount b { font: 800 15px/1 var(--sans); letter-spacing: -.01em; }
.res-amount small { font-size: 10px; font-weight: 600; opacity: .75; }
a.res-amount:hover b { text-decoration: underline; }
.res-pay { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.res-pay i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.res-pay.paid i { background: var(--accent); }
.res-pay span { font-weight: 600; }
.res-pay.sending i { background: #facc15; animation: pulse 1.4s ease-in-out infinite; }
.res-pay.held i { background: #fbbf24; }
.res-chip { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }
.res-chip.held { color: #fbbf24; background: rgba(251, 191, 36, .1); }

/* ─── The operator's coin: CA chip in the header (click to copy) ─── */
.ca-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text); font: 600 12px/1 var(--sans); cursor: pointer; transition: background .15s; }
.ca-chip:hover { background: rgba(134, 239, 172, .16); }
.ca-chip .ca-ticker { color: var(--accent); font-weight: 800; }
.ca-chip .ca-label { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.ca-chip code { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-strong); }
.ca-chip .ca-copied { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--accent); color: var(--accent-ink); opacity: 0; transition: opacity .2s; }
.ca-chip.copied .ca-copied { opacity: 1; }
@media (max-width: 640px) { .ca-chip .ca-label { display: none; } }

/* ─── Live viewer count (from the relay) ─── */
.viewers-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; font: 600 13px/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.viewers-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }

/* ─── Clip button ─── */
.clip-btn .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--live); }
.clip-btn.recording { color: #fecaca; border-color: rgba(239, 68, 68, .45); }
.clip-btn.recording .rec { animation: pulse 1s ease-in-out infinite; }

/* ─── Pay by sending SOL (no wallet connected) ─── */
.transfer h3 { margin: 0 0 .4em; font-size: 1.15rem; }
.transfer h3 b { color: var(--accent); }
.transfer .copy-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, rgba(255, 255, 255, .03)); }
.transfer .copy-row .mono { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; color: var(--text-strong); }
.transfer .copy-row .addr { font-size: 12.5px; }
.transfer .warn { margin: 12px 0 6px; padding: 10px 12px; border-radius: 10px; background: rgba(250, 204, 21, .08); border: 1px solid rgba(250, 204, 21, .3); font-size: 13px; }
.transfer #transferStatus { display: flex; align-items: center; gap: 8px; }

/* ─── Chat poll (Twitch-style): pinned above chat while a pitch is on ─── */
.poll { margin: 8px 10px 4px; padding: 10px 12px 9px; border-radius: 12px; background: var(--surface-2, #141518); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.poll-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.3; }
.poll-live { flex: none; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--surface-3, #23252b); color: var(--muted); }
.poll-live.on { background: #16a34a; color: #f0fdf4; }
.poll-q { color: var(--text); }
.poll-q b { color: var(--text-strong); }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin: 5px 0; padding: 8px 10px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text-strong); font: 700 13px/1 var(--sans); cursor: pointer; text-align: left; }
.poll-opt:disabled { cursor: default; }
.poll-opt:not(:disabled):hover { border-color: var(--line-strong, rgba(255, 255, 255, .25)); }
.poll-opt i { position: absolute; inset: 0 auto 0 0; z-index: 0; transition: width .5s ease; }
.poll-opt.fire i { background: rgba(34, 197, 94, .28); }
.poll-opt.skull i { background: rgba(239, 68, 68, .26); }
.poll-opt > span, .poll-opt > b, .poll-opt > small { position: relative; z-index: 1; }
.poll-opt > span { flex: 1; }
.poll-opt > b { font-variant-numeric: tabular-nums; }
.poll-opt > small { min-width: 2.2em; text-align: right; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.poll-opt.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.poll-opt.skull.mine { border-color: #f87171; box-shadow: inset 0 0 0 1px #f87171; }
.poll-foot { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.poll-foot b { color: var(--text); }
.poll-right { color: #4ade80; font-weight: 800; }
.poll-wrong { color: #f87171; font-weight: 800; }

/* ─── Trailer mode (?trailer=1): clean picture for filming ─── */
.trailer #modeBanner, .trailer [data-viewers], .trailer .res-test { display: none !important; }
.trailer #potPill { visibility: hidden; }