:root {
  --bg: #050505;
  --fg: #f2f2f2;
  --dim: #8a8a8a;
  --faint: #3a3a3a;
  --line: #1a1a1a;
  --red: #ff3b30;
  --green: #34d77b;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.top { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 22px 32px; pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { font: 700 15px var(--mono); letter-spacing: .14em; }
.top-r { display: flex; align-items: center; gap: 18px; }
.help { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #2a2a2a; background: none; color: var(--dim); font: 600 13px var(--mono); cursor: pointer; transition: .2s; }
.help:hover { color: var(--fg); border-color: var(--dim); }
.clock { display: flex; align-items: baseline; gap: 10px; font: 500 15px var(--mono); font-variant-numeric: tabular-nums; }
.clock small { color: var(--dim); font-size: 12px; }

/* stage */
.stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
#scene { position: absolute; inset: 0; }
#scene canvas { display: block; outline: none; }
.label { font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; pointer-events: none; transition: opacity .3s, color .3s; }
.label.coin { color: var(--fg); font-weight: 700; font-size: 12px; }
.label.squad { letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.label.hl { color: var(--fg); }
.label.dim { opacity: .15; }

.stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(600px 420px at 0% 100%, #050505f2 30%, transparent 75%), linear-gradient(#050505cc, transparent 90px); }
.intro { position: absolute; left: 32px; bottom: 36px; z-index: 5; max-width: 380px; pointer-events: none; }
.intro h1 { font: 700 clamp(34px, 4.4vw, 56px)/1.02 var(--sans); letter-spacing: -.035em; }
.intro p { color: var(--dim); margin-top: 14px; font-size: 15px; }
.key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 500 11px var(--mono); color: var(--dim); }
.key li { display: flex; align-items: center; gap: 7px; }
.key i { display: inline-block; }
.k-size { width: 10px; height: 10px; border-radius: 50%; background: #d8d8d8; box-shadow: 6px 0 0 -2px #d8d8d8; margin-right: 4px; }
.k-red { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.k-line { width: 14px; height: 1px; background: var(--dim); }

.live { position: absolute; right: 32px; bottom: 36px; z-index: 5; display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); color: var(--dim); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #34d77b80; } 100% { box-shadow: 0 0 0 8px #34d77b00; } }

.tip { position: absolute; z-index: 10; pointer-events: none; opacity: 0; transform: translate(14px, 14px); transition: opacity .15s;
  background: #0d0d0dee; border: 1px solid #262626; border-radius: 10px; padding: 10px 12px; font: 500 12px var(--mono); color: var(--dim); min-width: 180px; backdrop-filter: blur(6px); }
.tip.on { opacity: 1; }
.tip b { color: var(--fg); font-size: 14px; }
.tip .row { display: flex; justify-content: space-between; gap: 16px; margin-top: 3px; }
.tip .row span:last-child { color: var(--fg); }
.tip .hot { color: var(--red) !important; }

.card { position: absolute; right: 32px; top: 80px; z-index: 10; width: 300px; max-height: calc(100% - 160px); overflow: auto;
  background: #0b0b0bf2; border: 1px solid #262626; border-radius: 14px; padding: 18px; opacity: 0; transform: translateX(16px); pointer-events: none; transition: .3s cubic-bezier(.2,.7,.2,1); }
.card.on { opacity: 1; transform: none; pointer-events: auto; }
.card h3 { font: 700 22px var(--sans); letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; }
.card h3 button { background: none; border: 0; color: var(--dim); font: 400 20px var(--sans); cursor: pointer; }
.card .big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.card .big small { display: block; font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.card .big b { font: 700 18px var(--mono); }
.card .h { display: flex; justify-content: space-between; font: 500 12px var(--mono); padding: 6px 0; border-top: 1px solid var(--line); color: var(--dim); }
.card .h span:last-child { color: var(--fg); }
.card a.go { display: block; margin-top: 14px; text-align: center; padding: 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 700 12px var(--mono); letter-spacing: .06em; }

/* data */
.data { max-width: 1200px; margin: 0 auto; padding: 100px 32px 0; display: grid; grid-template-columns: 1fr 340px; gap: 56px; }
h2 { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.tr { display: grid; grid-template-columns: 1.3fr 100px 1fr 1.4fr 80px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; transition: background .2s; }
.tr:hover { background: #0c0c0c; }
.tr.th { cursor: default; font: 500 11px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.tr.th:hover { background: none; }
.coin { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.coin img, .coin .ph { width: 26px; height: 26px; border-radius: 50%; flex: none; background: #1a1a1a; object-fit: cover; }
.num { font: 500 14px var(--mono); text-align: right; }
.share { display: flex; align-items: center; gap: 10px; font: 500 13px var(--mono); }
.share .bar { flex: 1; height: 4px; background: #151515; border-radius: 2px; overflow: hidden; }
.share .bar i { display: block; height: 100%; background: var(--red); border-radius: 2px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.squads { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { font: 500 11px var(--mono); text-align: right; color: var(--dim); }
.st.selling { color: var(--red); }
.st.down { color: #ff9f0a; }
.st.exited { color: var(--faint); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.feed { display: flex; flex-direction: column; }
.t { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; animation: in .5s cubic-bezier(.2,.7,.2,1); }
@keyframes in { from { opacity: 0; transform: translateY(-8px); } }
.t .who { color: var(--dim); }
.t .who b { color: var(--fg); font-weight: 600; }
.t .amt { font: 500 13px var(--mono); text-align: right; }
.t .amt.buy { color: var(--green); } .t .amt.sell { color: var(--red); }
.t .when { font: 400 11px var(--mono); color: var(--faint); text-align: right; }
.empty { color: var(--dim); font: 500 12px var(--mono); padding: 24px 0; }

.foot { max-width: 1200px; margin: 120px auto 0; padding: 24px 32px 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 11px var(--mono); color: var(--dim); }
.foot span:first-child { color: var(--fg); letter-spacing: .14em; font-weight: 700; }

@media (max-width: 900px) {
  .data { grid-template-columns: 1fr; gap: 56px; }
  .tr { grid-template-columns: 1.2fr 90px 1fr 70px; }
  .tr .squads { display: none; }
}
@media (max-width: 600px) {
  .top { padding: 16px; }
  .stage { height: 86svh; min-height: 520px; }
  .intro { left: 16px; right: 16px; bottom: 24px; }
  .intro p { font-size: 14px; }
  .live { right: 16px; top: 52px; bottom: auto; }
  .card { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 60%; }
  .data { padding: 64px 16px 0; }
  .tr { grid-template-columns: 1fr 76px 64px; }
  .tr .share { display: none; }
  .foot { padding: 22px 16px 32px; margin-top: 80px; }
}

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity .9s ease .45s, visibility 0s linear 1.4s; }
.loader.out { opacity: 0; visibility: hidden; }
.ld-text { font: 500 11px var(--mono); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; height: 14px; }

/* tour */
.tour { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s, --r .6s cubic-bezier(.2,.7,.2,1);
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #0000 calc(var(--r) - 40px), #000000d0 var(--r)); }
.tour.on { visibility: visible; transition: opacity .5s, --r .6s cubic-bezier(.2,.7,.2,1); }
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.tour.on { opacity: 1; }
.ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1.5px solid var(--fg); transform: translate(-50%, -50%); opacity: 0;
  transition: opacity .3s, width .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1); }
.ring.on { opacity: 1; }
.ring::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--fg); animation: ripple 1.6s ease-out infinite; }
@keyframes ripple { to { transform: scale(1.7); opacity: 0; } }
.tcard { position: absolute; left: 0; top: 0; width: 258px; pointer-events: auto; background: #0d0d0df2; border: 1px solid #2a2a2a; border-radius: 12px; padding: 14px 15px 12px;
  backdrop-filter: blur(8px); box-shadow: 0 20px 60px #000c; transition: left .5s cubic-bezier(.2,.7,.2,1), top .5s cubic-bezier(.2,.7,.2,1); }
.tcard.center { left: 50% !important; top: auto !important; bottom: 120px; transform: translateX(-50%); }
.tstep { font: 500 10px var(--mono); color: var(--dim); letter-spacing: .14em; margin-bottom: 6px; }
.ttext { font: 500 14.5px/1.42 var(--sans); letter-spacing: -.01em; }
.ttext b { font-weight: 700; } .ttext .r { color: var(--red); } .ttext .g { color: var(--green); }
.tnav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tnav button { font: 600 12px var(--mono); letter-spacing: .06em; cursor: pointer; border: 0; }
.tskip { background: none; color: var(--dim); }
.tnext { background: var(--fg); color: var(--bg); padding: 7px 14px; border-radius: 7px; }
.touring .intro, .touring .tip, .touring .live { opacity: 0 !important; }
.touring .top { z-index: 10; }
.intro { transition: opacity .4s; }
@media (max-width: 600px) {
  .tcard, .tcard.center { left: 16px !important; right: 16px; top: auto !important; bottom: 20px; width: auto; transform: none; }
  .top-r { gap: 12px; }
  .clock small { display: none; }
}

/* buttons, nav */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  font: 600 13px var(--sans); padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.big { padding: 14px 24px; font-size: 14px; }
.btn.sm { padding: 8px 14px; font-size: 12px; }
.btn.ghost { background: transparent; color: var(--fg); border-color: #333; }
.btn.ghost:hover { border-color: var(--fg); }
.btn.on { background: transparent; color: var(--fg); border-color: #333; font-family: var(--mono); }
.btn.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.nav { display: flex; gap: 26px; font: 500 13px var(--sans); color: var(--dim); margin-left: 44px; margin-right: auto; }
.nav a:hover { color: var(--fg); }
.ico { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #262626; display: grid; place-items: center; background: none; color: var(--dim); font: 600 13px var(--mono); cursor: pointer; transition: .2s; }
.ico svg { width: 15px; height: 15px; fill: currentColor; }
.ico:hover { color: var(--fg); border-color: var(--dim); }
.help { display: none; }
.top-r { gap: 10px; }
.clock { margin-right: 10px; }
.cta { display: flex; gap: 10px; margin-top: 22px; pointer-events: auto; flex-wrap: wrap; }
.k-mine { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.label.mine { color: var(--green); }
.label.mine::before { content: '● '; }

/* blocks */
.block { max-width: 1200px; margin: 0 auto; padding: 130px 32px 0; }
.eyebrow { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.h { font: 700 clamp(32px, 4vw, 48px)/1.05 var(--sans); letter-spacing: -.035em; color: var(--fg); text-transform: none; margin-bottom: 0; }
.lead { color: var(--dim); font-size: 17px; margin-top: 14px; max-width: 440px; }
.row-btns { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.note { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); color: var(--dim); }
.note svg { width: 13px; fill: var(--dim); }
.data { display: grid; grid-template-columns: 1fr 340px; gap: 56px; }
.data .h { margin-bottom: 22px; font-size: 32px; }
.data h2 { color: var(--fg); }

/* exit check */
.check { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.result { min-height: 300px; border: 1px solid #1d1d1d; border-radius: 18px; padding: 24px; background: linear-gradient(#0b0b0b, #070707); position: relative; overflow: hidden; }
.ghost-res { filter: blur(0); }
.ghost-res .gr { display: grid; grid-template-columns: 90px 1fr 60px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font: 600 14px var(--mono); color: #444; filter: blur(3px); }
.ghost-res .bar, .res-row .bar { height: 4px; border-radius: 2px; background: #151515; overflow: hidden; display: block; }
.ghost-res .bar i, .res-row .bar i { display: block; height: 100%; background: var(--red); border-radius: 2px; }
.ghost-res .bar i { opacity: .5; }
.lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font: 500 12px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.lock svg { width: 22px; stroke: var(--dim); }
.scan { min-height: 252px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.scan b { font: 600 15px var(--mono); }
.scan small { color: var(--dim); font-size: 13px; }
.scan-line { position: absolute; left: -24px; right: -24px; height: 60px; top: -60px; background: linear-gradient(transparent, #34d77b22, transparent); border-bottom: 1px solid #34d77b88; animation: sweep 1.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes sweep { to { top: 100%; } }
.res-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.score { display: flex; align-items: center; gap: 14px; }
.score b { font: 700 64px/0.9 var(--sans); letter-spacing: -.05em; }
.score span { color: var(--dim); font-size: 14px; line-height: 1.35; }
.risk { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.risk small { font: 500 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.risk b { font: 700 26px var(--sans); letter-spacing: -.02em; }
.r { color: var(--red); } .g { color: var(--green); } .o { color: #ff9f0a; }
.res-row { display: grid; grid-template-columns: 1fr 90px 1.2fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); animation: in .5s both; }
.res-row:nth-child(2) { animation-delay: .08s; } .res-row:nth-child(3) { animation-delay: .16s; } .res-row:nth-child(4) { animation-delay: .24s; }
.res-row .num small, .res-row .share small { display: block; font: 500 10px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.res-row .share { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; font: 500 13px var(--mono); }
.res-row .share small { grid-column: 1 / -1; text-align: right; }
.clear { color: var(--dim); padding: 40px 0; text-align: center; }
.res-f { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font: 500 12px var(--mono); color: var(--dim); }
.res-f button { background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.res-f button:hover { color: var(--fg); }

/* token */
.token { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.token .h { font-size: clamp(40px, 5.5vw, 72px); overflow-wrap: anywhere; }
.ca { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 8px 8px 8px 16px; border: 1px solid #222; border-radius: 999px; font: 500 13px var(--mono); max-width: 100%; }
.ca span { color: var(--dim); font-size: 11px; letter-spacing: .1em; }
.ca code { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; background: #1a1a1a; display: grid; place-items: center; cursor: pointer; transition: .2s; }
.copy svg { width: 14px; stroke: var(--fg); }
.copy.done { background: var(--green); }
.copy.done svg { stroke: var(--bg); }
.tk-r { display: flex; flex-direction: column; }
.ut { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); transition: padding .3s; }
.ut:last-child { border-bottom: 1px solid var(--line); }
.ut:hover { padding-left: 8px; }
.ut-n { font: 500 12px var(--mono); color: var(--dim); padding-top: 4px; }
.ut h3 { font: 600 20px var(--sans); letter-spacing: -.02em; }
.ut p { color: var(--dim); font-size: 14px; margin-top: 4px; max-width: 360px; }
.tag { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid #2a2a2a; color: var(--dim); }
.tag.hold { border-color: #34d77b55; color: var(--green); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 90; background: #000000b0; backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.modal.on { opacity: 1; visibility: visible; transition: opacity .3s; }
.mbox { width: 100%; max-width: 380px; background: #0c0c0c; border: 1px solid #242424; border-radius: 20px; padding: 22px; transform: translateY(14px) scale(.98); transition: transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 40px 100px #000; }
.modal.on .mbox { transform: none; }
.mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mh b { font: 600 17px var(--sans); }
.mx { background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; }
.wallets { display: flex; flex-direction: column; gap: 8px; }
.wl { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #131313; border: 1px solid transparent; color: var(--fg); font: 600 14px var(--sans); cursor: pointer; text-align: left; transition: .2s; }
.wl:hover { border-color: #333; background: #171717; }
.wl small { font: 500 11px var(--mono); color: var(--dim); }
.wl-i { width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: #0b0b0b; display: grid; place-items: center; font: 700 15px var(--sans); }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; font: 500 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: #1f1f1f; }
.paste { display: flex; gap: 8px; }
.paste input { flex: 1; min-width: 0; background: #131313; border: 1px solid #222; border-radius: 999px; padding: 10px 16px; color: var(--fg); font: 500 13px var(--mono); outline: none; transition: border-color .2s; }
.paste input:focus { border-color: #444; }
.paste input.bad { border-color: var(--red); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mbox .note { margin-top: 16px; }

/* footer */
.foot { align-items: center; }
.foot-l { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot .logo { font-size: 13px; }
.foot-r { display: flex; gap: 22px; }
.foot-r a:hover { color: var(--fg); }

@media (max-width: 1100px) { .nav { display: none; } }
@media (max-width: 900px) {
  .check, .token { grid-template-columns: 1fr; gap: 36px; }
  .data { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hide-m, .clock { display: none; }
  .block { padding: 90px 16px 0; }
  .cta .btn { flex: 1; }
  .key { display: none; }
  .intro h1 { font-size: 36px; }
  .intro p { display: none; }
  .result { padding: 18px; }
  .score b { font-size: 48px; }
  .res-row { grid-template-columns: 1fr 70px; }
  .res-row .share { grid-column: 1 / -1; }
  .ut { grid-template-columns: 30px 1fr; }
  .ut .tag { grid-column: 2; justify-self: start; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* game */
.g-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.pot { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.pot small { font: 500 11px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.pot b { font: 700 clamp(48px, 6vw, 76px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; text-shadow: 0 0 60px #ffffff1f; }
.pot em { font: 500 16px var(--mono); font-style: normal; color: var(--dim); margin-left: 10px; letter-spacing: 0; }

.g-tabs { display: flex; gap: 6px; margin: 40px 0 18px; padding: 4px; border: 1px solid #1d1d1d; border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; }
.g-tabs button { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--dim); font: 600 13px var(--sans); padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: .2s; }
.g-tabs button.on { background: #161616; color: var(--fg); }
.t-sub { font: 500 11px var(--mono); color: var(--dim); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulseR 1.6s infinite; }
@keyframes pulseR { 0% { box-shadow: 0 0 0 0 #ff3b3080; } 100% { box-shadow: 0 0 0 7px #ff3b3000; } }
.g-pane { display: none; }
.g-pane.on { display: block; animation: in .45s cubic-bezier(.2,.7,.2,1); }

.sph { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0, color-mix(in srgb, var(--c) 35%, #fff) 9%, var(--c) 46%, color-mix(in srgb, var(--c) 30%, #000) 88%);
  box-shadow: inset -3px -6px 12px #0008, 0 10px 26px -10px var(--c); }

.cands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px 16px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(#0d0d0d, #080808); border: 1px solid #1c1c1c; color: var(--fg); font: inherit; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; }
.cand.pop { animation: cpop .7s cubic-bezier(.2,.8,.2,1.2) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes cpop { from { opacity: 0; transform: translateY(24px) scale(.94); } }
.cand:hover { transform: translateY(-4px); border-color: #333; }
.cand .sph { margin-bottom: 10px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
@keyframes bob { 50% { translate: 0 -5px; } }
.cand .sph::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--fg); opacity: 0; transform: scale(.85); transition: .3s; }
.cand.sel { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg), 0 20px 50px -20px #ffffff30; }
.cand.sel .sph::after { opacity: 1; transform: none; animation: ringp 1.6s ease-out infinite; }
@keyframes ringp { 50% { inset: -13px; opacity: .4; } }
.cand.mine { border-color: #34d77b66; }
.c-sym { font: 700 15px var(--mono); }
.c-meta { font: 500 11px var(--mono); color: var(--dim); }
.c-crowd { width: 100%; height: 3px; border-radius: 2px; background: #181818; margin-top: 8px; overflow: hidden; }
.c-crowd i { display: block; height: 100%; background: var(--fg); border-radius: 2px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.c-pct { font: 500 10px var(--mono); color: var(--dim); letter-spacing: .04em; }
.stamp { position: absolute; top: 12px; right: -2px; transform: rotate(14deg); font: 800 10px var(--mono); letter-spacing: .14em; color: var(--green);
  border: 1.5px solid var(--green); border-radius: 5px; padding: 3px 6px; background: #050505; }
.stamp.hit { animation: stamp .55s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes stamp { from { transform: rotate(14deg) scale(2.6); opacity: 0; } to { transform: rotate(14deg) scale(1); opacity: 1; } }

.g-bar { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 12px 12px 12px 20px; border: 1px solid #1d1d1d; border-radius: 999px; background: #090909; }
.g-sel { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 14px; flex: 1; min-width: 0; }
.g-sel b { color: var(--fg); font-family: var(--mono); }
.g-players { font: 500 12px var(--mono); color: var(--dim); white-space: nowrap; }
.g-bar .btn:disabled { opacity: .35; cursor: default; transform: none; }

.race-h { display: flex; justify-content: space-between; gap: 16px; font: 500 11px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.race { position: relative; }
.rr { position: absolute; left: 0; right: 0; height: 54px; display: grid; grid-template-columns: 26px 26px 110px 1fr 90px 80px; gap: 14px; align-items: center;
  border-bottom: 1px solid var(--line); transition: top .7s cubic-bezier(.3,.7,.2,1); }
.rr-n { font: 500 12px var(--mono); color: var(--dim); }
.rr-sym { font: 700 14px var(--mono); }
.rr-bar { height: 8px; border-radius: 4px; background: #121212; overflow: hidden; }
.rr-bar i { display: block; height: 100%; border-radius: 4px; background: #4a4a4a; transition: width 1s cubic-bezier(.2,.7,.2,1), background .4s; }
.rr.first .rr-bar i { background: linear-gradient(90deg, #ff3b3088, var(--red)); box-shadow: 0 0 18px #ff3b3060; }
.rr.first .rr-pct { color: var(--red); }
.rr-pct { font: 500 13px var(--mono); text-align: right; }
.rr-you { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); opacity: 0; text-align: right; }
.rr.you .rr-you { opacity: 1; }
.rr.you .rr-sym { color: var(--green); }

.pr { display: grid; grid-template-columns: 70px 1fr 110px 100px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pr-d { font: 500 12px var(--mono); color: var(--dim); }
.pr-w { display: flex; align-items: center; gap: 12px; }
.pr-w b { font: 700 15px var(--mono); }
.pr-w small { font: 500 12px var(--mono); color: var(--red); }
.pr-w.muted { color: var(--dim); font-size: 14px; }
.pr-n { font: 500 13px var(--mono); color: var(--dim); text-align: right; }
.pr-p { font: 700 15px var(--mono); text-align: right; }

.g-rules { list-style: none; counter-reset: r; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.g-rules li { counter-increment: r; border-top: 1px solid #1d1d1d; padding-top: 14px; color: var(--dim); font-size: 14px; }
.g-rules li::before { content: '0' counter(r); display: block; font: 500 11px var(--mono); color: var(--faint); margin-bottom: 6px; }
.g-rules b { color: var(--fg); font-weight: 600; }

.split-bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; margin-bottom: 8px; font: 500 12px var(--mono); }
.split-bar span { width: var(--w); display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #121212; color: var(--dim); }
.split-bar span + span { background: var(--fg); color: var(--bg); }
.split-bar b { font-weight: 700; color: inherit; }
.split-bar span:first-child b { color: var(--fg); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .35s cubic-bezier(.2,.7,.2,1);
  background: var(--fg); color: var(--bg); font: 600 13px var(--sans); padding: 12px 20px; border-radius: 999px; box-shadow: 0 20px 50px #000a; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #1a1a1a; color: var(--fg); border: 1px solid #333; }

@media (max-width: 900px) {
  .cands { grid-template-columns: repeat(3, 1fr); }
  .g-rules { grid-template-columns: 1fr; }
  .pot { text-align: left; }
}
@media (max-width: 600px) {
  .cands { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cand { padding: 20px 10px 14px; }
  .g-bar { flex-wrap: wrap; border-radius: 18px; padding: 14px; }
  .g-bar .btn { width: 100%; }
  .g-players { display: none; }
  .rr { grid-template-columns: 18px 22px 76px 1fr 64px; gap: 10px; }
  .rr-you { display: none; }
  .rr.you .rr-sym::after { content: ' · you'; font-size: 11px; }
  .pr { grid-template-columns: 50px 1fr 76px; }
  .pr-n { display: none; }
  .g-tabs { width: 100%; }
  .g-tabs button { flex: 1; justify-content: center; padding: 9px 10px; }
  .t-sub { display: none; }
}

.top { transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.top.solid { background: #050505d9; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: #151515; }
.rr-pct small { font-size: inherit; color: inherit; }
@media (max-width: 600px) { .rr-pct small { display: none; } }

/* ===== one-screen app: graph behind, panels on top ===== */
html, body { height: 100%; }
body { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
.stage { position: fixed; inset: 0; height: auto; min-height: 0; }
.top { z-index: 40; background: linear-gradient(#050505e6, #05050500); border-bottom: 0; }
.top.solid { background: linear-gradient(#050505e6, #05050500); backdrop-filter: none; }
.intro { transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
body:not([data-view="board"]) .intro, body:not([data-view="board"]) .live { opacity: 0; transform: translateY(12px); pointer-events: none; }
body:not([data-view="board"]) .intro .cta { pointer-events: none; }
.live { transition: opacity .4s; }
.live .sep { color: var(--faint); }

.nav { margin-left: 40px; gap: 4px; }
.nav a { position: relative; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; display: inline-flex; align-items: center; gap: 6px; }
.nav a.on { color: var(--fg); background: #ffffff12; }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: pulseR 1.6s infinite; }

.panel { position: fixed; z-index: 15; top: 76px; right: 16px; bottom: 16px; width: min(var(--pw, 540px), calc(100vw - 32px));
  display: flex; flex-direction: column; border-radius: 22px; border: 1px solid #1e1e1e;
  background: linear-gradient(#0c0c0cdd, #080808ee); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 40px 120px #000c, inset 0 1px #ffffff0d;
  transform: translateX(calc(100% + 40px)); opacity: .4; transition: transform .6s cubic-bezier(.2,.85,.2,1), opacity .4s, width .5s cubic-bezier(.2,.85,.2,1); }
body:not([data-view="board"]) .panel { transform: none; opacity: 1; }
.panel-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 0 26px; }
.panel-h .eyebrow { margin: 0; }
.panel-body { flex: 1; overflow-y: auto; padding: 14px 26px 28px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; scroll-behavior: smooth; }
.pv { display: none; }
.pv.on { display: block; animation: pvin .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pvin { from { opacity: 0; transform: translateY(14px); } }

.panel .h { font-size: 34px; }
.panel .h.big { font-size: clamp(40px, 5vw, 60px); overflow-wrap: anywhere; }
.panel .lead { font-size: 15px; margin-top: 10px; }
.panel .row-btns { margin-top: 22px; }
.panel .g-head { align-items: flex-start; }
.panel .pot b { font-size: 54px; }
.panel .g-tabs { margin: 26px 0 16px; }
.panel .cands { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.panel .cand { padding: 20px 10px 14px; }
.panel .g-rules { margin-top: 26px; grid-template-columns: repeat(3, 1fr); }
.panel .result { margin-top: 26px; min-height: 260px; }
.panel .tr { grid-template-columns: 1.3fr 90px 1fr 70px; }
.panel .tr .squads { display: none; }
.panel .split-bar { margin-top: 30px; }
.panel .ca { margin-top: 20px; }

.sub-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #1d1d1d; border-radius: 999px; margin: 18px 0 8px; }
.sub-tabs button { background: none; border: 0; color: var(--dim); font: 600 13px var(--sans); padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.sub-tabs button.on { background: #161616; color: var(--fg); }
.sub { display: none; }
.sub.on { display: block; animation: in .4s; }

/* docs panel */
.doc-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 6px; }
.doc-toc a { font: 500 12px var(--mono); color: var(--dim); padding: 6px 11px; border: 1px solid #222; border-radius: 999px; transition: .2s; }
.doc-toc a:hover { color: var(--fg); border-color: #444; }
.doc article { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 10px; }
.doc h3 { font: 600 20px var(--sans); letter-spacing: -.02em; margin-bottom: 10px; }
.doc p, .doc li { color: #b5b5b5; font-size: 14.5px; line-height: 1.65; }
.doc p + p { margin-top: 10px; }
.doc b { color: var(--fg); font-weight: 600; }
.doc ul { list-style: none; margin: 10px 0; }
.doc li { padding: 6px 0 6px 20px; position: relative; }
.doc li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--dim); }
.legend-d { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.legend-d div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: 13px; color: #b5b5b5; }
.dot { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff, #bbb 40%, #555 90%); }
.dot.red { background: radial-gradient(circle at 35% 30%, #ffb3ad, #ff3b30 45%, #6b100b 95%); }
.dot.green { background: radial-gradient(circle at 35% 30%, #b8f5d1, #34d77b 45%, #0d4a2a 95%); }
.dot.sq { width: 12px; height: 12px; margin: 5px; background: radial-gradient(circle at 35% 30%, #aaa, #444 70%); }
.ln { width: 22px; height: 1px; background: var(--dim); flex: none; }
.q { padding: 14px 0; border-bottom: 1px solid var(--line); color: #b5b5b5; font-size: 14.5px; }
.q:last-child { border-bottom: 0; }
.q b { display: block; margin-bottom: 3px; color: var(--fg); }
.doc-foot { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 22px; font: 500 12px var(--mono); color: var(--dim); }
.doc-foot a:hover { color: var(--fg); }
.doc-foot span { margin-left: auto; }

/* mobile menu */
.burger { display: none; flex-direction: column; gap: 4px; }
.burger span { display: block; width: 14px; height: 1.5px; background: currentColor; transition: transform .3s; }
body.menu-on .burger span:first-child { transform: translateY(2.75px) rotate(45deg); }
body.menu-on .burger span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 35; background: #050505f2; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column; justify-content: space-between; padding: 96px 24px 32px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
body.menu-on .menu { opacity: 1; visibility: visible; transition: opacity .35s; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 700 40px/1.15 var(--sans); letter-spacing: -.04em; color: var(--dim); padding: 6px 0; opacity: 0; transform: translateY(16px); transition: color .2s, opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
.menu nav a.on { color: var(--fg); }
body.menu-on .menu nav a { opacity: 1; transform: none; }
body.menu-on .menu nav a:nth-child(2) { transition-delay: .04s; } body.menu-on .menu nav a:nth-child(3) { transition-delay: .08s; }
body.menu-on .menu nav a:nth-child(4) { transition-delay: .12s; } body.menu-on .menu nav a:nth-child(5) { transition-delay: .16s; } body.menu-on .menu nav a:nth-child(6) { transition-delay: .2s; }
.menu-f { display: flex; gap: 22px; font: 500 13px var(--mono); color: var(--dim); }

@media (max-width: 1100px) { .nav { display: flex; margin-left: 20px; } .nav a { padding: 7px 9px; } .clock small { display: none; } }
@media (max-width: 900px) {
  .nav, .clock { display: none; }
  .burger { display: flex; }
  .panel .g-rules { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 74dvh; border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(105%); }
  .panel-h { padding: 14px 12px 0 18px; }
  .panel-h::before { content: ''; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #2a2a2a; }
  .panel-body { padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); }
  .panel .h { font-size: 28px; }
  .panel .pot b { font-size: 40px; }
  .panel .g-head { flex-direction: column; gap: 14px; align-items: flex-start; }
  .panel .pot { text-align: left; }
  .panel .cands { grid-template-columns: repeat(2, 1fr); }
  .panel .tr { grid-template-columns: 1fr 76px 64px; }
  .legend-d { grid-template-columns: 1fr; }
  .live { display: none; }
  .intro { bottom: calc(20px + env(safe-area-inset-bottom)); }
  #connect { padding: 7px 12px; }
}

/* ===== docs: full page, graph flies away ===== */
body[data-view="docs"] .panel { top: 0; left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border: 0; box-shadow: none;
  background: #050505; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; opacity: 0; animation: docin .7s .35s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes docin { from { opacity: 0; } to { opacity: 1; } }
body[data-view="docs"] .panel-h { display: none; }
body[data-view="docs"] .panel-body { padding: 0 32px; }
body[data-view="docs"] .top { background: linear-gradient(#050505, #050505ee 70%, #05050500); }
body[data-view="docs"] #tip, body[data-view="docs"] #card { display: none; }

.pv.doc.on { display: grid; grid-template-columns: 200px minmax(0, 700px); gap: 72px; justify-content: center; padding: 120px 0 100px; animation: docrise .8s .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes docrise { from { opacity: 0; transform: translateY(28px); } }
.doc-side { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.doc-side .eyebrow { margin: 0; }
.doc-side .doc-toc { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; }
.doc-side .doc-toc a { border: 0; border-left: 1px solid #1f1f1f; border-radius: 0; padding: 7px 0 7px 14px; font: 500 13px var(--sans); color: var(--dim); }
.doc-side .doc-toc a:hover, .doc-side .doc-toc a.on { color: var(--fg); border-left-color: var(--fg); }
.doc-back { font: 500 12px var(--mono); color: var(--dim); transition: color .2s; }
.doc-back:hover { color: var(--fg); }
.doc-title { font-size: clamp(44px, 6vw, 72px) !important; letter-spacing: -.045em; line-height: .95; }
.doc-main > .lead { font-size: 18px; max-width: 560px; margin: 18px 0 18px; }
.doc-main article { padding: 40px 0; }
.doc-main h3 { font-size: 26px; margin-bottom: 14px; }
.doc-main p, .doc-main li, .doc-main .q { font-size: 16px; }
.doc-main .legend-d { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

@media (max-width: 900px) {
  .pv.doc.on { grid-template-columns: 1fr; gap: 0; padding: 96px 0 80px; }
  .doc-side { position: static; gap: 14px; margin-bottom: 28px; }
  .doc-side .doc-toc { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .doc-side .doc-toc a { border: 1px solid #222; border-radius: 999px; padding: 6px 11px; font: 500 12px var(--mono); }
  .doc-side .doc-toc a.on { border-color: var(--fg); }
  .doc-back { display: none; }
}
@media (max-width: 600px) {
  body[data-view="docs"] .panel { height: auto; border-radius: 0; }
  body[data-view="docs"] .panel-h::before { display: none; }
  body[data-view="docs"] .panel-body { padding: 0 18px; }
  .doc-main p, .doc-main li, .doc-main .q { font-size: 15px; }
}

/* loader: mini graph */
.ld-stage { position: relative; width: 320px; height: 320px; }
.ld-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, #ffffff1c, #ff3b3010 40%, transparent 70%); filter: blur(10px); opacity: .25; transition: opacity .3s; }
.ld-ring { position: absolute; inset: 0; pointer-events: none; transition: opacity .4s; }
.loader.out .ld-ring { opacity: 0; }
.rtrack { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid #ffffff0f; }
.rh { position: absolute; top: 8px; bottom: 8px; width: 152px; overflow: hidden; }
.rh-r { left: 160px; }
.rh-l { left: 8px; }
.rh i { position: absolute; top: 0; width: 304px; height: 304px; border-radius: 50%; border: 1.5px solid #ffffffd0; will-change: transform;
  filter: drop-shadow(0 0 4px #ffffff70); }
.rh-r i { left: -152px; clip-path: inset(0 50% 0 0); }
.rh-l i { left: 0; clip-path: inset(0 0 0 50%); }
.rdot { position: absolute; inset: 8px; will-change: transform; }
.rdot b { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px #ffffffb0, 0 0 18px 4px #ffffff40; transition: opacity .3s; }
.ld-ring.full .rdot b { opacity: 0; }
.ld-ring.full .rtrack { border-color: #ffffff30; transition: border-color .3s; }
.ld-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld-lines line { stroke: #fff; stroke-width: 1; }
.ld-lines circle.g { fill: var(--green); filter: drop-shadow(0 0 5px var(--green)); }
.ld-lines circle.r { fill: var(--red); filter: drop-shadow(0 0 5px var(--red)); }
.lb { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, filter;
  background: radial-gradient(circle at 34% 28%, #fff 0, color-mix(in srgb, var(--c) 35%, #fff) 9%, var(--c) 46%, color-mix(in srgb, var(--c) 28%, #000) 90%);
  box-shadow: inset -2px -4px 8px #0009, 0 6px 22px -6px var(--c); }
.ld-meta { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .35s, transform .6s; }
.loader.out .ld-meta { opacity: 0; transform: translateY(10px); }
.ld-word { font: 700 15px var(--mono); letter-spacing: .42em; padding-left: .42em; display: flex; }
.ld-word span { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(4px); animation: ldw .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.15s + var(--i) * 55ms); }
@keyframes ldw { to { opacity: 1; transform: none; filter: none; } }
.ld-text { font: 500 11px var(--mono); color: var(--dim); letter-spacing: .14em; text-transform: uppercase; height: 14px; font-variant-numeric: tabular-nums; animation: ldt .35s ease; }
@keyframes ldt { from { opacity: 0; transform: translateY(4px); } }

.paste.inline { margin-top: 14px; max-width: 420px; }
.paste.inline .btn { padding: 10px 16px; }

/* ===== ball card: grows out of the ball ===== */
.card { position: fixed; right: auto; left: 0; top: 0; z-index: 12; width: 330px; max-height: min(560px, calc(100vh - 100px)); overflow: hidden;
  display: flex; flex-direction: column; padding: 18px; border-radius: 20px; border: 1px solid #262626;
  background: linear-gradient(160deg, #151515, #0a0a0a); isolation: isolate;
  box-shadow: 0 30px 90px #000d, 0 0 0 1px #ffffff06 inset, 0 1px 0 #ffffff10 inset;
  opacity: 0; transform: none; transition: none; pointer-events: none; transform-origin: var(--ox, 50%) var(--oy, 50%); visibility: hidden; }
.card.measure { visibility: hidden; display: flex; }
.card.on { visibility: visible; pointer-events: auto; animation: cardIn .55s cubic-bezier(.22,.61,.36,1) forwards; }
.card.out { visibility: visible; animation: cardOut .3s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes cardIn { from { opacity: 0; transform: scale(.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cardOut { to { opacity: 0; transform: scale(.94); filter: blur(4px); } }
.card .cx { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #ffffff0d; color: var(--dim); font: 400 18px/1 var(--sans); cursor: pointer; transition: .2s; }
.card .cx:hover { background: #ffffff1a; color: var(--fg); }
.c-top { display: flex; align-items: center; gap: 14px; padding-right: 30px; }

.c-t { display: block; font: 700 24px/1.1 var(--sans); letter-spacing: -.03em; overflow-wrap: anywhere; }
.c-top small { font: 500 11px var(--mono); color: var(--dim); }
.c-top .st { font: inherit; }
.c-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.c-stats > div { background: #ffffff07; border: 1px solid #ffffff0a; border-radius: 12px; padding: 10px 12px; }
.c-stats small { display: block; font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.c-stats b { font: 700 20px var(--mono); letter-spacing: -.02em; }
.c-stats b.r { color: var(--red); }
.mini { display: block; height: 3px; border-radius: 2px; background: #ffffff10; margin-top: 7px; overflow: hidden; }
.mini i { display: block; height: 100%; border-radius: 2px; background: var(--red); transform-origin: left; animation: grow .9s .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { transform: scaleX(0); } }
.c-row .mini i { background: #ffffff70; }
.c-sec { display: flex; justify-content: space-between; font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.c-list { overflow-y: auto; min-height: 0; flex: 1; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.c-row { display: grid; grid-template-columns: 26px 1fr 84px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #ffffff08;
  animation: rowup .6s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(.15s + var(--i) * 30ms); }
@keyframes rowup { from { opacity: 0; transform: translateY(4px); } }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--sans); color: #0b0b0b;
  background: radial-gradient(circle at 34% 28%, #fff, #cfcfcf 45%, #6a6a6a 95%); }
.c-row .who { min-width: 0; display: flex; flex-direction: column; }
.c-row .who b { font: 600 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-row .who small { font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-row .amt { font: 600 12px var(--mono); text-align: right; }
.c-row .amt .mini { margin-top: 5px; }
.c-acts { display: flex; gap: 8px; margin-top: 14px; }
.c-acts .btn { flex: 1; padding: 11px 14px; font-size: 13px; }
.c-acts .btn:disabled { opacity: .35; cursor: default; transform: none; }
.link { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .3s; }
.link.on { opacity: 1; transition: opacity .5s .25s; }
.link line { stroke: #ffffff26; stroke-width: 1; }
@keyframes dash { to { stroke-dashoffset: -14; } }

@media (max-width: 600px) {
  .card { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 72dvh; border-radius: 22px 22px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); transform-origin: 50% 100%; }
  .card.on { animation: sheetIn .5s cubic-bezier(.22,.61,.36,1) forwards; }
  .card.out { animation: sheetOut .3s cubic-bezier(.4,0,.6,1) forwards; }
  @keyframes sheetIn { from { opacity: 1; transform: translateY(100%); } to { opacity: 1; transform: none; } }
  @keyframes sheetOut { to { opacity: 1; transform: translateY(100%); } }
  .card::before { content: ''; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #2a2a2a; }
}

.label { transition: opacity .45s ease, color .45s ease; }

.c-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px #ffffff1a, 0 8px 24px -8px #000; }

/* rewards scheme */
.flow { position: relative; margin: 26px 0 8px; aspect-ratio: 640 / 470; container-type: inline-size; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fpath { fill: none; stroke: #ffffff1f; stroke-width: 1.4; stroke-dasharray: 2 5; }
.fpct { font: 600 11px var(--mono); fill: var(--dim); letter-spacing: .06em; }
.fdot.w { fill: #fff; }
.fdot.g { fill: var(--green); }
.fn { position: absolute; left: calc(var(--x) / 640 * 100%); top: calc(var(--y) / 470 * 100%); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .15em; text-align: center; white-space: nowrap;
  padding: .7em 1.1em; border-radius: 1em; border: 1px solid #222; background: linear-gradient(160deg, #141414, #0a0a0a);
  box-shadow: 0 1.2em 3em -1.2em #000; font-size: clamp(9px, 2.05cqw, 13px); }
.fn small { font: 500 .82em var(--mono); color: var(--dim); }
.fn b { font: 700 1.35em var(--sans); letter-spacing: -.02em; }
.fl-tx { font: 600 .9em var(--mono); animation: ftx .5s ease; }
.fl-tx.buy { color: var(--green); } .fl-tx.sell { color: var(--red); }
@keyframes ftx { from { opacity: 0; transform: translateY(.3em); } }
.fn-fee, .fn-big { flex-direction: row; gap: .9em; text-align: left; }
.fn-fee > div, .fn-big > div { display: flex; flex-direction: column; gap: .15em; }
.fee-orb, .pot-orb { width: 2.6em; height: 2.6em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, #fff, #e6e6e6 12%, #9a9a9a 50%, #2a2a2a 92%); box-shadow: 0 0 2em #ffffff26; animation: orbp 2.6s ease-in-out infinite; }
.pot-orb { background: radial-gradient(circle at 34% 28%, #fff, #b8f5d1 12%, #34d77b 50%, #0d4a2a 92%); box-shadow: 0 0 2.2em #34d77b40; }
@keyframes orbp { 50% { transform: scale(1.06); } }
.fn-big { padding: .9em 1.2em; }
.fn-big b { font-size: 1.5em; }
.fl-num { font: 500 .85em var(--mono); color: var(--dim); margin-top: .2em; }
.fl-num em { font-style: normal; color: var(--fg); }
.ring { width: 3em; height: 3em; transform: rotate(-90deg); flex: none; }
.ring .rt { fill: none; stroke: #ffffff14; stroke-width: 3; }
.ring .rp { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s linear; }
.fn-you { border-color: #34d77b55; background: linear-gradient(160deg, #0f1a13, #0a0a0a); }
.fn-you b { color: var(--green); }
.fine { margin-top: 14px; font: 500 11px var(--mono); color: var(--faint); line-height: 1.6; }
.ph { display: grid; place-items: center; font: 700 11px var(--sans); color: #fff; text-transform: uppercase;
  background: linear-gradient(135deg, hsl(var(--h, 0) 42% 55%), hsl(calc(var(--h, 0) + 40) 48% 20%)); }

/* labels: tickers vs squads */
.label { pointer-events: none; }
.label .lt { display: block; white-space: nowrap; will-change: transform; }
.label.coin { font: 700 13px var(--mono); color: #f2f2f2; text-shadow: 0 1px 6px #000, 0 0 2px #000; }
.label.squad { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; text-shadow: 0 1px 4px #000; }
.label.squad.hl { color: #c4c4c4; }
.label.coin.hl { color: #fff; }
.label.dim { opacity: .18; }
/* legend: share of mcap as a scale */
.k-share { gap: 6px !important; }
.k-grad { width: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #dcdcdc, #ff3b30); }
@media (max-width: 600px) {
  .intro { top: 70px; bottom: auto !important; }
  .intro h1 { font-size: 30px; }
  .cta { margin-top: 14px; }
  .cta .btn { padding: 11px 16px; font-size: 13px; }
}

/* ===== profile popover ===== */
#connect.on { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; font-family: var(--sans); }
#connect.on::before { display: none; }
.me-av { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: inset -2px -4px 8px #0007, 0 0 0 1px #ffffff14; }
.me-av.sm { width: 20px; height: 20px; }
.me { position: fixed; z-index: 45; top: 70px; right: 16px; width: 360px; max-height: calc(100dvh - 90px); display: flex; flex-direction: column;
  border-radius: 20px; border: 1px solid #262626; background: linear-gradient(160deg, #151515, #0a0a0a); box-shadow: 0 30px 90px #000d;
  padding: 18px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), visibility 0s .35s; }
.me.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1); }
.me-h { display: flex; align-items: center; gap: 12px; position: relative; padding-right: 30px; }
.me-h .cx { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #ffffff0d; color: var(--dim); font: 400 18px/1 var(--sans); cursor: pointer; }
.me-id { display: flex; flex-direction: column; min-width: 0; }
.me-id b { font: 700 18px var(--sans); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-addr { background: none; border: 0; padding: 0; text-align: left; font: 500 11px var(--mono); color: var(--dim); cursor: pointer; }
.me-addr:hover { color: var(--fg); }
.me-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 12px; }
.me-stats > div { background: #ffffff07; border: 1px solid #ffffff0a; border-radius: 12px; padding: 10px 12px; }
.me-stats small, .paid small { display: block; font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.me-stats b { font: 700 17px var(--mono); }
.me-stats em { font-style: normal; font-size: 11px; color: var(--dim); }
.me-stats > div:first-child b { color: var(--green); }
.me-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid #1d1d1d; border-radius: 999px; margin-bottom: 8px; }
.me-tabs button { flex: 1; background: none; border: 0; color: var(--dim); font: 600 12px var(--sans); padding: 7px 0; border-radius: 999px; cursor: pointer; }
.me-tabs button.on { background: #1a1a1a; color: var(--fg); }
.me-pane { display: none; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.me-pane.on { display: block; flex: 1; animation: in .35s ease; }
.me-list { display: flex; flex-direction: column; }
.pl { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid #ffffff08; font-size: 13px;
  animation: rowup .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i, 0) * 25ms); }
.pl:hover { background: #ffffff05; }
.pl-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: var(--green); background: #34d77b1a; }
.pl small { font: 500 11px var(--mono); color: var(--dim); }
.pl b { font: 600 12px var(--mono); color: var(--green); min-width: 64px; text-align: right; }
.pl em { font-style: normal; font: 600 10px var(--mono); color: var(--green); margin-left: 4px; }
.me-empty { padding: 22px 4px; color: var(--dim); font-size: 13px; text-align: center; }
.me-empty b { color: var(--fg); font-family: var(--mono); }
.me-empty a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.me-l { display: block; font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin: 12px 0 6px; }
.me-in { width: 100%; background: #131313; border: 1px solid #222; border-radius: 10px; padding: 10px 12px; color: var(--fg); font: 500 14px var(--sans); outline: none; }
.me-in:focus { border-color: #444; }
.me-avs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.me-av.pick { width: 100%; height: auto; aspect-ratio: 1; border: 0; cursor: pointer; transition: transform .2s; }
.me-av.pick:hover { transform: scale(1.08); }
.me-av.pick.on { box-shadow: 0 0 0 2px #050505, 0 0 0 3.5px var(--fg); }
#me-save { width: 100%; margin-top: 14px; }
#me-save:disabled { opacity: .4; cursor: default; transform: none; }
.me-note { font: 500 11px var(--mono); color: var(--faint); margin-top: 8px; text-align: center; }
.me-f { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 12px var(--mono); color: var(--dim); }
.me-f a:hover { color: var(--fg); }
.me-f button { background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; }
.me-f button:hover { color: var(--red); }

/* rewards: payout wallet + drops */
.paid { margin-top: 22px; border: 1px solid #1f1f1f; border-radius: 16px; padding: 16px; background: #0b0b0b; }
.paid-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.paid-h code { font: 600 15px var(--mono); }
.paid-acts { display: flex; gap: 8px; align-items: center; }
.paid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.paid-stats > div { background: #ffffff06; border-radius: 10px; padding: 9px 10px; }
.paid-stats b { font: 700 15px var(--mono); }
.paid-sec { display: flex; justify-content: space-between; align-items: center; font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.paid .me-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
@media (max-width: 600px) {
  .me { left: 8px; right: 8px; width: auto; top: 64px; }
  .paid-stats { grid-template-columns: 1fr 1fr; }
}

.pf-w { display: inline-flex; align-items: baseline; gap: 6px; }
.pf-scan { font: 600 14px var(--sans); color: var(--dim); transition: color .2s, transform .2s; display: inline-block; }
.pf-scan:hover { color: var(--fg); transform: translate(1px, -1px); }
.ca-foot { background: none; border: 0; padding: 0; font: 500 11px var(--mono); color: var(--fg); cursor: pointer; }
.ca-foot:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-scan[hidden] { display: none; }

/* CA pill on the board */
.ca-pill { position: absolute; right: 32px; bottom: 32px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 9px; border-radius: 999px; line-height: 1;
  border: 1px solid #262626; background: linear-gradient(160deg, #141414e6, #0a0a0ae6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--fg); cursor: pointer; transition: border-color .3s, box-shadow .3s, opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
.ca-pill:hover { border-color: #444; box-shadow: 0 0 30px #ff3b3022; }
.ca-pill .sph { display: block; }
.ca-k { font: 600 10px/1 var(--mono); letter-spacing: .12em; color: var(--dim); }
.ca-pill code { font: 600 12px/1 var(--mono); display: block; }
body:not([data-view="board"]) .ca-pill { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (max-width: 600px) { .ca-pill { right: 50%; transform: translateX(50%); bottom: calc(16px + env(safe-area-inset-bottom)); } body:not([data-view="board"]) .ca-pill { transform: translate(50%, 12px); } }

/* squads */
.av-img { width: var(--s); height: var(--s); border-radius: 50%; object-fit: cover; flex: none; background: #1a1a1a; box-shadow: 0 0 0 1px #ffffff14; display: inline-block; }
.av-img.ph { background: linear-gradient(135deg, hsl(var(--h, 0) 20% 30%), #111); }
.av-img.big { box-shadow: 0 0 0 1px #ffffff1f, 0 16px 40px -12px #000; }
.sq-q { margin: 18px 0 10px; }
.sq-list { display: flex; flex-direction: column; }
.sq-row { display: grid; grid-template-columns: 34px 40px 1fr 110px 96px; gap: 12px; align-items: center; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--fg); text-align: left; cursor: pointer; border-radius: 10px; transition: background .2s; font: inherit;
  animation: rowup .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * 18ms); }
.sq-row:hover { background: #ffffff06; }
.sq-rank { font: 600 12px var(--mono); color: var(--dim); }
.sq-name { min-width: 0; display: flex; flex-direction: column; }
.sq-name b { font: 600 15px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-name small { font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-hold { display: flex; flex-direction: column; }
.sq-hold b { font: 600 13px var(--mono); }
.sq-hold .mini i { background: #ffffff80; }
.sq-pnl, .tr-p { font: 600 12px var(--mono); text-align: right; white-space: nowrap; }
.pos { color: var(--green); } .neg { color: var(--red); }
.sq-back { background: none; border: 0; color: var(--dim); font: 500 12px var(--mono); cursor: pointer; padding: 0; margin-bottom: 18px; }
.sq-back:hover { color: var(--fg); }
.sq-hero { display: flex; align-items: center; gap: 18px; }
.sq-hero .h { font-size: 32px; overflow-wrap: anywhere; }
.sq-hero small { font: 500 12px var(--mono); color: var(--dim); }
.sq-stats { grid-template-columns: repeat(3, 1fr) !important; margin: 20px 0 6px; }
.sq-acts { margin: 14px 0 22px !important; }
.sq-bags { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 22px; }
.sq-bag { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: #ffffff06; }
.sq-bag .sph { grid-row: span 2; }
.sq-bag b { font: 700 13px var(--mono); }
.sq-bag small { font: 500 11px var(--mono); color: var(--dim); }
.sq-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin-top: 10px; }
.tr-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #ffffff05; border: 1px solid transparent; transition: .2s;
  animation: rowup .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(.1s + var(--i) * 20ms); }
.tr-card:hover { border-color: #2a2a2a; background: #ffffff09; }
.tr-n { min-width: 0; display: flex; flex-direction: column; }
.tr-n b { font: 600 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-n small { font: 500 11px var(--mono); color: var(--dim); }
.crew { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 2px; }
.crew-l { font: 500 10px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.crew-av { display: flex; align-items: center; }
.crew-av .av-img { margin-left: -7px; box-shadow: 0 0 0 2px #0e0e0e; }
.crew-av em { font-style: normal; font: 600 11px var(--mono); color: var(--dim); margin-left: 6px; }
.label.squad { font: 600 11px var(--mono); color: #a8a8a8; }
@media (max-width: 600px) {
  .sq-row { grid-template-columns: 26px 36px 1fr 74px; }
  .sq-row .sq-hold { display: none; }
  .sq-crew { grid-template-columns: 1fr; }
}
.sph.img { background:
    radial-gradient(circle at 34% 28%, #ffffffb0 0, #ffffff26 14%, #fff0 34%),
    radial-gradient(circle at 50% 50%, #0000 58%, #000a 100%),
    var(--img) center / cover, #1a1a1a;
  box-shadow: inset -3px -6px 12px #0008, 0 0 0 1.5px var(--c), 0 10px 26px -10px var(--c); }

#check-connect[hidden], #paste-check[hidden] { display: none; }