/* DegenAgents' moving parts (2026-11-05), on top of coin.css: the live feed, the
   leaderboard, an agent's statistics, a bet's receipt and its share card, the chip you can play, the game gallery and
   the launch sequence. Reads tokens.css. Wins are gold or green, losses red; motion stops with the footer's switch. */
:root { --up: #0F8A4B; --up-hi: #5BE38B; --down-hi: #FF7A88; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 74, 94, .6); } 70% { box-shadow: 0 0 0 8px rgba(255, 74, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 94, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.live-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF4A5E; animation: live-pulse 1.6s infinite; }
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
[data-motion="off"] .live-dot, [data-motion="off"] .spin { animation: none; }

/* ---------- the live feed ---------- */
.live-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: var(--border); }
.live-badge { display: inline-flex; align-items: center; gap: 9px; color: var(--pk); font: 600 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.live-count { font: 600 12px var(--font-mono); color: var(--muted); }
.live-count.pop { animation: pop .5s var(--ease); }
.live-tabs { margin-left: auto; }
.live-list { min-height: 120px; }
.feed-row.fresh { animation: fresh 2.6s var(--ease); }
@keyframes fresh { 0% { opacity: 0; transform: translateY(-8px); background: rgba(255, 194, 61, .45); } 12% { opacity: 1; transform: none; } 100% { background: transparent; } }
.feed-row.big { background: linear-gradient(90deg, rgba(255, 194, 61, .18), transparent 70%); }
.feed-row.big .res-tag { font-weight: 800; }
.kind-tag { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); font: 600 10.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; }
.k-launch .kind-tag { background: #1A0A0D; color: var(--gold); }
.k-house .kind-tag, .k-buyback .kind-tag { background: var(--pk); color: #fff; }
.k-graduated .kind-tag { background: var(--grad-hi); color: #1A0A0D; }
.sk-row { grid-template-columns: 40px 1fr 90px !important; }
.sk-row .sk { height: 14px; border-radius: 6px; background: var(--bg-2); }
.sk-row .sk.short { width: 70%; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; margin-top: 36px; align-items: start; }
.live-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.live-nums div { padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.live-nums span { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.live-nums b { display: block; margin-top: 6px; font: 800 26px var(--font-display); letter-spacing: -.03em; }
.btn .live-dot { margin-right: 2px; }

/* ---------- the leaderboard ---------- */
.lb-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; }
.lb-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: start; }
.lb-card { padding: 8px 14px 14px; }
.lb-head { display: grid; grid-template-columns: 52px 1fr auto; padding: 12px 10px; border-bottom: var(--border); font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lb-row { display: grid; grid-template-columns: 42px minmax(150px, 1.5fr) minmax(100px, .9fr) repeat(5, minmax(52px, .55fr)); align-items: center; gap: 10px; padding: 11px 10px; border-bottom: var(--border); border-radius: 12px; color: inherit; transition: background .2s; }
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--bg); }
.lb-rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); font: 700 13px var(--font-mono); }
.lb-row.p1 .lb-rank { background: var(--grad-hi); outline: 2px dashed rgba(26, 10, 13, .35); outline-offset: -5px; }
.lb-row.p2 .lb-rank { background: #E6DED9; }
.lb-row.p3 .lb-rank { background: #F2C9A8; }
.lb-coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-coin > span:last-child { display: grid; min-width: 0; }
.lb-coin b { font: 700 15px var(--font-mono); }
.lb-coin small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); }
.lb-main { font: 800 18px var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.lb-main.up, .lb-cell.up { color: var(--up); }
.lb-main.down, .lb-cell.down { color: var(--pk); }
.lb-cell { display: grid; font: 600 13px var(--font-mono); white-space: nowrap; }
.lb-cell small { font: 500 9.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.lb-list.compact .lb-row { grid-template-columns: 42px minmax(0, 1.5fr) minmax(90px, .9fr) repeat(2, minmax(52px, .5fr)); }
.lb-list.compact .lb-cell:nth-child(n+6) { display: none; }
.lb-note { margin: 14px 10px 4px; }
.bw-row { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: var(--border); }
.bw-row:last-child { border-bottom: 0; }
.bw-rank { font: 600 12px var(--font-mono); color: var(--dim); }
.bw-tile { display: grid; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; }
.bw-tile svg { width: 100%; height: 100%; }
.bw-what { display: grid; min-width: 0; color: inherit; }
.bw-what b { font: 700 14px var(--font-mono); }
.bw-what span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); }
.bw-what:hover b { color: var(--pu); }
.bw-mult { font: 800 16px var(--font-display); color: var(--good); }
.bw-won { font: 600 12px var(--font-mono); color: var(--good); }
.btn.ghost-dark { height: 32px; padding: 0 12px; border-radius: 9px; background: var(--bg-2); box-shadow: none; font-size: 13px; }
.card h3 .link-arrow { font: 600 13px var(--font-text); }

/* ---------- an agent's statistics ---------- */
.stats-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-rank a { font: 600 12px var(--font-mono); color: var(--pu); }
.st-bigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.st-big { display: grid; gap: 4px; min-width: 0; padding: 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.st-big span { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-big b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 23px var(--font-display); letter-spacing: -.03em; }
.st-big small { font-size: 12px; color: var(--muted); }
.st-big.up b { color: var(--up); }
.st-big.down b { color: var(--pk); }
.st-smalls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; border-top: var(--border); border-bottom: var(--border); }
.st-small { padding: 12px 12px 12px 0; min-width: 0; }
.st-small span { display: block; font: 500 10px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.st-small b { font: 700 14.5px var(--font-text); }
.st-label { margin: 20px 0 8px; font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-game { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(60px, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: var(--border); }
.st-game:last-child { border-bottom: 0; }
.st-gi { display: grid; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; }
.st-gi svg { width: 100%; height: 100%; }
.st-gn { display: grid; min-width: 0; }
.st-gn small { font-size: 12px; color: var(--muted); }
.st-bar { height: 8px; border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 8px; background: var(--grad); }
.st-gnet { font: 600 13px var(--font-mono); white-space: nowrap; }
.st-gnet.up { color: var(--up); }
.st-gnet.down { color: var(--pk); }
.coin-main { display: grid; gap: 22px; align-content: start; }

/* ---------- sharing ---------- */
.share-card { aspect-ratio: 1200 / 630; border-radius: 16px; overflow: hidden; background: #1E1E1E; box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .65); }
.share-card img { display: block; width: 100%; height: 100%; }
.share-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.share-bar .btn { height: 42px; }
.btn.x-post { background: #000; color: #fff; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); }
.btn.x-post span { display: grid; }
.share-note { margin-top: 12px; font-size: 13.5px; }
.modal-panel:has(.share-card) { width: min(760px, calc(100vw - 28px)); max-width: none; }
.share-agent { background: #1A0A0D; color: #fff; }
.coin-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- a bet's receipt ---------- */
.bet-hero { display: grid; gap: 16px; }
.bet-id { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.bet-coin { display: flex; align-items: center; gap: 12px; color: inherit; }
.bet-coin > span:last-child { display: grid; }
.bet-coin b { font: 800 21px var(--font-display); letter-spacing: -.03em; }
.bet-coin small { color: var(--muted); }
.vf-badge { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--bg-2); font: 600 13px var(--font-mono); }
.vf-badge.ok { background: #E4F6EB; color: #0B7140; }
.vf-badge.bad { background: #FDE6E9; color: var(--pk); }
.bet-verdict { position: relative; overflow: hidden; padding: 34px 36px; border-radius: 28px; color: #fff; background: radial-gradient(55% 120% at 88% 15%, rgba(255, 194, 61, .26), transparent 60%), linear-gradient(180deg, #2A2A2A, #1E1E1E); }
.bet-verdict.lost { background: radial-gradient(55% 120% at 88% 15%, rgba(227, 40, 59, .3), transparent 60%), linear-gradient(180deg, #2A2A2A, #1E1E1E); }
.bet-verdict .k { color: var(--gold); font: 600 12.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.bet-verdict h1 { margin-top: 12px; color: #fff; font-size: clamp(56px, 9vw, 124px); letter-spacing: -.06em; }
.bet-verdict.won h1 { background: var(--grad-hi); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bet-money { margin-top: 4px; font: 800 clamp(28px, 4vw, 46px) var(--font-display); letter-spacing: -.03em; }
.won .bet-money { color: var(--up-hi); }
.lost .bet-money { color: var(--down-hi); }
.push .bet-money { color: rgba(255, 255, 255, .7); }
.bet-facts { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start; gap: 4px 30px; margin-top: 22px; }
.bet-facts dt { font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.bet-facts dd { font: 600 15px var(--font-mono); color: #fff; }
.bet-tile { position: absolute; right: 40px; top: 50%; display: grid; width: 170px; height: 170px; border-radius: 30px; overflow: hidden; transform: translateY(-50%) rotate(8deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); }
.bet-tile svg { width: 100%; height: 100%; }
.bet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; margin-top: 22px; align-items: start; }
.bet-share h3 span, .bet-verify h3 span { font: 500 12px var(--font-mono); color: var(--muted); }
.bet-share .share-card { margin-top: 14px; }
.verify { list-style: none; display: grid; gap: 14px; margin: 16px 0 0; padding: 0; }
.vf { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.vf-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); color: var(--muted); font: 600 12px var(--font-mono); }
.vf.ok .vf-mark { background: var(--up); color: #fff; }
.vf.bad .vf-mark { background: var(--pk); color: #fff; }
.vf b { display: block; padding-top: 4px; }
.vf-body { margin-top: 4px; font-size: 14px; color: var(--muted); }
.seeds { margin-top: 20px; padding-top: 14px; border-top: var(--border); }
.seeds summary { cursor: pointer; font-weight: 600; }
.seeds .facts { margin-top: 12px; }
.break { word-break: break-all; }

/* ---------- the hero: the new line, and the chip you can play ---------- */
.hero .tagline { margin-top: 18px; color: var(--gold); font: 700 clamp(20px, 2vw, 27px)/1.2 var(--font-display); letter-spacing: -.025em; }
.hero .sub { margin-top: 14px; }
.hero { padding-top: 44px; }
.cw-col { gap: 14px; }
.cw { width: min(100%, 540px); }
.cw-kicker { color: var(--mg); font: 600 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.cw-stage { border-radius: 50%; cursor: grab; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; }
.cw-stage.grab { cursor: grabbing; }
.cw-stage:focus-visible { box-shadow: 0 0 0 5px rgba(255, 194, 61, .65); }
.cw-stage.landed-won svg { animation: cw-won 1.1s var(--ease); }
@keyframes cw-won { 35% { filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)) drop-shadow(0 0 80px rgba(255, 194, 61, .8)); } }
.cw-play { display: grid; justify-items: center; gap: 12px; width: min(100%, 540px); }
.cw-styles { justify-content: center; }
.cw-styles button { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cw-styles button[aria-pressed="true"] { background: var(--grad-hi); color: #1A0A0D; box-shadow: none; }
.cw-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.cw-spin { height: 62px; padding: 0 44px; border: 0; border-radius: 999px; background: var(--grad-hi); color: #1A0A0D; cursor: pointer; font: 800 23px var(--font-display); letter-spacing: -.01em; text-transform: uppercase; box-shadow: 0 0 0 6px rgba(255, 194, 61, .2), 0 18px 40px -14px rgba(255, 170, 60, .75); animation: spin-pulse 2.4s infinite; transition: transform .15s; }
.cw-spin:hover { transform: translateY(-2px); }
.cw-spin:active, .cw-spin.going { transform: scale(.97); animation: none; }
.cw-spin:disabled { opacity: .45; cursor: default; animation: none; }
@keyframes spin-pulse { 50% { box-shadow: 0 0 0 13px rgba(255, 194, 61, .07), 0 18px 40px -14px rgba(255, 170, 60, .75); } }
.cw-bank { display: grid; gap: 2px; color: rgba(255, 255, 255, .58); font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cw-bank div { display: flex; align-items: baseline; gap: 10px; }
.cw-bank-n { color: #fff; font: 800 27px var(--font-display); letter-spacing: -.03em; text-transform: none; }
.cw-delta { font: 700 14px var(--font-mono); font-style: normal; letter-spacing: 0; }
.cw-delta.up { color: var(--up-hi); }
.cw-delta.down { color: var(--down-hi); }
.cw-delta.pop { animation: pop .6s var(--ease); }
.cw-betline { min-height: 20px; color: rgba(255, 255, 255, .72); font-size: 13.5px; text-align: center; }
.cw-betline .link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cw-hint { max-width: 460px; color: rgba(255, 255, 255, .5); font-size: 12.5px; text-align: center; }
[data-motion="off"] .cw-spin { animation: none; }

/* ---------- the hero's wall answers the pointer: a row stops, a tile lifts and names its game ---------- */
.hero .hero-grid, .hero .hc, .hero .cw-col { pointer-events: none; }
.hero .hc > *, .hero .cw-col > * { pointer-events: auto; }
.tilewall.live { pointer-events: auto; }
.tw-tile { position: relative; display: block; flex: none; border-radius: 14px; transition: transform .35s var(--ease), filter .35s; }
.tilewall.live .tw-tile { cursor: pointer; }
.tilewall.live .tw-row:hover { animation-play-state: paused; }
.tilewall.live .tw-tile:hover { z-index: 2; transform: scale(1.13); filter: brightness(1.25) saturate(1.15); }
.tilewall.live .tw-tile:hover::after { content: attr(data-game) " · tap to play"; position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(26, 10, 13, .88); color: #fff; font: 600 11px var(--font-mono); white-space: nowrap; }
/* wide screens: the wall shows brighter on the right, where the chip is; a phone keeps coin.css's even shade for the words */
@media (min-width: 861px) {
  .hero::before { background: linear-gradient(180deg, rgba(26, 10, 13, .08) 0%, rgba(26, 10, 13, .08) 60%, #1A0A0D 100%), linear-gradient(90deg, rgba(26, 10, 13, .84) 0%, rgba(26, 10, 13, .6) 46%, rgba(26, 10, 13, .1) 100%); }
}

/* ---------- the games, big ---------- */
.gg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 290px; gap: 16px; }
.gg-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; background: #1A0A0D; color: #fff; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s var(--ease), box-shadow .3s; box-shadow: 0 24px 50px -36px rgba(40, 8, 14, .85); }
.gg-card:hover { box-shadow: 0 34px 60px -30px rgba(227, 23, 47, .55); }
.gg-slots { grid-column: span 2; grid-row: span 2; }
.gg-roulette, .gg-blackjack { grid-column: span 2; }
.gg-photo { position: absolute; inset: 0; z-index: -1; }
.gg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gg-card:hover .gg-photo img { transform: scale(1.06); }
.gg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 10, 13, 0) 25%, rgba(26, 10, 13, .78) 68%, #1A0A0D 100%); }
.gg-count { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 9px; border-radius: 999px; background: rgba(26, 10, 13, .72); font: 600 11px var(--font-mono); }
.gg-info { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 16px; }
.gg-name b { display: block; font: 800 23px var(--font-display); letter-spacing: -.03em; }
.gg-slots .gg-name b { font-size: clamp(32px, 3.4vw, 46px); }
.gg-name span { font-size: 13px; color: rgba(255, 255, 255, .74); }
.gg-odds { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.gg-odds span { display: grid; font: 700 14px var(--font-mono); }
.gg-odds small { font: 500 9.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.gg-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-spin { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--grad-hi); color: #1A0A0D; cursor: pointer; font: 800 14px var(--font-display); }
.gg-add { height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font: 600 13px var(--font-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.gg-add.on { background: #fff; color: #1A0A0D; box-shadow: none; }
.gg-res { position: absolute; left: 50%; top: 36%; display: grid; justify-items: center; gap: 2px; padding: 14px 22px; border-radius: 18px; background: rgba(26, 10, 13, .84); backdrop-filter: blur(6px); font: 800 28px var(--font-display); letter-spacing: -.02em; text-align: center; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; }
.gg-res small { font: 600 11px var(--font-mono); opacity: .72; }
.gg-card.rolling .gg-res, .gg-card.won .gg-res, .gg-card.lost .gg-res, .gg-card.push .gg-res { opacity: 1; transform: translate(-50%, -50%); }
.gg-card.won .gg-res { background: var(--grad-hi); color: #1A0A0D; }
.gg-card.won { box-shadow: 0 0 0 3px var(--gold), 0 34px 60px -30px rgba(255, 194, 61, .65); }
.gg-card.called { animation: called 1.3s var(--ease); }
@keyframes called { 30% { box-shadow: 0 0 0 4px var(--gold), 0 0 70px rgba(255, 194, 61, .65); } }
.gg-foot { margin-top: 16px; color: var(--muted); font-size: 13.5px; }
.gg-tally { color: var(--ink-2); font-weight: 600; }

/* ---------- the launch, as a show ---------- */
body.seq-open { overflow: hidden; }
.seq { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(12, 4, 6, .93); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.seq.in { opacity: 1; }
.seq-glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 50% 28%, rgba(227, 23, 47, .38), transparent 70%); transition: background .6s; }
.seq.alive .seq-glow { background: radial-gradient(45% 55% at 50% 26%, rgba(255, 194, 61, .32), transparent 70%); }
.seq-panel { position: relative; display: grid; justify-items: center; gap: 6px; width: min(560px, 100%); padding: 16px 0; color: #fff; text-align: center; }
.seq-stage { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin-bottom: 12px; }
.seq-ring { position: absolute; inset: 0; }
.seq-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seq-ring .track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 6; }
.seq-ring .fill { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset .6s var(--ease); }
.seq-face { display: grid; width: 136px; height: 136px; }
.seq-face svg { width: 100%; height: 100%; }
.seq-face.asleep { animation: spin 2.6s linear infinite; }
.seq-face.awake { animation: pop .7s var(--ease); }
.seq-title { color: #fff; font: 800 clamp(30px, 5vw, 46px) var(--font-display); letter-spacing: -.04em; }
.seq.alive .seq-title { background: var(--grad-hi); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seq-sub { max-width: 460px; color: rgba(255, 255, 255, .72); font-size: 15.5px; }
.seq-steps { display: grid; gap: 8px; width: min(430px, 100%); margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.seq-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .5); font-weight: 600; transition: background .3s, color .3s; }
.seq-mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .08); font: 600 12px var(--font-mono); }
.seq-steps li.now { background: rgba(255, 255, 255, .1); color: #fff; }
.seq-steps li.now .seq-mark { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); animation: seq-pulse 1.2s infinite; }
.seq-steps li.done { color: #fff; }
.seq-steps li.done .seq-mark { background: #23A866; color: #fff; }
.seq-steps li.bad .seq-mark { background: var(--pk); color: #fff; }
@keyframes seq-pulse { 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 6px rgba(255, 194, 61, .16); } }
.seq.alive .seq-steps { display: none; }
.seq-after { display: grid; gap: 14px; width: min(520px, 100%); margin-top: 10px; }
.seq-after:empty { display: none; }
.seq-ca { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); text-align: left; }
.seq-ca small { color: rgba(255, 255, 255, .55); font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.seq-ca b { color: #fff; font: 600 13px var(--font-mono); word-break: break-all; }
.seq-ca .btn { justify-self: start; margin-top: 4px; }
.seq-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.seq-fine { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.seq-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.seq-burst i { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--c); border: 3px dashed rgba(255, 255, 255, .75); animation: burst var(--d) cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes burst { from { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } }
[data-motion="off"] .seq-face, [data-motion="off"] .seq-steps li .seq-mark { animation: none; }

/* the agent's plate: before the signature (in the confirm) and after the launch (in the show) */
.agent-plate { display: grid; gap: 12px; width: 100%; padding: 18px; border-radius: 22px; color: #fff; text-align: left; background: radial-gradient(70% 100% at 100% 0%, rgba(227, 23, 47, .35), transparent 60%), #1E1E1E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.agent-plate.live { box-shadow: inset 0 0 0 2px var(--gold), 0 0 70px -12px rgba(255, 194, 61, .5); animation: pop .6s var(--ease); }
.ap-top { display: flex; align-items: center; gap: 12px; }
.ap-coin { display: grid; flex: none; width: 56px; height: 56px; }
.ap-coin svg, .ap-face svg { width: 100%; height: 100%; }
.ap-id { display: grid; flex: 1; min-width: 0; }
.ap-id small { color: var(--gold); font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ap-id b { font: 800 24px var(--font-display); letter-spacing: -.03em; }
.ap-id span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .6); font-size: 13px; }
.ap-face { display: grid; width: 46px; height: 46px; }
.ap-vibe { color: rgba(255, 255, 255, .78); font-size: 14px; font-style: italic; }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-casino, .ap-style { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 600; }
.ap-casino img { border-radius: 50%; }
.ap-games { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-game { display: grid; justify-items: center; gap: 3px; }
.ap-game > span { display: grid; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; }
.ap-game svg { width: 100%; height: 100%; }
.ap-game small { color: rgba(255, 255, 255, .6); font: 600 10.5px var(--font-mono); }
.ap-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ap-stats div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.ap-stats small { display: block; color: rgba(255, 255, 255, .5); font: 500 9.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.ap-stats b { font: 700 15px var(--font-text); }
.ap-split { display: flex; height: 28px; border-radius: 8px; overflow: hidden; font: 600 11px var(--font-mono); }
.ap-split i { display: grid; place-items: center; padding: 0 8px; font-style: normal; white-space: nowrap; }
.ap-split i:nth-child(1) { background: var(--grad); }
.ap-split i:nth-child(2) { background: #000; }
.ap-split i:nth-child(3) { background: var(--gold); color: #1A0A0D; }
.confirm-plate { margin-bottom: 16px; }
.confirm-plate .k { display: block; margin-bottom: 8px; color: var(--pu); font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.as-receipt { color: var(--gold) !important; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .lb-row { grid-template-columns: 42px minmax(140px, 1.5fr) minmax(90px, .9fr) repeat(3, minmax(52px, .55fr)); }
  .lb-row .lb-cell:nth-child(n+7) { display: none; }
  .st-smalls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gg-slots { grid-column: span 2; }
  .gg-roulette, .gg-blackjack { grid-column: span 1; }
}
@media (max-width: 860px) {
  .live-grid, .lb-grid, .bet-grid { grid-template-columns: minmax(0, 1fr); }
  .live-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-bigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bet-tile { display: none; }
  .gg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px; }
  .gg-slots { grid-column: span 2; grid-row: span 2; }
  .gg-roulette, .gg-blackjack { grid-column: span 2; }
  .live-tabs { margin-left: 0; }
  .hero .hero-grid, .hero .hc, .hero .cw-col { pointer-events: auto; }
  .tilewall.live { pointer-events: none; }
}
@media (max-width: 640px) {
  .lb-row, .lb-list.compact .lb-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 4px; }
  .lb-row .lb-cell { display: none; }
  .lb-rank { width: 28px; height: 28px; }
  .bw-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
  .bw-rank, .bw-won { display: none; }
  .st-smalls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-game { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .st-bar { display: none; }
  .bet-verdict { padding: 26px 22px; border-radius: 22px; }
  .bet-facts { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(2, auto); }
  .gg-grid { grid-auto-rows: 230px; gap: 12px; }
  .gg-card:not(.gg-slots):not(.gg-roulette):not(.gg-blackjack) .gg-odds span:nth-child(3) { display: none; }
  .gg-card:not(.gg-slots):not(.gg-roulette):not(.gg-blackjack) .gg-name span { display: none; }
  .gg-acts button { flex: 1; padding: 0 8px; }
  .cw-spin { height: 56px; padding: 0 36px; font-size: 21px; }
  .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seq-stage { width: 150px; height: 150px; }
  .seq-face { width: 106px; height: 106px; }
  .share-bar .btn { flex: 1 1 calc(50% - 10px); }
}