:root {
--bg: #0b1020;
--panel: #141b33;
--panel-2: #1c2547;
--text: #e6ebff;
--muted: #8a96c4;
--accent: #2dd4bf;
--kalshi: #60a5fa;
--sxbet: #ec4899;
--limitless: #f97316;
--whale: #f472b6;
--mint: #6ee7b7; /* Build .282: mint green for the "...to KNOW" tagline clause */
--jackpot: #fbbf24;
--danger: #ef4444;
--success: #4ade80;
--border: #2a3566;
/* Phase C: board palette โ et-gold is new; others alias existing vars */
--et-gold: #D4AF37;
--source-tint: rgba(0,0,0,0.22); /* Build .284: subtle dark backing behind Marketplace Activity source cells; theme-agnostic black-alpha (reads on dark + peach). Build .286: deepened 0.10 -> 0.22 for stronger venue-name contrast. */
--live-bg: rgba(239, 68, 68, 0.18); /* Build .287: theme-agnostic red-alpha backing for the ๐ด LIVE in-play badge (sx.bet); composites over dark + peach. */
--chip-halo: rgba(0,0,0,0.9); /* Build .288: dark text-halo so colorful Marketplace venue names pop against their same-hue colorful chip background. Theme-agnostic (a dark outline reads on dark + peach). */
}
* { box-sizing: border-box; }
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Build v.03 .31 build 159 (2026-05-23): GLOBAL HARD RULE โ NO
HORIZONTAL SCROLL BAR EVER, on any viewport, any page, any layout.
This is non-negotiable. When ANY content tries to exceed the
viewport width, it must wrap, shrink, or be clipped โ never push
the body wider than 100vw.
Belt + suspenders:
- overflow-x: clip on AND (clip is stricter than
hidden โ it disables scrolling entirely, no programmatic
scrollLeft either)
- max-width: 100vw to prevent any child's intrinsic size from
widening the body
- Fallback to overflow-x: hidden on older browsers that don't
support `clip` (still ~99%+ now, but defensive)
If you're adding a new component and a horizontal scrollbar
appears, the BUG is in the component, not in this rule. Common
culprits:
with long lines,
with non-wrappable cells,
inline-block rows that can't shrink, fixed-width grids. Apply
`min-width: 0` to flex/grid children and `overflow-wrap: anywhere`
to text containers as needed.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
html, body {
overflow-x: clip;
max-width: 100vw;
}
@supports not (overflow-x: clip) {
html, body { overflow-x: hidden; }
}
body {
margin: 0;
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { margin: 0; font-size: 20px; letter-spacing: 0.02em; }
.brand-accent { color: var(--accent); font-weight: 700; }
.brand {
display: flex; align-items: center; gap: 14px;
flex-shrink: 0; text-decoration: none; color: inherit;
}
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 44px; width: auto; }
/* Build .69 (item #1): 0.8ร0.8cm decorative box mirroring the three
primary ticker labels. Uses the exact same backgrounds as
.tl-events / .tl-whales / .tl-jackpot, so the visual identity
stays in sync if those CSS vars ever change. Sits on its own
--bg parent so the alpha-blend renders the same dark-teal /
pink / dark-brown the user sees on the ticker row.
Stripe widths: 87% / 100% / 74% โ middle is 15% wider than top,
bottom is 15% narrower than top, per the spec. */
.brand-decoration {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 0.8cm;
height: 0.8cm;
padding: 1px 0;
background: var(--bg);
border-radius: 3px;
gap: 1px;
flex-shrink: 0;
}
.brand-stripe {
display: block;
height: calc(33.33% - 1px);
border-radius: 2px;
}
.brand-stripe-events {
width: 87%;
background: linear-gradient(180deg, rgba(45,212,191,0.55), rgba(96,165,250,0.45));
}
.brand-stripe-whales {
width: 100%;
background: var(--whale);
}
.brand-stripe-jackpot {
width: 74%;
background: linear-gradient(180deg, rgba(251,191,36,0.55), rgba(251,191,36,0.30));
}
.brand-product { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.brand-product-name {
font-size: 16px; font-weight: 700; color: var(--text);
letter-spacing: 0.01em;
}
.brand-et-name { color: var(--whale); }
.beta-tag {
display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent);
background: rgba(45,212,191,0.15); padding: 1px 6px; border-radius: 3px;
letter-spacing: 0.08em; vertical-align: middle; margin-left: 4px;
}
.tagline { font-size: 11px; color: var(--whale); font-style: italic; letter-spacing: 0.02em; }
h2 { font-size: 16px; color: var(--muted); margin: 24px 20px 12px; text-transform: uppercase; letter-spacing: 0.1em; }
h3 { font-size: 18px; color: #ffffff; margin: 0 0 12px; font-weight: 800; letter-spacing: 0.02em; }
h3 .plat-name { font-size: 18px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
h3 .plat-sub { font-size: 14px; color: #ffffff; font-weight: 700; }
/* h3 platform tinting */
.dv-chart h3 .plat-name { color: var(--accent); }
.visitor-card h3 .plat-name { color: #f59e0b; }
h4.section-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 8px; }
.evt-chart-wrap { position: relative; height: 180px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.evt-chart-empty { font-size: 11px; color: var(--muted); padding: 8px 0; font-style: italic; }
/* Legacy top-strip styles kept only because some older selectors may still
reference them; the actual element no longer renders post-Phase-1 reorder. */
.top-strip { display: none; }
.ticker-strip { display: none; }
.ticker-row { display: none; }
/* Jackpot top-10 card sitting in the right half of the top strip */
.jackpot-top10-card {
background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 14px; max-height: none; overflow-y: visible;
border-top: 3px solid var(--jackpot);
}
.jackpot-top10-card .platform { margin-bottom: 8px; padding-bottom: 6px; }
.jackpot-list { list-style: none; margin: 0; padding: 0; counter-reset: jp; }
.jackpot-list .jp-row { counter-increment: jp; border-bottom: 1px solid var(--border); }
.jackpot-list .jp-row:last-child { border-bottom: none; }
.jackpot-list .jp-row-link {
display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 8px; align-items: baseline;
padding: 5px 4px; color: var(--text); font-size: 12px;
}
.jackpot-list .jp-row-link::before {
content: counter(jp);
font-family: monospace; font-size: 10px; color: var(--muted); text-align: right;
}
.jackpot-list .jp-row-link .sig-plat { font-size: 9px; padding: 2px 4px; align-self: center; }
.jackpot-list .jp-row-link:hover { background: var(--panel-2); text-decoration: none; }
.jackpot-list .jp-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jackpot-list .jp-row-amount { font-family: monospace; font-size: 11px; color: var(--jackpot); font-weight: 700; }
.plat-name.jackpot-name { color: var(--jackpot); }
.ticker-label {
font-size: 10px; letter-spacing: 0.12em; font-weight: 700; flex-shrink: 0;
padding: 2px 6px; border-radius: 3px;
}
.ticker-poly .ticker-label { background: rgba(45,212,191,0.15); color: var(--accent); }
.ticker-kalshi .ticker-label { background: rgba(96,165,250,0.15); color: var(--kalshi); }
.ticker-manifold .ticker-label { background: rgba(167,139,250,0.15); color: #a78bfa; }
.ticker-sxbet .ticker-label { background: rgba(236,72,153,0.15); color: var(--sxbet); }
.ticker-limitless .ticker-label { background: rgba(249,115,22,0.15); color: var(--limitless); }
/* Legacy .ticker-item rule removed (was: flex:1; min-width:0; overflow:hidden).
That style was for the original per-platform top-strip ticker rows where
each row had a single .ticker-item child meant to fill remaining space.
Phase 1's reorder removed top-strip, but this rule was still inherited
by the marquee .ticker-item items inside .ticker-track. Combined with
flex layout on .ticker-track, it forced every marquee item to shrink to
1/N of the track width and clipped longer fields like titles. */
.ticker-link {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
color: var(--text); text-decoration: none; min-width: 0;
}
.ticker-link:hover .ticker-title { color: var(--accent); }
.ticker-title {
font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.ticker-vol { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ticker-placeholder { font-size: 11px; color: var(--muted); font-style: italic; }
@media (max-width: 800px) {
.ticker-strip { grid-template-columns: 1fr; }
}
/* Viewer pill โ sticks to the bottom-right corner of the WEB PAGE (not the
viewport). Body is the offset parent, so absolute positioning anchors it
to the page bottom-right and it scrolls away with the page. */
body { position: relative; }
.viewer-pill {
position: absolute; right: 16px; bottom: 16px; z-index: 5;
background: rgba(13,19,40,0.92);
border: 1px solid var(--border); border-radius: 999px;
padding: 6px 12px; font-size: 11px; color: var(--text);
display: flex; align-items: center; gap: 6px;
box-shadow: 0 6px 24px rgba(0,0,0,0.35); cursor: pointer;
}
.viewer-pill:hover { border-color: var(--accent); }
.vw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(45,212,191,0.7); animation: vwPulse 1.8s infinite; }
@keyframes vwPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.vw-total { font-weight: 700; font-size: 13px; color: var(--accent); }
.vw-all-unique { font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.vw-sep { color: var(--muted); opacity: 0.5; }
.vw-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.vw-flag { font-size: 11px; } /* .313: reduced for compact widget */
.vw-cc { color: var(--muted); width: 20px; font-variant-numeric: tabular-nums; font-size: 10px; }
.vw-n { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 10px; }
.vw-list { list-style: none; margin: 0; padding: 0; }
.vw-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-top: 1px solid rgba(255,255,255,0.04); font-size: 12px; }
/* Visitor globe card (bottom of page โ replaces jackpot) */
.visitor-card {
background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
padding: 14px 16px;
}
/* โโโ Visitor card (bottom of page) โโโ
Layout: globe on left, stats panel on right.
Stats panel = 3-stat row (online / all-time unique / all-time visits)
on top, country list spanning full width on row 2. */
.visitor-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 18px; align-items: stretch;
}
.vw-globe-bottom {
width: 200px; height: 200px; margin: 0 auto;
border-radius: 50%; overflow: hidden;
background: radial-gradient(circle at 50% 50%, #0c1a3a 0%, #0b1020 100%);
display: flex; align-items: center; justify-content: center;
}
.vw-globe-bottom canvas { display: block; margin: auto; }
.vw-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 12px;
min-width: 0; /* let the country list shrink instead of overflowing right */
}
.vw-stat {
background: var(--panel-2); border-radius: 6px; padding: 12px 10px;
text-align: center; min-width: 0;
}
.vw-stat-num {
font-family: monospace; font-size: 22px; font-weight: 800;
color: var(--accent); line-height: 1.1;
}
.vw-stat-lbl {
font-size: 10px; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.08em; margin-top: 4px;
}
/* Build .300: sub-line under a stat label (e.g. "Since June 2026" under
returning visitors) โ smaller + dimmer + sentence-case so it reads as a
footnote, not a second label. */
.vw-stat-sub {
font-size: 8px; color: var(--muted); opacity: 0.8;
letter-spacing: 0.03em; margin-top: 2px;
}
.vw-list.vw-list-bottom {
grid-column: 1 / -1; /* span all 3 stat columns on row 2 */
list-style: none; margin: 0; padding: 8px 0 0;
border-top: 1px solid var(--border);
max-height: 140px; overflow-y: auto;
font-size: 11px;
/* Reset older standalone styling that used to draw a left border */
border-left: none; padding-left: 0;
}
.vw-list.vw-list-bottom li {
display: flex; justify-content: space-between; align-items: center;
padding: 3px 4px;
}
@media (max-width: 800px) {
.visitor-body { grid-template-columns: 1fr; }
.vw-stats { grid-template-columns: repeat(3, 1fr); }
}
.vw-modal { max-width: 720px; width: 90vw; }
.vw-globe-big { width: 100%; height: 400px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #0c1a3a 0%, #0b1020 100%); margin: 12px 0; }
.vw-list-big { max-height: 180px; }
/* โโโ Header โโโ */
header {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
padding: 14px 20px; border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, #101735, #0b1020);
}
.meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alive-toggle {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
cursor: pointer; font-size: 11px; color: var(--text); user-select: none;
}
.alive-toggle:hover { border-color: var(--accent); }
/* โโ Right-side header cluster + Trackster mascot โโโโโโโโโโโโโโโโโโโโโโโโโโโ
.header-right groups the Telegram CTA + the three controls so they sit close
together (no space-between gap), and lets the mascot anchor the far corner. */
.header-right {
display: flex; align-items: center; justify-content: flex-end;
gap: 14px; flex-wrap: wrap; margin-left: auto;
}
/* Trackster waves in the top-right corner, above the right end of the tickers.
The arm-wave is a Lottie animation (damped-sine swing about the shoulder),
rendered by lottie-web into each .header-mascot container. */
.header-mascot {
flex: 0 0 auto; width: 112px; height: auto; align-self: flex-end;
aspect-ratio: 640 / 916; /* divs have no intrinsic size โ size like the old */
margin: -4px -2px -16px 4px; /* lift a touch + let the feet sit on the ticker */
position: relative; z-index: 6; pointer-events: none; user-select: none;
}
.header-mascot svg { display: block; width: 100%; height: 100%; }
/* Trackster wears shades on DARK (default) and goes bare-faced on peachy/day. */
.header-mascot--day { display: none; }
:root[data-theme="peach"] .header-mascot--dark { display: none; }
:root[data-theme="peach"] .header-mascot--day { display: block; }
.alive-toggle input { accent-color: var(--accent); }
.alive-toggle:has(input:checked) { background: rgba(45,212,191,0.15); border-color: var(--accent); color: var(--accent); }
/* Build v0.35 20260523.173 (2026-05-23): donation widget โ replaces
the "Last updated:" timestamp in the top-right meta strip. The
button uses a warm gold-pink gradient so it pops against the cool
header background without screaming for attention. */
.donate-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 16px;
font-size: 12px; font-weight: 700; color: #0b1020;
background: linear-gradient(135deg, #fbbf24 0%, #f472b6 100%);
border: 1px solid rgba(251,191,36,0.5);
cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: transform 120ms ease, box-shadow 120ms ease;
text-decoration: none;
}
.donate-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(251,191,36,0.35);
}
.donate-btn .donate-icon {
width: 16px; height: 16px; display: block; border-radius: 3px;
}
.donate-btn-disabled {
background: var(--panel-2);
color: var(--muted);
border-color: var(--border);
cursor: not-allowed; opacity: 0.55;
}
.donate-btn-disabled:hover { transform: none; box-shadow: none; }
/* Donation modal */
.donate-modal {
max-width: 540px;
}
.donate-title-icon {
width: 22px; height: 22px; vertical-align: -4px;
margin-right: 6px; border-radius: 4px;
}
.donate-intro {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 4px 0 16px 0;
}
.donate-wallet-block {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 16px;
}
.donate-wallet-lbl {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.donate-wallet-row {
display: flex; align-items: center; gap: 8px;
}
.donate-wallet-addr {
flex: 1;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
background: rgba(45,212,191,0.08);
border: 1px solid rgba(45,212,191,0.30);
color: var(--text);
padding: 6px 8px;
border-radius: 4px;
word-break: break-all;
user-select: all;
}
.donate-copy-btn {
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: rgba(45,212,191,0.10);
border: 1px solid rgba(45,212,191,0.40);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
}
.donate-copy-btn:hover {
background: rgba(45,212,191,0.20);
}
.donate-wallet-hint {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
font-style: italic;
}
.donate-form {
display: flex; flex-direction: column; gap: 12px;
}
.donate-row {
display: flex; flex-direction: column; gap: 4px;
}
.donate-row-2col {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 12px;
}
.donate-col {
display: flex; flex-direction: column; gap: 4px;
}
.donate-label {
font-size: 12px;
color: var(--muted);
font-weight: 600;
}
.donate-opt {
font-weight: 400; opacity: 0.7;
}
.donate-input {
font-size: 13px;
padding: 7px 10px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
font-family: inherit;
}
.donate-input:focus {
outline: none;
border-color: var(--accent);
background: rgba(45,212,191,0.05);
}
.donate-input-mono {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
}
.donate-textarea {
resize: vertical;
min-height: 60px;
font-family: inherit;
}
.donate-actions {
display: flex; align-items: center; gap: 12px;
margin-top: 4px;
}
.donate-submit {
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
color: #0b1020;
background: linear-gradient(135deg, #fbbf24 0%, #f472b6 100%);
border: 1px solid rgba(251,191,36,0.5);
border-radius: 6px;
cursor: pointer;
}
.donate-submit:hover { filter: brightness(1.08); }
.donate-status {
font-size: 12px;
color: var(--muted);
}
.donate-status-pending { color: var(--muted); }
.donate-status-ok { color: var(--success); }
.donate-status-err { color: var(--danger); }
.donate-fineprint {
font-size: 11px;
color: var(--muted);
font-style: italic;
line-height: 1.5;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
@media (max-width: 540px) {
.donate-row-2col { grid-template-columns: 1fr; }
}
/* Build .94: Telegram subscribe CTA in the header. Vibrant Telegram-
blue โ emerald-green gradient (cheerful palette, distinct from the
site's teal/blue accent so it visibly stands out). Paper-plane
icon with a subtle "fly" animation on hover. Sits between the
search box and the meta block. */
.tg-subscribe-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, #229ED9 0%, #34D399 100%);
color: #ffffff;
text-decoration: none;
border-radius: 20px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow:
0 2px 12px rgba(34, 158, 217, 0.40),
0 0 0 0 rgba(52, 211, 153, 0);
transition: transform 0.18s ease, box-shadow 0.25s ease;
border: none;
cursor: pointer;
white-space: nowrap;
/* Subtle idle pulse so the button has life even without hover. */
animation: tg-btn-pulse 3.2s ease-in-out infinite;
}
.tg-subscribe-btn:hover {
transform: translateY(-1px) scale(1.04);
box-shadow:
0 4px 20px rgba(34, 158, 217, 0.60),
0 0 0 4px rgba(52, 211, 153, 0.22);
animation: none; /* Halt the pulse so hover takes over cleanly. */
}
.tg-subscribe-btn:active {
transform: translateY(0) scale(0.98);
}
.tg-subscribe-btn .tg-icon {
font-size: 15px;
display: inline-block;
transform: rotate(-20deg);
transition: transform 0.3s ease;
}
.tg-subscribe-btn:hover .tg-icon {
animation: tg-fly 0.55s ease-in-out;
}
@keyframes tg-fly {
0% { transform: rotate(-20deg) translate(0, 0); }
40% { transform: rotate(-35deg) translate(3px, -3px); }
100% { transform: rotate(-20deg) translate(0, 0); }
}
@keyframes tg-btn-pulse {
0%, 100% {
box-shadow:
0 2px 12px rgba(34, 158, 217, 0.40),
0 0 0 0 rgba(52, 211, 153, 0);
}
50% {
box-shadow:
0 3px 16px rgba(34, 158, 217, 0.55),
0 0 0 6px rgba(52, 211, 153, 0.12);
}
}
/* Mobile: shrink padding + text size so it still fits in the header
when stacked. On narrowest breakpoint it sits inline with the
search box (flex-wraps). */
@media (max-width: 900px) {
.tg-subscribe-btn {
padding: 7px 12px;
font-size: 11px;
}
.tg-subscribe-btn .tg-icon { font-size: 13px; }
}
@media (max-width: 700px) {
.tg-subscribe-btn {
order: 13; /* sit at the very end after search + meta on mobile */
margin-left: auto;
}
}
.hidden-note { color: var(--muted); font-size: 10px; font-weight: normal; text-transform: none; letter-spacing: 0; }
.ts { color: var(--text); font-family: monospace; }
.collect-btn {
background: var(--accent); color: #0b1020; border: none; padding: 6px 14px;
border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer;
letter-spacing: 0.05em; text-transform: uppercase;
}
.collect-btn:hover:not(:disabled) { background: #5eead4; }
.collect-btn:disabled { opacity: 0.6; cursor: wait; }
.collect-status { font-family: monospace; font-size: 11px; }
.collect-status.ok { color: var(--accent); }
.collect-status.err { color: var(--danger); }
/* Build .54: hero subtitle now lives INSIDE the header flex row,
spanning the middle column between the brand block (left) and the
search/meta block (right). Gradient text fill preserved. The old
.hero-subtitle / .hero-subtitle-text full-width band classes are
gone โ replaced by a single .hero-subtitle-inline. */
.hero-subtitle-inline {
margin: 0;
max-width: 100%;
text-align: center;
/* Build .281: ONE line โ scales down on narrow viewports so it never
wraps (until the <=600px rule lets it wrap to avoid clipping). */
font-size: clamp(11px, 1.1vw, 14px);
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.25;
/* Build .228: solid var(--whale) pink to match the EventTracker brand name. */
color: var(--whale);
/* Build .246: thin gold outline to frame the tagline */
border: 1px solid rgba(251, 191, 36, 0.45);
border-radius: 6px;
padding: 4px 12px;
white-space: nowrap; /* Build .281: single line */
word-break: keep-all;
}
/* Build .282: second tagline clause ("come to EventTracker to KNOW") in mint green. */
.hero-know { color: var(--mint); }
/* Build .256: legal disclaimer โ small all-caps line inside the gold border */
.hero-disclaimer {
display: block;
width: 100%;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
line-height: 1.3;
text-align: center;
opacity: 0.75;
}
@media (max-width: 900px) {
.hero-subtitle-inline { font-size: 16px; }
}
@media (max-width: 600px) {
/* On small phones let the one-line tagline wrap rather than clip, and
give the stack full width so the search box isn't cramped. */
.hero-subtitle-inline { font-size: 14px; margin: 0; white-space: normal; }
.hero-inner { width: 100%; }
}
/* Build .281: hero tagline + search + disclaimer stacked as their own
centered, full-width row in the (wrapping) header. .hero-stack claims a
100%-basis row below the brand/controls row (order:5); .hero-inner is
sized to the one-line tagline (width:fit-content) so the search box
stretches to exactly the tagline's width, with the disclaimer beneath. */
.hero-stack {
/* Build .282: inline in the header row -- sits between the brand
(...BETA) and the Telegram CTA. Drops to its own full-width row at
<=1000px (media rule below) where there isn't room inline. */
display: flex;
flex: 0 1 auto;
justify-content: center;
min-width: 0;
}
.hero-inner {
display: flex;
flex-direction: column;
align-items: stretch;
width: fit-content; /* = the one-line tagline's width */
max-width: 100%;
gap: 6px;
margin: 0;
}
.hero-inner .hero-subtitle-inline { align-self: center; }
.hero-inner .search-box {
position: relative;
flex: 0 0 auto; /* auto height in the column (override 0 1 260px) */
order: 0; /* override the <=1000/<=768 search-box reorders */
width: 100%; /* stretch to the inner width = tagline width */
max-width: 100%;
margin: 0; /* override margin-left:auto */
}
/* Build .282: at <=1000px the hero drops to its own full-width row below
the brand/controls row -- there, push the Telegram CTA + meta right
(brand stays left). On desktop the hero is inline, so space-between
distributes brand | hero | CTA | meta with the hero between them. */
@media (max-width: 1000px) {
.hero-stack { flex-basis: 100%; order: 5; }
/* .header-right already has margin-left:auto (base) โ keeps the CTA cluster
+ mascot pinned right when the hero drops to its own full-width row. */
}
/* Build .309: wide-desktop banner โ three zones with EQUAL side blocks.
LEFT (.brand) and RIGHT (.header-right: Telegram + Peachy + Donate +
Trackster) are forced to the SAME column width (--hdr-side) via grid, so
"their total width equals" by construction. The brand's logo + EventTracker
text are enlarged to fill the left column; the CENTER (.hero-stack: slogan +
search + disclaimer) takes the whole middle and its contents scale up to fit.
Only applies where there's room (>=1500px); below that the base flexbox header
+ the <=1000px stack handle the responsive fallback unchanged. */
@media (min-width: 1500px) {
header {
--hdr-side: 540px; /* == the right cluster's natural width */
display: grid;
grid-template-columns: var(--hdr-side) minmax(0, 1fr) var(--hdr-side);
align-items: center;
gap: 24px;
}
/* LEFT โ enlarge the PodComet logo + EventTracker text (~1.35x) to fill it */
.brand { gap: 16px; }
.brand-logo { height: 62px; }
.brand-decoration { width: 1.0cm; height: 1.0cm; }
.brand-product-name { font-size: 22px; }
/* RIGHT โ pin the cluster to the right edge of its equal column */
.header-right { justify-content: flex-end; margin-left: 0; }
/* CENTER โ slogan + search + disclaimer, as large as fits the middle zone */
.hero-stack { justify-content: center; }
.hero-inner { width: 100%; max-width: 100%; gap: 8px; }
.hero-inner .hero-subtitle-inline {
font-size: clamp(15px, 1.25vw, 21px);
white-space: normal; /* wrap rather than clip if the zone narrows */
padding: 6px 16px;
width: 100%;
}
.hero-inner .search-box input { font-size: 14px; padding: 8px 12px; }
.hero-disclaimer { font-size: 11px; }
}
/* โโโ Search โโโ */
.search-box { position: relative; flex: 0 1 260px; margin-left: auto; }
.search-box input {
width: 100%; padding: 5px 10px; background: var(--panel-2); border: 1px solid var(--border);
border-radius: 6px; color: var(--text); font-size: 12px; outline: none;
text-align: center; /* Build .282: center-align the placeholder + typed query */
}
.search-box input:focus { border-color: var(--accent); }
.search-results {
position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
display: none; max-height: 60vh; overflow-y: auto; z-index: 50; /* Build .288: taller (was 320px) now the 5-item cap is lifted; stays scrollable + viewport-bounded */
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.search-results.open { display: block; }
.sr-item {
display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--panel-2); text-decoration: none; }
.sr-plat {
font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
letter-spacing: 0.1em; font-family: monospace;
}
.sr-poly { background: rgba(45,212,191,0.2); color: var(--accent); }
.sr-kalshi { background: rgba(96,165,250,0.2); color: var(--kalshi); }
.sr-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-vol { font-family: monospace; font-size: 11px; color: var(--muted); }
.sr-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }
/* โโโ Signals row: Anomaly + Top Wallets + Smart-Money (under top strip) โโโ */
.signals-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
padding: 8px 20px;
}
@media (max-width: 1200px) {
.signals-row { grid-template-columns: 1fr 1fr; }
.wallets-card,
.marketplace-card { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.signals-row { grid-template-columns: 1fr; }
.wallets-card,
.marketplace-card { grid-column: auto; }
}
/* Build .66: 3ร2 grid layout for the signals row.
Layout map (desktop):
โโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโ
โ Anomaly โ Marketplace โ Top-10 โ
โ Watch โ Activity โ Movers โ
โ (.row 1) โ (.row 1 + 2) โ (.row 1) โ
โโโโโโโโโโโโโโโโค โโโโโโโโโโโโโโโโค
โ Smart-Money โ โ Reserved โ
โ Feed โ โ โ
โ (.row 2) โ โ (.row 2) โ
โโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโ */
.signals-row-3x2 {
/* Build .316 PROTOTYPE โ dynamic "masonry" signals row: each card sizes to
its OWN data and flows into balanced columns, instead of the fixed 3ร2
stretch grid that padded short cards up to their row-mate's height (the
`align-items: stretch` from build .67). The explicit grid-column/grid-row
placement rules below go inert under column layout โ left in place so this
reverts by restoring this one rule. NOTE: card ORDER now flows by content
balance (DOM order), not the old fixed placement; lock placement later with
per-column wrappers if the masonry feel is approved. */
display: block;
column-count: 3;
column-gap: 12px;
}
.signals-row-3x2 > .signals-card { break-inside: avoid; margin: 0 0 12px; }
@media (max-width: 1200px) { .signals-row-3x2 { column-count: 2; } }
@media (max-width: 838px) { .signals-row-3x2 { column-count: 1; } }
/* Build .316 PROTOTYPE โ masonry collapse fix: these inner lists were built to
FILL a fixed cell (`flex: 1 1 0` / `1 1 50%`) and clip/scroll. In an
auto-height masonry card that fill-flex collapses the list to 0 height,
clipping every row. Size them to their CONTENT so each card grows to its
data (the whole point of dynamic cards). */
.signals-row-3x2 .board-card-list,
.signals-row-3x2 .liq-list,
.signals-row-3x2 .la-news-list,
.signals-row-3x2 .movers-top-half,
.signals-row-3x2 .movers-bottom-half {
flex: 0 0 auto;
overflow: visible;
min-height: 0;
}
/* Make sure the inner placeholder body grows to fill the card so the
"Wiring up in .67" / "Reserved" text sits centered vertically. */
.signals-row-3x2 .signals-card { display: flex; flex-direction: column; }
.signals-row-3x2 .placeholder-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Build v0.35 20260523.190 (2026-05-23): swapped Smart-Money โ Anomaly
positions per user request. Dimensions + cell sizes unchanged โ
only the two cards' grid-placement values are flipped. HTML source
order is preserved (Anomaly section still comes first in the DOM)
so the visual swap is purely CSS. Mobile breakpoint gets explicit
`order:` to flip stack order too (where grid-column: auto would
otherwise fall back to DOM order). */
/* Build v0.35 20260525.222: anomaly-card replaced by board-card (col 1, row 2) */
.signals-row-3x2 .board-card { grid-column: 1; grid-row: 2; }
.signals-row-3x2 .smartmoney-card { grid-column: 1; grid-row: 1; }
/* Build v0.35 20260523.193 (2026-05-23): marketplace card no longer
spans both grid rows in column 2 โ row 2 is now claimed by the new
Latest Analysis card (.latest-analysis-card). This means column 2
now mirrors column 3 (movers + topics): one card per row. */
.signals-row-3x2 .marketplace-card { grid-column: 2; grid-row: 1; }
.signals-row-3x2 .latest-analysis-card { grid-column: 2; grid-row: 2; }
/* Build .82: Movers back to one row; bottom-right cell (col 3 row 2) is
symmetrical to Movers above it. PHQ remains on its own page-wide
section below the Top-20 grid (build .80).
Build v0.35 20260525.208: Trending Topics tile retired here (promoted
to a 4th top-of-page ticker); slot now holds the Liquidity widget. */
.signals-row-3x2 .movers-card { grid-column: 3; grid-row: 1; }
.signals-row-3x2 .liq-card { grid-column: 3; grid-row: 2; }
/* Two-column fallback (build .82: Movers + Topics now side-by-side on the
bottom row, mirroring Anomaly + Smart-Money above).
Build v0.35 20260523.190: Smart-Money โ Anomaly swap also applies
here โ Smart-Money on left (col 1), Anomaly on right (col 2). */
@media (max-width: 1200px) {
.signals-row-3x2 {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
}
/* Build v0.35 20260525.222: board-card replaces anomaly-card */
.signals-row-3x2 .board-card { grid-column: 1; grid-row: 1; }
.signals-row-3x2 .smartmoney-card { grid-column: 2; grid-row: 1; }
.signals-row-3x2 .marketplace-card { grid-column: 1 / -1; grid-row: 2; }
.signals-row-3x2 .latest-analysis-card { grid-column: 1 / -1; grid-row: 3; }
.signals-row-3x2 .movers-card { grid-column: 1; grid-row: 4; }
.signals-row-3x2 .liq-card { grid-column: 2; grid-row: 4; }
}
/* Mobile single-column: everything stacks.
Build v0.35 20260523.190: explicit `order` on the swapped cards so
the mobile stack also shows Smart-Money above Anomaly (without
touching the HTML source order). */
@media (max-width: 900px) {
.signals-row-3x2 { grid-template-columns: 1fr; grid-template-rows: none; }
/* Build v0.35 20260525.222: board-card in place of anomaly-card */
.signals-row-3x2 .board-card,
.signals-row-3x2 .smartmoney-card,
.signals-row-3x2 .marketplace-card,
.signals-row-3x2 .latest-analysis-card,
.signals-row-3x2 .movers-card,
.signals-row-3x2 .liq-card { grid-column: auto; grid-row: auto; }
/* board-card first in source order so it appears at top of mobile stack */
.signals-row-3x2 .smartmoney-card { order: -1; }
}
/* Build v0.35 20260525.222: movers-card top/bottom split.
Top half = ๐ Top-10 Movers. Bottom half = โ Anomalies. */
.movers-card { border-top: 3px solid var(--accent); display: flex; flex-direction: column; overflow: hidden; }
.movers-top-half {
flex: 1 1 50%;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 6px;
min-height: 0;
}
.movers-bottom-half {
flex: 1 1 50%;
border-top: 2px solid var(--danger);
padding-top: 6px;
overflow-y: auto;
min-height: 0;
}
.movers-bottom-half h3 { margin: 0 0 4px; padding: 0 10px; font-size: 12px; }
/* Build v0.35 20260525.222: board-card โ Federated Board in the
ex-anomaly slot (col 1, row 2 of the 3ร2 signals grid). */
.board-card { border-top: 3px solid var(--accent); display: flex; flex-direction: column; overflow: hidden; }
.board-card-name { color: var(--accent); }
/* Build .263: tighten h3 + sub on board card to claw back vertical
space for the 20 visible rows. */
.board-card h3 { margin: 0 0 2px; font-size: 12px; }
.board-card h3 .plat-sub { font-size: 10px; }
/* Build .263: tighten tabs / filter / rows so all 20 segment rows fit
inside the card with NO scrollbar. Total budget for the card is
roughly the same as .liq-card (~320-360px in the row-2 signals grid).
Header overhead: h3 ~20px + tabs ~22px + filter ~32-50px = ~75-92px.
Remaining ~228-285px for 20 rows โ must keep rows โค 14px each. */
/* Segment tab bar (1โ20 / 21โ40 / 41โ60) */
.board-tab-bar {
display: flex; gap: 3px; flex-shrink: 0;
padding: 1px 0 3px; /* was 2px 0 6px */
}
.btb-btn {
flex: 1; padding: 2px 0; /* was 4px 0 */
border: 1px solid var(--border);
border-radius: 4px; background: var(--panel); color: var(--muted);
font-size: 10px; /* was 11px */
font-weight: 800; font-family: monospace; cursor: pointer;
transition: background 0.1s, color 0.1s, border-color 0.1s;
line-height: 1.3;
}
.btb-btn:hover { background: var(--panel-2); color: var(--text); }
.btb-btn.btb-active {
background: rgba(45,212,191,0.12);
border-color: var(--accent); color: var(--accent);
}
/* Platform filter bar */
.board-filter-bar {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
gap: 3px; /* was 4px */
padding: 2px 0 4px; /* was 4px 0 6px */
}
.bfb-btn {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px; /* was 2px 7px */
border-radius: 10px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--muted);
font-size: 9px; /* was 10px */
font-weight: 600;
cursor: pointer;
line-height: 1.3;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.bfb-btn:hover { background: var(--panel-2); color: var(--text); }
.bfb-btn.bfb-active {
background: rgba(45, 212, 191, 0.15);
border-color: var(--accent);
color: var(--accent);
}
.bfb-btn img { width: 10px !important; height: 10px !important; }
/* Build .263: list now CLIPS โ no scrollbar. Tightening below keeps
20 visible segment rows inside the available height. */
.board-card-list {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden; /* was overflow-y: auto */
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
}
/* Section dividers โ JS hides these (display:none) so styling is moot,
but keep the rules minimal in case the JS is ever rolled back. */
.board-card-divider {
list-style: none;
padding: 2px 6px 1px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* Compact event rows โ target ~13-14px per row */
.board-card-row {
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px; /* was 3px 6px โ saves 6px per row ร 20 = 120px */
border-radius: 3px;
cursor: pointer;
min-width: 0;
line-height: 1.3;
}
.board-card-row:hover { background: var(--panel-2); }
.board-card-row-urgent { border-left: 2px solid var(--danger); padding-left: 4px; }
.bc-rank {
flex-shrink: 0;
width: 16px; /* was 18px */
text-align: right;
font-size: 9px; /* was 10px */
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.bc-logo {
flex-shrink: 0;
width: 14px; /* was 16px */
display: flex;
align-items: center;
justify-content: center;
}
.bc-logo img { width: 12px !important; height: 12px !important; }
.bc-icons {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 1px;
font-size: 10px; /* was 11px */
min-width: 12px; /* was 14px */
}
.bc-icon { line-height: 1; }
.bc-icon-news { text-decoration: none; }
.bc-title {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px; /* was 12px */
color: var(--text);
}
.bc-chips {
flex-shrink: 0;
display: flex;
gap: 2px;
align-items: center;
}
.bc-chip {
font-size: 9px; /* was 10px */
padding: 0 3px; /* was 1px 4px */
border-radius: 2px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.4;
}
.bc-chip-vol { color: var(--success); }
.bc-chip-ttr-red { color: var(--danger); font-weight: 700; }
.bc-chip-ttr-yellow { color: var(--jackpot); }
.bc-chip-ttr-gray { color: var(--muted); }
/* Recurring-market cadence chips (2026-06): fast -> slow color gradient. */
.bc-chip-recur { font-weight: 700; }
.bc-chip-recur-intraday { color: #ec4899; } /* pink - fastest */
.bc-chip-recur-hourly { color: var(--success); } /* green */
.bc-chip-recur-daily { color: #3b82f6; } /* blue */
.bc-chip-recur-weekly { color: #a855f7; } /* purple */
.bc-chip-recur-monthly { color: var(--jackpot); } /* amber */
.bc-chip-recur-quarterly { color: #14b8a6; } /* teal */
.bc-chip-recur-annual { color: var(--muted); } /* gray - slowest */
/* board-panels-section: slim section below the signals-row (reclaim panels) */
.board-panels-section {
max-width: var(--content-max, 1600px);
margin: 0 auto;
padding: 0 16px 16px;
width: 100%;
box-sizing: border-box;
}
/* Coming-soon placeholder cards (Top-10 Movers / Reserved). */
.reserved-card { border-top: 3px solid var(--muted); opacity: 0.85; }
/* Build .74: PredictHQ feed in the bottom-right slot. Overrides the
muted .reserved-card look since this is real data now, not a "coming
soon" placeholder. Top border swapped to a globe-blue. */
.reserved-card.predicthq-card { opacity: 1; border-top: 3px solid #38bdf8; }
.predicthq-name { font-weight: 800; color: #38bdf8; }
.phq-list { list-style: none; padding: 0; margin: 0; }
.phq-row { padding: 6px 0; border-bottom: 1px solid var(--border); }
.phq-row:last-child { border-bottom: none; }
.phq-link {
display: flex;
flex-direction: column;
gap: 3px;
text-decoration: none;
}
.phq-title {
font-size: 12px;
line-height: 1.3;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.phq-cat {
display: inline-block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 6px;
border-radius: 3px;
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
align-self: flex-start;
}
.phq-cat-concerts { background: rgba(244, 114, 182, 0.18); color: #f472b6; }
.phq-cat-sports { background: rgba(74, 222, 128, 0.18); color: var(--success); }
.phq-cat-conferences { background: rgba(167, 139, 250, 0.18); color: #a78bfa; }
.phq-cat-expos { background: rgba(167, 139, 250, 0.18); color: #a78bfa; }
.phq-cat-festivals { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.phq-cat-performing_arts { background: rgba(244, 114, 182, 0.18); color: #f472b6; }
.phq-cat-politics { background: rgba(239, 68, 68, 0.18); color: var(--danger); }
.phq-cat-community { background: rgba(96, 165, 250, 0.18); color: #60a5fa; }
.phq-cat-academic { background: rgba(167, 139, 250, 0.18); color: #a78bfa; }
/* Build v0.35 20260524.199: boost emoji nested INSIDE the .phq-cat chip.
Was previously a separate flex-item / grid cell which broke the
wide-grid 4-column layout (added a 5th cell with no rule). Now sits
as a tight prefix inside the green sports / red politics pill,
consuming zero extra horizontal cells. Emoji needs a slight
nudge โ kept proportional to chip text (9-11px), vertically aligned,
tight right-margin separator. */
.phq-cat .phq-boost {
display: inline-block;
font-size: 11px; /* slightly larger than 9px chip text for emoji legibility */
line-height: 1;
vertical-align: -1px; /* nudge baseline down so emoji aligns with chip caps */
margin-right: 3px;
/* Don't inherit uppercase from .phq-cat โ meaningless for emoji */
text-transform: none;
/* Don't inherit letter-spacing โ emoji has its own metric */
letter-spacing: 0;
}
.phq-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 10px;
color: var(--muted);
}
.phq-when { font-family: monospace; }
.phq-country {
font-family: monospace;
background: rgba(138, 150, 196, 0.12);
padding: 0 4px;
border-radius: 2px;
display: inline-flex;
align-items: center;
gap: 3px;
}
/* Build .77.2: real flag images from flagcdn.com (Unicode regional
indicators rendered as plain ASCII on Windows, looking like a duplicate
country code). Base `.flag-img` is the small (16px wide) variant used in
meta lines, tooltips, and the viewer list. */
.flag-img {
width: 16px;
height: auto;
vertical-align: middle;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
display: inline-block;
}
.flag-na {
font-size: 12px;
line-height: 1;
}
/* Flag riding to the left of the PHQ event title โ a touch bigger than the
inline-meta variant so it visually anchors the row. */
.phq-title-flag {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.phq-title-flag .flag-img {
width: 18px;
}
/* Larger flag used in the PHQ modal's Country row. */
.phq-flag-lg {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.phq-flag-lg .flag-img {
width: 22px;
}
/* Legacy class names kept for the visitor mini-list + globe tooltip โ they
used to wrap a Unicode glyph; with .flag-img now an , this wrapper
just needs to align the image. */
.phq-flag,
.vw-flag {
display: inline-block;
vertical-align: middle;
}
.phq-rank {
font-family: monospace;
font-weight: 600;
padding: 0 5px;
border-radius: 2px;
}
.phq-rank-hi { color: var(--success); background: rgba(74, 222, 128, 0.10); }
.phq-rank-mid { color: var(--text); background: rgba(167, 139, 250, 0.10); }
.phq-rank-lo { color: var(--muted); background: rgba(138, 150, 196, 0.10); }
/* Build .96.1: dual-rank display in the card row. Global chip sits
immediately before local; small gap; subtle border on global to
distinguish from local (which carries the primary signal). */
.phq-rank-global + .phq-rank-local { margin-left: 4px; }
.phq-rank-global {
border: 1px dashed rgba(148, 163, 184, 0.40);
opacity: 0.85;
}
.phq-rank-local {
border: 1px solid transparent;
font-weight: 700; /* primary signal โ bolder than global */
}
.phq-attendance, .phq-spend {
font-family: monospace;
cursor: help;
}
.phq-footnote {
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid var(--border);
font-size: 10px;
color: var(--muted);
text-align: center;
cursor: help;
}
/* Build .75: PHQ filter tabs + sort controls + clickable rows + modal. */
.phq-controls {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.phq-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.phq-tab {
font-family: inherit;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 3px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.03);
color: var(--muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.phq-tab:hover {
color: var(--text);
background: rgba(255,255,255,0.06);
}
.phq-tab-active {
background: rgba(56, 189, 248, 0.18);
border-color: #38bdf8;
color: #38bdf8;
}
.phq-sort-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--muted);
}
.phq-sort-lbl { font-family: monospace; }
.phq-sort-select {
font-family: inherit;
font-size: 10px;
padding: 2px 6px;
background: rgba(255,255,255,0.03);
color: var(--text);
border: 1px solid var(--border);
border-radius: 3px;
cursor: pointer;
}
.phq-sort-select:focus { outline: 1px solid #38bdf8; }
.phq-row-clickable { cursor: pointer; transition: background 0.12s; }
.phq-row-clickable:hover {
background: rgba(56, 189, 248, 0.06);
}
.phq-empty-row {
padding: 18px 6px;
text-align: center;
color: var(--muted);
font-style: italic;
}
/* โโโ Build v0.35 20260525.208: Most Liquid USD Markets widget โโโโโโโโโ
Replaces the Trending Topics tile in the 3ร2 signals row's col 3 /
row 2 slot. Topics promoted to a 4th top-of-page ticker in the same
build (see .tt-* styles further down).
Layout grammar is a strict extension of .signals-list / .sig-row, so
the only widget-specific styles are: card accent color, rank chip,
leader-price chip, and a wider title column to accommodate the rank
prefix without crowding the chips. */
.liq-card {
border-top: 3px solid #38bdf8; /* sky blue โ "liquidity" accent */
/* Build .243: flex-column so the list scrolls inside the fixed card height */
display: flex; flex-direction: column; overflow: hidden;
padding-bottom: 0;
}
.liq-name { color: #38bdf8; font-weight: 800; }
.liq-sub { color: var(--muted); font-size: 10px; font-weight: 500; }
/* Build .252: no scrollbar (overflow hidden) + flex rows so logo + chip
+ title + chips all stay on one line. Item count capped at 15 on the
server side so nothing is silently clipped. */
.liq-list {
list-style: none; margin: 0; padding: 0;
overflow: hidden; /* no scrollbar โ ever */
flex: 1 1 0; min-height: 0;
display: flex;
flex-direction: column;
gap: 1px; /* Build .259: match .la-news-list gap */
}
/* Build .259: structure + fonts mirror Latest News (.la-news-*).
ALL liq-* rules use 2-class specificity (.liq-list X) so the .sig-row
/ .sig-link rules defined ~770 lines later in this file can't win the
cascade tie. */
.liq-list .liq-row {
cursor: pointer;
border-bottom: none; /* defeat .sig-row { border-bottom: 1px } */
list-style: none;
margin: 0; padding: 0;
}
.liq-list .liq-link {
display: flex; /* defeat .sig-link { display: grid } */
flex-direction: row;
align-items: baseline; /* mirror .la-news-link */
gap: 6px; /* mirror .la-news-link */
grid-template-columns: none;
padding: 4px 8px; /* mirror .la-news-link */
text-decoration: none;
color: var(--text);
border-left: 2px solid transparent;
border-radius: 4px;
transition: background-color 0.12s ease, border-color 0.12s ease;
font-size: 12px;
min-height: 0;
}
.liq-list .liq-link:hover {
background: rgba(56, 189, 248, 0.07);
border-left-color: #38bdf8;
text-decoration: none;
}
/* Meta block on the LEFT โ logo + plat chip + rank + amount + leader */
.liq-list .liq-meta {
flex-shrink: 0;
display: flex;
gap: 5px;
align-items: center;
font-size: 10.5px; /* mirror .la-news-meta */
color: var(--muted);
justify-self: auto; /* defeat .sig-meta { justify-self: end } */
flex-wrap: nowrap;
max-width: none;
}
.liq-list .liq-meta .plat-chip-logo {
width: 12px; height: 12px; flex-shrink: 0;
}
.liq-list .liq-meta .sig-plat {
padding: 1px 6px;
font-size: 10px; /* mirror .la-news-prov */
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
flex-shrink: 0;
}
.liq-list .liq-rank {
flex-shrink: 0;
color: #38bdf8;
font-family: monospace; font-weight: 700;
font-size: 10px;
min-width: 18px;
text-align: right;
}
.liq-list .liq-meta .sig-tag {
padding: 1px 5px;
font-size: 10px;
line-height: 1.4;
border-radius: 3px;
}
.liq-list .liq-meta .sig-tag.sig-amt {
background: rgba(74, 222, 128, 0.14);
color: var(--success);
font-weight: 700;
}
.liq-list .sig-tag.liq-leader {
background: rgba(56, 189, 248, 0.14);
color: #7dd3fc;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
/* Title flex-fills to the right โ mirror .la-news-title */
.liq-list .liq-title {
flex: 1 1 0;
min-width: 0;
font-size: 12px;
line-height: 1.3;
font-weight: 500; /* mirror .la-news-title (was 600) */
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Topic modal โ full-list view of every event under a topic */
.topic-modal {
max-width: 760px;
width: min(760px, 96vw);
}
.topic-modal-head {
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
padding-bottom: 10px;
}
.topic-modal-title {
font-size: 22px; font-weight: 800; color: #f59e0b;
letter-spacing: 0.01em;
}
.topic-modal-sub {
font-size: 12px; color: var(--muted); margin-top: 3px;
font-family: monospace;
}
.topic-modal-body {
display: flex; flex-direction: column; gap: 14px;
max-height: calc(85vh - 100px);
overflow-y: auto;
padding-right: 4px;
}
.topic-plat-block {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
}
.topic-plat-head {
display: flex; align-items: center; gap: 8px;
border-bottom: 1px dashed var(--border);
padding-bottom: 5px; margin-bottom: 5px;
}
.topic-plat-name {
font-weight: 700; font-size: 13px; color: var(--text);
}
.topic-plat-count {
font-family: monospace; font-size: 10px; color: var(--muted);
margin-left: auto;
}
.topic-evt-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.topic-evt { border-bottom: 1px dashed rgba(255,255,255,0.04); }
.topic-evt:last-child { border-bottom: none; }
.topic-evt-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px; align-items: center;
padding: 5px 0;
color: var(--text); text-decoration: none;
font-size: 12px;
}
.topic-evt-link:hover { color: #f59e0b; }
.topic-evt-title {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-evt-vol {
font-family: monospace; font-weight: 600;
color: var(--muted); white-space: nowrap;
}
@media (max-width: 700px) {
.topic-modal { width: 96vw; }
.topic-modal-title { font-size: 18px; }
.topic-modal-body { max-height: calc(100vh - 140px); }
}
/* โโโ Build .80: page-wide PHQ section โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
The "Top Real-World Events" card lives in its own row between the
platform Top-20 grid and the Visitors row. Wider canvas โ two-column
row layout (title block | meta block) so the list reads more like a
compact table than a stacked column. */
.phq-section { padding: 0 20px 12px; }
.predicthq-card-wide {
border-top: 3px solid #38bdf8;
}
.predicthq-card-wide .phq-controls {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.predicthq-card-wide .phq-tabs { flex: 1 1 auto; }
.predicthq-card-wide .phq-sort-row { flex: 0 0 auto; }
/* Wide list โ two-column grid on desktop, falls back to stacked on narrow
viewports. JS still emits the same DOM (li.phq-row > a.phq-link with
.phq-title + .phq-meta) so we just restyle here. */
.phq-list-wide {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 24px;
}
@media (max-width: 1100px) {
.phq-list-wide { grid-template-columns: 1fr; }
}
/* Build .82: row padding tightened 8px โ 4px and title font 13 โ 12 so
doubling the visible event count (10 โ 20) keeps the total card height
close to the prior dimensions. Each row drops from ~34px โ ~22px tall. */
.phq-list-wide > .phq-row {
padding: 4px 0;
border-bottom: 1px solid var(--border);
}
/* Build .80.2: row grid is [flag] [cat] [title 1fr] [meta auto]. The
flag sits as the LEFTMOST cell so it lines up flush against each
column's left edge across both data columns. */
.phq-list-wide .phq-link {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: 2px 8px;
}
.phq-list-wide .phq-row-flag { grid-column: 1; }
.phq-list-wide .phq-cat { grid-column: 2; }
.phq-list-wide .phq-title { grid-column: 3; }
.phq-list-wide .phq-meta { grid-column: 4; }
.phq-list-wide .phq-title {
font-size: 12px;
line-height: 1.25;
/* Single-line clipping โ preserves the row-count vs height tradeoff:
long titles ellipsize instead of forcing the row to expand. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phq-list-wide .phq-cat {
font-size: 9px;
padding: 0 5px;
}
.phq-list-wide .phq-meta {
justify-content: flex-end;
font-size: 10px;
white-space: nowrap;
flex-wrap: nowrap;
gap: 4px;
}
.phq-list-wide .phq-meta .phq-rank {
font-size: 10px;
padding: 0 4px;
}
.phq-list-wide .phq-meta .phq-poly-btn {
font-size: 9px;
padding: 1px 5px;
}
.phq-list-wide .phq-row-flag {
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-width: 22px;
}
.phq-list-wide .phq-row-flag .flag-img {
width: 18px;
}
/* PredictHQ detail modal */
.phq-modal {
max-width: 720px;
width: min(720px, 96vw);
}
.phq-modal-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.phq-modal-cat {
font-size: 11px;
}
.phq-modal-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin: 0;
flex: 1 1 auto;
line-height: 1.25;
}
.phq-state-badge {
font-family: monospace;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
background: rgba(255,255,255,0.06);
color: var(--muted);
letter-spacing: 0.05em;
}
.phq-state-active { background: rgba(74, 222, 128, 0.18); color: var(--success); }
.phq-state-cancelled,
.phq-state-deleted { background: rgba(239, 68, 68, 0.18); color: var(--danger); }
.phq-state-rescheduled,
.phq-state-postponed { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.phq-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.phq-modal-stat {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
}
.phq-modal-stat-lbl {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
font-weight: 600;
margin-bottom: 4px;
}
.phq-modal-stat-num {
font-family: monospace;
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.phq-modal-stat-of {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.phq-modal-stat-sub {
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.phq-modal-details {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin-bottom: 12px;
}
.phq-modal-details th {
text-align: left;
vertical-align: top;
padding: 6px 12px 6px 0;
color: var(--muted);
font-weight: 600;
width: 130px;
white-space: nowrap;
}
.phq-modal-details td {
padding: 6px 0;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.phq-modal-details tr:last-child td { border-bottom: none; }
.phq-modal-details td a { color: #38bdf8; text-decoration: none; }
.phq-modal-details td a:hover { text-decoration: underline; }
.phq-tz {
font-family: monospace;
font-size: 10px;
color: var(--muted);
margin-left: 8px;
padding: 0 4px;
background: rgba(255,255,255,0.04);
border-radius: 2px;
}
.phq-modal-labels { line-height: 1.8; }
.phq-lbl {
display: inline-block;
font-family: monospace;
font-size: 10px;
padding: 2px 6px;
margin-right: 3px;
background: rgba(167, 139, 250, 0.10);
color: #a78bfa;
border-radius: 2px;
cursor: help;
}
.phq-modal-foot {
font-size: 10px;
color: var(--muted);
text-align: center;
padding-top: 8px;
border-top: 1px solid var(--border);
font-style: italic;
}
.phq-modal-srclbl { cursor: help; }
/* Build .78: prominent "Search on Polymarket" CTA in the PHQ modal.
Polymarket-branded gradient (their teal-green) so the off-platform
destination reads visually. Sits between the related-markets list
and the data-source footer. */
.phq-modal-cta {
margin: 14px 0 4px;
text-align: center;
}
.phq-modal-poly-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, #14b8a6, #0ea5e9);
color: #061325;
font-weight: 700;
font-size: 13px;
text-decoration: none;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.phq-modal-poly-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
}
.phq-modal-poly-icon { font-size: 14px; }
.phq-modal-poly-sub {
font-size: 10px;
font-weight: 500;
color: rgba(6, 19, 37, 0.65);
margin-left: 4px;
}
/* Compact row-level Polymarket button on the PHQ event list. */
.phq-poly-btn {
display: inline-flex;
align-items: center;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
color: #14b8a6;
background: rgba(20, 184, 166, 0.08);
border: 1px solid rgba(20, 184, 166, 0.25);
border-radius: 3px;
text-decoration: none;
margin-left: auto;
}
.phq-poly-btn:hover {
background: rgba(20, 184, 166, 0.18);
color: var(--accent);
}
/* Build v.03 .31 build 161 (2026-05-23): Kalshi-themed sibling to
the Polymarket search button โ same shape, blue/sapphire accent
that matches Kalshi's brand colour (was --kalshi: #60a5fa). */
.phq-poly-btn.phq-kalshi-btn {
color: #60a5fa;
background: rgba(96, 165, 250, 0.08);
border-color: rgba(96, 165, 250, 0.25);
margin-left: 4px; /* override the auto margin from the first button */
}
.phq-poly-btn.phq-kalshi-btn:hover {
background: rgba(96, 165, 250, 0.18);
color: #93c5fd;
}
.phq-modal-poly-btn.phq-modal-kalshi-btn {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
box-shadow: 0 2px 8px rgba(96, 165, 250, 0.25);
margin-left: 10px;
}
/* Build v0.35 20260524.200: Manifold deep-search button โ third
venue after Polymarket + Kalshi. Manifold's brand color is amber
(#f59e0b โ their orange-yellow). Uses same chip pattern as
.phq-kalshi-btn for the row chip, same gradient pattern as
.phq-modal-kalshi-btn for the modal CTA. */
.phq-poly-btn.phq-manifold-btn {
color: #f59e0b;
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.25);
margin-left: 4px;
}
.phq-poly-btn.phq-manifold-btn:hover {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
}
.phq-modal-poly-btn.phq-modal-manifold-btn {
background: linear-gradient(135deg, #d97706, #f59e0b);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
margin-left: 10px;
}
.phq-modal-poly-btn.phq-modal-kalshi-btn:hover {
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}
/* Build .78: MetaForecast probability-history sparkline. Uses the same
evt-chart-wrap base height; adds spacing above to separate from the
volume chart. */
.mf-hist-wrap {
margin-top: 8px;
}
.mf-hist-sub {
font-size: 11px;
font-weight: 400;
color: var(--muted);
margin-left: 6px;
}
@media (max-width: 600px) {
.phq-modal-title { font-size: 16px; }
.phq-modal-stat-num { font-size: 18px; }
.phq-modal-details th { width: 90px; font-size: 11px; }
}
/* Build .76: PHQ economic-impact banner (top of PHQ card) */
.phq-impact-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
padding: 8px 10px;
margin-bottom: 8px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(34, 211, 238, 0.04));
border: 1px solid rgba(56, 189, 248, 0.18);
border-radius: 6px;
font-family: monospace;
}
.phq-impact-stat { display: flex; flex-direction: column; }
.phq-impact-num {
font-size: 16px;
font-weight: 700;
color: #38bdf8;
line-height: 1.1;
}
.phq-impact-major { color: var(--success); }
.phq-impact-of { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.phq-impact-lbl {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
.phq-impact-top {
grid-column: 1 / -1;
padding-top: 6px;
border-top: 1px dashed rgba(56, 189, 248, 0.18);
font-family: inherit;
cursor: help;
}
.phq-impact-toplink {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text);
text-decoration: none;
margin: 2px 0;
}
.phq-impact-toplink:hover { color: #38bdf8; text-decoration: underline; }
.phq-impact-topspend {
font-family: monospace;
font-size: 10px;
color: #38bdf8;
}
/* Build .76: PHQ modal โ related prediction markets section */
.phq-modal-matches {
margin: 8px 0 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 6px;
}
.phq-matches-loading {
font-size: 11px;
color: var(--muted);
font-style: italic;
text-align: center;
}
.phq-matches-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
border-bottom: 1px solid var(--border);
padding-bottom: 4px;
}
.phq-matches-title {
font-size: 12px;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.phq-matches-sub { font-size: 10px; color: var(--muted); font-family: monospace; }
.phq-matches-list { list-style: none; padding: 0; margin: 0; }
.phq-match-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.phq-match-row:last-child { border-bottom: none; }
.phq-match-plat {
font-family: monospace;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 2px;
flex-shrink: 0;
}
.phq-match-title { flex: 1 1 auto; color: var(--text); }
.phq-match-title a { color: var(--text); text-decoration: none; }
.phq-match-title a:hover { color: #38bdf8; text-decoration: underline; }
.phq-match-conf {
font-family: monospace;
font-size: 10px;
color: var(--muted);
background: rgba(255,255,255,0.04);
padding: 1px 5px;
border-radius: 2px;
cursor: help;
flex-shrink: 0;
}
/* Build .76: globe legend overlay */
.vw-globe-wrap { position: relative; }
.vw-globe-legend {
position: absolute;
bottom: 6px;
left: 6px;
display: flex;
gap: 12px;
font-size: 9px;
color: var(--muted);
background: rgba(15, 23, 42, 0.6);
padding: 4px 8px;
border-radius: 3px;
pointer-events: none;
font-family: monospace;
}
.vw-leg-item { display: inline-flex; align-items: center; gap: 4px; }
.vw-leg-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.vw-leg-dot-visitor { background: #f59e0b; }
.vw-leg-dot-phq { background: #22d3ee; }
.vw-leg-hint { color: rgba(148, 163, 184, 0.7); font-style: italic; }
/* Build .76: in-event-modal "Real-world event" badge (PHQ cross-match) */
.modal-phq-match {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 10px;
background: rgba(34, 211, 238, 0.06);
border: 1px solid rgba(34, 211, 238, 0.2);
border-radius: 4px;
font-size: 11px;
}
.modal-phq-icon { font-size: 13px; line-height: 1; }
.modal-phq-lbl {
font-family: monospace;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: #22d3ee;
letter-spacing: 0.05em;
}
.modal-phq-link {
color: var(--text);
text-decoration: none;
font-weight: 600;
}
.modal-phq-link:hover { color: #22d3ee; text-decoration: underline; }
.modal-phq-meta {
font-family: monospace;
font-size: 10px;
color: var(--muted);
}
.modal-phq-more {
color: #22d3ee;
font-weight: 600;
}
.movers-card .movers-name,
.reserved-card .reserved-name { font-weight: 800; }
.placeholder-body {
padding: 18px 6px 10px;
text-align: center;
color: var(--muted);
}
.placeholder-icon {
font-size: 28px;
margin-bottom: 8px;
opacity: 0.85;
}
.placeholder-title {
font-weight: 700;
color: var(--text);
font-size: 13px;
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.placeholder-sub {
font-size: 11px;
line-height: 1.5;
max-width: 340px;
margin: 0 auto;
color: var(--muted);
}
.placeholder-sub em { color: var(--text); font-style: italic; }
.movers-placeholder .placeholder-icon { color: var(--accent); }
/* Build .67: Top-10 Movers populated rows. Reuses the signals-list /
sig-row chrome from Smart-Money so platform pills + click-into-event
modal behavior is consistent across the four list cards. */
/* Build .251: switch movers rows from grid (3-col) to flex so the logo
added in build .230 doesn't overflow the grid and push the meta chips
to a second row. Logo โ chip โ title (flex:1) โ meta (nowrap, right). */
.movers-list .mv-row .sig-link {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 5px;
}
.movers-list .mv-title {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
line-height: 1.35;
}
.movers-list .mv-bet-chip {
color: var(--muted);
font-weight: 500;
font-size: 11px;
}
.movers-list .mv-meta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
}
.movers-list .mv-pct-pair {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: monospace;
font-size: 11px;
color: var(--muted);
}
.movers-list .mv-pct-pair .mv-prior { opacity: 0.7; }
.movers-list .mv-pct-pair .mv-current { color: var(--text); font-weight: 600; }
.movers-list .mv-arrow { font-size: 10px; }
.movers-list .mv-delta {
font-family: monospace;
font-weight: 700;
font-size: 11px;
padding: 1px 4px;
border-radius: 3px;
white-space: nowrap;
}
.movers-list .mv-up { color: var(--success); }
.movers-list .mv-down { color: #f87171; }
.movers-list .mv-delta.mv-up { background: rgba(74, 222, 128, 0.10); }
.movers-list .mv-delta.mv-down { background: rgba(248, 113, 113, 0.10); }
/* Build .77: 1h delta chip โ smaller than the 24h chip so it reads as
"supplementary context" rather than competing with the headline number.
Inline label ("24h" / "1h") on each chip so the two are unambiguous. */
.movers-list .mv-delta-lbl {
display: inline-block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
margin-right: 4px;
opacity: 0.85;
}
.movers-list .mv-delta-1h {
font-size: 10px;
padding: 1px 5px;
}
.movers-list .mv-delta.mv-flat {
color: var(--muted);
background: rgba(138, 150, 196, 0.08);
}
.mv-footnote {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 10px;
text-align: center;
cursor: help;
}
.signals-card {
background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 14px;
/* Natural height โ show all rows without an internal scrollbar.
The page itself scrolls if the panel grows tall. */
}
/* .anomaly-card standalone removed in build .222 โ content moved into
.movers-bottom-half; .anomaly-card-split/.anomaly-top-half classes also
removed from HTML; retaining .anomaly-bottom-half for sx.bet traders. */
.smartmoney-card { border-top: 3px solid var(--jackpot); }
.signals-card h3 { margin-bottom: 6px; }
.anomaly-bottom-half {
flex: 0 0 auto;
padding-top: 8px;
border-top: 1px dashed var(--border);
margin-top: 6px;
}
.anomaly-bottom-half .sxlb-heading {
margin: 0 0 6px 0;
font-size: 12px;
}
.anomaly-bottom-half .sxlb-heading .sxlb-name { color: #c084fc; font-weight: 800; }
.anomaly-bottom-half .sxlb-heading .plat-sub { font-size: 10px; color: var(--muted); }
.sxlb-grid-compact {
display: flex;
flex-direction: column;
gap: 2px;
}
.sxlb-grid-compact .sxlb-row {
display: grid;
grid-template-columns: 28px 110px 1fr 1fr;
align-items: center;
gap: 8px;
padding: 3px 8px;
background: var(--panel-2);
border-radius: 4px;
text-decoration: none;
color: var(--text);
cursor: pointer;
transition: background 0.12s ease, transform 0.12s ease;
}
.sxlb-grid-compact .sxlb-row:hover { background: rgba(192,132,252,0.10); transform: translateX(2px); }
.sxlb-grid-compact .sxlb-rank { font-family: monospace; font-size: 11px; font-weight: 800; color: #c084fc; text-align: center; }
.sxlb-grid-compact .sxlb-wallet { font-family: monospace; font-size: 11px; color: var(--text); }
.sxlb-grid-compact .sxlb-stat { display: flex; flex-direction: column; align-items: flex-end; font-family: monospace; font-size: 11px; font-weight: 700; }
.sxlb-grid-compact .sxlb-stat-lbl { font-size: 8px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0; }
.plat-name.anomaly-name { color: var(--danger); }
.plat-name.smartmoney-name { color: var(--jackpot); }
.signals-list { list-style: none; margin: 0; padding: 0; }
.sig-row { border-bottom: 1px solid var(--border); }
.sig-row:last-child { border-bottom: none; }
.sig-link {
display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center;
padding: 5px 4px; color: var(--text); font-size: 12px;
}
.sig-link:hover { background: var(--panel-2); text-decoration: none; }
.sig-plat {
font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 3px;
letter-spacing: 0.08em; font-family: monospace; text-align: center;
}
.sig-poly .sig-plat { background: rgba(45,212,191,0.18); color: var(--accent); }
.sig-kalshi .sig-plat { background: rgba(96,165,250,0.18); color: var(--kalshi); }
.sig-manifold .sig-plat { background: rgba(167,139,250,0.18); color: #a78bfa; }
.sig-sxbet .sig-plat { background: rgba(236,72,153,0.18); color: var(--sxbet); }
.sig-limitless .sig-plat { background: rgba(249,115,22,0.18); color: var(--limitless); }
/* Build .32 / .34: Probable + Myriad โ both PMXT-sourced, both deserve
their own platform color so cross-venue groups + tickers stay readable. */
.sig-probable .sig-plat,
.sig-plat.sig-probable { background: rgba(34,197,94,0.18); color: var(--success); } /* emerald */
.sig-myriad .sig-plat,
.sig-plat.sig-myriad { background: rgba(244,114,182,0.18); color: #f9a8d4; } /* rose */
.sig-title {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600;
}
.sig-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-self: end; }
.sig-tag {
background: var(--panel-2); color: var(--muted);
padding: 1px 6px; border-radius: 3px; font-family: monospace; font-size: 10px;
font-weight: 600; white-space: nowrap;
}
.sig-tag.sig-amt { background: rgba(251,191,36,0.18); color: var(--jackpot); }
.sig-tag.sig-topbet { background: rgba(244,114,182,0.15); color: var(--whale); }
.sig-fresh { color: var(--success); font-weight: 800; }
.sig-score {
background: rgba(239,68,68,0.18); color: var(--danger);
padding: 1px 6px; border-radius: 3px; font-family: monospace; font-size: 10px; font-weight: 700;
}
/* Bettor stance chips (FOR / AGAINST) โ clarifies what the whale is
actually wagering when the side+outcome combo (BUY YES vs SELL NO) is
ambiguous to non-trader readers. */
.whale-stance {
display: inline-block; margin-left: 6px;
font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
padding: 2px 7px; border-radius: 3px; text-transform: uppercase;
vertical-align: middle;
}
.whale-stance-for { background: rgba(74,222,128,0.20); color: var(--success); }
.whale-stance-against { background: rgba(239,68,68,0.20); color: var(--danger); }
/* โโโ Cross-Platform Arbitrage panel (PolyRouter) โโโ */
/* Build v0.31 build 101 (compaction): saves ~25-30px per arb-card by
tightening padding/gaps/fonts. Visual hierarchy preserved (big bps
number still dominates; secondary chips smaller). */
.arb-section {
padding: 4px 20px 8px;
}
.arb-heading {
margin: 0 0 5px;
font-size: 12px;
font-weight: 600;
}
.plat-name.arb-name {
color: #f97316;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
}
.arb-grid {
display: grid;
/* Build v.03 .31 build 160 (2026-05-23): re-styled to mirror the
Hot Underdog card visual identity (per user request "Arb boxes
should look like hot underdog boxes"). Same 260px minmax + 8px
gap as .hud-grid; identical layout grammar inside each card. */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 6px;
/* Build .249: stretch so all cards in a row grow to the tallest card's
height โ prevents the "jagged bottom edge" when title lengths differ */
align-items: stretch;
}
.arb-card {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid #f97316;
border-radius: 5px;
/* Build .239: redesigned layout โ flex-column (title + body row).
Old grid (auto / 1fr) replaced by flex children with their own padding. */
padding: 0;
cursor: pointer;
transition: transform 0.12s ease, border-color 0.12s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Full-width title header โ always reserves exactly 2 lines of space
so every card has an identical-height title band regardless of whether
the title wraps. Build .249: min-height = 2 ร line-height + padding. */
.arb-title {
padding: 5px 8px 4px;
font-size: 11px;
font-weight: 700;
color: var(--text);
border-bottom: 1px solid rgba(249, 115, 22, 0.18);
background: rgba(249, 115, 22, 0.05);
line-height: 1.3;
/* Reserve 2 full lines: 2 ร (11px ร 1.3) + 5px top + 4px bottom โ 38px */
min-height: calc(2 * 1.3em + 9px);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-width: 0;
}
.arb-stale-inline { color: var(--danger); font-size: 10px; }
/* Two-column body โ flex:1 fills whatever height remains after the
title band, so cards that are stretched by align-items:stretch fill
evenly rather than leaving a gap at the bottom. */
.arb-body {
/* Build .292: single-column stack (was a row split into a flexible left
column + a fixed 105px right column). In a 260px grid card the left
column was only ~150px, so .arb-plat-info (the platform name chip) got
squeezed to nothing by the price/stance/countdown โ the platforms "didn't
present". Stacking gives every row the full card width, so platforms
show, and all fields read as ONE compact card. */
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
}
.arb-left {
flex: 1 1 auto;
min-width: 0;
overflow: visible; /* Build .292: full-width single column โ no clipping */
padding: 5px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.arb-right {
/* Build .292: was a fixed 105px right column; now a full-width horizontal
meta strip BELOW the platforms (fees / net / vig / persists + liquidity),
wrapping as needed. */
flex: 0 0 auto;
min-width: 0;
overflow: visible;
border-left: none;
border-top: 1px solid rgba(249, 115, 22, 0.15);
padding: 4px 8px 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
/* Spread + net numbers block in left column */
.arb-spread-nums {
display: flex;
align-items: baseline;
gap: 5px;
flex-wrap: wrap;
}
/* Liquidity box in right column */
.arb-liq {
/* Build .292: inline in the bottom meta strip (was a centered box pinned to
the bottom of the old fixed right column via margin-top:auto). */
margin-top: 0;
padding: 2px 7px;
background: rgba(45, 212, 191, 0.08);
border: 1px solid rgba(45, 212, 191, 0.20);
border-radius: 3px;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
.arb-liq-icon { font-size: 12px; line-height: 1; }
.arb-liq-amt { font-family: monospace; font-size: 13px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.arb-liq-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.arb-card:hover {
transform: translateY(-1px);
border-color: #f97316;
}
/* Build v.03 .31 build 160: arb-spread is the LEFT BADGE โ directly
mirrors .hud-mult. Display only the spread % (no bps, no label โ
.hud-mult shows just "ร3.5" + "vol multiplier"; we show "13%" +
"spread"). */
.arb-spread {
grid-row: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: rgba(249, 115, 22, 0.12);
border-radius: 4px;
padding: 3px 5px;
min-width: 56px;
}
.arb-spread-bps {
/* Hidden โ replaced visually by .arb-spread-pct below. Keeping the
class in the template for any tooling that scrapes bps values. */
display: none;
}
.arb-spread-pct {
font-family: monospace;
font-size: 13px;
font-weight: 800;
color: #f97316;
line-height: 1;
}
.arb-spread-label {
font-size: 8px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 1px;
text-align: center;
}
/* Build .232/.238: net spread % + countdown timers.
Timers moved to right column (grid-column:2) in build .238 so the
left badge stays compact โ just the two big numbers + label. */
.arb-spread { min-width: 60px; }
.arb-spread-net {
font-family: monospace;
font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
color: #f97316;
margin-top: 0;
text-align: center; white-space: nowrap; line-height: 1;
}
.arb-spread-net-strong { color: var(--success); }
.arb-spread-net-zero { color: var(--danger); }
.arb-countdowns {
grid-column: 2;
display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px;
align-items: center; margin: 0;
}
/* Build .242: arb-plat-info wraps all left content so arb-cd-row
never gets squeezed off screen. arb-cd-plat removed (redundant). */
.arb-plat-info {
flex: 1 1 0; min-width: 0; overflow: hidden;
display: flex; align-items: center; gap: 4px;
}
.arb-cd-row {
display: flex; flex-direction: row; align-items: center; gap: 3px;
flex-shrink: 0; flex: 0 0 auto;
}
.arb-cd-timer {
font-family: 'Courier New', Courier, monospace;
font-size: 12px; font-weight: 700;
color: var(--accent);
background: rgba(45, 212, 191, 0.08);
border: 1px solid rgba(45, 212, 191, 0.18);
border-radius: 3px;
padding: 1px 4px;
letter-spacing: 0.06em;
white-space: nowrap;
}
/* Build .250: flash red when โค 30 min remain on an arb. */
@keyframes arb-urgent-flash {
0%, 100% { color: var(--danger); background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.55); }
50% { color: #ff8080; background: rgba(239, 68, 68, 0.04); border-color: rgba(239, 68, 68, 0.18); }
}
.arb-cd-timer-urgent {
animation: arb-urgent-flash 1s ease-in-out infinite;
}
/* Colorful buy/sell arrows on platform rows */
.arb-stance-buy { color: var(--success) !important; font-weight: 800; }
.arb-stance-sell { color: var(--danger) !important; font-weight: 800; }
.arb-event-title {
/* Build v.03 .31 build 160: mirror .hud-event-title exactly. */
grid-column: 2;
font-size: 11px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
margin: 1px 0;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Build v.03 .31 build 172: clickable event-title link inside arb-card.
Removed in build v0.35 20260523.173 โ title is now plain text, the
whole card click opens the disambiguation modal instead. Style
kept for any stragglers but the template no longer emits it. */
.arb-event-title-link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* Build v0.35 20260523.173: arb-card platform CHIP link โ explicit
external arrow + visual cue that this is the only thing in the row
that escapes the arb-card's outer disambiguation handler. */
.arb-plat-chip-link {
text-decoration: none;
cursor: pointer;
position: relative;
transition: filter 120ms ease;
}
.arb-plat-chip-link:hover {
filter: brightness(1.18);
text-decoration: none;
}
/* Disambiguation modal: platform name in the cross-platform table
is now a clickable per-venue event-card link. */
.arb-modal-plat-link {
text-decoration: none;
cursor: pointer;
transition: filter 120ms ease, box-shadow 120ms ease;
}
.arb-modal-plat-link:hover {
filter: brightness(1.20);
box-shadow: 0 0 0 1px rgba(45,212,191,0.40);
}
/* VWAP "True Global Odds" chip on each arb-card. Sits in column 2 of
the arb-card grid (the arb-spread block in col 1 already spans every
row), between the event title and the per-platform price rows. */
.arb-vwap {
grid-column: 2;
display: flex; align-items: center; gap: 5px;
margin: 1px 0;
padding: 2px 6px;
background: rgba(96,165,250,0.06);
border: 1px solid rgba(96,165,250,0.20);
border-radius: 3px;
font-size: 10px;
min-width: 0;
}
.arb-vwap-icon {
font-size: 11px; line-height: 1; flex: 0 0 auto;
width: 14px; text-align: center;
}
.arb-vwap-converged { color: var(--success); }
.arb-vwap-divergent { color: var(--jackpot); }
.arb-vwap-label {
text-transform: uppercase; letter-spacing: 0.05em;
font-size: 9px; color: var(--muted);
}
.arb-vwap-pct {
font-family: monospace; font-weight: 700;
color: var(--text); font-size: 11px;
}
.arb-vwap-meta {
font-size: 9px; color: var(--muted);
margin-left: auto;
font-family: monospace;
}
/* VWAP block in the cross-venue group modal */
.eg-vwap {
display: flex; align-items: flex-start; gap: 12px;
margin: 12px 0; padding: 12px 14px;
border-radius: 6px;
background: rgba(96,165,250,0.06);
border: 1px solid rgba(96,165,250,0.30);
}
.eg-vwap-converged { border-left: 4px solid var(--success); }
.eg-vwap-divergent { border-left: 4px solid var(--jackpot); }
.eg-vwap-icon {
font-size: 22px; line-height: 1; flex: 0 0 auto;
}
.eg-vwap-converged .eg-vwap-icon { color: var(--success); }
.eg-vwap-divergent .eg-vwap-icon { color: var(--jackpot); }
.eg-vwap-body { flex: 1; min-width: 0; }
.eg-vwap-headline {
font-size: 14px; color: var(--text);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.eg-vwap-headline strong { font-family: monospace; font-size: 18px; color: #60a5fa; }
.eg-vwap-confidence {
font-size: 10px; padding: 1px 6px; border-radius: 3px;
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.eg-vwap-conf-high { background: rgba(45,212,191,0.15); color: var(--success); }
.eg-vwap-conf-medium { background: rgba(96,165,250,0.15); color: #60a5fa; }
.eg-vwap-conf-low { background: rgba(148,163,184,0.15); color: var(--muted); }
.eg-vwap-sub {
font-size: 11px; color: var(--muted); margin-top: 4px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.eg-vwap-tag {
font-size: 10px; padding: 1px 6px; border-radius: 3px;
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.eg-vwap-tag-good { background: rgba(45,212,191,0.18); color: var(--success); }
.eg-vwap-tag-warn { background: rgba(251,191,36,0.18); color: var(--jackpot); }
/* Build v.03 .31 build 160: arb-platforms now mirrors .hud-options โ
a flex-column of single-line rows, one per venue. Cheapest YES
(BUY side) gets a green-tinted row; most expensive (SELL side)
gets a red tint; middle venues stay neutral. Same compact
flex-row pattern as .hud-option. */
.arb-platforms {
grid-column: unset;
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
.arb-plat-row {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 4px;
border-radius: 3px;
font-size: 10px;
min-width: 0;
overflow: hidden;
text-decoration: none;
color: var(--text);
background: rgba(148, 163, 184, 0.05);
border: 1px solid rgba(148, 163, 184, 0.15);
}
.arb-plat-row:hover {
text-decoration: none;
background: rgba(148, 163, 184, 0.10);
}
/* Cheapest YES โ BUY side; tint green. */
.arb-plat-row.arb-buy-side {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.30);
}
.arb-plat-row.arb-buy-side:hover {
background: rgba(34, 197, 94, 0.14);
}
/* Most-expensive YES โ SELL side; tint red. */
.arb-plat-row.arb-sell-side {
background: rgba(239, 68, 68, 0.07);
border-color: rgba(239, 68, 68, 0.28);
}
.arb-plat-row.arb-sell-side:hover {
background: rgba(239, 68, 68, 0.12);
}
.arb-plat-row .sig-plat {
flex: 0 0 auto;
font-size: 9px;
}
.arb-plat-price {
flex: 0 0 auto; /* Build .265: never shrink โ always visible */
font-family: monospace;
font-weight: 700;
font-size: 11px;
color: var(--text);
flex: 0 0 auto;
}
.arb-plat-vol {
flex: 1 1 0;
min-width: 0;
color: var(--muted);
font-family: monospace;
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
.arb-plat-spread {
flex: 0 0 auto;
font-family: monospace;
color: var(--muted);
font-size: 9px;
}
.arb-plat-stance {
flex: 0 0 auto;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.arb-plat-row.arb-buy-side .arb-plat-stance { color: var(--success, #4ade80); }
.arb-plat-row.arb-sell-side .arb-plat-stance { color: var(--danger, #ef4444); }
.arb-plat-row:hover {
text-decoration: none;
color: #f97316;
}
.arb-plat-price {
font-weight: 700;
color: var(--accent);
}
/* .arb-plat-vol moved to a single definition above (build 159) โ
left-aligned now so volume reads next to price instead of being
shoved to the right edge. */
/* Modal additions for the arb side-by-side view */
.arb-table .arb-yes-price {
font-family: monospace;
font-size: 14px;
font-weight: 800;
color: var(--accent);
}
.arb-stance {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-family: monospace;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
}
.arb-stance.arb-buy { background: rgba(34, 197, 94, 0.20); color: var(--success); }
.arb-stance.arb-sell { background: rgba(239, 68, 68, 0.20); color: var(--danger); }
.arb-table .arb-vol { font-family: monospace; color: var(--muted); }
.arb-table .arb-link a { color: var(--accent); text-decoration: none; }
.arb-disclaimer {
margin-top: 14px;
padding: 10px 14px;
background: rgba(251, 191, 36, 0.10);
border-left: 3px solid var(--jackpot);
border-radius: 4px;
font-size: 11px;
color: var(--muted);
line-height: 1.5;
}
/* Tier 1 arb enrichments (build .45): arb-size chip, stale flags,
closed/paused platform chips, per-platform spread chip, modal
columns for depth / spread / delta_1h. */
.arb-size {
grid-column: unset;
display: flex;
align-items: baseline;
gap: 5px;
margin: 0;
min-width: 0;
flex-wrap: wrap;
/* Build .246: brighter band-tinted halo around the max-size row */
padding: 3px 6px;
border-radius: 4px;
background: rgba(74, 222, 128, 0.12);
border: 1px solid rgba(74, 222, 128, 0.30);
}
.arb-size[data-band="green"] { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.40); }
.arb-size[data-band="amber"] { background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.40); }
.arb-size[data-band="red"] { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.40); }
.arb-size[data-band="unknown"] { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.22); }
.arb-size-icon {
font-family: monospace;
font-size: 11px;
font-weight: 800; /* Build .284: bolder tilde (was 400/normal โ looked thin next to the 800-weight max-size amount) */
color: var(--muted);
}
.arb-size-amt {
font-family: monospace;
font-size: 18px;
font-weight: 800;
color: var(--success);
}
.arb-size-label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 9px;
color: var(--muted);
}
.arb-size-val { font-weight: 700; }
/* Build v0.35 20260525.223: color-grade the arb-size chip based on the
`size_band` projection from self_arb_opportunities (green โฅ $1k,
amber $100-1k, red < $100, unknown when depth is 0/missing). Gives
the operator an at-a-glance "is this arb actually fillable?" answer
per BI research 2026-05-25. Color overrides the default green so
amber/red unambiguously signal "small" / "paper" arbs. */
.arb-size[data-band="green"] .arb-size-amt { color: var(--success); }
.arb-size[data-band="amber"] .arb-size-amt { color: #fbbf24; }
.arb-size[data-band="red"] .arb-size-amt { color: var(--danger); }
.arb-size[data-band="unknown"] .arb-size-amt { color: var(--muted, #94a3b8); }
/* Per-side breakdown subtext: compact "Buy $4.5k ยท Sell $200" line
under the headline max-size chip. Color-cues mirror the existing
.arb-buy-side / .arb-sell-side scheme on platform rows so the user
reads them as the same buy/sell visual language. */
.arb-size-breakdown {
display: inline-flex;
align-items: baseline;
max-width: 100%; /* Build .256: never overflow arb-left column */
overflow: hidden;
text-overflow: ellipsis;
gap: 4px;
font-family: monospace;
font-size: 10px;
margin-left: 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arb-size-leg-sep { color: var(--muted, #94a3b8); }
.arb-size-buy { color: var(--success, #4ade80); }
.arb-size-sell { color: var(--danger, #ef4444); }
/* On amber / red headline, soften the per-side coloration so the
warning state dominates the visual hierarchy. */
.arb-size[data-band="red"] .arb-size-buy,
.arb-size[data-band="red"] .arb-size-sell,
.arb-size[data-band="amber"] .arb-size-buy,
.arb-size[data-band="amber"] .arb-size-sell { opacity: 0.75; }
.arb-card-stale {
background: rgba(148, 163, 184, 0.04);
border-left-color: #94a3b8;
opacity: 0.82;
}
.arb-card-stale:hover { border-color: #94a3b8; }
.arb-stale-flag {
grid-column: 2;
margin: 2px 0 0 0;
padding: 2px 8px;
background: rgba(251, 191, 36, 0.12);
border-left: 2px solid var(--jackpot);
border-radius: 2px;
font-size: 10px;
color: var(--jackpot);
font-weight: 600;
width: fit-content;
letter-spacing: 0.03em;
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Hot Underdogs section (build v.03 .99.4; recolored .99.13)
Mirrors the arb-card grid layout but in Kelly green (#16a34a) to
distinguish from the orange arb cards. Green signals "opportunity /
smart-money inflow" rather than the original crimson "alert/heat".
Same 60s refresh cadence; different signal class (per-platform
smart-money vs cross-platform arbs).
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* Build v0.31 build 101 (compaction): mirrors the arb-card compaction
pass โ saves ~25-30px per hud-card. Same hierarchy preserved (large
green multiplier dominates; secondary chips smaller). */
.hud-section {
padding: 4px 20px 8px;
}
.hud-heading {
margin: 0 0 5px;
font-size: 12px;
font-weight: 600;
}
.plat-name.hud-name {
color: #16a34a;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
}
.hud-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px;
}
.hud-card {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid #16a34a;
border-radius: 5px;
padding: 0;
cursor: pointer;
transition: transform 0.12s ease, border-color 0.12s ease;
/* Build .239: flex-column โ header + body + options + meta + progress */
display: flex;
flex-direction: column;
overflow: hidden;
}
.hud-card:hover {
transform: translateY(-1px);
border-color: #16a34a;
}
/* Header row: mult (left) + new money (right) */
.hud-header {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 5px 8px 4px;
border-bottom: 1px solid rgba(22, 163, 74, 0.15);
background: rgba(22, 163, 74, 0.05);
}
.hud-mult {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
background: none;
border-radius: 0;
padding: 0;
min-width: unset;
grid-row: unset;
}
.hud-mult-x {
font-family: monospace;
font-size: 18px;
font-weight: 800;
color: #16a34a;
line-height: 1;
}
.hud-mult-label {
font-size: 8px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 1px;
text-align: left;
}
.hud-inc {
grid-column: unset;
flex: 1;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 4px;
margin: 0;
min-width: 0;
}
.hud-inc-amt {
font-family: monospace;
font-size: 13px;
font-weight: 800;
color: #16a34a;
}
.hud-inc-label {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Build .239: body row = content (left) + liq box (right) */
.hud-body {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0;
padding: 5px 8px 4px;
min-width: 0;
}
.hud-content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hud-liq {
flex: 0 0 80px;
border-left: 1px solid rgba(22, 163, 74, 0.15);
margin-left: 8px;
padding: 4px 6px;
background: rgba(45, 212, 191, 0.08);
border: 1px solid rgba(45, 212, 191, 0.20);
border-radius: 3px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1px;
}
.hud-liq-icon { font-size: 12px; line-height: 1; }
.hud-liq-amt { font-family: monospace; font-size: 13px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.hud-liq-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hud-platform-chip {
grid-column: unset;
margin: 0;
min-width: 0;
overflow: hidden;
font-size: 10px;
}
.hud-event-title {
grid-column: unset;
font-size: 11px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
margin: 1px 0;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Build v.03 .31 build 172: clickable event-title link inside hud-card.
Symmetric with .arb-event-title-link โ see comment there. */
.hud-event-title-link {
color: inherit;
text-decoration: none;
cursor: pointer;
position: relative;
border-bottom: 1px dotted rgba(96,165,250,0.0);
transition: border-bottom-color 120ms ease, color 120ms ease;
}
.hud-event-title-link:hover,
.hud-event-title-link:focus {
color: #60a5fa;
border-bottom-color: rgba(96,165,250,0.6);
outline: none;
}
.hud-options {
grid-column: unset;
padding: 0 8px;
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 1px 0;
}
.hud-option {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
min-width: 0;
overflow: hidden;
}
.hud-underdog {
background: rgba(22, 163, 74, 0.08);
border: 1px solid rgba(22, 163, 74, 0.30);
}
.hud-leader {
background: rgba(148, 163, 184, 0.05);
border: 1px solid rgba(148, 163, 184, 0.15);
}
.hud-option-marker {
font-size: 11px;
line-height: 1;
flex: 0 0 auto;
width: 12px;
text-align: center;
}
.hud-underdog .hud-option-marker { color: #16a34a; }
.hud-leader .hud-option-marker { color: var(--muted); }
.hud-option-label {
/* flex-basis 0 (not auto) + min-width 0 so this child can shrink below
its content width and the ellipsis clip kicks in. flex:1 1 auto was
the cause of the overflow โ auto basis = "don't shrink below content". */
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
/* Build v0.35 20260523.193: bolder betting-option title per user
request โ the underdog/leader candidate name is the focal point
of the Hot Underdog card, so weight it heavier than the meta
chips and price stamp. */
font-weight: 700;
}
.hud-option-pct {
font-family: monospace;
font-weight: 700;
font-size: 11px;
color: var(--text);
margin-left: auto;
}
.hud-meta {
grid-column: unset;
padding: 3px 8px 0;
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 2px;
min-width: 0;
}
.hud-meta-chip {
display: inline-flex;
align-items: center;
gap: 4px; /* Build .266: +1px to balance the larger text */
padding: 2px 6px; /* Build .266: was 1px 5px */
border-radius: 3px;
/* Build .267: brighter "Before" chip โ opacity 0.06 โ 0.18 (3ร) on bg,
0.18 โ 0.50 on border so the value reads as a proper highlighted chip
rather than a barely-tinted span. */
background: rgba(148, 163, 184, 0.18);
border: 1px solid rgba(148, 163, 184, 0.50);
font-size: 11px;
}
.hud-meta-chip.hud-meta-now {
/* Build .267: brighter "Now" chip โ opacity 0.06 โ 0.20 on bg, 0.20 โ
0.55 on border. Stronger kelly-green so the "Now" value reads as
fresh/positive without needing the user to squint. */
background: rgba(22, 163, 74, 0.20);
border-color: rgba(22, 163, 74, 0.55);
}
/* Build .267: brighter inner text colors on both chips so the value
pops against the brighter background. */
.hud-meta-chip .hud-meta-label { color: var(--text); } /* slate-300, was --muted */
.hud-meta-chip .hud-meta-val { color: #f1f5f9; } /* slate-100, was --text */
.hud-meta-chip.hud-meta-now .hud-meta-label { color: #86efac; } /* green-300 */
.hud-meta-chip.hud-meta-now .hud-meta-val { color: #bbf7d0; } /* green-200 */
/* Build v.03 .99.6: flag emojis next to country ISO codes.
Slightly larger than the iso2 text and vertically nudged to align
with the all-caps letters. Used inside .country-chip and inside
.hud-meta-chip wherever a country is rendered. */
.flag-glyph {
font-size: 1.1em;
line-height: 1;
vertical-align: -0.05em;
/* Don't apply text-decoration / color filters from parent link. */
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
"Twemoji Mozilla", system-ui, sans-serif;
}
.hud-meta-label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px; /* Build .266: was 8px (+25% to keep label/val ratio readable) */
color: var(--muted);
}
.hud-meta-val {
font-family: monospace;
font-weight: 700;
font-size: 11px; /* Build .266: was 9px (+22%) */
color: var(--text);
}
/* Build .239: progress bar โ underdog% | bar | leader% */
.hud-progress {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 8px 6px;
}
.hud-prog-ud, .hud-prog-lead {
font-family: monospace;
font-size: 11px;
font-weight: 700;
flex: 0 0 auto;
}
.hud-prog-ud { color: #16a34a; }
.hud-prog-lead { color: var(--muted); }
.hud-prog-bar {
flex: 1;
height: 4px;
background: rgba(148, 163, 184, 0.20);
border-radius: 2px;
overflow: hidden;
}
.hud-prog-fill {
height: 100%;
background: #16a34a;
border-radius: 2px;
max-width: 100%;
}
.arb-plat-closed {
opacity: 0.55;
text-decoration: line-through;
}
.arb-plat-status {
display: inline-block;
padding: 0 5px;
font-size: 9px;
font-weight: 700;
border-radius: 2px;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
margin-left: 4px;
}
.arb-plat-closed-chip {
background: rgba(239, 68, 68, 0.18);
color: var(--danger);
}
.arb-plat-paused-chip {
background: rgba(251, 191, 36, 0.18);
color: var(--jackpot);
}
.arb-plat-spread {
font-size: 9px;
color: var(--muted);
font-family: monospace;
margin-left: 4px;
}
/* Modal table extra columns */
.arb-depth, .arb-spread-cell, .arb-delta {
font-family: monospace;
font-size: 12px;
color: var(--text);
}
.arb-depth { text-align: right; }
.arb-depth-est {
color: var(--muted);
font-size: 10px;
margin-left: 2px;
font-weight: 400;
}
.arb-spread-cell { text-align: right; color: var(--muted); }
.arb-delta { text-align: right; }
.arb-delta-up { color: var(--success); }
.arb-delta-down { color: var(--danger); }
.arb-delta-flat { color: var(--muted); }
.arb-row-stale {
opacity: 0.6;
text-decoration: line-through;
}
.arb-row-stale .arb-stance { opacity: 0.75; }
/* Tier 2 meta-strip (build .46): fees / net spread / implied vig /
persistence_hours. Lives at the bottom of the arb-card and at the
top of the arb modal (between the headline and the table). */
.arb-meta {
grid-column: unset;
display: flex;
flex-direction: row; /* Build .292: horizontal chip strip (was a vertical column) */
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 0;
min-width: 0;
}
/* In the right column, each chip is a row: label left, val right */
.arb-right .arb-meta-chip {
display: flex;
justify-content: space-between;
align-items: center;
}
.arb-meta-modal {
margin: 8px 0 4px;
}
.arb-meta-chip {
display: inline-flex;
align-items: baseline;
gap: 3px;
padding: 1px 5px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 3px;
font-family: monospace;
font-size: 9px;
color: var(--text);
cursor: help;
}
.arb-meta-label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 8px;
color: var(--muted);
}
.arb-meta-val { font-weight: 700; }
.arb-meta-fee { border-color: rgba(148,163,184,0.30); }
.arb-meta-net { border-color: rgba(96,165,250,0.30); }
.arb-meta-net-zero {
opacity: 0.65;
background: rgba(148,163,184,0.10);
}
.arb-meta-net-zero .arb-meta-val { color: var(--muted); }
.arb-meta-net-strong {
background: rgba(45,212,191,0.10);
border-color: rgba(45,212,191,0.40);
}
.arb-meta-net-strong .arb-meta-val { color: var(--success); }
.arb-meta-vig { border-color: rgba(251,191,36,0.30); }
.arb-meta-vig .arb-meta-val { color: var(--jackpot); }
.arb-meta-vig-arb {
background: rgba(45,212,191,0.12);
border-color: rgba(45,212,191,0.50);
}
.arb-meta-vig-arb .arb-meta-val { color: var(--success); }
.arb-meta-persist { border-color: rgba(96,165,250,0.30); }
.arb-meta-persist .arb-meta-val { color: #60a5fa; }
.arb-meta-size { border-color: rgba(45,212,191,0.30); }
.arb-meta-size .arb-meta-val { color: var(--success); }
/* Modal table extra columns (build .46) */
.arb-fee-cell {
font-family: monospace;
font-size: 12px;
text-align: right;
color: var(--muted);
}
.arb-fee-cell .arb-fee-none { color: var(--success); font-weight: 700; }
@media (max-width: 600px) {
.arb-grid { grid-template-columns: 1fr; }
}
/* Public wallet page (/wallet/) โ long-form leaderboard profile */
.wallet-page-main { padding: 16px 20px 80px; max-width: 1200px; margin: 0 auto; }
.wallet-not-found { text-align: center; padding: 60px 20px; color: var(--muted); }
.wallet-not-found h1 { color: var(--text); margin-bottom: 8px; }
.wallet-hero {
background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
padding: 22px 24px; margin-bottom: 20px;
}
.wallet-hero-name { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.wallet-hero-addr { font-family: monospace; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.wallet-hero-addr code { font-size: 11px; word-break: break-all; }
.wallet-hero-empty { font-size: 13px; color: var(--muted); padding: 12px 0; }
.wallet-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wallet-badge {
display: inline-block; padding: 4px 10px; border-radius: 14px;
background: var(--panel-2); color: var(--text);
font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.wallet-badge-roi.roi-strong { background: rgba(34,197,94,0.20); color: var(--success); border: 1px solid rgba(34,197,94,0.4); }
.wallet-badge-roi.roi-good { background: rgba(74,222,128,0.15); color: var(--success); }
.wallet-badge-roi.roi-mid { color: var(--muted); }
.wallet-badge-roi.roi-bad { background: rgba(239,68,68,0.18); color: var(--danger); }
.wallet-badge-elite {
background: linear-gradient(90deg, rgba(34,197,94,0.30), rgba(45,212,191,0.30));
color: #0b1020; border: 2px solid var(--success);
font-size: 13px; font-weight: 800;
}
.wallet-hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.wh-stat { background: var(--panel-2); border-radius: 6px; padding: 14px; text-align: center; }
.wh-stat-num { font-family: monospace; font-size: 22px; font-weight: 800; color: var(--accent); }
/* Build v0.35 20260525.217 (item 1): green/red tint for the Net P&L
tile in the wallet hero โ pulls the PnL sign into the big-bold box
so visitors don't need to read the small "+" sign to read the trend. */
.wh-stat-num.wh-stat-pos { color: #10b981; }
.wh-stat-num.wh-stat-neg { color: var(--danger); }
.wh-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
@media (max-width: 700px) { .wallet-hero-stats { grid-template-columns: repeat(2, 1fr); } }
/* Build v0.4 20260530.283: activity-first hero โ 5 columns (was 4) for
Total bets / Total events / Avg per bet / Avg per event / sparkline.
The sparkline tile sets `color: var(--accent)` so the inline SVG's
stroke="currentColor" inherits the accent without a hardcoded hex. */
.wallet-hero-activity { grid-template-columns: repeat(5, 1fr); }
.wh-stat-spark { color: var(--accent); display: flex; flex-direction: column; justify-content: center; }
.wh-spark-wrap { width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; }
.wh-spark-svg { width: 100%; height: 100%; overflow: visible; }
.wh-spark-empty { font-family: monospace; font-size: 18px; font-weight: 800; color: var(--muted); }
@media (max-width: 700px) { .wallet-hero-activity { grid-template-columns: repeat(2, 1fr); } }
/* Build .283: prominent open-positions row under the hero boxes (full page) */
.wallet-openpos-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
background: var(--panel-2); border: 1px solid var(--border);
border-left: 3px solid var(--accent); border-radius: 6px;
padding: 12px 14px; margin: 14px 0 0 0; font-size: 13px;
}
.wallet-platforms { margin-bottom: 18px; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 0 20px; }
.wp-card { background: var(--panel-2); border-radius: 6px; padding: 12px; }
.wp-plat { display: inline-block; margin-bottom: 6px; }
.wp-trades { font-size: 12px; color: var(--muted); }
.wp-vol { font-family: monospace; font-size: 14px; color: var(--accent); margin-top: 2px; }
/* PMXT positions block on /wallet/ pages (added May 13). Live
open-position data fetched per wallet from pmxt.Polymarket().fetch_positions().*/
.wallet-pmxt { padding: 0 20px; margin-bottom: 24px; }
.wallet-pmxt .section-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.pmxt-summary {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
margin-bottom: 14px;
}
.pmxt-stat {
background: var(--panel-2); border-radius: 6px; padding: 10px 14px;
border-top: 2px solid #a78bfa;
}
.pmxt-stat-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); margin-bottom: 4px;
}
.pmxt-stat-val { font-family: monospace; font-size: 18px; font-weight: 600; }
.pmxt-pnl-pos { color: var(--success); }
.pmxt-pnl-neg { color: var(--danger); }
.pmxt-plat-header {
font-size: 13px; margin: 12px 0 6px 0;
display: flex; align-items: center; gap: 10px;
}
.pmxt-plat-count { color: var(--muted); font-size: 11px; font-weight: 400; }
.pmxt-pos-table {
width: 100%; border-collapse: collapse; font-size: 12px;
background: var(--panel-2); border-radius: 6px; overflow: hidden;
}
.pmxt-pos-table th {
text-align: left; padding: 6px 10px; color: var(--muted);
font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
}
.pmxt-pos-table td { padding: 7px 10px; border-bottom: 1px solid rgba(167,139,250,0.08); }
.pmxt-pos-table tr:last-child td { border-bottom: none; }
.pmxt-num { font-family: monospace; text-align: right; }
.pmxt-more { font-size: 11px; color: var(--muted); margin-top: 6px; padding-left: 10px; }
/* Build .68: Market + Bet columns added to the PMXT open-positions table. */
.pmxt-mkt {
font-size: 13px;
max-width: 360px;
cursor: help;
}
.pmxt-mkt a { color: var(--text); text-decoration: none; }
.pmxt-mkt a:hover { color: var(--accent); text-decoration: underline; }
.pmxt-bet {
font-size: 12px;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
@media (max-width: 700px) {
.pmxt-summary { grid-template-columns: 1fr; }
.pmxt-mkt { max-width: 180px; font-size: 11px; }
}
/* Build v0.4 20260526.229: sx.bet L3 surfacing.
Two pieces:
1. The "โ Also on sx.bet" cross-match chip in the wallet hero
badges row. Fires when this Polymarket EOA is also active
as an sx.bet maker (per the L3 archive's wallet_index).
Cyan-purple tint differentiates it from green ROI badges.
2. The "๐ฏ sx.bet Open Orders" panel just above the recent-trades
section. Reuses .pmxt-pos-table for layout consistency
with the PMXT open-positions block โ purpose is similar
(forward-looking exposure), and one shared visual vocab
keeps the page legible. */
.wallet-badge-cross-match {
background: linear-gradient(90deg, rgba(34,211,238,0.20), rgba(167,139,250,0.22));
color: var(--text);
border: 1px solid rgba(34,211,238,0.35);
}
/* Build v0.4 20260526.230: per-source logo emblems sitting beside the
text platform-chips throughout tickers, cards, and event rows. The
existing .sig-plat coloured badge stays (color affordance + fallback
when a venue has no PNG yet) โ the logo just makes the brand
immediately scannable. Sized to align with the smaller ticker
chips; on rows that use larger 14-16 px logos elsewhere (top-20
list, board panels) the existing .mkt-logo / .board-panel-logo
rules keep those bigger. */
.plat-chip-logo {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 4px;
border-radius: 2px;
flex-shrink: 0;
}
/* Build .252: Manifold logo is dark indigo โ almost invisible on our dark
background. Boost brightness universally wherever it appears. */
img[src*="manifold"] { filter: brightness(3) saturate(0.9); }
.wallet-sxbet-orders { padding: 0 20px; margin-bottom: 24px; }
.wallet-sxbet-orders .section-sub {
font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px;
}
.sxbet-orders-wrap { overflow-x: auto; }
.sxbet-orders-table th:first-child,
.sxbet-orders-table td:first-child { padding-left: 12px; }
/* Subtle cyan top-stripe so the section reads as sx.bet at a glance,
echoing the cross-match chip palette. */
.sxbet-orders-table {
border-top: 2px solid rgba(34,211,238,0.45);
}
.sxbet-exp {
font-size: 11px; color: var(--muted);
white-space: nowrap;
}
.wallet-trades-wrap { padding: 0 20px; overflow-x: auto; }
.wallet-page .back-link {
font-size: 12px; color: var(--muted); text-decoration: none;
}
.wallet-page .back-link:hover { color: var(--accent); }
/* Elite-wallet styling on the leaderboard panel */
.sig-row-elite { background: linear-gradient(90deg, rgba(34,197,94,0.06), transparent); }
.elite-star { margin-left: 4px; font-size: 12px; }
/* Admin link + footer Collect Now (Phase 4 + admin gating) */
.admin-link {
font-size: 11px; color: var(--muted); text-decoration: none;
margin-left: 8px; opacity: 0.5; cursor: pointer;
}
.admin-link:hover { opacity: 1; color: var(--accent); }
.collect-btn-footer {
font-size: 11px; padding: 3px 10px; margin-left: 4px;
vertical-align: middle;
}
/* Build .260: .rp-section-title + .rp-table cell rules removed โ
Risers + Coldest now use the .movers-merged-card / .mvm-* namespace. */
/* Rank-change arrows on Top-20 rows. Sit at the row's far left; the
row's existing left padding/numbering stays in place. */
.t20-arrow {
display: inline-block; width: 14px; text-align: center;
margin-right: 4px; font-family: monospace;
font-size: 11px; line-height: 1;
vertical-align: middle;
}
.t20-arrow-up { color: var(--success); }
.t20-arrow-down { color: var(--danger); }
.t20-arrow-same { color: #fbbf24; opacity: 0.8; }
.t20-arrow-new { color: #a78bfa; }
/* Section headings (subtle hr above each major below-the-fold section) */
.section-heading {
font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted);
margin: 18px 20px 8px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* Wallet track-record badges (in smart-money rows + top-wallets card) */
.track-badge {
font-family: monospace; font-size: 10px; font-weight: 700;
padding: 1px 5px; border-radius: 3px;
}
.track-badge.tr-good { background: rgba(74,222,128,0.18); color: var(--success); }
.track-badge.tr-bad { background: rgba(239,68,68,0.18); color: var(--danger); }
.track-badge.tr-mid { background: var(--panel-2); color: var(--muted); }
/* Marketplace activity table (replaces Whale Leaderboard in signals row) */
.marketplace-card { border-top: 3px solid #60a5fa; }
.plat-name.marketplace-name { color: #60a5fa; }
/* Build v0.35 20260523.193 (2026-05-23): Latest Analysis card.
Purple top-stripe (#a78bfa) distinguishes editorial/insight content
from the data-pull cards (Anomaly amber, Smart-Money pink,
Marketplace blue, Movers/Topics accent). Placeholder body is
centered with a muted icon + heading so the reserved slot reads
intentionally-empty rather than broken. */
.latest-analysis-card { border-top: 3px solid #a78bfa; }
.plat-name.latest-analysis-name { color: #a78bfa; }
.latest-analysis-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px 16px;
gap: 6px;
color: var(--muted);
min-height: 120px;
}
.la-placeholder-icon { font-size: 28px; line-height: 1; opacity: 0.7; }
.la-placeholder-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.la-placeholder-text {
font-size: 11px;
line-height: 1.45;
max-width: 36ch;
color: var(--muted);
}
/* Build v0.35 20260524 (2026-05-24): Latest News list inside the
.latest-analysis-card. Each item is a single link wrapping the
headline + provider badge + source + relative age. Provider
badge colors mirror the modal "Related news" badges so the visual
language stays consistent across page surfaces (Guardian blue,
NewsData amber, Currents emerald, HN orange, GDELT slate). */
/* Build v0.35 20260525.222: compact inline layout โ provider badge + age
on the same line as the headline (was two-block column layout). */
.la-news-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px; /* was 4px */
}
.la-news-item { margin: 0; padding: 0; }
.la-news-link {
display: flex;
flex-direction: row; /* was column */
align-items: baseline;
gap: 6px;
padding: 4px 8px; /* was 7px 8px */
border-radius: 4px;
text-decoration: none;
color: var(--text);
border-left: 2px solid transparent;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.la-news-link:hover {
background: rgba(167, 139, 250, 0.06);
border-left-color: #a78bfa;
}
.la-news-title {
flex: 1 1 0;
min-width: 0;
font-size: 12px;
line-height: 1.3;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* single-line clamp in row layout */
}
.la-news-meta {
flex-shrink: 0;
display: flex;
gap: 4px;
align-items: center;
font-size: 10.5px;
color: var(--muted);
}
.la-news-prov {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
background: var(--panel-2);
color: var(--muted);
}
.la-news-prov-badge-guardian { background: rgba(93, 168, 255, 0.18); color: #5da8ff; }
.la-news-prov-badge-newsdata { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.la-news-prov-badge-currents { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.la-news-prov-badge-hackernews { background: rgba(255, 102, 0, 0.20); color: #ff6600; }
.la-news-prov-badge-gdelt { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.la-news-source {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 18ch;
}
.la-news-age {
margin-left: 0; /* was auto (only needed in column layout) */
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
/* Build v.03 .31 build 169 (2026-05-23): explicit top-anchor for the
Marketplace Activity card. It spans 2 grid rows in the 3ร2 signals
grid, so the card height is tall; without an explicit justify-content
the flex children (h3 + 7-day chart + table) could end up visually
floating relative to neighbouring cards. Force top alignment so the
list sits at the top of its box regardless of total card height. */
.signals-row-3x2 .marketplace-card {
justify-content: flex-start;
align-content: flex-start;
}
.marketplace-card .mkt-table {
/* Ensures any margin-collapse doesn't push the table downward.
Build v.03 .31 build 172: dropped `margin-bottom: auto` โ the chart
now lives BELOW the table (build 169 layout had chart above, table
below). With table-first, the chart fills any remaining flex
space naturally and pushing the table to the top is unnecessary. */
margin-top: 4px;
margin-bottom: 8px;
}
/* Build v.03 .31 build 172: kill any leading whitespace above the h3.
`signals-card` already pads internally; we want the title flush. */
.marketplace-card > h3 {
margin-top: 0;
}
/* Build v.03 .31 build 171 (2026-05-23): platform-logo PNGs next to
venue names. Three sizes โ 16px in the Marketplace Activity table,
20px in the top-10 hero tile headers, 14px in the top-20 tab nav.
Use vertical-align: middle so they line up with the text baseline
nicely. `object-fit: contain` defends against logos that aren't
perfectly square. */
.mkt-logo {
display: inline-block;
vertical-align: -3px;
margin-right: 6px;
width: 16px;
height: 16px;
object-fit: contain;
border-radius: 2px;
/* Subtle ring so light logos don't disappear against the dark panel */
background: rgba(255,255,255,0.04);
}
.plat-logo {
display: inline-block;
vertical-align: -4px;
margin-right: 6px;
width: 20px;
height: 20px;
object-fit: contain;
border-radius: 3px;
background: rgba(255,255,255,0.04);
}
.t20-tab-logo {
display: inline-block;
vertical-align: -2px;
margin-right: 4px;
width: 14px;
height: 14px;
object-fit: contain;
border-radius: 2px;
background: rgba(255,255,255,0.04);
}
/* Slightly compact spacing on the top-20 tab buttons so the logo +
text don't visually overflow on narrow viewports. */
.top-events-tabs button { gap: 0; }
/* Build .57 โ visible "as of HH:MM UTC" freshness chip in the card header. */
.mkt-asof {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
font-family: monospace;
font-size: 10px;
color: var(--muted);
background: var(--panel-2);
border-radius: 10px;
cursor: help;
vertical-align: 1px;
letter-spacing: 0.02em;
}
.mkt-table {
width: 100%; border-collapse: collapse;
font-size: 12px; line-height: 1.4;
}
.mkt-table th {
text-align: left; padding: 6px 8px;
border-bottom: 1px solid var(--border);
color: var(--muted); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px;
}
.mkt-table td {
padding: 7px 8px; border-bottom: 1px solid rgba(96,165,250,0.08);
vertical-align: middle;
}
.mkt-table tr:last-child td { border-bottom: none; }
.mkt-table .mkt-rank { text-align: center; color: var(--muted); font-family: monospace; width: 28px; }
.mkt-table .mkt-vol { font-family: monospace; font-weight: 600; text-align: right; }
.mkt-table .mkt-vol-sub { color: var(--muted); font-weight: 400; font-size: 10px; display: block; }
.mkt-table .mkt-delta { font-family: monospace; text-align: right; font-size: 11px; width: 70px; }
.mkt-table .mkt-events { font-family: monospace; text-align: right; color: var(--muted); width: 60px; }
.mkt-table .mkt-source { font-size: 10px; color: var(--muted); width: 90px; }
.mkt-table .mkt-source-pmxt { color: #a78bfa; } /* PMXT rows in purple */
.mkt-table .mkt-na { color: var(--muted); opacity: 0.5; }
.mkt-table .mkt-row-pmxt td.mkt-name .sig-plat { opacity: 0.85; }
/* Build .272 (2026-05-29): venue name + logo in the Marketplace Activity
table link to the platform's homepage. Inherit color + drop the default
underline so the row renders identically to before; hover underlines the
name badge as a click affordance. display:inline keeps the existing logo
vertical-align + margin layout untouched. */
.mkt-name-link { color: inherit; text-decoration: none; cursor: pointer; }
.mkt-name-link:hover .sig-plat { text-decoration: underline; }
.mkt-name-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* Build .284: subtle dark hue behind each Marketplace Activity source cell so the
per-platform colored name + logo read with more contrast (esp. on the peachy-cream
default). var(--source-tint) is a theme-agnostic black-alpha overlay. */
.mkt-table td.mkt-name { background: var(--source-tint); }
/* Build .286: stronger contrast for the Marketplace Activity venue-name chips
(operator request). A 1px outline in the chip's OWN colour (currentColor =
the per-venue brand var) turns each name into a crisp, defined pill, and a
small font bump aids legibility. currentColor keeps it tenet-compliant (no
hard-coded hue) and theme-adaptive; scoped to .mkt-table so the compact
ticker / arb-card / liquidity .sig-plat chips elsewhere are untouched. */
.mkt-table td.mkt-name .sig-plat {
font-size: 10px;
border: 1px solid currentColor;
/* Build .288: dark halo around the brand-coloured name so it contrasts hard
against its same-hue brand-tint background (operator request โ the prior
border + tint weren't enough on their own). */
text-shadow: 0 1px 2px var(--chip-halo), 0 0 2px var(--chip-halo);
}
/* Build .285: click-to-sort column headers on generic .sortable tables. */
table.sortable th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th.th-sortable:hover { color: var(--accent); }
table.sortable th.sorted-asc::after { content: " \25B2"; font-size: 0.72em; color: var(--accent); }
table.sortable th.sorted-desc::after { content: " \25BC"; font-size: 0.72em; color: var(--accent); }
.mkt-table .delta-up { color: var(--success); }
.mkt-table .delta-down { color: var(--danger); }
.mkt-table .delta-flat { color: var(--muted); }
/* Build .274 (2026-05-29): forecaster venues (Foretold / FantasySCOTUS) have no
real trading volume, so their delta columns show consensus drift (mean absolute
move of the leading option's probability, in percentage points) instead of a
volume ฮ%, and their volume cell shows a forecast-count confidence chip rather
than a misleading "$" figure. Consensus drift is always a non-negative
magnitude (signed moves cancel under averaging) so it gets the neutral accent
color, not the up/down green/red of volume momentum. */
.mkt-table .mkt-consensus { color: var(--accent); font-variant-numeric: tabular-nums; }
.mkt-table .mkt-consensus .mkt-pp { font-size: 0.82em; opacity: 0.7; margin-left: 1px; }
.mkt-table .mkt-conf-chip {
display: inline-flex; align-items: center; gap: 3px;
/* Build .284: was color:#cbd5e1 (hardcoded slate-300) โ invisible on the
peachy-cream default. var(--text) makes it readable in both themes;
weight bumped 600->800 per "barely visible / bolder". */
font-size: 11px; font-weight: 800; color: var(--text); white-space: nowrap;
}
.mkt-table .mkt-conf-chip .mkt-conf-unit {
font-size: 9px; font-weight: 700; opacity: 0.85; text-transform: uppercase;
}
.mkt-footnote {
margin-top: 8px; padding: 6px 0 0 0;
font-size: 10px; color: var(--muted); line-height: 1.5;
border-top: 1px dashed var(--border);
}
/* 7-day stacked-bar chart at the top of the marketplace card */
.mkt-7d-wrap {
margin: 4px 0 10px 0;
padding: 6px 0 0 0;
border-bottom: 1px dashed var(--border);
padding-bottom: 10px;
}
.mkt-7d-title {
font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 6px;
}
.mkt-7d-chart-box {
position: relative;
height: 180px; /* fixed so Chart.js can compute layout */
width: 100%;
}
/* Top-wallets card (kept for legacy / future re-enable; not in homepage today) */
.wallets-card { border-top: 3px solid var(--success); }
.plat-name.wallets-name { color: var(--success); }
.wallets-list .wallet-link {
grid-template-columns: 24px 1fr auto;
}
.wallet-rank { font-family: monospace; font-size: 11px; color: var(--muted); text-align: right; }
.wallet-name { font-family: monospace; font-size: 11px; color: var(--text); font-weight: 700; }
/* โโโ Hero: Globe + Top-10 trio in a 2x2 squareish grid โโโ */
.chart-box {
background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px;
min-height: 280px; display: flex; flex-direction: column;
}
.chart-box canvas { flex: 1; min-height: 280px; max-height: 380px; }
.whale-chart-box { margin-top: 16px; min-height: 260px; }
.globe-box {
background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px;
display: flex; flex-direction: column; position: relative;
}
#globe { flex: 1; min-height: 0; background: radial-gradient(circle at 50% 50%, #0c1a3a 0%, #0b1020 100%); border-radius: 6px; }
/* 2x2 grid: each cell roughly square. grid-auto-rows: 1fr keeps both rows equal,
and aspect-ratio on cells nudges them toward squareness while still scaling. */
.hero-2x2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(280px, 32vh));
gap: 12px; padding: 12px 20px;
}
.hero-2x2 > * { min-height: 0; min-width: 0; overflow: hidden; box-sizing: border-box; }
@media (max-width: 900px) {
.hero-2x2 { grid-template-columns: 1fr; grid-template-rows: auto; }
}
/* โโโ 2x2 Top-10 corners + globe in the center โโโ
4 top-10 cards in a strict 2x2 grid; the globe is rendered as a
centered floating overlay, with explicit grid placement so Firefox
doesn't reserve a grid cell for it. */
.hero-2x2-center {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(300px, 36vh));
gap: 14px; padding: 14px 20px;
}
.hero-2x2-center > .t10-card {
min-height: 0; min-width: 0; overflow-y: auto; box-sizing: border-box;
}
/* Globe overlay: lay it across the entire 2x2 grid via grid-area then
center-self in both dimensions. This guarantees the globe's center
sits at the geometric center of the 4-cell grid regardless of section
padding, scrollbar widths, or asymmetric card content heights. */
.globe-hero-center {
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: center; /* vertical centering inside the 2x2 grid */
justify-self: center; /* horizontal centering โ the cross-corner */
width: clamp(260px, 24vw, 340px); /* a bit larger so the disc clearly
spans across all 4 inner corners */
height: clamp(260px, 24vw, 340px);
z-index: 5;
pointer-events: auto;
/* Solid disc with a dark border ring so the overlap with each card's
inner corner is unmistakable. The radial-gradient still gives a soft
halo at the very edge for visual blending. */
background:
radial-gradient(circle at 50% 50%,
rgba(20,27,51,1.0) 0%,
rgba(20,27,51,1.0) 78%,
rgba(20,27,51,0.6) 92%,
rgba(11,16,32,0) 100%);
border: 2px solid rgba(96,165,250,0.55);
border-radius: 50%;
padding: 14px;
display: flex; flex-direction: column;
box-shadow: 0 0 60px rgba(96,165,250,0.30),
inset 0 0 24px rgba(45,212,191,0.10);
position: relative; /* not absolute โ we want flex-center positioning */
}
.globe-hero-center #globe {
flex: 1; min-height: 0; border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #0c1a3a 0%, #0b1020 100%);
}
.globe-hero-center .globe-pause-btn {
position: absolute; top: 8px; right: 50%; transform: translateX(50%);
background: rgba(13,19,40,0.9); border: 1px solid var(--border);
color: var(--muted); font-size: 11px; padding: 2px 6px; line-height: 14px;
border-radius: 3px; z-index: 6; cursor: pointer;
}
.globe-hero-center .globe-pause-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Smooth, symmetric inner-corner reserve for all 4 cards so the floating
globe (anchored exactly at the 2x2 cross-corner intersection) doesn't
cover row content. Each card keeps its inner corner clear with a
diagonally-oriented padding pad and right-justifies text on right cards. */
@media (min-width: 901px) {
/* Reserve a quadrant-of-globe of empty space at each card's inner corner.
We use a single CSS custom property to keep all four sides synchronized. */
.hero-2x2-center { --globe-reserve: clamp(95px, 11vw, 140px); }
/* Top row cards: reserve space at the bottom-inside corner so the
floating globe doesn't cover row content. Left-cards (Polymarket TL,
Manifold BL) reserve space on the RIGHT; right-cards (Kalshi TR,
Limitless BR) reserve space on the LEFT but content stays
LEFT-ALIGNED โ i.e. the rows now begin at the center of the right-
cards instead of being flush against the right edge.
This replaces an earlier attempt that right-justified the right-cards
and reversed the grid; the user found that hard to read. */
.hero-2x2-center > .t10-card:nth-child(1) { padding-right: var(--globe-reserve); padding-bottom: 18px; }
.hero-2x2-center > .t10-card:nth-child(2) { padding-left: var(--globe-reserve); padding-bottom: 18px; }
.hero-2x2-center > .t10-card:nth-child(3) { padding-right: var(--globe-reserve); padding-top: 18px; }
.hero-2x2-center > .t10-card:nth-child(4) { padding-left: var(--globe-reserve); padding-top: 18px; }
/* Anchor the globe EXACTLY at the cross-point of the 2x2 grid.
Math: cross-point in the grid = (50%, 50%) of the .hero-2x2-center
content box (taking the gap into account, since the grid uses gap not
padding). Globe diameter = 2 ร var(--globe-reserve) so each cell's
reserved corner is exactly tangent to the globe. */
.globe-hero-center {
width: calc(var(--globe-reserve) * 2);
height: calc(var(--globe-reserve) * 2);
}
}
/* Medium viewports โ slightly smaller globe + reserve. */
@media (max-width: 1200px) and (min-width: 901px) {
.hero-2x2-center { --globe-reserve: 88px; }
}
/* โโโ Hero 4ร3 (Option B, build .89.1) โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Unified 12-cell grid with 9-11 platforms + 1-3 vacant slots. Order
leftโright, topโbottom:
Row 1: poly ยท kalshi ยท manifold ยท limitless
Row 2: metaforecast ยท myriad ยท betfair ยท predictit
Row 3: opinion ยท sxbet (dev) ยท globe ยท (vacant)
Vacant slot doubles as the floating-globe pane so we don't lose
the world-map context. Tile content is identical to the old 3ร2.
.hero-3x2 retained as an alias so older templates still render. */
.hero-3x2,
.hero-4x3 {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* Three rows now; min-height trimmed slightly (340โ300px) to keep the
hero from dominating above-the-fold on a single-row aspect ratio. */
grid-template-rows: repeat(3, minmax(300px, 36vh));
gap: 14px;
/* Build v.03 .31 build 104: padding-bottom trimmed 14โ2 so the
Featured Whale Bets section sits flush against the top-10 grid
(removes the dead vertical space the user flagged). */
padding: 14px 20px 2px;
}
.hero-3x2 > .t10-card,
.hero-4x3 > .t10-card,
.hero-3x2 > .hero-vacant-slot,
.hero-4x3 > .hero-vacant-slot {
/* Build .54: dropped `overflow-y: auto` from t10-card so movers
rows are visible at a glance โ no internal scroll bars in the
top-10 boxes. Vacant-slot keeps overflow:auto for the globe. */
min-height: 0; min-width: 0; box-sizing: border-box;
}
.hero-3x2 > .hero-vacant-slot,
.hero-4x3 > .hero-vacant-slot {
overflow-y: auto;
}
.hero-vacant-slot {
display: flex; align-items: stretch; justify-content: center;
background: rgba(13,19,40,0.30);
border: 1px dashed rgba(96,165,250,0.25);
border-radius: 8px;
padding: 10px;
}
.hero-vacant-slot .globe-hero-vacant {
flex: 1; min-width: 0;
background: radial-gradient(circle at 50% 50%, #0c1a3a 0%, #0b1020 100%);
border: 1px solid rgba(96,165,250,0.40);
border-radius: 8px;
padding: 10px;
position: relative;
display: flex; flex-direction: column;
}
.hero-vacant-slot .globe-hero-vacant #globe {
flex: 1; min-height: 0; border-radius: 6px;
}
.hero-vacant-slot .globe-pause-btn {
position: absolute; top: 6px; right: 6px;
background: rgba(13,19,40,0.9); border: 1px solid var(--border);
color: var(--muted); font-size: 11px; padding: 2px 6px; line-height: 14px;
border-radius: 3px; cursor: pointer;
}
.hero-vacant-slot .globe-pause-btn:hover { color: var(--accent); border-color: var(--accent); }
.hero-vacant-placeholder {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: var(--muted); text-align: center; font-size: 13px;
}
.hero-vacant-placeholder .hv-icon {
font-size: 36px; opacity: 0.5; line-height: 1; margin-bottom: 8px;
}
.hero-vacant-placeholder .hv-text { max-width: 220px; line-height: 1.5; }
@media (max-width: 1400px) {
.hero-3x2,
.hero-4x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.hero-3x2,
.hero-4x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.hero-3x2,
.hero-4x3 {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.hero-vacant-slot { min-height: 240px; }
}
/* โโโ Build .85.1: independent Betfair box under the leftmost column โโโโโ
3-column grid with the same column widths + horizontal padding as
.hero-3x2 above, but only the first cell holds a tile. Visually
anchors Betfair under the Polymarket / Limitless column of the hero
grid while keeping it as its own row (per user request: "independent
box", not a 7-tile grid expansion). */
.hero-betfair-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* Same row sizing rule as the hero-3x2 so the Betfair tile matches
the hero tile heights exactly when sitting directly below them. */
grid-template-rows: minmax(340px, 44vh);
gap: 14px;
padding: 0 20px 14px; /* no top-padding โ sits flush under hero-3x2 */
}
.hero-betfair-row > .t10-card {
grid-column: 1;
grid-row: 1;
min-height: 0;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
@media (max-width: 1100px) {
.hero-betfair-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.hero-betfair-row {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0 12px 12px;
}
}
/* MetaForecast platform colour & badges */
.t10-metaforecast { border-top: 3px solid #a78bfa; }
.t20-metaforecast { border-top: 3px solid #a78bfa; }
.sig-metaforecast .sig-plat,
.sig-plat.sig-metaforecast { background: rgba(167,139,250,0.18); color: #a78bfa; }
.plat-aggr-pill {
display: inline-block; margin-left: 6px; padding: 1px 6px;
font-size: 10px; font-weight: 600; color: #a78bfa;
background: rgba(167,139,250,0.12);
border: 1px solid rgba(167,139,250,0.30); border-radius: 3px;
letter-spacing: 0.04em;
}
/* Top-20 row 3ร2 (5 platforms + 1 vacant slot).
Specificity bump via .top-events.top-events-3x2 โ otherwise the legacy
.top-events base rule below (defined LATER in this file with the same
single-class specificity) wins by source order and we render 4 columns
instead of 3 on wide screens. The doubled class is intentional. */
.top-events.top-events-3x2 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.top-events.top-events-3x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.top-events.top-events-3x2 { grid-template-columns: 1fr; }
}
.t20-vacant {
border: 1px dashed rgba(96,165,250,0.30) !important;
background: rgba(13,19,40,0.20);
display: flex; flex-direction: column;
}
.t20-vacant-body {
padding: 24px 16px; text-align: center;
color: var(--muted); line-height: 1.6;
}
.t20-vacant-body .t20-vacant-sub { font-size: 12px; opacity: 0.7; }
/* When HIDE_UPPER_GLOBE=1: drop all the inner-corner padding so the
four top-10 cards use the full grid cells without any reserved space. */
.hero-no-globe > .t10-card:nth-child(n) {
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
@media (max-width: 900px) {
.hero-2x2-center { grid-template-columns: 1fr; grid-template-rows: auto; }
.globe-hero-center {
/* Mobile: globe drops out of overlay mode and becomes a normal
block in flow under the 4 stacked cards. */
grid-column: auto;
grid-row: auto;
align-self: stretch;
justify-self: stretch;
width: 100%; height: 280px; border-radius: 8px;
margin: 0; padding: 12px;
}
.globe-hero-center .globe-pause-btn { position: absolute; top: 12px; right: 16px; transform: none; }
}
.globe-hero { padding: 12px; }
.globe-hero h3 { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.globe-pause-btn {
background: transparent; color: var(--muted); border: 1px solid var(--border);
border-radius: 4px; padding: 0 6px; font-size: 11px; line-height: 18px; cursor: pointer;
}
.globe-pause-btn:hover { color: var(--accent); border-color: var(--accent); }
.fade-in { animation: fwFade 0.35s ease-in; }
@keyframes fwFade { from { opacity: 0.3; } to { opacity: 1; } }
/* Build .54: dropped max-height + overflow-y so the t10-card never
shows internal scroll bars โ the parent hero-3x2 grid row gives it
enough headroom for 10 rows. */
.t10-card { padding: 10px 12px; }
.t10-card .platform { margin-bottom: 6px; padding-bottom: 4px; }
.t10-bet { color: var(--muted); font-weight: 500; font-size: 11px; }
.closed-x {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
background: var(--danger); color: #fff;
border-radius: 3px; font-weight: 800;
font-family: monospace; font-size: 11px; margin-right: 6px;
vertical-align: middle; line-height: 1;
}
/* Resolved/closed event rows get a STRONG tinted background + diagonal-stripe
pattern so they're obviously distinct from live events when "Open Events
Only" is OFF. Also reduce opacity slightly to push them visually back. */
.t10-row-closed,
.t20-row-closed {
background:
repeating-linear-gradient(135deg,
rgba(239,68,68,0.18) 0,
rgba(239,68,68,0.18) 4px,
rgba(239,68,68,0.06) 4px,
rgba(239,68,68,0.06) 10px);
border-left: 4px solid var(--danger);
position: relative;
}
.t10-row-closed::after,
.t20-row-closed::after {
content: 'CLOSED';
position: absolute; top: 4px; right: 8px;
font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
color: var(--danger); background: rgba(239,68,68,0.18);
padding: 1px 5px; border-radius: 2px;
pointer-events: none;
}
.t10-row-closed a,
.t20-row-closed .t20-title { color: #fca5a5; }
.t10-row-closed:hover { background: rgba(239,68,68,0.20); }
.t20-bet-amt { color: var(--accent); font-weight: 600; font-size: 10px; margin-left: 3px; }
.t10-poly { border-top: 3px solid var(--accent); }
.t10-kalshi { border-top: 3px solid var(--kalshi); }
.t10-manifold { border-top: 3px solid #a78bfa; }
.t10-sxbet { border-top: 3px solid var(--sxbet); }
.t10-limitless { border-top: 3px solid var(--limitless); }
.top10-list { list-style: none; margin: 0; padding: 0; counter-reset: t10; }
.t10-row {
counter-increment: t10;
border-bottom: 1px solid var(--border);
}
.t10-row:last-child { border-bottom: none; }
.t10-row a {
display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: baseline;
padding: 3px 4px; color: var(--text); font-size: 12px; line-height: 1.25;
}
.t10-row a:hover { background: var(--panel-2); text-decoration: none; }
.t10-row a::before {
content: counter(t10);
font-family: monospace; font-size: 10px; color: var(--muted); text-align: right;
}
.t10-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t10-vol { font-family: monospace; font-size: 11px; color: var(--accent); font-weight: 600; }
.t10-manifold .t10-vol { color: #c4b5fd; }
.t10-kalshi .t10-vol { color: #93c5fd; }
.globe-legend {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
font-size: 10px; color: var(--muted); justify-content: center;
}
.globe-legend .leg { display: flex; align-items: center; gap: 4px; }
.globe-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* โโโ Ticker โโโ */
.ticker-section {
display: flex; align-items: center; background: var(--panel); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); overflow: hidden;
}
.ticker-label {
background: var(--whale); color: #0b1020; font-weight: 800; padding: 10px 16px;
font-size: 13px; letter-spacing: 0.16em; white-space: nowrap; align-self: stretch;
display: flex; align-items: center;
}
.ticker-wrap { flex: 1; overflow: hidden; position: relative; padding: 8px 0; }
.ticker-track {
display: flex; gap: 32px; white-space: nowrap;
animation: scroll-left 64s linear infinite;
padding-left: 20px;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-item {
display: inline-flex; align-items: center; gap: 8px; color: var(--text);
font-size: 13px; padding: 4px 12px; border-left: 2px solid var(--whale);
flex-shrink: 0; /* don't let the flex parent (.ticker-track) shrink items */
min-width: 0; /* but DO allow truncation INSIDE via child overflow rules */
overflow: visible; /* the parent .ticker-wrap clips; items stay full-content-sized */
}
.ticker-item:hover { text-decoration: none; color: var(--whale); }
.tk-amount { font-weight: 700; color: var(--whale); font-family: monospace; }
.tk-side { padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; }
.tk-q { color: var(--muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tk-evt { color: var(--text); font-style: italic; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.tk-odds { color: var(--jackpot); font-family: monospace; font-size: 11px; }
.tk-by { color: var(--muted); font-size: 11px; opacity: 0.85; white-space: nowrap; }
.tk-user { color: var(--text); font-family: monospace; font-size: 11px; max-width: 120px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Build .48: when tk-user is wrapped in an ,
make it visually obvious that the wallet name itself is clickable
(separate target from the parent event-link). */
a.tk-user.wallet-link {
color: var(--accent);
text-decoration: none;
cursor: pointer;
transition: color 0.12s ease;
}
a.tk-user.wallet-link:hover {
color: var(--success);
text-decoration: underline;
}
.ticker-empty { padding: 8px 20px; color: var(--muted); font-style: italic; }
/* โโโ Top 20 Events โโโ */
/* Build .87.4: second pass โ push compression further. Per-row height
~30px โ ~22px (font sizes shrunk another step, padding tightened,
margin-bottoms zeroed where safe, mini-bar slimmed to 3px). */
.top-events {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px 20px;
}
.top-events > .card { min-width: 0; }
@media (max-width: 1400px) { .top-events { grid-template-columns: repeat(2, 1fr); } }
.card {
background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px;
/* Build .79: removed 900px cap โ cards grow naturally with content.
No internal scrollbar; the page scrolls instead. */
max-height: none; overflow-y: visible;
}
.card.poly { border-top: 3px solid var(--accent); }
.card.kalshi { border-top: 3px solid var(--kalshi); }
.card.manifold { border-top: 3px solid #a78bfa; }
.card.sxbet { border-top: 3px solid var(--sxbet); }
.card.limitless { border-top: 3px solid var(--limitless); }
/* Build .85: Betfair brand color is yellow/black; we use Betfair yellow
(#ffb80c โ pulled from their brand pages) for the accent. */
.t10-betfair, .card.betfair { border-top: 3px solid #ffb80c; }
.t10-betfair .plat-name, .card.betfair .plat-name { color: #ffb80c; }
.sig-betfair, .sig-plat.sig-betfair { background: rgba(255, 184, 12, 0.18); color: #ffb80c; }
/* Build .89.1: PredictIt (red โ patriotic palette, US political venue)
and Opinion (violet โ distinct from Manifold's lighter violet) accents. */
.t10-predictit, .card.predictit { border-top: 3px solid #dc2626; }
.t10-predictit .plat-name, .card.predictit .plat-name { color: #dc2626; }
.sig-predictit, .sig-plat.sig-predictit { background: rgba(220, 38, 38, 0.18); color: #f87171; }
.t10-opinion, .card.opinion { border-top: 3px solid #7c3aed; }
.t10-opinion .plat-name, .card.opinion .plat-name { color: #7c3aed; }
.sig-opinion, .sig-plat.sig-opinion { background: rgba(124, 58, 237, 0.18); color: #a78bfa; }
/* Build .89.2: ProphetX (cyan โ distinct from Polymarket's teal) and
Novig (orange โ distinct from Limitless's orange-red). Both surface
the PolyRouter origin via the .plat-ph-pill class. */
.t10-prophetx, .card.prophetx { border-top: 3px solid #06b6d4; }
.t10-prophetx .plat-name, .card.prophetx .plat-name { color: #06b6d4; }
.sig-prophetx, .sig-plat.sig-prophetx { background: rgba(6, 182, 212, 0.18); color: #22d3ee; }
.t10-novig, .card.novig { border-top: 3px solid #ea580c; }
.t10-novig .plat-name, .card.novig .plat-name { color: #ea580c; }
.sig-novig, .sig-plat.sig-novig { background: rgba(234, 88, 12, 0.18); color: #fb923c; }
/* Build v.03 .31 build 163 (2026-05-23): predict.fun palette โ
lime-green (#84cc16) matches their site's accent. BNB-chain
prediction market + Polymarket conditionId-paired arb opportunities. */
.t10-predict_fun, .card.predict_fun { border-top: 3px solid #84cc16; }
.t10-predict_fun .plat-name, .card.predict_fun .plat-name { color: #84cc16; }
.sig-predict_fun, .sig-plat.sig-predict_fun { background: rgba(132, 204, 22, 0.18); color: #a3e635; }
/* Build .91 (Option B): FantasySCOTUS (deep court-robe red โ `#7c2d12`)
and Foretold (calm forecaster teal โ `#0d9488`). Both partitioned
out of MetaForecast (was `#a78bfa` violet), so we get two clearly
distinct tile identities replacing the misleading-aggregator one. */
.t10-fantasyscotus, .card.fantasyscotus { border-top: 3px solid #7c2d12; }
.t10-fantasyscotus .plat-name, .card.fantasyscotus .plat-name { color: #c2410c; }
.sig-fantasyscotus, .sig-plat.sig-fantasyscotus { background: rgba(124, 45, 18, 0.22); color: #fb923c; }
.t10-foretold, .card.foretold { border-top: 3px solid #0d9488; }
.t10-foretold .plat-name, .card.foretold .plat-name { color: #14b8a6; }
.sig-foretold, .sig-plat.sig-foretold { background: rgba(13, 148, 136, 0.18); color: var(--accent); }
/* "via Prediction Hunt" / "via PolyRouter" provenance pill โ surfaces
on tiles whose data originates from a federated aggregator API. */
.plat-ph-pill {
display: inline-block; margin-left: 6px; padding: 1px 6px;
font-size: 10px; font-weight: 600; color: #94a3b8;
background: rgba(148, 163, 184, 0.10);
border: 1px solid rgba(148, 163, 184, 0.30); border-radius: 3px;
letter-spacing: 0.04em;
}
.platform {
font-size: 12px; color: #ffffff;
letter-spacing: 0.02em; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--border);
font-weight: 800;
}
.plat-name {
font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
}
.plat-sub {
font-size: 10px; color: #ffffff; text-transform: none; letter-spacing: 0; font-weight: 600;
}
/* Build .311 (operator 2026-06-01): strip descriptive subtitles from cards/boxes.
Keep ONLY attribution notes ("powered by โฆ" / "via โฆ"), which are tagged
.plat-credit. Hides the descriptive .plat-sub lines + the four board-panel
subs + the Smart-Wallets formula subheading. Visual-only โ the markup is
retained so a subtitle can be restored by dropping the rule / adding .plat-credit. */
.plat-sub:not(.plat-credit),
.board-panel-sub,
.sw-subheading { display: none; }
/* Platform-tinted names */
.t10-poly .plat-name, .card.poly .plat-name { color: var(--accent); }
.t10-kalshi .plat-name, .card.kalshi .plat-name { color: var(--kalshi); }
.t10-manifold .plat-name, .card.manifold .plat-name { color: #a78bfa; }
.t10-sxbet .plat-name, .card.sxbet .plat-name { color: var(--sxbet); }
.t10-limitless .plat-name, .card.limitless .plat-name { color: var(--limitless); }
.top20-list { list-style: none; margin: 0; padding: 0; counter-reset: t20; }
/* Build .96.6: single-line Top-20 rows. Counter + arrows + icons +
title + meta + delta chips all on ONE textual row per event.
Title truncates with ellipsis when too long; meta stays right-
aligned and never shrinks. Mini-bar removed entirely (option
breakdown still available in the modal). Per-row height
~22px โ ~15-16px = ~30% additional vertical compression on top
of the .87.4 reduction. */
.t20-row {
counter-increment: t20;
display: flex;
align-items: baseline;
gap: 4px;
padding: 2px 6px 2px 18px;
border-bottom: 1px solid var(--border);
position: relative;
min-width: 0;
overflow: hidden;
}
.t20-row:last-child { border-bottom: none; }
.t20-row::before {
content: counter(t20); position: absolute; left: 0; top: 2px;
font-family: monospace; color: var(--muted); font-size: 9px; width: 16px; text-align: right;
}
.t20-title {
/* Build .96.10: switched anchor from `inline-block` to `inline-flex`
so its children (news/flame/closed icons, title-text span, bet-amt,
chips) lay out as flex items. The title-text span is the ONLY
flexible child (`flex: 1 1 0`); icons + chips stay at content
width and never get clipped by the ellipsis. */
display: inline-flex;
align-items: baseline;
gap: 4px;
/* Build .96.7: font 11โ13px (~2pt larger per user request) โ title
is the primary content of each row, deserves a readable size. */
font-size: 13px; font-weight: 600; color: var(--text);
line-height: 1.4;
/* Build .96.9 โ v.03: title floor raised 100px โ 180px to claim the
real estate freed up by the retired mini-bar + the tightened meta
max-width (40% โ 25%). Most card widths are 380-600px so 180px
guarantees a long substring of every title shows even on the
narrowest cards. */
flex: 1 1 180px;
min-width: 180px;
overflow: hidden;
white-space: nowrap;
}
/* Build .96.10: dedicated wrapper for the title TEXT โ gets the
text-overflow ellipsis treatment so it shrinks gracefully while
the surrounding icons + chips stay at full size. */
.t20-title-text {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Bet-amt / new-badge / country-chip โ fixed-size, never shrink.
On very tight rows the row's `overflow: hidden` clips them. */
.t20-bet-amt, .new-badge, .country-chip { flex-shrink: 0; }
.t20-title:hover { color: var(--accent); text-decoration: none; }
.t20-meta {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 11px; color: var(--muted); font-family: monospace;
line-height: 1.4;
/* Build v.03: meta capped at 25% of row width (was 40%) โ title
reclaims that space. Mini-bar is also gone in this build. Meta
gets ellipsis so it stays graceful even when squeezed. */
flex-shrink: 1;
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 25%;
}
/* Build .96.6: mini-bar removed for max compression. Per-option
breakdown still rendered in the event modal โ Top-20 rows are now
pure list-of-titles with right-aligned volume metadata. */
.mini-bar { display: none; }
/* Group pill โ let it shrink alongside the title when row is tight.
Build .96.7: capped at 35% of row width too so pill + meta together
can never eat more than ~80% of the row โ title always has space.
Build .96.9: tightened 35% โ 28% so title is guaranteed โฅ32% on
non-Manifold rows where pill is present. */
.t20-group-pill {
flex-shrink: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; max-width: 28%;
}
.new-badge {
display: inline-block; font-size: 9px; font-weight: 800;
background: #22c55e; color: #0b1020;
padding: 1px 5px; border-radius: 3px; margin: 0 6px 0 0;
letter-spacing: 0.12em; vertical-align: middle;
animation: newPulse 2.4s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
}
@keyframes newPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.65); }
50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.country-chip {
display: inline-block; font-size: 9px; font-weight: 700; background: var(--panel-2);
color: var(--muted); padding: 1px 5px; border-radius: 3px; margin-left: 4px;
font-family: monospace; vertical-align: middle;
}
/* Build v.03 (May 21): mini-bar permanently retired from Top-20 rows
per user request โ title text takes that horizontal space instead.
Per-option breakdown still rendered in the event modal when the user
clicks a row. The earlier `display: none` rule at line ~2725 was
being overridden by this block; consolidating to a single hide
rule below removes that bug. */
.mini-bar, .mini-seg { display: none !important; }
/* โโโ Whale + Jackpot โโโ */
/* Build .87: dramatic compression of the Featured Whale Bets section.
Per-row height drops ~50% (font sizes -20-30%, padding -40-50%, label
strip slimmed, gap between cards tightened) so the 2ร2 grid takes
roughly half the vertical real estate it used to. */
.whale-section { padding: 0 20px; }
.whale-cards { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 4px; }
.whale-cards-2x2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px;
}
/* Build v.03 .31 build 104: tighten the "Featured Whale Bets" heading
so it sits closer to both the top-10 grid above and the 2x2 cards
below. Only overrides .section-heading WITHIN .whale-section โ other
sections (Top 20 etc.) keep their default 18/8 margins. */
.whale-section .section-heading {
margin: 4px 20px 4px;
padding-bottom: 4px;
}
.whale-section .whale-cards-2x2 { margin-top: 2px; }
.wc-latest .fw-label { background: var(--accent); color: #0b1020; }
.manifold-whale.wc-biggest .fw-label { background: #a78bfa; color: #0b1020; }
.manifold-whale.wc-latest .fw-label { background: #c4b5fd; color: #0b1020; }
.manifold-whale .fw-amount { color: #a78bfa; }
.featured-whale {
background: linear-gradient(90deg, #1a0b2e 0%, #141b33 100%);
border: 1px solid var(--border); border-radius: 6px;
display: flex; align-items: center; gap: 8px; padding: 0;
}
.fw-label {
background: var(--whale); color: #0b1020; font-weight: 700; padding: 6px 6px;
font-size: 9px; letter-spacing: 0.10em; white-space: nowrap; align-self: stretch;
display: flex; align-items: center; border-radius: 6px 0 0 6px;
writing-mode: vertical-rl; transform: rotate(180deg); /* vertical label strip โ saves horizontal width */
text-align: center;
}
.fw-body { flex: 1; padding: 4px 8px; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-items: center; }
.fw-amount { grid-row: span 4; font-family: monospace; font-size: 20px; font-weight: 700; color: var(--whale); line-height: 1.1; }
.fw-bet { font-size: 11px; line-height: 1.3; }
.fw-event { font-size: 10px; color: var(--muted); line-height: 1.2; }
.fw-event a { color: var(--text); }
.fw-meta { font-size: 9px; color: var(--muted); font-family: monospace; line-height: 1.2; }
.fw-empty { padding: 8px; color: var(--muted); font-style: italic; font-size: 11px; }
/* Multi-item LATEST whale card */
.fw-multi-card { align-items: stretch; }
.fw-multi-card .fw-label { border-radius: 6px 0 0 6px; }
.fw-multi-list {
flex: 1; list-style: none; margin: 0; padding: 3px 6px;
display: flex; flex-direction: column; gap: 1px;
max-height: none; overflow-y: visible;
}
.wc-biggest-list .fw-multi-list { max-height: none; }
.fw-multi-empty { color: var(--muted); font-style: italic; padding: 6px; font-size: 10px; }
.fw-mi { border-bottom: 1px dashed rgba(255,255,255,0.05); }
.fw-mi:last-child { border-bottom: none; }
.fw-mi-link {
display: grid; gap: 1px 6px; padding: 2px 3px;
grid-template-columns: auto auto 1fr auto;
grid-template-areas: "amt side q odds" "evt evt evt evt" "meta meta meta meta";
color: var(--text); font-size: 10px; line-height: 1.2;
}
.fw-mi-link:hover { background: var(--panel-2); text-decoration: none; }
.fw-mi-amt { grid-area: amt; font-family: monospace; font-weight: 700; color: var(--whale); white-space: nowrap; font-size: 11px; }
.manifold-whale .fw-mi-amt { color: #a78bfa; }
.fw-mi-side { grid-area: side; padding: 0 4px; border-radius: 2px; font-size: 8px; font-weight: 700; align-self: center; line-height: 1.4; }
.fw-mi-q { grid-area: q; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 10px; }
.fw-mi-evt { grid-area: evt; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-mi-meta { grid-area: meta; color: var(--muted); font-family: monospace; font-size: 8px; }
.fw-mi-link .odds-chip { grid-area: odds; align-self: center; margin-left: 0; font-size: 9px; padding: 0 4px; }
.whale-side { margin-right: 6px; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.side-buy { background: #064e3b; color: #6ee7b7; }
.side-sell { background: #7f1d1d; color: #fca5a5; }
.whale-user { color: var(--accent); }
/* Build .74.2: "AKA " โ small subscript next to primary name.
Used when Polymarket trade payload has both `name` (user-chosen) and
`pseudonym` (auto-generated). Subtle so it doesn't compete with the
real handle but legible enough to convey identity ambiguity. */
.fw-aka {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
font-size: 9px;
font-weight: 500;
color: var(--muted);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 3px;
letter-spacing: 0.02em;
vertical-align: middle;
}
.wm-aka {
display: inline-block;
margin-left: 10px;
padding: 2px 7px;
font-size: 11px;
font-weight: 500;
color: var(--muted);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
letter-spacing: 0.02em;
vertical-align: middle;
text-transform: none;
}
.jackpot-card {
background: linear-gradient(90deg, #3a2a0a 0%, #141b33 100%);
border: 1px solid var(--border); border-radius: 8px;
display: flex; align-items: center; gap: 12px; padding: 0;
}
.jp-label {
background: var(--jackpot); color: #0b1020; font-weight: 800; padding: 18px 12px;
font-size: 12px; letter-spacing: 0.14em; white-space: nowrap; align-self: stretch;
display: flex; align-items: center; writing-mode: vertical-rl; text-orientation: mixed;
border-radius: 8px 0 0 8px;
}
.jp-body { flex: 1; padding: 12px 14px; }
.jp-amount { font-family: monospace; font-size: 24px; font-weight: 700; color: var(--jackpot); }
.jp-bet { font-size: 13px; margin-top: 4px; }
.jp-event { font-size: 12px; color: var(--muted); margin-top: 4px; }
.jp-event a { color: var(--text); }
.jp-meta { font-size: 10px; color: var(--muted); font-family: monospace; margin-top: 6px; line-height: 1.4; }
.jp-empty { padding: 14px; color: var(--muted); font-style: italic; font-size: 12px; }
.odds-chip {
display: inline-block; background: var(--panel-2); color: var(--jackpot);
padding: 1px 6px; border-radius: 3px; font-family: monospace; font-size: 11px;
font-weight: 600; margin-left: 4px;
}
/* Outcome chip โ names the side that the displayed YES price refers to
in event-modal market rows. Shown only when the outcome name is
informative (e.g. 'TheMongolz', 'Max Verstappen'), hidden when it's
just 'Yes' to avoid redundancy with the column header. */
.outcome-chip {
display: inline-block;
background: rgba(45,212,191,0.12); color: var(--accent);
border: 1px solid rgba(45,212,191,0.30);
padding: 1px 6px; border-radius: 3px;
font-size: 11px; font-weight: 500;
margin-left: 4px; vertical-align: baseline;
}
/* โโโ Build .260: Risers + Coldest merged into ONE horizontal box โโโโโโ
Single card with 2-column inner grid (mirrors PHQ pattern).
Old .rp-* / .risers-plungers / .rp-grid / .rp-col / .rp-head / .rp-table
rules removed below โ replaced by .movers-merged-* + .mvm-* namespace
to avoid the .sig-row / .sig-link specificity collisions we hit in
.258 with the liq-card. .pct-up / .pct-down semantic colors kept. */
.movers-merged-section { padding: 16px 20px 0; }
.movers-merged-card {
border-top: 3px solid var(--success); /* green = "movers" accent */
padding: 12px 16px 14px;
}
.movers-merged-card h3 { margin: 0 0 10px; }
.movers-merged-name { color: var(--success); font-weight: 800; }
.movers-merged-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 28px;
}
.movers-col-head {
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
margin: 0 0 6px; padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.movers-col-head-risers { color: var(--success); }
.movers-col-head-coldest { color: #93c5fd; }
.movers-flat-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 1px;
}
.mvm-row {
cursor: pointer;
list-style: none;
}
.mvm-row:hover { background: rgba(74, 222, 128, 0.05); }
.mvm-link {
display: flex; flex-direction: row; align-items: baseline;
gap: 6px; padding: 4px 8px;
text-decoration: none; color: var(--text);
border-left: 2px solid transparent; border-radius: 4px;
transition: background-color 0.12s ease, border-color 0.12s ease;
font-size: 12px;
}
.mvm-link:hover {
text-decoration: none;
border-left-color: var(--success);
background: rgba(74, 222, 128, 0.06);
}
.mvm-meta {
flex-shrink: 0; display: flex; align-items: center; gap: 4px;
font-size: 10px; color: var(--muted);
}
.mvm-meta .plat-chip-logo { width: 12px; height: 12px; flex-shrink: 0; }
.mvm-meta .sig-plat {
padding: 1px 5px; font-size: 9px; font-weight: 600;
letter-spacing: 0.04em; flex-shrink: 0;
}
.mvm-title {
flex: 1 1 0; min-width: 0;
font-size: 12px; line-height: 1.3; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvm-delta {
flex-shrink: 0;
font-family: monospace; font-weight: 700; font-size: 11px;
font-variant-numeric: tabular-nums;
}
.mvm-empty {
list-style: none; padding: 8px 6px;
color: var(--muted); font-size: 11px; font-style: italic;
}
/* โโโ Jackpot + Daily Volume row โโโ */
.jackpot-volume-row { padding: 16px 20px; }
.jv-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: stretch; }
.jp-card-block { min-height: 180px; }
.dv-chart { min-height: 180px; }
/* โโโ Manifold Top 20 row tweaks โโโ */
/* Build .96.6: override the prior grid layout โ Manifold rows now use
the same single-line flex layout as every other Top-20 platform.
Profile image inline as a small (14px) flex child, counter
absolutely-positioned (same as default rows), title + meta inline. */
.t20-row-manifold {
display: flex;
align-items: baseline;
gap: 4px;
padding: 2px 6px 2px 18px;
position: relative;
grid-template-columns: none;
}
.t20-row-manifold::before {
position: absolute; left: 0; top: 2px;
display: inline;
grid-column: auto; grid-row: auto;
font-family: monospace; color: var(--muted); font-size: 9px;
width: 16px; text-align: right;
}
.t20-row-manifold .t20-icon {
grid-column: auto; grid-row: auto;
}
.t20-row-manifold .t20-title,
.t20-row-manifold .t20-meta {
grid-column: auto; grid-row: auto;
padding-left: 0;
}
.t20-icon {
/* Build .96.6: image shrunk 20โ14 to match inline-flex baseline
height with the other icons. Was 20ร20 spanning 2 grid rows. */
width: 14px; height: 14px; object-fit: cover; border-radius: 2px;
flex-shrink: 0;
grid-row: auto;
}
.t20-bet-inline { color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Build .260: .rp-col / .rp-head / .rp-table / .plungers-table rules
removed (replaced by .movers-merged-* + .mvm-* above). Semantic
delta-percent colors kept โ referenced by .mvm-delta. */
.pct-up { color: var(--success); }
.pct-down { color: var(--danger); }
/* โโโ Daily volume โโโ */
.daily-volume { padding: 0 20px 20px; }
.daily-volume .chart-box { min-height: 280px; }
/* โโโ Coldest events โโโ */
.coldest-events { padding: 0 20px 20px; }
.coldest-events h2 { color: var(--danger); }
.coldest-events .rank { color: var(--muted); font-family: monospace; width: 24px; }
/* โโโ Status badges / bet indicators โโโ */
.status-badge {
display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
letter-spacing: 0.08em; margin-left: 6px; font-family: monospace;
}
.status-payable { background: rgba(74,222,128,0.2); color: var(--success); }
.status-eliminated { background: rgba(239,68,68,0.2); color: var(--danger); }
/* โโโ CLOB-derived chips (live mid, spread, price delta) โโโ */
.delta-chip {
display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
font-family: monospace; margin-left: 4px; vertical-align: middle;
}
.delta-up { background: rgba(74,222,128,0.18); color: var(--success); }
.delta-down { background: rgba(239,68,68,0.18); color: var(--danger); }
/* โโโ Foretold aggregate + resolution chips (Build v.03 .31 build 103) โโโ */
/* Forecaster venue has no $ volume; we display Foretold's
`previousAggregate` (community consensus) + `outcome` (resolution)
in the t20-meta slot instead. */
.ft-agg {
display: inline-block;
font-size: 10px; font-weight: 600; color: var(--text);
font-family: monospace; padding: 1px 5px; border-radius: 3px;
background: rgba(148,163,184,0.12);
}
.ft-out {
display: inline-block;
font-size: 10px; font-weight: 700;
font-family: monospace; padding: 1px 5px; border-radius: 3px;
color: #94a3b8; background: rgba(148,163,184,0.14);
}
.ft-out.ft-out-yes {
color: var(--success); background: rgba(74,222,128,0.16);
}
.ft-out.ft-out-no {
color: var(--danger); background: rgba(239,68,68,0.16);
}
/* โโโ Wallet comprehensive stats panel (Build v.03 .31 build 126) โโโ */
.wallet-stats-panel {
padding: 0 20px; margin: 18px 0 24px;
}
.ws-row { display: grid; gap: 12px; margin-bottom: 12px; }
.ws-row-2col { grid-template-columns: 1fr 1fr; }
.ws-row-3col { grid-template-columns: 1fr 1fr 1fr; }
.ws-row-1col { grid-template-columns: 1fr; }
.ws-block {
background: var(--card, #11151c);
border: 1px solid var(--border, #1f2530);
border-radius: 8px;
padding: 12px 14px;
}
.ws-block.ws-settled { border-left: 3px solid #60a5fa; }
.ws-block.ws-open { border-left: 3px solid var(--accent); }
.ws-block.ws-streaks { border-left: 3px solid #fbbf24; }
.ws-block.ws-activity { border-left: 3px solid #a78bfa; }
.ws-block.ws-recent { border-left: 3px solid #f472b6; }
.ws-block.ws-sizing { border-left: 3px solid #94a3b8; }
.ws-hdr {
font-size: 13px; font-weight: 700; color: #e6e8ee;
margin-bottom: 10px;
}
.ws-hdr-sub {
font-size: 11px; font-weight: 500;
color: var(--muted, #8b94a8); font-style: italic;
margin-left: 6px;
}
.ws-figures {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
}
.ws-fig { text-align: center; padding: 4px; }
.ws-fig-num {
font-size: 20px; font-weight: 800; font-family: monospace;
color: #e6e8ee; line-height: 1.2;
}
.ws-fig-num.ws-fig-date { font-size: 14px; }
.ws-fig-lbl {
font-size: 10px; color: var(--muted, #8b94a8);
text-transform: uppercase; letter-spacing: 0.04em;
margin-top: 2px;
}
.ws-pos { color: var(--success, #4ade80); }
.ws-neg { color: var(--danger, #f87171); }
.ws-sub {
margin-top: 8px;
display: flex; flex-wrap: wrap; gap: 6px;
}
.ws-chip {
display: inline-block; padding: 2px 8px;
background: rgba(148,163,184,0.10);
border-radius: 12px; font-size: 11px;
color: var(--text); font-family: monospace;
}
.ws-chip.ws-chip-pos {
background: rgba(74,222,128,0.14); color: var(--success, #4ade80);
}
.ws-chip.ws-chip-neg {
background: rgba(239,68,68,0.14); color: var(--danger, #f87171);
}
.ws-empty {
font-size: 12px; color: var(--muted, #8b94a8);
font-style: italic; padding: 8px 0;
}
@media (max-width: 1000px) {
.ws-row-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.ws-row-2col, .ws-row-3col { grid-template-columns: 1fr; }
}
/* โโโ Wallet Smart Score (Build v.03 .31 build 108) โโโ */
/* Composite 0-10 quality metric: ROI ร win-rate ร log(trades) ร log(|PnL|)
ร recency. Section + per-row card for the "Smartest Wallets" leaderboard,
plus inline chips for the Smart-Money Feed. */
.smartest-wallets-section { padding: 0 20px; margin-bottom: 18px; }
.smartest-wallets-section .section-heading {
margin: 4px 0 6px; padding-bottom: 4px;
}
.smartest-wallets-card {
background: var(--card, #11151c);
border: 1px solid var(--border, #1f2530);
border-radius: 8px;
padding: 10px 14px;
}
.sw-subheading {
font-size: 11px; color: var(--muted, #8b94a8);
margin-bottom: 6px; font-style: italic;
cursor: help;
}
.sw-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 2px;
}
.sw-row {
display: grid;
grid-template-columns: 28px 60px minmax(140px, 1fr) auto auto auto auto;
gap: 8px;
align-items: center;
padding: 4px 6px;
border-radius: 4px;
font-size: 12px;
font-family: monospace;
}
.sw-row:hover { background: rgba(96,165,250,0.06); }
.sw-row.sw-elite { border-left: 3px solid #fbbf24; }
.sw-row.sw-strong { border-left: 3px solid var(--success); }
.sw-row.sw-mid { border-left: 3px solid #60a5fa; }
.sw-row.sw-weak { border-left: 3px solid #64748b; }
.sw-rank {
color: var(--muted, #8b94a8); font-weight: 700; text-align: right;
}
.sw-score-chip {
display: inline-block; font-weight: 800; padding: 2px 7px;
border-radius: 4px; font-family: monospace;
text-align: center;
}
.sw-score-chip.sw-score-sw-elite {
background: rgba(251,191,36,0.18); color: #fbbf24;
box-shadow: 0 0 6px rgba(251,191,36,0.25);
}
.sw-score-chip.sw-score-sw-strong { background: rgba(74,222,128,0.16); color: var(--success); }
.sw-score-chip.sw-score-sw-mid { background: rgba(96,165,250,0.16); color: #60a5fa; }
.sw-score-chip.sw-score-sw-weak { background: rgba(100,116,139,0.18); color: #94a3b8; }
.sw-wallet {
color: #e6e8ee; text-decoration: none; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-wallet:hover { color: #60a5fa; text-decoration: underline; }
.sw-stat {
display: inline-flex; gap: 3px; align-items: baseline;
padding: 1px 6px; border-radius: 3px;
background: rgba(148,163,184,0.08);
white-space: nowrap;
}
.sw-stat-lbl { color: var(--muted, #8b94a8); font-size: 10px; font-weight: 500; }
.sw-pos { color: var(--success, #4ade80); }
.sw-neg { color: var(--danger, #f87171); }
/* Inline Smart-Score chip used in Smart-Money Feed rows */
.smart-score-chip {
display: inline-flex; align-items: center;
font-weight: 800; padding: 1px 6px; border-radius: 3px;
font-family: monospace; font-size: 10px;
margin-right: 3px;
}
.smart-score-chip.ss-elite {
background: rgba(251,191,36,0.18); color: #fbbf24;
}
.smart-score-chip.ss-strong { background: rgba(74,222,128,0.16); color: var(--success); }
.smart-score-chip.ss-mid { background: rgba(96,165,250,0.16); color: #60a5fa; }
.smart-score-chip.ss-weak { background: rgba(100,116,139,0.18); color: #94a3b8; }
@media (max-width: 900px) {
.sw-row {
grid-template-columns: 24px 56px 1fr auto;
grid-template-rows: auto auto;
gap: 4px 6px;
}
.sw-row > .sw-roi { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.sw-row > .sw-win,
.sw-row > .sw-trades,
.sw-row > .sw-pnl { grid-row: 2; }
}
/* โโโ Foretold rich data panel (Build v.03 .31 build 110) โโโ */
/* Per-event modal rendering of Foretold's full "Aggregate and resolution"
view โ markdown question description, channel + creator badges,
expected/actual resolution timestamps, CDF percentiles. */
.ft-rich-block {
margin: 12px 0 16px;
padding: 10px 14px;
background: rgba(96,165,250,0.04);
border-left: 3px solid #60a5fa;
border-radius: 6px;
}
.ft-rich-sub {
font-size: 11px; font-weight: 500; color: var(--muted, #8b94a8);
margin-left: 8px; font-style: italic;
}
.ft-meta-strip {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 12px; font-size: 11px;
}
.ft-chip {
display: inline-block; padding: 2px 8px;
background: rgba(148,163,184,0.12); color: var(--text);
border-radius: 12px; font-family: monospace;
white-space: nowrap;
}
.ft-state-badge {
display: inline-block; padding: 2px 8px;
font-weight: 700; border-radius: 12px;
font-family: monospace; font-size: 11px;
}
.ft-state-badge.ft-state-judged {
background: rgba(74,222,128,0.18); color: var(--success, #4ade80);
}
.ft-state-badge.ft-state-open {
background: rgba(96,165,250,0.18); color: #60a5fa;
}
.ft-state-badge.ft-state-closed {
background: rgba(251,191,36,0.16); color: #fbbf24;
}
.ft-ar-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ft-ar-col {
padding: 10px 12px; border-radius: 5px;
background: rgba(11,16,32,0.6);
}
.ft-ar-col.ft-ar-empty { opacity: 0.6; }
.ft-ar-col.ft-ar-out-resolved {
background: rgba(74,222,128,0.06);
border: 1px solid rgba(74,222,128,0.18);
}
.ft-ar-hdr {
font-size: 11px; font-weight: 700; color: var(--muted, #8b94a8);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 6px;
}
.ft-ar-sub {
font-size: 10px; font-weight: 500; text-transform: none;
letter-spacing: 0; color: var(--muted, #8b94a8);
font-style: italic;
}
.ft-ar-value {
font-size: 22px; font-weight: 800; font-family: monospace;
color: #e6e8ee; margin-bottom: 6px;
}
.ft-ar-col.ft-ar-out-resolved .ft-ar-value { color: var(--success, #4ade80); }
.ft-ar-meta {
font-size: 11px; color: var(--muted, #8b94a8);
font-family: monospace; margin-top: 2px;
}
.ft-ar-meta .ft-k {
color: #64748b; font-size: 10px;
text-transform: uppercase; letter-spacing: 0.04em;
margin-right: 4px;
}
.ft-pctl {
font-size: 11px; color: var(--text); font-family: monospace;
margin-bottom: 4px;
}
.ft-ar-desc {
font-size: 11px; color: var(--text); line-height: 1.4;
margin-top: 8px; padding-top: 6px;
border-top: 1px solid rgba(148,163,184,0.15);
}
.ft-desc-details {
margin-top: 10px; padding: 8px 10px;
background: rgba(11,16,32,0.5);
border-radius: 5px;
}
.ft-desc-details summary {
cursor: pointer; font-size: 12px; font-weight: 600;
color: var(--muted, #8b94a8);
}
.ft-desc-details[open] summary { margin-bottom: 8px; }
.ft-desc-sub { font-weight: 500; font-style: italic; }
.ft-desc-body {
font-size: 12px; color: var(--text);
white-space: pre-wrap; line-height: 1.5;
font-family: inherit;
}
@media (max-width: 700px) {
.ft-ar-grid { grid-template-columns: 1fr; }
}
/* โโโ FantasySCOTUS Yes/No odds chips (Build v.03 .31 build 106) โโโ */
/* SCOTUS-affirm questions are always binary; show both side odds since
leader-only hides how close the vote split is. */
.fs-yes {
display: inline-block;
font-size: 10px; font-weight: 700; color: var(--success);
font-family: monospace; padding: 1px 5px; border-radius: 3px;
background: rgba(74,222,128,0.16);
}
.fs-no {
display: inline-block;
font-size: 10px; font-weight: 700; color: var(--danger);
font-family: monospace; padding: 1px 5px; border-radius: 3px;
background: rgba(239,68,68,0.16);
}
/* โโโ Top-20 rank-change indicators (prominent, leftmost on each row) โโโ */
.t20-row { position: relative; }
.t20-row::after {
content: ''; display: inline-block;
position: absolute; left: 4px; top: 11px;
width: 14px; height: 14px;
font-size: 14px; line-height: 1; font-weight: 800;
text-align: center;
}
.t20-row.t20-rc-up::after { content: 'โฒ'; color: var(--success);
text-shadow: 0 0 4px rgba(74,222,128,0.6); }
.t20-row.t20-rc-down::after { content: 'โผ'; color: var(--danger);
text-shadow: 0 0 4px rgba(239,68,68,0.6); }
.t20-row.t20-rc-same::after { content: 'โ'; color: #fbbf24;
font-size: 10px; top: 14px; }
.t20-row.t20-rc-new::after { content: 'โ '; color: #22c55e;
font-size: 13px; top: 12px;
text-shadow: 0 0 6px rgba(34,197,94,0.7); }
/* Slightly indent every t20-row to make space for the arrow icon */
.t20-row { padding-left: 24px; }
/* โโโ ๐ฅ Flame badge (big bets / 2x volume movers) โโโ */
.flame-badge {
display: inline-block;
font-size: 18px; line-height: 1; /* was 13px โ bumped per UX request */
margin-right: 5px;
filter: drop-shadow(0 0 4px rgba(251,113,133,0.85));
animation: flameFlicker 1.6s ease-in-out infinite;
vertical-align: middle;
}
@keyframes flameFlicker {
0%, 100% { filter: drop-shadow(0 0 4px rgba(251,113,133,0.85)); }
50% { filter: drop-shadow(0 0 9px rgba(251,191,36,1.0)); }
}
/* Row background brightening when an event has a ๐ฅ flame (big leader
bet or 24h-volume doubling). Applied via .t10-row-flame / .t20-row-flame
classes set server-side in the template โ keeps lookups simple and
works in every browser (no :has() dependency). */
.t10-row.t10-row-flame,
.t20-row.t20-row-flame {
background: linear-gradient(
90deg,
rgba(251, 191, 36, 0.13) 0%,
rgba(251, 113, 133, 0.09) 50%,
rgba(251, 191, 36, 0.05) 100%
);
border-left: 2px solid rgba(251, 113, 133, 0.55);
box-shadow: inset 0 0 18px rgba(251, 113, 133, 0.05);
}
.t10-row.t10-row-flame:hover,
.t20-row.t20-row-flame:hover {
background: linear-gradient(
90deg,
rgba(251, 191, 36, 0.20) 0%,
rgba(251, 113, 133, 0.14) 50%,
rgba(251, 191, 36, 0.09) 100%
);
}
.delta-flat { background: var(--panel-2); color: var(--muted); }
.delta-na { color: var(--muted); font-family: monospace; font-size: 11px; }
.spread-chip {
display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px;
font-family: monospace; margin-left: 4px; vertical-align: middle;
background: var(--panel-2); color: var(--muted);
}
.opt-spread, .opt-delta { font-family: monospace; font-size: 11px; white-space: nowrap; }
/* โโโ Tables (legacy) โโโ */
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; }
.empty { padding: 20px; color: var(--muted); font-style: italic; text-align: center; }
code { background: var(--panel-2); padding: 2px 6px; border-radius: 3px; font-family: monospace; }
/* โโโ Footer โโโ */
footer {
display: flex; justify-content: space-between; align-items: center;
color: var(--muted); font-size: 11px; padding: 14px 20px;
border-top: 1px solid var(--border);
}
.data-credit { color: var(--muted); letter-spacing: 0.03em; line-height: 1.55; text-align: left; }
.data-credit strong { color: var(--text); font-weight: 700; margin-right: 4px; }
.data-credit-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--border); }
.data-credit-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.data-credit-sep { display: inline-block; margin: 0 8px; color: rgba(148, 163, 184, 0.45); }
/* Build .94.1: each footer credit category renders as its own
left-aligned block-level line (instead of the prior inline single-
paragraph with `ยท` separators). Four lines total:
1. Prediction markets: ...
2. News sources: ...
3. Aggregators & APIs: ...
4. ยท
Small vertical gap between lines for breathing room. */
.data-credit-line {
display: block;
text-align: left;
margin-bottom: 4px;
}
.data-credit-line:last-child { margin-bottom: 0; }
/* Build v0.4 20260526.230: header line ("Powered by:") sits as a small
section anchor above the three credit lines. Slightly larger + a
bit of bottom margin so the eye reads it as a heading rather than
another data line. */
.data-credit-header {
font-size: 14px;
margin-bottom: 6px;
color: var(--text);
letter-spacing: 0.02em;
}
.data-credit-header strong { font-weight: 800; }
/* The fourth line (version + contact) sits visually a touch lower-key
than the source-credit lines โ same muted family but a bit smaller. */
.data-credit-meta {
margin-top: 6px;
font-size: 11px;
}
.data-credit-meta .version-tag,
.data-credit-meta .footer-contact {
display: inline;
margin-top: 0;
}
.version-tag {
display: inline-block; margin-top: 4px;
font-size: 10px; color: var(--muted); opacity: 0.6;
font-family: monospace; letter-spacing: 0.05em;
}
.footer-meta { font-family: monospace; }
/* Build .315: consolidated footer stripe under the PredictHQ box. It's a