:root {
  --bg: #0d1117; --panel: #161b22; --line: #30363d; --text: #e6edf3; --dim: #8b949e; --faint: #6e7681;
  --g0: #161b22; --g1: #0e4429; --g2: #0e4429; --g3: #006d32; --g4: #006d32; --g5: #26a641; --g6: #26a641; --g7: #39d353; --g8: #39d353; --g9: #7ee787;
  --accent: #39d353; --gold: #f2cc60; --red: #f85149; --blue: #58a6ff;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, calc(50vw - 600px)); background: rgba(13,17,23,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 8px; color: var(--text); font: 800 18px var(--mono); letter-spacing: .02em; }
.logo svg { width: 22px; height: 22px; fill: var(--accent); }
.logo:hover { text-decoration: none; }
.bar nav { display: flex; gap: 16px; margin-right: auto; }
.bar nav a { color: var(--dim); font-size: 14px; }
.bar nav a:hover { color: var(--text); text-decoration: none; }
.pill { font: 600 11px var(--mono); letter-spacing: .06em; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--gold); white-space: nowrap; }
.pill.live { color: var(--accent); border-color: #238636; }
.mute { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 6px; width: 30px; height: 28px; }
.mute.off { text-decoration: line-through; opacity: .6; }

main { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; padding: 48px 0 28px; }
.kicker { margin: 0 0 10px; font: 500 12px var(--mono); color: var(--dim); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(57,211,83,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(57,211,83,.55); } 70% { box-shadow: 0 0 0 9px rgba(57,211,83,0); } 100% { box-shadow: 0 0 0 0 rgba(57,211,83,0); } }
h1 { margin: 0; font: 800 clamp(34px, 5.4vw, 64px)/1.02 var(--sans); letter-spacing: -.03em; }
.counter { margin: 18px 0 6px; font: 800 clamp(44px, 8vw, 96px)/1 var(--mono); color: var(--accent); letter-spacing: -.04em; text-shadow: 0 0 40px rgba(57,211,83,.25); font-variant-numeric: tabular-nums; }
.counter small { font-size: .32em; margin-left: .3em; color: var(--dim); letter-spacing: 0; }
.counter.bump { animation: bump .6s ease-out; }
@keyframes bump { 0% { color: #fff; transform: scale(1.03); } 100% { color: var(--accent); transform: scale(1); } }
.sub { margin: 8px 0 22px; color: var(--dim); max-width: 600px; }
.sub b { color: var(--text); }
.search { display: flex; align-items: center; max-width: 520px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88,166,255,.2); }
.search .at { padding-left: 14px; color: var(--faint); font: 15px var(--mono); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 600 16px var(--mono); padding: 13px 4px; }
.search button { border: 0; background: #238636; color: #fff; font-weight: 600; padding: 13px 20px; }
.search button:hover { background: #2ea043; }
.hint { margin: 10px 0 0; font-size: 13px; color: var(--faint); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stats div { background: var(--panel); padding: 16px; }
.stats b { display: block; font: 700 24px var(--mono); font-variant-numeric: tabular-nums; }
.stats span { color: var(--dim); font-size: 12.5px; }
.stats i { font-style: normal; color: var(--text); }

.wallwrap { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 14px 16px 16px; }
.wallhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wallhead h2 { margin: 0; font: 600 14px var(--sans); color: var(--dim); }
.legend { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend .l1 { background: var(--g1); } .legend .l3 { background: var(--g3); } .legend .l5 { background: var(--g5); } .legend .l7 { background: var(--g7); } .legend .l9 { background: var(--g9); }
#wall { display: block; width: 100%; cursor: crosshair; }
.tip { position: absolute; pointer-events: none; background: #1f2630; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font: 12px var(--mono); white-space: nowrap; z-index: 5; }

.feed { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; overflow: hidden; background: var(--panel); }
.feedlabel { font: 700 11px var(--mono); color: var(--red); letter-spacing: .1em; }
.ticker { display: flex; gap: 28px; white-space: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); font: 13px var(--mono); color: var(--dim); }
.ticker span b { color: var(--text); }
.ticker .claim b.amt { color: var(--gold); }
.ticker .arrive b.amt { color: var(--accent); }
.ticker .fresh { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { color: #fff; } 100% { } }

.check { margin-top: 28px; }
.card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: linear-gradient(135deg, #161b22, #0f1d14); }
.card img { width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--line); }
.card h3 { margin: 0; font: 800 22px var(--sans); }
.card .who { color: var(--dim); font-size: 13.5px; }
.card .big { font: 800 40px/1.1 var(--mono); color: var(--accent); margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.card .big.zero { color: var(--dim); }
.card .facts { color: var(--dim); font-size: 13.5px; }
.card .facts b { color: var(--text); }
.card .act { display: flex; flex-direction: column; gap: 8px; }
.card .act a, .card .act button { text-align: center; border: 1px solid var(--line); background: #21262d; color: var(--text); border-radius: 6px; padding: 8px 14px; font-size: 14px; }
.card .act a.x { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.card .act a:hover, .card .act button:hover { text-decoration: none; filter: brightness(1.15); }
.card.miss { grid-template-columns: 1fr; }
.badge { display: inline-block; font: 600 10.5px var(--mono); letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--dim); vertical-align: middle; margin-left: 6px; }
.badge.never { color: var(--gold); border-color: #6e5b1f; }
.badge.org { color: var(--blue); border-color: #1f4a7a; }
.badge.claimed { color: var(--accent); border-color: #238636; }

.list { margin-top: 36px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim); padding: 10px 14px; font-weight: 600; white-space: nowrap; }
.tabs button.on { color: var(--text); border-bottom-color: #f78166; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 44px 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid #21262d; cursor: pointer; }
.rows li:hover { background: #161b22; }
.rows .rk { font: 600 13px var(--mono); color: var(--faint); text-align: right; }
.rows img { width: 36px; height: 36px; border-radius: 50%; background: #21262d; }
.rows .nm b { font-weight: 600; }
.rows .nm span { display: block; color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.rows .v { text-align: right; font: 700 15px var(--mono); font-variant-numeric: tabular-nums; }
.rows .v span { display: block; font: 400 12px var(--mono); color: var(--faint); }
.rows .v.g { color: var(--accent); } .rows .v.y { color: var(--gold); }
.more { display: block; margin: 14px auto 0; background: #21262d; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 18px; }

.claim, .coin { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 28px; }
.claim h2, .coin h2 { margin: 0 0 14px; font: 800 24px var(--sans); }
.steps { margin: 0; padding-left: 20px; color: var(--dim); }
.steps li { margin-bottom: 8px; }
.steps b { color: var(--text); }
.warn { border: 1px solid #6e2b2b; background: #1d1012; border-radius: 8px; padding: 12px 14px; color: #ffb3ad; }
.warn b { color: #ffd8d4; }
.fine { color: var(--faint); font-size: 13px; }
.coin p { color: var(--dim); max-width: 760px; }
.ca { font: 600 14px var(--mono); border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px; color: var(--dim); word-break: break-all; }
footer { max-width: 1200px; margin: 50px auto 0; padding: 22px 16px 40px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #1f2630; border: 1px solid #6e5b1f; color: var(--text); padding: 12px 16px; border-radius: 10px; font: 14px var(--sans); z-index: 20; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: rise .4s ease-out; max-width: calc(100vw - 32px); }
.toast b { color: var(--gold); }
@keyframes rise { from { transform: translate(-50%, 20px); opacity: 0; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; }
  .bar nav { display: none; }
  .bar .pill { margin-left: auto; font-size: 10px; }
  .card { grid-template-columns: auto 1fr; }
  .card .act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .rows li { grid-template-columns: 30px 32px 1fr auto; gap: 8px; }
  .rows img { width: 30px; height: 30px; }
  .rows .nm span { max-width: 46vw; }
}

/* ---- the spotlight: the show ---- */
.hero { align-items: stretch; }
.spot { position: relative; border: 1px solid #238636; border-radius: 14px; padding: 18px 20px 22px; background: radial-gradient(120% 90% at 100% 0%, rgba(57,211,83,.14), transparent 60%), var(--panel); overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 340px; }
.spot.enter > * { animation: spotin .5s ease-out both; }
.spot.enter > *:nth-child(2) { animation-delay: .05s; } .spot.enter > *:nth-child(3) { animation-delay: .1s; } .spot.enter > *:nth-child(4) { animation-delay: .15s; } .spot.enter > *:nth-child(5) { animation-delay: .2s; }
@keyframes spotin { from { opacity: 0; transform: translateY(8px); } }
.spot.ringing { animation: shake .55s; border-color: var(--gold); }
@keyframes shake { 10%, 50%, 90% { transform: translateX(-4px) rotate(-.4deg); } 30%, 70% { transform: translateX(4px) rotate(.4deg); } }
.spot-h { display: flex; align-items: center; gap: 8px; font: 700 12px var(--mono); letter-spacing: .12em; color: var(--accent); }
.spot-n { margin-left: auto; color: var(--faint); letter-spacing: 0; font-weight: 500; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.spot-body { display: flex; align-items: center; gap: 14px; }
.spot-body img { width: 84px; height: 84px; border-radius: 50%; border: 2px solid #238636; background: #21262d; flex: none; }
.spot-who h3 { margin: 0; font: 800 26px/1.15 var(--sans); word-break: break-all; }
.spot-who p { margin: 2px 0 0; color: var(--dim); font-size: 13.5px; }
.spot-amt { font: 800 clamp(38px, 5vw, 58px)/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; margin-top: 6px; }
.spot-amt span { font-size: .38em; color: var(--dim); margin-left: 6px; }
.spot-line { margin: 0; color: var(--dim); font-size: 14px; }
.spot-line b { color: var(--text); }
.spot-line .never { color: var(--gold); }
.spot-ring { margin-top: auto; font: 600 13px var(--mono); color: var(--text); background: #0f1d14; border: 1px dashed #238636; border-radius: 8px; padding: 8px 10px; }
.spot.ringing .spot-ring { border-color: var(--gold); color: var(--gold); }
.spot-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #21262d; }
.spot-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.statrow { margin-bottom: 16px; }
.statrow .stats { grid-template-columns: repeat(4, 1fr); }
.ticker .ring b { color: var(--gold); }
.ticker .sell { opacity: .7; }
.rows li.empty { cursor: default; }

/* ?stream=1: one screen for pump.fun "Go live" / a shared tab */
body.stream .bar nav, body.stream .hint, body.stream #check, body.stream .list, body.stream .claim, body.stream footer, body.stream .search { display: none !important; }
body.stream .coin { margin-top: 16px; padding-top: 14px; }
body.stream .hero { padding-top: 20px; }

@media (max-width: 860px) {
  .statrow .stats { grid-template-columns: 1fr 1fr; }
  .spot { min-height: 0; }
}

.spot[hidden], .check[hidden] { display: none !important; }

.legend .l0 { background: #21262d; } .legend .lc { background: #3d3214; }
.rows .nm span.badge { display: inline-block; max-width: none; margin-left: 6px; }
.spot-amt { white-space: nowrap; }
.hero > *, .spot, .spot-who { min-width: 0; }
@media (max-width: 860px) {
  .spot-amt { font-size: 34px; white-space: normal; }
  .spot-who h3 { font-size: 21px; }
  .spot-body img { width: 64px; height: 64px; }
  .counter { font-size: 46px; }
  .search .at { display: none; }
  .search input { padding-left: 12px; }
}
.wallhead { flex-wrap: wrap; }
@media (max-width: 860px) { .legend { white-space: normal; flex-wrap: wrap; } }
