/* ---------- tokens ----------
   The page is dusk: a deep, warm indigo (the podium room's lilac wall, at night) with the wall's doodles drawn faintly
   on it, so the chrome and the hand-drawn art feel like one world. ?tone=night switches to the colder near-black. */
@property --k { syntax: '<number>'; inherits: true; initial-value: 0.5; }   /* stage scale, animated between layouts */

:root {
  --bg: #1c1830;
  --bg-2: #25203d;
  --bg-3: #2f2949;
  --line: #3d3560;
  --line-2: #51477a;
  --txt: #f4f0fb;
  --txt-2: #bdb4d7;
  --muted: #8c83ad;
  --top: rgba(28, 24, 48, .9);
  --face: #15121f;
  --hi: #f4f0fb;
  --hi-ink: #1c1830;
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='white' stroke-opacity='.055' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 40l12 12m0-12L30 52'/%3E%3Cpath d='M150 30q8-10 16 0t16 0t16 0'/%3E%3Cpath d='M232 108l10 10m0-10l-10 10'/%3E%3Cpath d='M62 146v16m-8-8h16'/%3E%3Cpath d='M118 202q8-10 16 0t16 0'/%3E%3Cpath d='M212 214l6-12 6 12-6 12z'/%3E%3Cpath d='M36 238l12 12m0-12l-12 12'/%3E%3Ccircle cx='188' cy='160' r='5'/%3E%3Cpath d='M96 98c6-8 14-8 20 0'/%3E%3C/g%3E%3C/svg%3E");
  --lime: #c3f53c;
  --lime-ink: #142003;
  --red: #ff4d4f;
  --green: #3ddc84;
  --gold: #ffcb47;
  --radius: 14px;
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --disp: 'Big Shoulders Display', 'Inter Tight', sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
:root.tone-night {
  --bg: #0b0d12; --bg-2: #12151c; --bg-3: #1a1e27; --line: #222734; --line-2: #343a48;
  --txt: #eef0f3; --txt-2: #a3a8b3; --muted: #6c7282;
  --top: rgba(11, 13, 18, .92); --face: #0b0c10; --hi: #eef0f3; --hi-ink: #0b0d12; --doodle: none;
}
* { box-sizing: border-box; }
body { background-image: var(--doodle); }
html, body { margin: 0; background-color: var(--bg); color: var(--txt); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
code { font-family: var(--mono); font-size: 12px; }
.up { color: var(--green); }
.down { color: var(--red); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-3); color: var(--txt); font: 700 14px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--line-2); }
.btn-lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.btn-lime:hover { background: #d3ff5c; border-color: #d3ff5c; }
.btn-ghost { background: transparent; }

/* ---------- header: the logo, the sections, the CA, the links and the coin ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 48px; height: 66px; padding: 0 24px; background: var(--top); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
/* the logo: ZIP in the trench, then the lettering (both cut from the Trenchcast logo, site/brand) */
.brand-mark { display: block; height: 52px; width: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.brand-word { display: block; height: 30px; width: auto; }
.brand:hover .brand-mark { transform: rotate(-4deg); transition: transform .15s; }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255, 77, 94, .18); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 77, 94, 0); } }
.nav { display: flex; align-self: stretch; gap: 36px; }
.nav a { position: relative; display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 500; color: var(--txt-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--txt); }
.nav a i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(61, 220, 132, .16); }
.nav a[aria-current] { color: var(--txt); }
.nav a[aria-current]::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--green); }
.top-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* the CA (copies on click), and the X / pump.fun buttons */
.top-ca { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--txt); cursor: pointer; white-space: nowrap; }
.top-ca span { font: 700 11.5px var(--font); letter-spacing: .1em; color: var(--muted); }
.top-ca code { font-size: 13px; }
.top-ca svg { width: 15px; height: 15px; color: var(--muted); }
.top-ca:hover:not(:disabled) { border-color: var(--muted); background: var(--bg-3); }
.top-ca:disabled { cursor: default; }
.top-ca:disabled code { color: var(--txt-2); }
.top-ca:disabled svg { display: none; }
.top-ca.copied code { color: var(--green); }
.icon-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--txt); font: 700 19px/1 var(--font); text-decoration: none; transition: background .15s, border-color .15s; }
.icon-btn:hover { border-color: var(--muted); background: var(--bg-3); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn[data-soon] { cursor: default; }
/* "share this": the last big moment, offered in the arena bar for 30s after its banner */
.moment { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin-left: auto; padding: 0 12px 0 10px; border: 2px solid #111; border-radius: 8px; background: #fff27a; box-shadow: 2px 2px 0 #111; color: #111; font: 400 14px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transform: rotate(-1.5deg); animation: vsIn .4s cubic-bezier(.2, 1.6, .4, 1); }
.moment svg { width: 16px; height: 16px; }
.moment span { font: 400 15px 'Patrick Hand', cursive; text-transform: none; letter-spacing: 0; }
.moment:not([hidden]) + .conn { margin-left: 12px; }

/* share icons: on a trader's chat line, a closed trade, a trader's card */
.cm-share { display: inline-grid; place-items: center; flex: none; width: 24px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.cm-share svg { width: 15px; height: 15px; }
.cm:hover .cm-share, .cm-share:focus-visible { opacity: 1; }
.cm-share:hover { color: var(--txt); background: var(--bg-3); }
.cm-top .cm-share + time { margin-left: 6px; }
.cm-trade .cm-share { margin-left: 0; }
@media (hover: none) { .cm-share { opacity: .7; } .pl-vol { display: none; } }
.top-cta .btn { height: 40px; }
.top-cta .btn-lime { padding: 0 22px; border-radius: 8px; font: 900 20px/1 var(--disp); letter-spacing: .03em; }
/* the wallet: lime to connect; connected, it shows the address (click: disconnect) */
.top-cta .wallet-btn { padding: 0 16px; font-size: 16px; white-space: nowrap; cursor: pointer; }
.top-cta .wallet-btn.on { background: transparent; color: var(--lime); font: 700 13px/1 var(--mono); letter-spacing: 0; }
.top-cta .wallet-btn.on:hover { background: rgba(195, 245, 60, .1); }

/* ---------- the show: arena + chat fill the screen under the header (minus the strip under them) ---------- */
.show { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 460px); gap: 14px; padding: 14px 24px; height: calc(100vh - 66px); height: calc(100svh - 66px); min-height: 440px; transition: height .62s cubic-bezier(.22, .8, .24, 1); overflow-x: clip; }   /* (the banner's sunburst never widens the page) */
.arena { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.arena-bar { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px; margin-bottom: 14px; flex: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.seg button { border: 0; background: transparent; padding: 6px 16px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--txt-2); cursor: pointer; }
.seg button:hover { color: var(--txt); }
.seg button[aria-pressed="true"] { background: var(--hi); color: var(--hi-ink); }
.conn { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.live { color: var(--txt); }
.conn.live i { background: var(--green); box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
.conn.down i { background: var(--red); }
.bar-stats { display: flex; align-items: center; gap: 24px; height: 28px; margin-left: 8px; padding: 0 8px 0 20px; border-left: 1px solid var(--line); font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.bar-stats b { margin-left: 7px; font: 800 20px/1 var(--disp); letter-spacing: .02em; color: var(--txt); }
.tiles { position: relative; flex: 1; min-height: 0; }

/* ---------- a stream tile ---------- */
.tile { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--radius); overflow: hidden; overflow: clip; background: var(--bg-2); container-type: inline-size; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -24px rgba(0, 0, 0, .8); transform-origin: 0 0; transition: box-shadow .3s; user-select: none; }
.tile.lead { box-shadow: 0 0 0 1px rgba(255, 203, 71, .55), 0 0 30px -6px rgba(255, 203, 71, .2); }
.tile:not(.focused):hover { box-shadow: 0 0 0 2px var(--c), 0 18px 36px -24px rgba(0, 0, 0, .8); }
.tv { position: absolute; left: 0; top: 0; right: 0; height: calc(100% - var(--cap, 48px)); overflow: hidden; background: #000; }

/* the player, at the left of the caption bar like a real stream's: the speaker (sound off: "click to unmute"), this
   stream's volume (slides out on hover), the music */
.pl { position: relative; z-index: 10; flex: none; display: flex; align-items: center; height: 32px; margin-left: -6px; padding: 0 4px; border-radius: 8px; color: var(--txt-2); transition: background .15s; }
.pl:hover { background: rgba(255, 255, 255, .06); }
.pl button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.pl button:hover { color: var(--txt); }
.pl svg { width: 20px; height: 20px; }
.pl-snd { color: var(--txt) !important; }
.pl-snd .x, :is(.snd-off, .snd-muted) .pl-snd .w { display: none; }
:is(.snd-off, .snd-muted) .pl-snd .x { display: inline; }
.pl-vol { width: 0; margin: 0; opacity: 0; accent-color: var(--lime); cursor: pointer; transition: width .2s, opacity .2s, margin .2s; }
.pl:hover .pl-vol, .pl-vol:focus-visible { width: 76px; margin: 0 6px 0 2px; opacity: 1; }
.pl-music[aria-pressed="true"] { color: var(--lime); }
.pl-hint { display: none; padding: 0 8px 0 2px; color: var(--txt); font: 600 13px/1 var(--font); white-space: nowrap; cursor: pointer; }
.snd-off .pl-hint { display: inline; }
.snd-off :is(.pl-vol, .pl-music) { display: none; }
.snd-off .pl { background: rgba(195, 245, 60, .12); }
/* the caption: trophy, place, name, PnL (slimmer on thumbnails) */
.tile-cap { position: absolute; left: 0; right: 0; bottom: 0; height: var(--cap, 48px); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--bg-2); border-top: 1px solid var(--line); }
.cap-medal { flex: none; display: grid; width: 22px; height: 22px; color: var(--line-2); }
.cap-medal svg { width: 100%; height: 100%; }
.tile[data-rank="1"] .cap-medal { color: var(--gold); }
.tile[data-rank="2"] .cap-medal { color: #c9d1dc; }
.tile[data-rank="3"] .cap-medal { color: #d58a52; }
.cap-rank { flex: none; font: 800 20px/1 var(--disp); letter-spacing: .02em; color: var(--txt); }
.cap-name { min-width: 0; font: 900 24px/1 var(--disp); letter-spacing: .04em; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-pnl { flex: none; display: flex; align-items: baseline; gap: 10px; margin-left: auto; white-space: nowrap; }
.cap-pnl small { font-size: 13px; color: var(--muted); }
.cap-pnl b { font: 800 21px/1 var(--disp); letter-spacing: .02em; }
.cap-pnl b i { font-style: normal; }
@container (max-width: 419px) {
  .tile-cap { gap: 8px; padding: 0 10px; }
  .pl { height: 26px; }
  .pl button { width: 24px; height: 24px; }
  .pl svg { width: 16px; height: 16px; }
  .pl-vol { display: none !important; }
  .tile:not(.focused) :is(.pl-hint, .pl-music) { display: none !important; }
  .tile.focused.snd-off .cap-medal { display: none; }
  .cap-medal { width: 16px; height: 16px; }
  .cap-rank { font-size: 15px; }
  .cap-name { font-size: 17px; }
  .cap-pnl small { display: none; }
  .cap-pnl b { font-size: 15px; }
}
@container (max-width: 199px) {
  .tile-cap { gap: 5px; padding: 0 7px; }
  .cap-medal, .cap-rank, .cap-pnl b i, .pl { display: none; }
  .cap-name { font-size: 13px; }
  .cap-pnl b { font-size: 12px; }
}
.tile-hit { position: absolute; inset: 0; z-index: 9; border: 0; background: transparent; cursor: pointer; }
.tile.focused .tile-hit { display: none; }

.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(var(--k)); transform-origin: 0 0; }
.cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .9s var(--ease); }

/* the room */
.wall { position: absolute; inset: 0; background:
  radial-gradient(ellipse 58% 56% at 50% 24%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 80px),
  linear-gradient(#18191f, #0c0d11 80%); }
.wall::after { content: ''; position: absolute; left: 0; right: 0; top: 584px; height: 8px; background: var(--c); filter: blur(12px); opacity: .5; }
.neon { position: absolute; left: 0; right: 0; top: 58px; text-align: center; pointer-events: none; }
.neon b { display: block; font: 900 96px/.9 var(--disp); letter-spacing: .05em; color: color-mix(in srgb, var(--c) 50%, #fff); text-shadow: 0 0 4px var(--c), 0 0 18px var(--c), 0 0 50px var(--c); animation: neon 8s infinite; }
.neon small { display: block; margin-top: 8px; font: 700 15px var(--mono); letter-spacing: .4em; text-transform: uppercase; color: var(--c); opacity: .7; }
@keyframes neon { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .5; } 93% { opacity: 1; } 95% { opacity: .7; } }

.avatar { position: absolute; left: 470px; top: 150px; width: 340px; height: 470px; z-index: 2; }
/* a Live2D streamer takes a bigger slot (its canvas is 640×680); the robot steps aside once it has loaded */
.avatar.l2d { left: 380px; top: 104px; width: 520px; height: 552px; }
.avatar.l2d > svg { display: none; }
.avatar canvas.l2d { display: block; width: 100%; height: 100%; }
/* the robots' eyes follow the action too */
.av-eyes { transition: translate .4s ease; }
.tile[data-look="left"] .av-eyes { translate: -9px 2px; }
.tile[data-look="right"] .av-eyes { translate: 9px 2px; }
.tile[data-look="camera"] .av-eyes { translate: 0 -2px; }
.av { display: block; width: 100%; height: 100%; overflow: visible; }
.desk { position: absolute; left: -20px; right: -20px; top: 592px; bottom: 0; z-index: 3; background: linear-gradient(#24262d, #121318 30%, #0a0b0e); border-top: 2px solid color-mix(in srgb, var(--c) 35%, #2a2c33); }
.kb { position: absolute; left: 50%; top: 20px; width: 330px; height: 36px; margin-left: -165px; border-radius: 8px; background: repeating-linear-gradient(90deg, #2b2e36 0 18px, #1c1e24 18px 21px); box-shadow: 0 3px 0 #07080a, inset 0 0 0 3px #17181d; transform: perspective(500px) rotateX(40deg); }
.mouse { position: absolute; left: calc(50% + 205px); top: 24px; width: 34px; height: 48px; border-radius: 17px; background: #25272e; box-shadow: inset 0 0 0 2px #16171b, 0 3px 0 #07080a; transform: perspective(500px) rotateX(40deg); }
.prop-slot { position: absolute; left: 352px; top: 498px; width: 110px; height: 110px; z-index: 4; }
.prop { display: block; width: 100%; height: 100%; }

/* monitors: angled toward the streamer; a camera on one flattens it */
.mon { position: absolute; top: 128px; width: 486px; height: 320px; z-index: 5; padding: 12px; border-radius: 12px; background: linear-gradient(#1b1c22, #0b0c0f); box-shadow: 0 0 0 2px #050506, 0 24px 60px rgba(0, 0, 0, .6), 0 0 44px color-mix(in srgb, var(--c) 16%, transparent); transition: transform .9s var(--ease); }
.mon::before { content: ''; position: absolute; left: 50%; top: 100%; width: 18px; height: 142px; margin-left: -9px; background: linear-gradient(90deg, #121317, #2a2c33, #121317); z-index: -1; }
.mon::after { content: ''; position: absolute; left: 50%; top: calc(100% + 136px); width: 120px; height: 14px; margin-left: -60px; border-radius: 6px; background: #1c1d22; box-shadow: 0 3px 0 #07080a; }
.mon-l { left: 36px; transform: perspective(1400px) rotateY(16deg); transform-origin: 0 50%; }
.mon-r { left: 758px; transform: perspective(1400px) rotateY(-16deg); transform-origin: 100% 50%; }
.tile[data-cam="term"] .mon-l, .tile[data-cam="chart"] .mon-r { transform: none; }
.scr { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #0c0e12; }
.scr::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .05), transparent 42%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px); }

/* left screen: the terminal */
.term { display: flex; flex-direction: column; font: 13px/1.5 var(--mono); color: #cfd3da; }
.tm-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #14171d; border-bottom: 1px solid #22262e; font-size: 11.5px; color: #7d8592; }
.tm-head i { width: 9px; height: 9px; border-radius: 50%; background: #343841; }
.tm-head span { margin-left: 6px; }
.tm-body { flex: 1; min-height: 0; padding: 8px 12px 4px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.tl { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: tlIn .25s ease; }
.tl i { font-style: normal; color: #5d6470; }
.tl-u { color: #e8eaee; margin-top: 6px; }
.tl-u i { color: var(--c); }
.tl-t { color: #f2f3f5; font-weight: 600; }
.tl-t i { color: var(--green); }
.tl-o { color: #8b929e; padding-left: 14px; }
.tl-a { color: #c9cdd4; }
.tl-k { color: var(--c); font-weight: 700; }
.tl-m { color: var(--gold); margin-top: 6px; }
@keyframes tlIn { from { opacity: 0; transform: translateY(4px); } }
.tm-in { display: flex; align-items: center; gap: 8px; margin: 4px 10px 10px; padding: 0 10px; height: 34px; border: 1px solid #2a2e37; border-radius: 6px; color: #e8eaee; white-space: nowrap; overflow: hidden; }
.tm-in span { color: var(--c); }
.tm-type { font-style: normal; }
.caret { flex: none; width: 8px; height: 16px; background: #cfd3da; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* right screen: pump.fun */
.pf { display: flex; flex-direction: column; background: #0d1014; color: #e8eaee; }
.pf-top { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px 7px; border-bottom: 1px solid #1d2128; white-space: nowrap; min-width: 0; }
.pf-logo { font: 800 14px var(--font); color: #86efac; }
.pf-tag { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: #1a1e25; color: #8b929e; }
.pf-tag.hold { background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--c); }
.pf-sym { font: 800 17px var(--font); }
.pf-name { color: #7d8592; font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-mc { margin-left: auto; font: 700 13px var(--mono); font-style: normal; color: #cfd3da; }
.pf-pnl { font: 800 14px var(--mono); }
.pf-main { position: relative; flex: 1; min-height: 0; }
.pf-chart { position: absolute; left: 8px; top: 6px; width: calc(100% - 16px); height: calc(100% - 8px); }
.pf-board { position: absolute; inset: 8px 12px; font-size: 13px; }
.pb-h { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
.pb-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: 6px; background: #141820; font-family: var(--mono); font-size: 12.5px; }
.pb-row b { font-family: var(--font); overflow: hidden; text-overflow: ellipsis; }
.pb-row em { font-style: normal; text-align: right; }
.pf-tape { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; padding: 7px 12px 9px; border-top: 1px solid #1d2128; font: 11.5px var(--mono); height: 60px; overflow: hidden; }
.pf-tape div { display: flex; gap: 7px; white-space: nowrap; overflow: hidden; }
.pf-tape .b span { color: var(--green); }
.pf-tape .s span { color: var(--red); }
.pf-tape em { color: #6b7280; font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.pf-tape i { margin-left: auto; color: #4b5260; font-style: normal; }

/* ---------- overlays (tile pixels, shrink with the tile) ---------- */
.ov { position: absolute; z-index: 6; pointer-events: none; }
.ov-tl { left: 12px; top: 12px; display: flex; align-items: center; gap: 7px; }
.pill-live { font: 800 11px var(--font); letter-spacing: .06em; padding: 3px 7px; border-radius: 5px; background: var(--red); color: #fff; }
.views { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 5px; background: rgba(0, 0, 0, .6); color: #fff; font: 700 12px var(--mono); }
.views svg { width: 14px; height: 14px; }
.ov-vs { left: 50%; top: 70px; z-index: 7; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border: 3px solid #111; border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 #111; color: #111; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; }
.ov-vs.go { animation: vsIn .45s cubic-bezier(.2, 1.6, .4, 1); }
.ov-vs small { font: 400 15px/1 'Anton', Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.vs-face { display: block; width: 40px; height: 40px; border: 2.5px solid #111; border-radius: 50%; background-color: #fff !important; overflow: hidden; }
.vs-face svg { width: 100%; height: 100%; }
.ov-vs b { font: 400 26px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: 1.5px #111; paint-order: stroke fill; text-shadow: 2px 2px 0 #111; }
@keyframes vsIn { from { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-14deg); } }
.rank { font: 800 12px var(--mono); padding: 3px 7px; border-radius: 5px; background: rgba(0, 0, 0, .6); color: var(--txt); }
.tile.lead .rank { background: var(--gold); color: #1d1404; }
.mood { font-size: 12px; color: rgba(255, 255, 255, .82); background: rgba(0, 0, 0, .55); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.mood:empty { display: none; }
.ov-tr { right: 12px; top: 12px; min-width: 156px; padding: 7px 10px; border-radius: 10px; background: rgba(8, 9, 12, .74); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .08); }
.ov-tr div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ov-tr span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ov-tr b { font: 700 13px var(--mono); }
/* the address under the wallet's numbers; in Focus it copies (the note itself ignores the pointer) */
.w-addr { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit; pointer-events: none; }
.w-addr code { font-size: 11px; opacity: .8; }
.w-addr svg { width: 12px; height: 12px; opacity: .7; }
.tile.focused .w-addr { pointer-events: auto; cursor: pointer; }
.w-addr.copied code { color: #0a7a35; }
.w-addr.copied svg { opacity: 1; color: #0a7a35; }
.ov-pos { left: 12px; bottom: 58px; display: flex; align-items: baseline; gap: 7px; padding: 6px 10px; border-radius: 9px; background: rgba(8, 9, 12, .78); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-size: 13px; }
.ov-pos span { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--c); }
.ov-pos em { font: 800 14px var(--mono); font-style: normal; }
.ov-pos i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ov-msg { left: 12px; bottom: 98px; max-width: 46%; padding: 7px 11px 8px; border-radius: 10px 10px 10px 2px; background: rgba(255, 255, 255, .94); color: #121317; font-size: 13.5px; line-height: 1.3; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); transform-origin: 0 100%; }
.ov-msg small { display: block; font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b6f78; }
.ov-msg b { margin-right: 5px; }
.ov-sub { left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: 84%; padding: 8px 14px; border-radius: 10px; background: rgba(8, 9, 12, .84); font-size: 15px; font-weight: 600; text-align: center; animation: subIn .3s ease; }
.ov-sub b { font: 900 16px var(--disp); letter-spacing: .05em; color: var(--c); margin-right: 7px; }
@keyframes subIn { from { opacity: 0; transform: translate(-50%, 6px); } }
.ov-toast { left: 50%; top: 20%; transform: translateX(-50%); min-width: 190px; padding: 10px 20px 12px; text-align: center; border-radius: 12px; background: rgba(8, 9, 12, .88); border: 2px solid var(--c); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.ov-toast small { display: block; font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.ov-toast b { display: block; font: 900 32px/1.1 var(--disp); letter-spacing: .03em; color: var(--c); }
.ov-toast span { font-size: 12.5px; color: var(--txt-2); }
.ov-toast.up { border-color: var(--green); }
.ov-toast.up b { color: var(--green); }
.ov-toast.down { border-color: var(--red); }
.ov-toast.down b { color: var(--red); }
.ov-toast.rug { border-color: var(--red); background: rgba(60, 8, 10, .9); animation: pop .4s cubic-bezier(.2, 1.4, .4, 1), shake .5s .4s; }
.ov-toast.rug b { color: var(--red); }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(.7); } }
@keyframes shake { 20%, 60% { transform: translateX(calc(-50% - 6px)); } 40%, 80% { transform: translateX(calc(-50% + 6px)); } }

@container (max-width: 560px) {
  .ov-sub { font-size: 12.5px; bottom: 8px; padding: 5px 10px; }
  .ov-sub b { font-size: 13px; }
  .ov-tr { min-width: 0; padding: 5px 8px; }
  .ov-tr b { font-size: 12px; }
  .ov-pos { bottom: 44px; font-size: 12px; padding: 4px 8px; }
  .ov-pos i { display: none; }
  .ov-msg { bottom: 78px; max-width: 60%; font-size: 12px; padding: 5px 9px; }
  .ov-toast { min-width: 0; padding: 6px 14px 8px; }
  .ov-toast b { font-size: 24px; }
}
@container (max-width: 360px) {
  .ov-sub, .ov-pos, .ov-msg, .ov-toast span, .ov-tl, .ov-tr, .ov-vs { display: none; }   /* a thumbnail: the caption says who and how */
  .ov-toast { top: 34%; padding: 4px 10px; border-width: 1px; }
  .ov-toast small { font-size: 9px; }
  .ov-toast b { font-size: 17px; }
}

/* ---------- the streamers (SVG) ---------- */
.a-body { fill: #1f232b; }
.a-hi { fill: #2e3440; }
.a-dark { fill: #0b0d11; }
.a-acc { fill: var(--c); }
.a-acc-d { fill: color-mix(in srgb, var(--c) 52%, #16161d); }
.a-acc-d2 { stroke: color-mix(in srgb, var(--c) 35%, #0d0d12); fill: none; stroke-linecap: round; }
.a-white { fill: #e9edf2; }
.a-shade { fill: #07080a; }
.a-cup { fill: #272c36; }
.a-line { stroke: #2a2f39; stroke-linecap: round; }
.a-line-acc { stroke: var(--c); stroke-linecap: round; }
.a-steam { stroke: rgba(255, 255, 255, .35); stroke-linecap: round; animation: steam 3.2s ease-in-out infinite; }
.a-glass { fill: color-mix(in srgb, var(--c) 16%, rgba(150, 200, 255, .1)); stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.a-glow { filter: drop-shadow(0 0 6px var(--c)); }
.av-head, .av-eyes, .av-mouth, .av-mouth rect, .av-mouth path, .av-scan, .av-ping { transform-box: fill-box; transform-origin: center; }
.av-head { transform-origin: 50% 100%; animation: bob 3.8s ease-in-out infinite; }
.av-eyes.blink { animation: blinkE 5.5s infinite; }
.av-scan { animation: scanE 2.6s ease-in-out infinite alternate; }
.av-ping { animation: ping 1.6s ease-in-out infinite; }
.av-mouth.vents rect { opacity: .55; }
.talking .av-mouth { animation: talk .17s ease-in-out infinite alternate; }
.talking .av-mouth.eq, .talking .av-mouth.vents { animation: none; }
.talking .av-mouth.eq rect { animation: eq .26s ease-in-out infinite alternate; }
.talking .av-mouth.eq rect:nth-child(2n) { animation-duration: .19s; }
.talking .av-mouth.eq rect:nth-child(3n) { animation-duration: .33s; }
.talking .av-mouth.vents rect { animation: vent .2s steps(2) infinite alternate; }
.win .av-head { animation: hop .42s ease 4; }
.win .av-eyes, .win .av-eyes.blink { animation: none; transform: scaleY(.35); }
.loss .av-head { animation: slump 4.6s ease forwards; }
.loss .av-eyes, .loss .av-eyes.blink { animation: none; opacity: .4; transform: translateY(5px) scaleY(.7); }
.av-mini .av-head, .av-mini .av-eyes, .av-mini .av-scan, .av-mini .av-ping { animation: none; }
@keyframes bob { 50% { transform: translateY(4px) rotate(-.7deg); } }
@keyframes blinkE { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes scanE { from { transform: translateX(-10px); } to { transform: translateX(84px); } }
@keyframes ping { 50% { opacity: .3; } }
@keyframes talk { to { transform: scaleY(.3); } }
@keyframes eq { from { transform: scaleY(.3); } to { transform: scaleY(1.3); } }
@keyframes vent { from { opacity: .4; } to { opacity: 1; } }
@keyframes hop { 50% { transform: translateY(-18px); } }
@keyframes slump { 12%, 85% { transform: translateY(12px) rotate(-5deg); } 100% { transform: none; } }
@keyframes steam { 50% { opacity: .2; transform: translateY(-4px); } }

/* ---------- the meme streamers (memes.js) ---------- */
.avatar.meme { left: 390px; top: 150px; width: 500px; height: 500px; }
.avatar.meme > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mm .mm-all { transform-box: view-box; transform-origin: 50% 100%; animation: mmBob 3.4s ease-in-out infinite; }
.mm .mm-jit, .mm .mm-pupils, .mm .mm-shades, .mm .mm-paws, .mm .stuffed, .mm .spark { transform-box: fill-box; transform-origin: 50% 50%; }
/* one face at a time: idle · smug · win · loss · rug · read */
.mm .f { display: none; }
.mm[data-face="idle"] .f-idle, .mm[data-face="smug"] .f-smug, .mm[data-face="win"] .f-win,
.mm[data-face="loss"] .f-loss, .mm[data-face="rug"] .f-rug, .mm[data-face="read"] .f-read { display: inline; }
/* blinking: lids drop from the top for a beat */
.mm .mm-lids > * { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: mmBlink 5s var(--blink, 0s) infinite; }
.mm[data-face="win"] .mm-lids > * { animation: none; }
/* gaze: the pupils slide */
.mm .mm-pupils { transition: translate .35s ease; }
.mm-hamster[data-face="win"] .mm-pupils { opacity: 0; }      /* happy ^ ^ eyes */
/* talking: the face's mouth gives way to a moving one */
.mm .mm-talk { display: none; }
.mm.talking .f .mouth { display: none; }
.mm.talking .mm-talk { display: inline; }
.mm.talking .mm-talk > * { transform-box: fill-box; transform-origin: 50% 30%; animation: mmTalk .16s ease-in-out infinite alternate; }
/* the body: hop on a win, slump on a loss, shake on a rug */
.mm.win .mm-all { animation: mmHop .45s ease 4; }
.mm.loss .mm-all { animation: mmSlump 4.8s ease forwards; }
.mm.rug .mm-all { animation: mmShake .12s linear 14; }
/* character bits */
.mm-hamster .mm-jit { animation: mmJit .9s steps(2) infinite; }           /* too much caffeine */
.mm-hamster .mm-paws { animation: mmType .2s ease-in-out infinite alternate; }
.mm-hamster[data-face="win"] .stuffed { animation: mmPuff .5s ease; }
.mm-snake .mm-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: mmTongue 4.6s infinite; }
.mm-snake.talking .mm-tongue { opacity: 0; }
.mm-orca .mm-shades { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.mm-orca[data-face="smug"] .mm-shades, .mm-orca[data-face="win"] .mm-shades { transform: translateY(58px); }
.mm-rock .spark { animation: mmSpark .7s ease-in-out infinite alternate; }
.mm .tear { animation: mmTear 1.1s linear infinite; }
.mm .tear.t2 { animation-delay: -.55s; }
.mm .sweat { animation: mmSweat 1.4s ease-in infinite; }
@keyframes mmBob { 50% { transform: translateY(5px) rotate(-.6deg); } }
@keyframes mmBlink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes mmTalk { from { transform: scaleY(.25); } to { transform: scaleY(1.15); } }
@keyframes mmHop { 50% { transform: translateY(-22px); } }
@keyframes mmSlump { 12%, 85% { transform: translateY(14px) rotate(-4deg); } 100% { transform: none; } }
@keyframes mmShake { 25% { transform: translateX(-9px) rotate(-1deg); } 75% { transform: translateX(9px) rotate(1deg); } }
@keyframes mmJit { 50% { transform: translate(1px, -1px); } }
@keyframes mmType { to { transform: translateY(-5px); } }
@keyframes mmPuff { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } }
@keyframes mmTongue { 0%, 86%, 100% { transform: scaleY(0); } 89%, 95% { transform: scaleY(1); } 92% { transform: scaleY(.6); } }
@keyframes mmSpark { to { opacity: .2; transform: scale(.7); } }
@keyframes mmTear { from { transform: translateY(0); opacity: 1; } to { transform: translateY(46px); opacity: 0; } }
@keyframes mmSweat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26px); opacity: 0; } }

/* ---------- doodle rooms (rooms.js): the room and the overlays drawn in the characters' style ---------- */
.room-back, .room-desk { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; overflow: visible; }
.room-back { z-index: 0; }
.room-desk { z-index: 3; }
.tile[data-room="doodle"] :is(.wall, .neon, .desk, .prop-slot) { display: none; }
/* the monitors stand behind the streamer, smaller, scaled around the foot of their stand so it stays on the desk */
.tile[data-room="doodle"] .mon { z-index: 1; background: none; box-shadow: none; transform-origin: 243px 464px; }
.tile[data-room="doodle"] .mon::before, .tile[data-room="doodle"] .mon::after { display: none; }
.tile[data-room="doodle"] .mon-l { transform: rotate(-1.2deg) scale(.78); }
.tile[data-room="doodle"] .mon-r { transform: rotate(1deg) scale(.78); }
.tile[data-room="doodle"][data-cam="term"] .mon-l, .tile[data-room="doodle"][data-cam="chart"] .mon-r { transform: scale(.78); }
.tile[data-room="doodle"] .scr::after { background: linear-gradient(118deg, rgba(255, 255, 255, .07), transparent 40%); }
.mon-frame { position: absolute; left: -17px; top: -16px; width: 520px; height: 520px; z-index: -1; overflow: visible; pointer-events: none; }
.room-back .clock-m { transform-box: view-box; transform-origin: 640px 172px; animation: spin 1.2s linear infinite; }
.room-back .clock-h { transform-box: view-box; transform-origin: 640px 172px; animation: spin 14s linear infinite; }
.room-back .wheel { transform-box: view-box; transform-origin: 190px 566px; animation: spin 7s linear infinite; }
.tile[data-react="win"] .room-back .wheel { animation-duration: .5s; }
.tile[data-react="rug"] .room-back .wheel { animation-direction: reverse; animation-duration: 1.2s; }
.room-back .bub { transform-box: fill-box; animation: bubble 2.2s ease-in infinite; }
.room-back .bub.b2 { animation-delay: -1.1s; }
.room-back .glow, .room-desk .glow { animation: glow 2.6s ease-in-out infinite alternate; }
.room-back .sw-hand { transform-box: view-box; transform-origin: 940px 160px; animation: spin 1.5s steps(12) infinite; }
.room-back .bulb { animation: twinkle 1.8s ease-in-out infinite alternate; }
.room-back .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .5s ease-in-out infinite alternate; }
.room-back .fish { animation: swim 7s ease-in-out infinite; }
.room-desk .steam { animation: glow 1.6s ease-in-out infinite alternate; }
.room-desk .shiver { animation: shiver .18s steps(2) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { from { opacity: .15; } to { opacity: .45; } }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes flicker { from { transform: scale(.9, .85) rotate(-3deg); } to { transform: scale(1.05, 1.1) rotate(3deg); } }
@keyframes swim { 0%, 100% { transform: translate(-22px, 4px); } 50% { transform: translate(30px, -4px); } }
@keyframes shiver { 50% { transform: translateX(1.5px); } }
@keyframes bubble { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }

/* the overlays, cartoon: outlined labels, a sticky note, a speech bubble, comic bursts */
.tile[data-room="doodle"] .pill-live { background: #ff3b3b; border: 2.5px solid #111; border-radius: 5px; transform: rotate(-4deg); font: 400 13px 'Anton', Impact, sans-serif; letter-spacing: .08em; box-shadow: 2px 2px 0 #111; }
.tile[data-room="doodle"] .views { border: 2.5px solid #111; background: #fff; box-shadow: 2px 2px 0 #111; color: #111; font: 400 14px/1.1 'Anton', Impact, sans-serif; letter-spacing: .04em; }
.tile[data-room="doodle"] .rank { background: #fff; color: #111; border: 2.5px solid #111; box-shadow: 2px 2px 0 #111; }
.tile[data-room="doodle"].lead .rank { background: #ffd23f; }
.tile[data-room="doodle"] .mood { background: #fff; color: #111; border: 2px solid #111; border-radius: 4px; font: 400 15px/1.1 'Patrick Hand', cursive; box-shadow: 2px 2px 0 #111; }
.tile[data-room="doodle"] .mood { transform: rotate(2deg); }
.tile[data-room="doodle"] .ov-tr { background: #fff27a; border: 2.5px solid #111; border-radius: 3px; box-shadow: 4px 4px 0 #111; backdrop-filter: none; transform: rotate(2.5deg); }
.tile[data-room="doodle"] .ov-tr span { color: #5b5230; font: 400 14px 'Patrick Hand', cursive; text-transform: none; letter-spacing: 0; }
.tile[data-room="doodle"] .ov-tr b { color: #111; font: 400 19px 'Patrick Hand', cursive; }
.tile[data-room="doodle"] .ov-tr b.up { color: #0a7a35; }
.tile[data-room="doodle"] .ov-tr b.down { color: #c4161c; }
.tile[data-room="doodle"] .w-addr { margin-top: 2px; padding-top: 3px; border-top: 2px dashed rgba(17, 17, 17, .3); color: #111; }
.tile[data-room="doodle"] .w-addr code { font: 400 15px 'Patrick Hand', cursive; opacity: 1; }
.tile[data-room="doodle"] .ov-pos { background: #fff; color: #111; border: 2.5px solid #111; border-radius: 6px; box-shadow: 3px 3px 0 #111; font-family: 'Patrick Hand', cursive; font-size: 16px; transform: rotate(-1.5deg); }
.tile[data-room="doodle"] .ov-pos span { color: #111; background: var(--c); padding: 1px 5px; border: 1.5px solid #111; border-radius: 3px; }
.tile[data-room="doodle"] .ov-pos em.up { color: #0a7a35; }
.tile[data-room="doodle"] .ov-pos em.down { color: #c4161c; }
.tile[data-room="doodle"] .ov-pos i { color: #555; }
/* its lines: a speech bubble pointing up at the streamer */
.tile[data-room="doodle"] .ov-sub { background: #fff; color: #111; border: 3px solid #111; border-radius: 26px 20px 28px 18px / 18px 28px 20px 26px; box-shadow: 4px 4px 0 #111; font: 400 20px/1.2 'Patrick Hand', cursive; padding: 9px 18px; overflow: visible; }
.tile[data-room="doodle"] .ov-sub::before, .tile[data-room="doodle"] .ov-sub::after { content: ''; position: absolute; left: 50%; border: solid transparent; }
.tile[data-room="doodle"] .ov-sub::before { top: -22px; margin-left: -14px; border-width: 0 14px 22px 4px; border-bottom-color: #111; }
.tile[data-room="doodle"] .ov-sub::after { top: -15px; margin-left: -9px; border-width: 0 9px 16px 2px; border-bottom-color: #fff; }
.tile[data-room="doodle"] .ov-sub b { color: #111; background: var(--c); border: 2px solid #111; border-radius: 4px; padding: 0 6px; font: 400 15px/1.3 'Anton', Impact, sans-serif; letter-spacing: .04em; vertical-align: 2px; }
/* reading chat: a thought bubble */
.tile[data-room="doodle"] .ov-msg { border: 3px solid #111; box-shadow: 4px 4px 0 #111; font-family: 'Patrick Hand', cursive; font-size: 17px; border-radius: 20px 20px 20px 4px; }
.tile[data-room="doodle"] .ov-msg small { font-family: 'Anton', Impact, sans-serif; letter-spacing: .08em; color: #111; }
/* trades: a comic burst */
.tile[data-room="doodle"] .ov-toast { left: 27%; top: 24%; background: none; border: 0; box-shadow: none; padding: 46px 64px 50px; min-width: 300px; filter: drop-shadow(5px 5px 0 #111); }   /* off to the side: the face is the show */
.tile[data-room="doodle"] .ov-toast::before, .tile[data-room="doodle"] .ov-toast::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(50.0% 1.3%, 59.9% 16.4%, 76.8% 8.4%, 76.7% 26.9%, 93.5% 30.1%, 86.1% 44.8%, 101.6% 57.4%, 85.0% 66.0%, 88.8% 83.6%, 69.3% 80.0%, 64.1% 98.2%, 50.0% 85.9%, 36.4% 96.4%, 31.1% 79.5%, 13.3% 81.8%, 14.4% 66.3%, -1.1% 57.3%, 11.9% 44.5%, 3.2% 28.6%, 23.2% 26.8%, 23.5% 8.7%, 39.4% 13.9%); }
.tile[data-room="doodle"] .ov-toast::before { inset: 0; background: #111; }
.tile[data-room="doodle"] .ov-toast::after { inset: 7px; background: var(--burst, #ffd23f); }
.tile[data-room="doodle"] .ov-toast.buy { --burst: #8cecff; }
.tile[data-room="doodle"] .ov-toast.up { --burst: #ffd23f; }
.tile[data-room="doodle"] .ov-toast.down { --burst: #b9c4ff; }
.tile[data-room="doodle"] .ov-toast.rug { --burst: #ff6b6b; }
.tile[data-room="doodle"] .ov-toast small { color: #111; font: 400 14px 'Anton', Impact, sans-serif; letter-spacing: .1em; }
.tile[data-room="doodle"] .ov-toast b, .tile[data-room="doodle"] .ov-toast.up b, .tile[data-room="doodle"] .ov-toast.down b, .tile[data-room="doodle"] .ov-toast.rug b { color: #111; font: 400 40px/1.05 'Anton', Impact, sans-serif; }
.tile[data-room="doodle"] .ov-toast span { color: #111; font: 400 17px 'Patrick Hand', cursive; }
@container (max-width: 560px) {
  .tile[data-room="doodle"] .ov-tr { box-shadow: 3px 3px 0 #111; }
  .tile[data-room="doodle"] .ov-tr b { font-size: 16px; }
  .tile[data-room="doodle"] .ov-tr span { font-size: 12px; }
  .tile[data-room="doodle"] .mood { font-size: 13px; }
  .tile[data-room="doodle"] .ov-pos { font-size: 13px; }
  .tile[data-room="doodle"] .ov-toast { padding: 30px 40px 34px; min-width: 0; }
  .tile[data-room="doodle"] .ov-toast:is(.buy, .up, .down, .rug) b { font-size: 28px; }
  .tile[data-room="doodle"] .ov-sub { font-size: 15px; padding: 5px 12px; }
}
@container (max-width: 360px) {
  .tile[data-room="doodle"] .ov-toast { padding: 16px 24px 18px; filter: drop-shadow(3px 3px 0 #111); }
  .tile[data-room="doodle"] .ov-toast:is(.buy, .up, .down, .rug) b { font-size: 17px; }
  .tile[data-room="doodle"] .ov-toast small { display: none; }
}

/* meme captions: bottom text, on a close (the numbers sit on top in the toast) */
.ov-meme { left: 50%; bottom: 15%; z-index: 7; max-width: 92%; transform: translateX(-50%); font: 400 52px/1.05 'Anton', Impact, 'Arial Black', sans-serif; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: .02em; -webkit-text-stroke: 2.5px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000, 0 0 24px rgba(0, 0, 0, .55); white-space: nowrap; animation: memeIn .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes memeIn { from { opacity: 0; transform: translateX(-50%) scale(1.6) rotate(-4deg); } }
@container (max-width: 560px) { .ov-meme { font-size: 32px; -webkit-text-stroke-width: 2px; } }
@container (max-width: 360px) { .ov-meme { font-size: 20px; -webkit-text-stroke-width: 1.5px; bottom: 10%; } }

/* the big stream on a phone (its tile is 340-400px wide): the trader stays in view. What it holds sits top left, what
   it says runs along the bottom (compact, three lines at most, no speech tail), and what the page shows elsewhere
   steps out of the picture: the PnL note (the caption bar under the stream has it), the live pill and rank (same),
   the viewer's message (the chat has it). While a meme caption shouts, the line waits under it.
   (the thumbnail rule above hides the overlays below 360px; the big stream gets its line and badge back) */
@container (max-width: 440px) {
  .tile.focused .ov-tl, .tile.focused .ov-tr, .tile.focused .ov-msg { display: none; }
  .tile.focused .ov-sub:not([hidden]) { display: -webkit-box; }
  .tile.focused .ov-sub, .tile.focused[data-room="doodle"] .ov-sub {
    bottom: 6px; max-width: 94%; padding: 4px 10px 5px; border-width: 2px; box-shadow: 2px 2px 0 #111;
    font-size: 13px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .tile.focused[data-room="doodle"] .ov-sub::before, .tile.focused[data-room="doodle"] .ov-sub::after { display: none; }
  .tile.focused .ov-sub b, .tile.focused[data-room="doodle"] .ov-sub b { font-size: 11px; padding: 0 4px; margin-right: 5px; vertical-align: 1px; }
  .tile.focused:has(.ov-meme:not([hidden])) .ov-sub { visibility: hidden; }
  .tile.focused .ov-pos:not([hidden]) { display: flex; }
  .tile.focused .ov-pos, .tile.focused[data-room="doodle"] .ov-pos { top: 8px; bottom: auto; left: 8px; padding: 2px 7px; font-size: 12px; box-shadow: 2px 2px 0 #111; }
  .tile.focused .ov-pos i { display: none; }
}

/* ---------- arena banner: a comic splash (big win · new leader · rugged · fee split) ---------- */
.banner { --bn: #fff; position: absolute; left: 50%; top: 66px; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 14px 34px 16px 16px; color: #111; transform: translateX(-50%) rotate(-2deg); pointer-events: none; animation: bnIn .55s cubic-bezier(.2, 1.6, .4, 1); }
/* the rays behind, then the panel, then the words (both pseudo layers sit under the content) */
.banner::before { content: ''; position: absolute; inset: -80px -110px; z-index: -1; background: repeating-conic-gradient(from 0deg, var(--bn) 0deg 7deg, transparent 7deg 19deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%); opacity: .6; animation: spin 20s linear infinite; }
.banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bn); border: 4px solid #111; border-radius: 24px 14px 28px 12px / 12px 28px 14px 24px; box-shadow: 8px 8px 0 #111; }
.bn-pic { position: relative; flex: none; width: 78px; height: 78px; }
.bn-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 4px solid #111; box-shadow: 0 0 0 5px var(--c, #fff), 0 0 0 9px #111; overflow: hidden; }
.banner .bn-face[data-hd] { background-color: #fff; }
.bn-face svg { width: 100%; height: 100%; }
.bn-face .quad { width: 40px; height: 40px; gap: 5px; }
.bn-crown { position: absolute; left: 50%; top: -38px; width: 58px; margin-left: -34px; transform: rotate(-14deg); display: none; }
.banner.lead .bn-crown { display: block; animation: crown 1.2s ease-in-out infinite alternate; }
.bn-txt { display: block; text-align: left; }
.banner small { display: block; font: 400 19px/1 'Patrick Hand', cursive; color: #111; }
.banner b { display: block; margin: 2px 0 4px; font: 400 50px/1 'Anton', Impact, sans-serif; letter-spacing: .03em; color: #fff; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 4px 4px 0 #111; white-space: nowrap; }
.bn-txt > span { display: block; font: 400 22px/1.15 'Patrick Hand', cursive; color: #111; white-space: nowrap; }
.banner.lead { --bn: #ffd23f; }
.banner.vs { --bn: #8cecff; }
.bn-vs { flex: none; z-index: 1; margin: 0 -8px; font: 400 40px/1 'Anton', Impact, sans-serif; color: #fff; -webkit-text-stroke: 2.5px #111; paint-order: stroke fill; text-shadow: 3px 3px 0 #111; transform: rotate(-8deg); }
.bn-pic2 .bn-face { box-shadow: 0 0 0 5px var(--c2, #fff), 0 0 0 9px #111; }
.banner.lead .bn-pic2 { width: 60px; height: 60px; filter: grayscale(.7); }
.banner.bigwin { --bn: #8dff7a; }
.banner.rug { --bn: #ff6b6b; animation: bnIn .55s cubic-bezier(.2, 1.6, .4, 1), bnShake .45s .55s 2; }
.banner.fees { --bn: #c3f53c; }
.banner.giveaway { --bn: #ffd23f; }
.banner.out { animation: bnOut .3s ease forwards; }
@keyframes bnIn { from { opacity: 0; transform: translateX(-50%) scale(.35) rotate(-16deg); } }
@keyframes bnOut { to { opacity: 0; transform: translateX(-50%) scale(.6) rotate(6deg); } }
@keyframes bnShake { 25%, 75% { transform: translateX(calc(-50% - 9px)) rotate(-4deg); } 50% { transform: translateX(calc(-50% + 9px)) rotate(0deg); } }
@keyframes crown { to { transform: rotate(-6deg) translateY(-4px); } }
@media (max-width: 640px) {
  .banner { gap: 12px; padding: 10px 20px 12px 10px; top: 54px; }
  .bn-pic { width: 54px; height: 54px; }
  .banner b { font-size: 30px; -webkit-text-stroke-width: 2px; text-shadow: 3px 3px 0 #111; }
  .bn-txt > span { font-size: 16px; }
  .banner small { font-size: 15px; }
  .bn-crown { width: 42px; top: -28px; margin-left: -24px; }
  .bn-vs { font-size: 26px; margin: 0 -6px; }
  .banner.lead .bn-pic2 { width: 42px; height: 42px; }
  .banner.duo .bn-txt > span { white-space: normal; max-width: 150px; }
  /* never wider than the phone: a banner (or its sunburst) past the edge widens the whole page and the phone zooms out */
  .banner { width: max-content; max-width: calc(100vw - 28px); gap: 10px; padding: 8px 16px 10px 8px; }
  .banner::before { inset: -46px -14px; }
  .bn-pic { width: 46px; height: 46px; }
  .bn-face { border-width: 3px; box-shadow: 0 0 0 3px var(--c, #fff), 0 0 0 6px #111; }
  .bn-pic2 .bn-face { box-shadow: 0 0 0 3px var(--c2, #fff), 0 0 0 6px #111; }
  .banner.lead .bn-pic2 { width: 36px; height: 36px; }
  .bn-txt { min-width: 0; }
  .banner b { font-size: 24px; margin: 1px 0 3px; -webkit-text-stroke-width: 1.5px; text-shadow: 2px 2px 0 #111; }
  .banner small { font-size: 13px; }
  .bn-txt > span, .banner.duo .bn-txt > span { font-size: 14px; white-space: normal; max-width: none; }
  .bn-vs { font-size: 22px; }
}

/* ---------- cards ---------- */
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-h b { font: 800 22px/1 var(--disp); letter-spacing: .02em; }
.card-h > span { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the chat: the whole right column ---------- */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chat-h { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px 12px; }
.chat-h > b { min-width: 0; margin-right: auto; font: 800 26px/1 var(--disp); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-live { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.chat-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chat-live.live { color: var(--txt-2); }
.chat-live.live i { background: var(--green); box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
.chat-live.down i { background: var(--red); }
.tgl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.tgl input { accent-color: var(--lime); margin: 0; }

/* room tabs: All + one per trader */
.rooms { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.room { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px 4px 11px; border: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--txt-2); cursor: pointer; }
.room:hover { color: var(--txt); background: rgba(255, 255, 255, .025); }
.room[aria-selected="true"] { color: var(--txt); background: var(--bg-3); }
.room[aria-selected="true"]::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c, var(--green)); }
.rm-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--face); overflow: hidden; }
.room[data-room="all"] .rm-ic { background: #f2f1ec; }
.rm-ic svg { width: 100%; height: 100%; }
.room b { max-width: 100%; font: 800 15px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub { position: absolute; top: 6px; left: calc(50% + 10px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c, var(--lime)); color: #0b0c0f; font: 800 10.5px/18px var(--mono); font-style: normal; text-align: center; }
.ub.me { background: var(--lime); box-shadow: 0 0 0 3px rgba(195, 245, 60, .28); }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 20px; height: 20px; }
.quad i { border-radius: 50%; }

/* a trader's room: one line on what it is doing right now */
.room-head { flex: none; padding: 9px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--c, #888) 8%, transparent); font-size: 12.5px; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-head > i { font-style: normal; margin: 0 7px; color: var(--muted); }
.room-head b { font: 700 12.5px var(--mono); }
.room-head b:not(.up, .down) { color: var(--txt); }
.room-head em { font: 700 12.5px var(--mono); font-style: normal; }

/* the lines: a face, the name, the time, the text; thin rules between them */
.chat-body { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; display: flex; flex-direction: column; padding: 2px 8px 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cm { flex: none; font-size: 14.5px; line-height: 1.42; }
.cm-bot, .cm-viewer, .cm-act { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--line); animation: tlIn .25s ease; }
.cm-head { width: 34px; height: 34px; border-radius: 10px; background: var(--face); overflow: hidden; }
.cm-ini { display: grid; place-items: center; border-radius: 50%; background: var(--bg-3); color: var(--txt-2); font: 800 14px/1 var(--font); }
.cm-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cm-name { min-width: 0; font: 800 16px/1.2 var(--disp); letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--txt-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm time { flex: none; margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-main p { margin: 3px 0 0; color: var(--txt); overflow-wrap: anywhere; }
.cm-act .cm-main p { color: var(--txt-2); }
.hide-scans .cm-act { display: none; }
.cm-viewer .cm-name { font: 700 14px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--txt-2); }
.cm-viewer.me .cm-name { color: var(--lime); }
.cm-viewer .to { flex: none; font: 700 10.5px var(--mono); color: var(--c, var(--txt-2)); background: color-mix(in srgb, var(--c, #888) 14%, transparent); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.cm-viewer.shill .tx { font-weight: 700; color: var(--gold); }
.cm-bot .re { display: block; margin: 2px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-bot.to-me { border-radius: 10px; background: rgba(195, 245, 60, .05); }
.cm-bot.to-me p { color: var(--lime); }
.via { font: 600 11px var(--mono); color: var(--gold); white-space: nowrap; }

/* trades: a tinted row with an arrow (green in, red out) */
.cm-trade { display: flex; align-items: center; gap: 12px; margin: 6px 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--txt-2); background: color-mix(in srgb, var(--green) 8%, var(--bg-2)); animation: tlIn .25s ease; }
.cm-trade:is(.loss, .rug) { background: color-mix(in srgb, var(--red) 10%, var(--bg-2)); }
.cm-ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--green); }
.cm-trade:is(.loss, .rug) .cm-ic { color: var(--red); }
.cm-ic svg { width: 18px; height: 18px; }
.cm-trade p { flex: 1; min-width: 0; margin: 0; line-height: 1.4; }
.cm-trade .cm-name { margin-right: 3px; font-size: 15px; }
.cm-trade p > b:not(.cm-name) { color: var(--txt); }
.cm-trade em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-sys { align-self: center; max-width: 92%; margin: 8px 0; text-align: center; font-size: 12px; color: var(--txt-2); padding: 4px 11px; border-radius: 999px; background: var(--bg-3); }
.cm-sys.good { color: var(--lime); }
.cm-sys.giveaway { color: #ffd23f; border: 1px solid rgba(255, 210, 63, .35); }

/* the All tab: no chat of its own, it points at the four */
.chat-pick { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 20px 16px; }
.cp-intro { margin-top: auto; text-align: center; }   /* centered while it fits, scrolls from the top when it does not */
.cp-intro svg { width: 38px; height: 38px; color: var(--muted); }
.cp-intro h3 { margin: 8px 0 6px; font: 800 24px/1.1 var(--disp); letter-spacing: .02em; }
.cp-intro p { max-width: 310px; margin: 0 auto; font-size: 13.5px; color: var(--txt-2); }
.cp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: auto; }
.cp { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 12px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.cp:hover { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--bg-3)); }
.cp-face { width: 44px; height: 44px; border-radius: 12px; background: var(--face); overflow: hidden; }
.cp-face svg { width: 100%; height: 100%; }
.cp-who { min-width: 0; }
.cp-who b { display: block; font: 800 19px/1.1 var(--disp); letter-spacing: .05em; color: var(--c); }
.cp-who small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pnl { max-width: 150px; text-align: right; white-space: nowrap; }
.cp-pnl b { display: block; font: 800 17px/1.15 var(--disp); letter-spacing: .02em; }
.cp-pnl small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.cp-go { font-size: 22px; line-height: 1; color: var(--muted); transition: color .2s, translate .2s; }
.cp:hover .cp-go { color: var(--c); translate: 2px 0; }

/* the viewer's box: talk or shill, the text, a round send button */
.chat-foot { flex: none; padding: 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat-foot input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); font: 14.5px var(--font); outline: none; }
.chat-foot input:focus { border-color: color-mix(in srgb, var(--c, #8a90a0) 70%, transparent); }
.chat-foot .btn { height: 46px; padding: 0 18px; border-radius: 12px; }
.join label { display: block; font-size: 13px; color: var(--txt-2); margin-bottom: 8px; }
.say-row { display: flex; align-items: center; gap: 8px; }
.say-sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 0 4px; font-size: 11.5px; color: var(--muted); }
.say-sub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.say-me { white-space: nowrap; }
.say-me b { color: var(--lime); cursor: pointer; }
.say-me b:hover { text-decoration: line-through; }
.say-modes { flex: none; height: 46px; padding: 4px; border-radius: 12px; background: var(--bg); }
.say-modes button { padding: 0 12px; font-size: 14px; border-radius: 8px; }
.say-modes button[aria-pressed="true"] { background: var(--bg-3); color: var(--txt); box-shadow: inset 0 0 0 1px var(--line-2); }
.send { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--lime); color: var(--lime-ink); cursor: pointer; }
.send:hover { background: #d3ff5c; }
.send svg { width: 22px; height: 22px; }
.say-note { margin: 7px 0 0; font-size: 12.5px; color: var(--red); }

/* ---------- the standings under the show: headings on the page, one framed panel (the drawing, then paper) ---------- */
/* 3fr : 2fr lines the headings and the paper up with the drawing's podium (900) and vault (600) */
.standings { display: grid; grid-template-areas: "panel"; padding: 30px 24px 6px; }
#standings, #how { scroll-margin-top: 82px; }
/* the titles: caption boxes on the drawing, like the comic panels' (scenes.js puts each on its half of the room) */
.sc-label { position: absolute; top: 12px; z-index: 6; display: none; margin: 0; max-width: calc(100% - 24px); padding: 4px 12px 5px; border: 2.5px solid #111; background: #fff27a; box-shadow: 3px 3px 0 #111; color: #111; font: 400 22px/1.1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.sc-label small { display: block; margin-top: 1px; font: 400 15px/1.2 'Patrick Hand', cursive; letter-spacing: 0; text-transform: none; }
.sc-label[data-on] { display: block; }
.room-scene > .sc-label[data-on="podium"] { left: 12px; }
.room-scene > .sc-label[data-on="vault"] { left: calc(60% + 12px); max-width: calc(40% - 24px); }
/* a phone: the drawings are small, so the boxes keep only their title */
.scenes-stack .sc-label { left: 7px; top: 7px; padding: 2px 8px 3px; box-shadow: 2px 2px 0 #111; font-size: 14px; }
.scenes-stack .sc-label small { display: none; }
.st-panel { grid-area: panel; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "scene scene" "rows fees" "race race"; border: 3px solid #111; border-radius: 12px; background: #fffaf0; color: #111; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 22px 40px -24px rgba(0, 0, 0, .9); }
#scenes { grid-area: scene; border-bottom: 3px solid #111; }
.st-panel .scene { border-radius: 0; box-shadow: none; }

/* the leaderboard rows, written on the paper like the cards' stats */
.lb-list { grid-area: rows; list-style: none; margin: 0; padding: 6px 16px 8px; display: flex; flex-direction: column; }
.lb-list li { display: grid; grid-template-columns: 32px 44px minmax(110px, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) 86px 118px; align-items: center; gap: 12px; padding: 8px 8px; border-top: 2px dashed rgba(17, 17, 17, .3); border-radius: 8px; cursor: pointer; transition: background .2s; }
.lb-list li:first-child { border-top-color: transparent; }
.lb-list li:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.lb-rank { display: grid; place-items: center; width: 30px; height: 30px; border: 2.5px solid #111; border-radius: 50%; background: #fff; font: 400 16px/1 'Anton', Impact, sans-serif; }
.lb-list li:nth-child(1) .lb-rank { background: #ffd23f; }
.lb-list li:nth-child(2) .lb-rank { background: #dfe4ec; }
.lb-list li:nth-child(3) .lb-rank { background: #f0a868; }
.lb-head { display: block; width: 44px; height: 44px; border: 2.5px solid #111; border-radius: 50%; background-color: #fff !important; overflow: hidden; }
.lb-head svg, .cm-head svg { width: 100%; height: 100%; }
.lb-who { min-width: 0; }
.lb-who b { display: block; font: 400 22px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: 1.2px #111; paint-order: stroke fill; }
.lb-addr { display: flex; align-items: center; gap: 4px; margin: 1px 0 0 -4px; padding: 0 4px; border: 0; border-radius: 4px; background: none; color: #8a8274; font: 11.5px var(--mono); cursor: pointer; }
.lb-addr svg { width: 11px; height: 11px; }
.lb-addr:hover { background: rgba(17, 17, 17, .08); color: #111; }
.lb-addr.copied { color: #0a7a35; }
.lb-who small { display: block; margin-top: 2px; font: 400 14px/1.1 'Patrick Hand', cursive; color: #6b645a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-now, .lb-rec { min-width: 0; font: 400 17px/1.2 'Patrick Hand', cursive; color: #2a2620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-now b { font-weight: 400; }
.lb-now em { font-style: normal; }
.lb-list .muted { color: #8a8274; }
.lb-wal { font: 400 18px/1 'Patrick Hand', cursive; text-align: right; white-space: nowrap; }
.lb-wal small, .lb-pnl small { font: 400 12px 'Anton', Impact, sans-serif; letter-spacing: .06em; color: #6b645a; }
.lb-pnl { font: 400 24px/1 'Anton', Impact, sans-serif; letter-spacing: .02em; text-align: right; white-space: nowrap; }
.lb-list .up { color: #0a7a35; }
.lb-list .down { color: #c4161c; }

/* the race (race.js): everyone's PnL over the day, inked lines on the paper, faces at the ends */
.race { grid-area: race; padding: 14px 18px 16px; border-top: 2.5px dashed #111; }
.race-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.race-h h3 { margin: 0; padding: 3px 10px 4px; border: 2.5px solid #111; background: #fff27a; box-shadow: 2px 2px 0 #111; transform: rotate(-1deg); font: 400 18px/1.1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.race-h p { margin: 0; font: 400 16px/1.2 'Patrick Hand', cursive; color: #6b645a; }
.race-win { display: flex; gap: 6px; margin-left: auto; }
.race-win button { padding: 2px 10px 3px; border: 2px solid #111; border-radius: 999px; background: #fff; color: #111; font: 400 13px/1.2 'Anton', Impact, sans-serif; letter-spacing: .05em; cursor: pointer; }
.race-win button[aria-pressed="true"] { background: #fff27a; box-shadow: 2px 2px 0 #111; }
.race-plot { position: relative; height: 250px; }
.race-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.race-svg .gl { fill: none; stroke: rgba(17, 17, 17, .14); stroke-width: 1.5; stroke-dasharray: 5 6; }
.race-svg .zero { fill: none; stroke: #111; stroke-width: 2; stroke-dasharray: 8 5; }
.race-svg .tk { stroke: #111; stroke-width: 2; }
.race-svg text { font: 400 14px 'Patrick Hand', cursive; fill: #6b645a; }
.race-svg .yl { text-anchor: end; }
.race-svg .xl { text-anchor: middle; }
.race-svg .ink { fill: none; stroke: #111; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.race-svg .ln { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.race-svg .con { fill: none; stroke-width: 2.5; stroke-dasharray: 3 4; }
.race-svg .hover { fill: none; stroke: #111; stroke-width: 1.5; stroke-dasharray: 4 4; }
.race-faces { position: absolute; inset: 0; pointer-events: none; }
.race-face { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border: 2.5px solid #111; border-radius: 50%; background-color: #fff !important; box-shadow: 0 0 0 2px var(--c); overflow: hidden; transition: transform .6s cubic-bezier(.3, 1.2, .4, 1); }
.race-face svg { width: 100%; height: 100%; }
.race-tip { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 7px; border: 2.5px solid #111; border-radius: 8px; background: #fff; box-shadow: 3px 3px 0 #111; color: #111; font: 400 16px/1.2 'Patrick Hand', cursive; white-space: nowrap; pointer-events: none; }
.race-tip b { font: 400 13px 'Anton', Impact, sans-serif; letter-spacing: .06em; color: #6b645a; }
.race-tip span { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: baseline; gap: 12px; }
.race-tip small { font-size: 13px; color: #8a8274; }
.race-tip i { font: 400 15px 'Anton', Impact, sans-serif; font-style: normal; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: .8px #111; paint-order: stroke fill; }
.race-tip .up { color: #0a7a35; }
.race-tip .down { color: #c4161c; }
.race-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 18px 'Patrick Hand', cursive; color: #8a8274; }

/* the fee facts, past a dashed line under the vault: the rule, two numbers, the CA on a sticky ticket */
.fee-facts { grid-area: fees; padding: 14px 20px 16px; border-left: 2.5px dashed #111; }
.fee-rule { margin: 0 0 12px; font: 400 18px/1.3 'Patrick Hand', cursive; color: #2a2620; }
.fee-rule b { font-weight: 400; color: #0a7a35; }
.fee-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.fee-meta span { display: block; font: 400 12px/1.2 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b645a; }
.fee-meta b { font: 400 21px/1.2 'Patrick Hand', cursive; }
.fee-recent { margin-bottom: 16px; }
.fee-recent > span { display: block; font: 400 12px/1.2 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b645a; }
.fee-recent ol { list-style: none; margin: 2px 0 0; padding: 0; }
.fee-recent li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 4px 0; border-top: 2px dashed rgba(17, 17, 17, .25); font: 400 17px/1.3 'Patrick Hand', cursive; }
.fee-recent li:first-child { border-top: 0; }
.fee-recent li span { color: #8a8274; }
.fee-recent li em { font-style: normal; color: #0a7a35; }
.fee-recent li.none { display: block; color: #8a8274; }
.fee-ca { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 11px; border: 2.5px solid #111; border-radius: 8px; background: #fff27a; box-shadow: 2px 2px 0 #111; transform: rotate(-1deg); }
.fee-ca span { font: 400 15px/1 'Anton', Impact, sans-serif; letter-spacing: .06em; }
.fee-ca code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #111; }
.fee-ca button { padding: 3px 10px; border: 2px solid #111; border-radius: 6px; background: #fff; color: #111; font: 400 13px/1.2 'Anton', Impact, sans-serif; letter-spacing: .05em; cursor: pointer; }

/* ---------- the scenes (scenes.js): the podium and the fee vault, drawn like the streams ---------- */
.scene { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #e7ddf6; box-shadow: 0 0 0 1px var(--line); user-select: none; }
.scenes-stack { display: flex; flex-direction: column; gap: 12px; }
.sc-part { position: absolute; left: 0; top: 0; }
.vault-scene { background: #d5efdf; }
.sc-stage { position: absolute; left: 0; top: 0; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.sc-stage > svg, .sc-part > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.sc-front, .sc-run, .sc-mid, .sc-top { pointer-events: none; }
.sc-front { z-index: 3; }
/* the podium */
.pd-ch { position: absolute; left: 0; top: 0; z-index: 2; width: 480px; height: 480px; transform-origin: 0 0; transition: transform .9s cubic-bezier(.3, 1.3, .45, 1); cursor: pointer; }
.pd-hop { position: relative; width: 100%; height: 100%; transition: translate .25s ease; }
.pd-ch:hover .pd-hop { translate: 0 -18px; }
.pd-ch.moved .pd-hop { animation: pdHop .9s ease; }
.pd-ch :is(.mm, .av) { display: block; width: 100%; height: 100%; overflow: visible; }
.pd-crown { position: absolute; width: 25%; height: 17.5%; overflow: visible; transform: rotate(-12deg) scale(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .35s; }
.pd-ch.first .pd-crown { transform: rotate(-12deg) scale(1); }
/* the crown inside a meme character: pops in on the leader */
.mm-crown { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .35s; }
:is(.pd-ch, .tc).first .mm-crown { transform: scale(1); }
.pd-lab { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -50%); white-space: nowrap; cursor: pointer; }
.pd-lab b { font: 400 27px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: 1.6px #111; paint-order: stroke fill; text-shadow: 2px 2px 0 #111; }
.pd-lab span { padding: 0 8px; border: 2.5px solid #111; border-radius: 6px; background: #fff; box-shadow: 2px 2px 0 #111; font: 400 21px/1.25 'Patrick Hand', cursive; }
.pd-lab span.up, .vt-tag span { color: #0a7a35; }
.pd-lab span.down { color: #c4161c; }
.pd-fly { transform-box: fill-box; animation: pdFly 2.6s ease-in-out infinite; }
@keyframes pdHop { 25% { transform: translateY(-110px); } 55% { transform: translateY(0); } 72% { transform: translateY(-24px); } 88% { transform: none; } }
@keyframes pdFly { 25% { transform: translate(-14px, -8px); } 50% { transform: translate(-4px, 10px); } 75% { transform: translate(10px, -4px); } }
/* the vault */
.vt-pile { transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.vt-drop { animation: vtDrop 3.3s ease-in infinite; }
@keyframes vtDrop { 0% { transform: translateY(-50px); opacity: 0; } 12% { opacity: 1; } 62% { transform: translateY(66px); opacity: 1; } 72%, 100% { transform: translateY(80px); opacity: 0; } }
.vt-hand { transform-box: view-box; transform-origin: 506px 108px; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); }
.vt-clock { transform-box: fill-box; transform-origin: 50% 60%; }
.vt-clock.ring { animation: vtRing .12s linear infinite; }
@keyframes vtRing { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.vt-bag, .vt-face { transform-box: fill-box; transform-origin: 50% 100%; }
.vt-bag.got, .vt-face.got { animation: vtGot .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vtGot { 35% { transform: scale(1.14, .88); } 70% { transform: scale(.95, 1.06); } }
.vt-note { position: absolute; z-index: 4; left: 26px; top: 34px; width: 150px; margin: 0; padding: 9px 11px 10px; border: 2.5px solid #111; background: #fff27a; box-shadow: 3px 3px 0 #111; transform: rotate(-5deg); color: #111; font: 400 19px/1.12 'Patrick Hand', cursive; }
.vt-note b { font-weight: 400; color: #0a7a35; }
.vault-scene .vt-note { top: 58px; }     /* the vault on its own (a phone): clear of the title box */
.vt-label { position: absolute; z-index: 4; left: 300px; top: 176px; display: flex; flex-direction: column; align-items: center; padding: 4px 13px 6px; border: 3px solid #111; border-radius: 6px; background: #fff; box-shadow: 3px 3px 0 #111; transform: translate(-50%, -50%) rotate(-3deg); color: #111; white-space: nowrap; }
.vt-label small { font: 400 13px/1.3 'Anton', Impact, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.vt-label b { font: 400 29px/1 'Patrick Hand', cursive; }
.vt-timer { position: absolute; z-index: 4; left: 506px; top: 186px; display: flex; align-items: baseline; gap: 7px; padding: 1px 11px 3px; border: 2.5px solid #111; border-radius: 8px; background: #fff; box-shadow: 2px 2px 0 #111; transform: translateX(-50%) rotate(2deg); color: #111; white-space: nowrap; }
.vt-timer small { font: 400 17px 'Patrick Hand', cursive; }
.vt-timer b { font: 400 25px/1.1 'Anton', Impact, sans-serif; letter-spacing: .03em; }
.vt-face { position: absolute; z-index: 4; top: 334px; width: 52px; height: 52px; border: 3px solid #111; border-radius: 50%; background-color: #fff !important; overflow: hidden; cursor: pointer; }
.vt-face svg { width: 100%; height: 100%; }
.vt-pct { position: absolute; z-index: 4; top: 312px; padding: 1px 6px; border: 2px solid #111; border-radius: 5px; background: #fff27a; transform: rotate(9deg); color: #111; font: 400 14px/1.3 'Anton', Impact, sans-serif; letter-spacing: .04em; }
.vt-pop { position: absolute; z-index: 5; top: 238px; padding: 0 8px; border: 2.5px solid #111; border-radius: 8px; background: #fff; box-shadow: 2px 2px 0 #111; color: #0a7a35; font: 400 23px/1.3 'Patrick Hand', cursive; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.vt-pop.go { animation: vtPop 2s ease forwards; }
@keyframes vtPop { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.6); } 14% { opacity: 1; transform: translate(-50%, -8px) scale(1.06); } 75% { opacity: 1; transform: translate(-50%, -22px); } 100% { opacity: 0; transform: translate(-50%, -34px); } }
.vt-tag { position: absolute; z-index: 4; top: 418px; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); white-space: nowrap; cursor: pointer; }
.vt-tag b { font: 400 20px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: 1.3px #111; paint-order: stroke fill; text-shadow: 1.5px 1.5px 0 #111; }
.vt-tag span { padding: 0 6px; border: 2px solid #111; border-radius: 5px; background: #fff; font: 400 17px/1.25 'Patrick Hand', cursive; }

/* ---------- below the show ---------- */
/* ---------- the share window (share.js): the picture, and where it goes ---------- */
.share { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(12, 9, 24, .72); backdrop-filter: blur(3px); }
.share-box { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px 16px; border: 3px solid #111; border-radius: 14px; background: #fffaf0; box-shadow: 8px 8px 0 #111; color: #111; }
.share-h { display: inline-block; margin: 0 0 12px; padding: 3px 12px 4px; border: 2.5px solid #111; background: #fff27a; box-shadow: 2px 2px 0 #111; transform: rotate(-1.5deg); font: 400 22px/1.1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.share-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 2px solid #111; border-radius: 50%; background: #fff; color: #111; font: 400 22px/1 var(--font); cursor: pointer; }
.share-img { display: block; width: 100%; aspect-ratio: 1200 / 675; border: 3px solid #111; border-radius: 8px; background: #e7ddf6; }
.share-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.share-acts button { padding: 9px 16px 10px; border: 2.5px solid #111; border-radius: 8px; background: #fff; box-shadow: 3px 3px 0 #111; color: #111; font: 400 17px/1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.share-acts button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }
.share-acts .share-xbtn { background: #111; color: #fff; }
.share-note { margin: 12px 0 0; font: 400 16px/1.3 'Patrick Hand', cursive; color: #6b645a; }

/* ---------- below the show: the tabs are stickers, the tables are written on paper ---------- */
.below { padding: 26px 24px 64px; }
.tabs { display: flex; gap: 10px; margin: 0 0 18px; padding: 4px 6px 8px 2px; overflow-x: auto; }
.tabs button { flex: none; padding: 7px 16px 8px; border: 2.5px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--txt-2); font: 400 17px/1.1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: transform .15s, background .15s, color .15s, border-color .15s; }
.tabs button:hover { color: var(--txt); border-color: var(--muted); }
.tabs button[aria-selected="true"] { border-color: #111; background: #fff27a; color: #111; box-shadow: 3px 3px 0 #111; transform: rotate(-1.5deg); }
.paper { padding: 16px 18px 14px; border: 3px solid #111; border-radius: 12px; background: #fffaf0; color: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 22px 40px -24px rgba(0, 0, 0, .9); }
.fee-explain { max-width: 820px; margin: 0 0 14px; font: 400 19px/1.3 'Patrick Hand', cursive; color: #2a2620; }
.fee-explain b { font-weight: 400; color: #0a7a35; }
.swipe-hint { display: none; margin: 2px 0 0; text-align: center; font: 400 17px 'Patrick Hand', cursive; color: var(--txt-2); }
.empty { margin: 12px 0 4px; font: 400 18px/1.3 'Patrick Hand', cursive; color: #8a8274; }

/* the filter: a sticker per trader, filled with its color when on */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips button { padding: 3px 13px 4px; border: 2px solid #111; border-radius: 999px; background: #fff; color: #111; font: 400 15px/1.2 'Anton', Impact, sans-serif; letter-spacing: .05em; cursor: pointer; transition: transform .15s; }
.chips button:hover { transform: translateY(-1px); }
.chips button[aria-pressed="true"] { background: var(--c); box-shadow: 2px 2px 0 #111; }
.chips button[data-f="all"][aria-pressed="true"] { background: #fff27a; }

/* the tables: labels in Anton, values in handwriting, dashed lines between the rows */
.trades-wrap { overflow-x: auto; }
/* the trades sheet scrolls inside itself, its labels stay on top; the fee splits are three columns, kept together */
[data-panel="trades"] .trades-wrap { max-height: 600px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfc6b4 transparent; }
[data-panel="trades"] .trades th { position: sticky; top: 0; z-index: 1; background: #fffaf0; }
[data-panel="fees"] .trades { max-width: 640px; }
.trades { width: 100%; border-collapse: collapse; }
.trades th { padding: 0 10px 8px; border-bottom: 2.5px solid #111; text-align: left; font: 400 12.5px/1.2 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b645a; white-space: nowrap; }
.trades td { padding: 7px 10px; border-bottom: 2px dashed rgba(17, 17, 17, .2); font: 400 17px/1.25 'Patrick Hand', cursive; color: #2a2620; white-space: nowrap; }
.trades tr:last-child td { border-bottom: 0; }
.trades tbody tr:hover td { background: rgba(255, 242, 122, .35); }
.trades .r { text-align: right; }
.trades .muted, .trades td small { color: #8a8274; }
.trades .up { color: #0a7a35; }
.trades .down { color: #c4161c; }
.trades a { color: inherit; text-decoration: none; border-bottom: 1.5px dashed #111; }
.trades .why { min-width: 160px; white-space: normal; color: #5a5348; }
.trades .via { color: #9a6a00; font: inherit; }
.trades tr.me td { background: rgba(195, 245, 60, .3); }
.who { display: inline-flex; align-items: center; gap: 7px; font: 400 19px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: 1px #111; paint-order: stroke fill; }
.who-face { flex: none; width: 26px; height: 26px; border: 2px solid #111; border-radius: 50%; background-color: #fff !important; overflow: hidden; }
.who-face svg { display: block; width: 100%; height: 100%; }
.act { display: inline-block; padding: 1px 8px 2px; border: 2px solid #111; border-radius: 5px; background: #fff; color: #111; font: 400 13px/1.25 'Anton', Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.act.buy { background: #3ddc84; }
.act.rug { background: #ff6b6b; transform: rotate(-3deg); }
.rk { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid #111; border-radius: 50%; background: #fff; font: 400 14px/1 'Anton', Impact, sans-serif; color: #111; }
.trades tbody tr:nth-child(1) .rk { background: #ffd23f; }
.trades tbody tr:nth-child(2) .rk { background: #dfe4ec; }
.trades tbody tr:nth-child(3) .rk { background: #f0a868; }
.vw-name { font: 400 18px/1 'Anton', Impact, sans-serif; letter-spacing: .03em; color: #111; }

/* ---------- the traders' cards (cards.js): collectible cards, drawn like the streams ---------- */
.tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; padding: 8px 2px 14px; perspective: 1400px; }
.tc { position: relative; padding: 9px; border: 3px solid #111; border-radius: 20px; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 22px 40px -22px rgba(0, 0, 0, .95); color: #111; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tc:hover { transition-duration: .12s; }
.tc-in { display: flex; flex-direction: column; height: 100%; border: 2.5px solid #111; border-radius: 13px; background: #fffaf0; overflow: hidden; }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 8px; border-bottom: 2.5px solid #111; background: color-mix(in srgb, var(--c) 22%, #fffaf0); }
.tc-name { font: 400 30px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; color: var(--c); -webkit-text-stroke: 1.6px #111; paint-order: stroke fill; text-shadow: 2px 2px 0 #111; }
.tc-type { padding: 2px 9px; border: 2px solid #111; border-radius: 999px; background: #fff; font: 400 13px/1.4 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tc-art { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-bottom: 2.5px solid #111; background: var(--room); overflow: hidden; cursor: pointer; }
.tc-art > svg.room-back { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-ch { position: absolute; left: 50%; bottom: -16%; width: 76%; aspect-ratio: 1; translate: -50% 0; transition: translate .3s ease; }
.tc-art:hover .tc-ch { translate: -50% -4%; }
.tc-ch > svg:not(.pd-crown) { display: block; width: 100%; height: 100%; overflow: visible; }
.tc.first .pd-crown { transform: rotate(-12deg) scale(1); }
.tc-rank { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border: 2.5px solid #111; border-radius: 50%; background: #fff; box-shadow: 2px 2px 0 #111; font: 400 19px/1 'Anton', Impact, sans-serif; }
.tc[data-rank="1"] .tc-rank { background: #ffd23f; }
.tc[data-rank="2"] .tc-rank { background: #dfe4ec; }
.tc[data-rank="3"] .tc-rank { background: #f0a868; }
.tc-now { position: absolute; top: 10px; left: 9px; max-width: 64%; padding: 1px 8px 2px; border: 2px solid #111; border-radius: 5px; background: #fff; box-shadow: 2px 2px 0 #111; font: 400 15px/1.3 'Patrick Hand', cursive; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-2deg); }
.tc-now:empty { display: none; }
.tc-flavor { margin: 0; padding: 9px 14px 2px; font: 400 18px/1.25 'Patrick Hand', cursive; color: #5a5348; text-align: center; }
.tc-moves { margin: 0; padding: 8px 14px 10px; list-style: none; display: flex; flex-direction: column; gap: 4px; font: 400 16.5px/1.25 'Patrick Hand', cursive; }
.tc-moves li { position: relative; padding-left: 20px; }
.tc-moves li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border: 2px solid #111; background: var(--c); transform: rotate(45deg); }
.tc-stats { margin-top: auto; padding: 10px 14px 12px; border-top: 2.5px dashed #111; background: #fff; }
.tc-addr { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 6px 5px 10px; border: 2px solid #111; border-radius: 7px; background: #fff27a; box-shadow: 2px 2px 0 #111; transform: rotate(-.6deg); }
.tc-addr span { font: 400 12px 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.tc-addr code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tc-addr .tc-chain { flex: none; font: 600 11px/1 var(--mono); font-style: normal; color: #111; opacity: .75; white-space: nowrap; }
.tc-addr em { padding: 0 5px; border: 1.5px solid #111; border-radius: 4px; background: #fff; font: 400 11px/1.4 'Anton', Impact, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.tc-addr a { color: #111; font-weight: 700; text-decoration: none; }
.tc-addr button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 2px solid #111; border-radius: 6px; background: #fff; color: #111; cursor: pointer; }
.tc-addr button svg { width: 15px; height: 15px; }
.tc-addr button.copied { background: #3ddc84; }
.tc-pnl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tc-pnl span, .tc-s span, .tc-bar span { font: 400 12px/1.2 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b645a; }
.tc-pnl b { font: 400 30px/1.1 'Anton', Impact, sans-serif; letter-spacing: .02em; }
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 6px 0 8px; }
.tc-s { display: flex; flex-direction: column; min-width: 0; }
.tc-s b { font: 400 18px/1.2 'Patrick Hand', cursive; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.tc-bar i { height: 12px; border: 2px solid #111; border-radius: 999px; background: #f1ebde; overflow: hidden; }
.tc-bar em { display: block; width: 0; height: 100%; background: var(--c); transition: width .6s ease; }
.tc-bar b { font: 400 18px/1 'Patrick Hand', cursive; }
.tc .up { color: #0a7a35; }
.tc .down { color: #c4161c; }
.tc-foot { display: flex; }
.tc-foot .tc-watch { flex: 1; }
.tc-share { display: grid; place-items: center; width: 54px; padding: 0; border: 0; border-top: 2.5px solid #111; border-left: 2.5px solid #111; background: #fff27a; color: #111; cursor: pointer; transition: background .2s; }
.tc-share svg { width: 20px; height: 20px; }
.tc-share:hover { background: #fff; }
.tc-watch { margin: 0; padding: 11px; border: 0; border-top: 2.5px solid #111; background: #111; color: #fff; font: 400 17px/1 'Anton', Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.tc-watch:hover { background: var(--c); color: #111; }
/* the leader's card is foil: a gold frame and a sheen sweeping across */
.tc.first { background: linear-gradient(135deg, #ffd23f, var(--c) 45%, #ffd23f); }
.tc::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 45%, rgba(255, 236, 140, .3) 50%, rgba(140, 220, 255, .25) 55%, transparent 68%); background-size: 260% 100%; }
.tc.first::after { opacity: 1; animation: foil 3.8s linear infinite; }
@keyframes foil { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* ---------- How it works (scenes.js strip()): a comic strip, the characters act out each rule ---------- */
.how { margin: 44px 0 0; }
/* a section's title: a cream title card, like the comic's caption boxes; the line under it handwritten */
.doodle-h { display: inline-block; margin: 0; padding: 5px 16px 7px; border: 3px solid #111; background: #fffaf0; box-shadow: 4px 4px 0 #111; transform: rotate(-1.2deg); color: #111; font: 400 30px/1.1 'Anton', Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.how-head p { margin: 12px 0 18px; color: var(--txt-2); font: 400 20px/1.3 'Patrick Hand', cursive; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw { position: relative; display: flex; flex-direction: column; margin: 0; border: 3px solid #111; border-radius: 10px; background: #fffaf0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 34px -22px rgba(0, 0, 0, .9); }
.hw-scene { position: relative; width: 100%; aspect-ratio: 480 / 300; overflow: hidden; background: #e7ddf6; border-bottom: 3px solid #111; }
.hw .scene { border-radius: 0; box-shadow: none; }
.hw-box { position: absolute; left: 10px; top: 10px; z-index: 6; padding: 3px 10px 4px; border: 2.5px solid #111; background: #fff27a; box-shadow: 2px 2px 0 #111; color: #111; font: 400 16px/1.2 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.hw.red .hw-box { background: #ff6b6b; }
.hw figcaption { padding: 11px 14px 13px; color: #2a2620; font: 400 18px/1.3 'Patrick Hand', cursive; }
.hw.red figcaption { background: #ffe9e6; }
.hw-ch { position: absolute; z-index: 2; }
.hw-ch > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hw-ch.flip > svg { transform: scaleX(-1); }
.hw-tag { position: absolute; z-index: 4; transform: translate(-50%, -50%); color: #111; white-space: nowrap; }
.hw-tag.plate { display: flex; flex-direction: column; align-items: center; }
.hw-tag.plate b { font: 400 18px/1 'Anton', Impact, sans-serif; letter-spacing: .04em; -webkit-text-stroke: 1px #111; paint-order: stroke fill; }
.hw-tag.plate small { font: 400 13px/1.15 'Patrick Hand', cursive; }
.hw-tag.sol { padding: 1px 8px; border: 2px solid #111; border-radius: 999px; background: #3ddc84; box-shadow: 2px 2px 0 #111; font: 400 15px/1.3 'Anton', Impact, sans-serif; letter-spacing: .04em; }
.hw-tag.pct { padding: 0 5px; border: 2px solid #111; border-radius: 4px; background: #fff27a; transform: translate(-50%, -50%) rotate(9deg); font: 400 13px/1.3 'Anton', Impact, sans-serif; }
.hw-tag.note { padding: 1px 9px 2px; border: 2px solid #111; border-radius: 4px; background: #fff27a; box-shadow: 2px 2px 0 #111; transform: translate(-50%, -50%) rotate(-2deg); font: 400 17px/1.2 'Patrick Hand', cursive; }
.hw-face { position: absolute; z-index: 4; width: 44px; height: 44px; border: 2.5px solid #111; border-radius: 50%; background-color: #fff !important; overflow: hidden; }
.hw-face svg { width: 100%; height: 100%; }
.hw-say { position: absolute; z-index: 4; padding: 6px 13px 7px; border: 2.5px solid #111; border-radius: 18px; background: #fff; box-shadow: 2px 2px 0 #111; transform: translate(-50%, -50%); color: #111; font: 400 19px/1.15 'Patrick Hand', cursive; white-space: nowrap; }
.hw-say::before, .hw-say::after { content: ''; position: absolute; top: 100%; }
.hw-say::before { width: 22px; height: 18px; background: #111; }
.hw-say::after { width: 15px; height: 12px; margin-top: -3px; background: #fff; }
.hw-say.l::before { left: 24px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hw-say.l::after { left: 26.5px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hw-say.r::before { right: 24px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.hw-say.r::after { right: 26.5px; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ---------- smaller screens ---------- */
/* the CA steps aside when the header gets tight (the nav hides under 820px, which makes room again) */
@media (min-width: 821px) and (max-width: 960px), (max-width: 640px) { .top-ca { display: none; } }
@media (max-width: 1100px) {
  .top { gap: 28px; }
  .nav { gap: 24px; }
  .show { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; padding: 12px 16px; }
  .tiles { flex: none; }
  .chat { height: 640px; }
  .chat.picking { height: auto; }     /* the four cards, no box: as tall as they need */
  .standings { padding: 16px 16px 6px; }
  .lb-list li { grid-template-columns: 32px 44px minmax(100px, 1fr) minmax(0, 1.3fr) 86px 104px; }
  .lb-rec { display: none; }
  .below { padding: 8px 16px 48px; }
  .strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) { .nav { display: none; } }
@media (max-width: 400px) { .brand-word { display: none; } }   /* the smallest phones: ZIP alone */
/* a phone: the two scenes stacked, each with its details right under it */
@media (max-width: 760px) {
  .standings { grid-template-columns: minmax(0, 1fr); grid-template-areas: "podium" "rows" "race" "vault" "fees"; }
  .st-panel, #scenes { display: contents; }
  #scenes > :first-child { grid-area: podium; }
  #scenes > :last-child { grid-area: vault; }
  #scenes > :last-child { margin-top: 26px; }
  /* each scene and its paper make one framed panel */
  #scenes > .scene { border: 3px solid #111; border-radius: 12px 12px 0 0; box-shadow: none; }
  .lb-list, .fee-facts { border: 3px solid #111; border-top: 0; border-radius: 0 0 12px 12px; background: #fffaf0; color: #111; }
  .lb-list { padding: 4px 8px 6px; border-radius: 0; }
  .race { padding: 12px 10px; border: 3px solid #111; border-top: 2.5px dashed #111; border-radius: 0 0 12px 12px; background: #fffaf0; color: #111; }
  .race-plot { height: 200px; }
}
@media (max-width: 640px) {
  .top { gap: 8px; height: 58px; padding: 0 16px; }
  .brand { gap: 9px; }
  .brand-mark { height: 40px; }
  .brand-word { height: 22px; }
  .top-cta { gap: 6px; }
  .icon-btn { width: 32px; height: 32px; font-size: 16px; }
  .moment b { display: none; }
  .icon-btn svg { width: 18px; height: 18px; }
  .top-cta .btn { height: 32px; }
  .top-cta .btn-lime { padding: 0 12px; font-size: 16px; }
  .top-cta .wallet-btn { padding: 0 10px; font-size: 13px; }
  .show { padding: 10px 16px; }
  .arena-bar { flex-wrap: wrap; height: auto; margin-bottom: 10px; padding: 6px; gap: 6px; }
  .seg button { padding: 6px 12px; }
  .cams { display: none !important; }
  .conn { display: none; }
  .bar-stats { flex: 1; justify-content: space-between; gap: 8px; height: auto; margin: 0; padding: 0 6px; border-left: 0; font-size: 12px; }
  .bar-stats b { margin-left: 4px; font-size: 15px; }
  .chat { height: 580px; }
  .chat.picking { height: auto; }
  .chat-h > b { font-size: 22px; }
  .rooms { padding: 0 4px; gap: 2px; }
  .room b { font-size: 13px; }
  .card-h > span { white-space: normal; text-align: right; }
  .lb-list li { grid-template-columns: 28px 38px minmax(0, 1fr) auto; gap: 10px; padding: 7px 6px; }
  .lb-rank { width: 27px; height: 27px; font-size: 14px; }
  .lb-head { width: 38px; height: 38px; }
  .lb-now, .lb-wal { display: none; }
  .tcards, .strip { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; gap: 14px; margin: 0 -16px; padding: 6px 16px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tcards::-webkit-scrollbar, .strip::-webkit-scrollbar { display: none; }
  .tcards > *, .strip > * { scroll-snap-align: center; }
  .swipe-hint { display: block; }
  .hw-box { padding: 2px 8px 3px; font-size: 13.5px; }
  .say-modes button { padding: 0 9px; }
  .tabs { flex-wrap: wrap; gap: 8px; }
  .tabs button { padding: 6px 12px 7px; font-size: 15px; }
  .paper { padding: 12px 10px 10px; }
}
/* the light drawing mode (index.html sets .fx-lite on phones and tablets). The boiling line is an SVG noise filter on
   every room, character, scene and the race, regenerated several times a second: on a phone that is dozens of
   full-resolution buffers, and iOS Safari kills the tab ("a problem repeatedly occurred"). Here the drawings keep their
   shapes and animations, without the filter, and nothing blurs what is behind it */
.fx-lite svg [filter] { filter: none !important; }
.fx-lite .top, .fx-lite .ov-tr, .fx-lite .share { backdrop-filter: none; }
.fx-lite .wall::after { filter: none; }
/* ...the rooms' own moving bits (clock hands, a wheel, bubbles) hold still: each one repaints the whole room drawing,
   the size of the stream, every frame. The characters keep all of theirs (they are small drawings of their own) */
.fx-lite .tile svg:not(.mm) * { animation-play-state: paused !important; }
/* ...and with a big stream showing, the small ones beside it hold still */
.fx-lite .tiles:has(.focused) .tile:not(.focused) *, .fx-lite .tiles:has(.focused) .tile:not(.focused) *::before,
.fx-lite .tiles:has(.focused) .tile:not(.focused) *::after { animation-play-state: paused !important; }
/* anything off screen holds still, on every device (app.js: an IntersectionObserver sets .fx-off) */
.fx-off, .fx-off *, .fx-off::before, .fx-off::after, .fx-off *::before, .fx-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .tile, .cam, .mon { transition: none; }
  .pd-ch.moved .pd-hop, .pd-fly, .vt-drop, .vt-clock.ring, .vt-bag.got, .vt-face.got { animation: none; }
  .av-head, .av-eyes.blink, .av-scan, .av-ping, .neon b { animation: none; }
}