/* coins.css · 11-03 (hype-coins lane), loaded last: the coin battle band, the coin stage, the line game, the honest facts,
   the Promote kit and its billboard scene. Stages are night stages (white on deep colour) in both themes; the rest uses the
   app's neutral tokens. Motion only under prefers-reduced-motion: no-preference; blur nowhere (a 4-core laptop). */

.stage-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0 }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95 }
.flip { transform: scaleX(-1) }
.down { transform: rotate(180deg) }

/* a coin that floats and turns */
.coin { display: inline-block; perspective: 600px; flex: none }
.coin svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px hsl(var(--h, 330) 80% 18% / .5)) }
@media (prefers-reduced-motion: no-preference) {
  .coin svg { animation: coin-turn 6s ease-in-out infinite, coin-float 4s ease-in-out infinite }
  .cc:nth-child(2) .coin svg, .cbm-r:nth-of-type(2) .coin svg { animation-delay: -1.3s, -.9s }
  .cc:nth-child(3) .coin svg, .cbm-r:nth-of-type(3) .coin svg { animation-delay: -2.6s, -1.8s }
}
@keyframes coin-turn { 0%, 100% { transform: rotateY(-24deg) } 50% { transform: rotateY(24deg) } }
@keyframes coin-float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -6px } }

/* ---------- the coin battle band (Home) */
.cb { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; margin: 0 0 24px; color: #FFFFFF; background: hsl(262 30% 9%) } /* 11-04 PATTERN §3d: the club's plum dark, never pink beside the lavender */
.cb-in { position: relative; z-index: 1; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) 20px }
.cb-eye { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 12px; min-height: 30px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.cb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live) }
@media (prefers-reduced-motion: no-preference) { .cb-dot { animation: cb-ping 1.8s ease-out infinite } }
@keyframes cb-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 75%, transparent) } 100% { box-shadow: 0 0 0 12px transparent } }
.cb-h { margin: 0; max-width: 17ch; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.02; font-weight: 900; letter-spacing: -.025em; text-wrap: balance }
.cb-h em { font-style: normal; background: linear-gradient(90deg, #FF8FB8, #FFD54A, #7EE8FA, #FF8FB8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent }
@media (prefers-reduced-motion: no-preference) { .cb-h em { animation: cb-shine 8s linear infinite } }
@keyframes cb-shine { to { background-position: 300% 0 } }
.cb-sub { margin: 12px 0 22px; max-width: 62ch; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88) }
.cb-sub b { color: #FFFFFF }
.cb-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.cc { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-width: 0; padding: 18px 16px 16px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, hsl(var(--h) 75% 55% / .26), rgba(255, 255, 255, .05) 62%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) }
.cc.lead { border-color: #FFD54A; box-shadow: 0 0 0 1px #FFD54A, 0 16px 44px -16px rgba(255, 213, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .2) }
@media (prefers-reduced-motion: no-preference) { .cc { transition: transform .2s ease, box-shadow .2s ease } .cc:hover { transform: translateY(-4px) } }
.cc-lead { position: absolute; top: -12px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 12px; border-radius: 999px; background: #FFD54A; color: #241A00; font-size: 13px; font-weight: 800; white-space: nowrap }
.cc-lead .ic { width: 16px; height: 16px }
.cc-art { display: block; width: clamp(88px, 10vw, 124px); aspect-ratio: 1; margin: 2px auto 0 }
.cc-art .coin { width: 100%; height: 100% }
.cc-x { display: grid; align-content: start; gap: 6px; min-width: 0 }
.cc-sym { color: #FFFFFF; text-decoration: none; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; font-weight: 900; letter-spacing: -.01em; overflow-wrap: anywhere }
.cc-sym:hover { text-decoration: underline }
.cc-tag { font-size: 14px; color: rgba(255, 255, 255, .84) }
.cc-bar { height: 8px; margin-top: 4px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden }
.cc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--h) 92% 62%), #FFD54A) }
@media (prefers-reduced-motion: no-preference) { .cc-bar i { transition: width .8s cubic-bezier(.2, .8, .2, 1) } }
.cc-n { font-size: 13px; color: rgba(255, 255, 255, .82) }
.cc-n b { color: #FFFFFF; font-size: 15px; font-variant-numeric: tabular-nums }
.cc-act { display: flex; gap: 8px; justify-content: center }
.cb .btn { min-height: 44px }
.cc-pick { flex: 1; max-width: 200px; background: #FFFFFF; color: #121212; font-weight: 800 }
.cc-pick:hover { background: #EDEDED }
.cc-pick.on { background: hsl(var(--h) 88% 64%); color: #12000A }
.cc-open { width: 44px; padding: 0; flex: none; background: rgba(255, 255, 255, .14); color: #FFFFFF }
.cc-open:hover { background: rgba(255, 255, 255, .26) }
.cb-tape { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .28); white-space: nowrap; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .9) }
.cb-tape-in { display: inline-flex; gap: 18px; padding: 11px 0 11px 18px; min-width: max-content }
.cb-tape b { color: #FFFFFF }
.cb-tape i { font-style: normal; color: #FFD54A }
@media (prefers-reduced-motion: no-preference) { .cb-tape-in { animation: cb-tape 40s linear infinite } }
@keyframes cb-tape { to { transform: translateX(-50%) } }
@media (max-width: 759px) {
  .cb { border-radius: 22px; margin: 0 0 16px }
  .cb-row { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .cc { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 14px; align-items: center; padding: 16px 14px 14px; text-align: left }
  .cc-art { grid-row: 1 / span 2; width: 64px; margin: 0 }
  .cc-x { gap: 4px }
  .cc-sym { font-size: 22px }
  .cc-act { grid-column: 2; justify-content: flex-start }
  .cc-pick { max-width: none }
  .cc-lead { left: auto; right: 14px; translate: none }
}

/* ---------- a coin drop's page: the stage replaces the generic hero */
.watch.coin-page .hero { display: none }
.cs { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 16px; border-radius: 24px; color: #FFFFFF; background: hsl(var(--h) 45% 9%) }
.cs-in { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 4vw, 40px); padding: clamp(20px, 4vw, 40px) }
.cs-coin { width: clamp(120px, 17vw, 200px); aspect-ratio: 1 }
.cs-x { display: grid; gap: 8px; min-width: 0 }
.cs-live, .cs-chip { justify-self: start; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-decoration: none }
.cs-live { background: #E0001B; color: #FFFFFF }
.cs-chip { background: rgba(255, 255, 255, .14); color: #FFFFFF }
a.cs-chip:hover { background: rgba(255, 255, 255, .26) }
.cs-sym { margin: 0; font-size: clamp(42px, 7vw, 80px); line-height: .95; font-weight: 900; letter-spacing: -.03em; overflow-wrap: anywhere; text-shadow: 0 6px 30px hsl(var(--h) 90% 50% / .55) }
.cs-tag { margin: 0; font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: rgba(255, 255, 255, .92) }
.cs-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0; font-size: 14px; color: rgba(255, 255, 255, .86) }
.cs-meta span:not(:first-child)::before { content: "·"; margin-right: 10px; color: rgba(255, 255, 255, .55) }
.cs-meta b { color: #FFFFFF }
.cs-promise { display: flex; gap: 8px; align-items: flex-start; max-width: 54ch; margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .92) }
.cs-promise .ic { width: 20px; height: 20px; flex: none; margin-top: 1px }
.ca { display: grid; gap: 10px; margin-top: 6px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .2) }
.ca-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9BFFC9 }
.ca-l .ic { width: 18px; height: 18px }
.ca-row { display: flex; gap: 8px; align-items: center; min-width: 0 }
.ca-row code { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #FFFFFF; font: 600 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere }
.cs .btn.primary { background: #FFFFFF; color: #121212; min-height: 44px }
.ca-links { display: flex; flex-wrap: wrap; gap: 8px }
.ca-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none }
.ca-links a:hover { background: rgba(255, 255, 255, .25) }
.ca-links a .ic { width: 16px; height: 16px }
.ca-f { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .82) }
.ca-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 8px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .34) }
.ca-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .92) }
.ca-form input { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .34); background: rgba(0, 0, 0, .32); color: #FFFFFF; font: inherit; font-size: 15px; min-width: 0 }
.ca-form input::placeholder { color: rgba(255, 255, 255, .6) }
.ca-form .btn { min-height: 44px; background: #FFFFFF; color: #121212; font-weight: 800 }
.ca-form .err, .ca-form .ca-sure { grid-column: 1 / -1; margin: 0; font-size: 13px }
.ca-form .err { color: #FFC2C2 }
.ca-form .ca-sure { color: #FFE58F }
@media (max-width: 759px) {
  .cs-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 16px }
  .cs-coin { width: 136px }
  .cs-x { justify-items: center; width: 100% }
  .cs-live, .cs-chip { justify-self: center }
  .cs-meta { justify-content: center }
  .cs-promise, .ca, .ca-form { text-align: left; width: 100% }
  .ca-form { grid-template-columns: minmax(0, 1fr) }
  .ca-row { flex-wrap: wrap }
  .ca-row code { flex-basis: 100% }
}

/* the game card */
.cg-card { background: linear-gradient(135deg, hsl(var(--h) 80% 50% / .16), var(--bg2) 58%) }
.cg-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center }
.cg-ico { width: 56px; aspect-ratio: 1 }
.cg-t h2 { margin: 2px 0; font-size: 20px }
.cg-t .fine { margin: 0 }
.cg-go { min-height: 48px; padding: 0 24px; font-size: 16px; font-weight: 800 }
.cg-go .ic { width: 22px; height: 22px }
@media (prefers-reduced-motion: no-preference) { .cg-go { animation: cg-pulse 2.4s ease-in-out infinite } }
@keyframes cg-pulse { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--h) 90% 55% / .55) } 50% { box-shadow: 0 0 0 10px hsl(var(--h) 90% 55% / 0) } }
.cg-board { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px }
.cg-board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--bg) }
.cg-board li.me { box-shadow: inset 0 0 0 2px hsl(var(--h) 80% 50%) }
.cg-board li.cg-none { display: block; min-height: 0; padding: 12px; color: var(--ink2) }
.cg-rk { font-weight: 900; color: var(--ink2); font-variant-numeric: tabular-nums }
.cg-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cg-nm small { color: var(--ink2); font-size: 13px }
.cg-board b { font-variant-numeric: tabular-nums }
.cg-note { margin: 10px 0 0 }
@media (max-width: 480px) { .cg-top { grid-template-columns: 48px minmax(0, 1fr) } .cg-ico { width: 48px } .cg-go { grid-column: 1 / -1 } }

/* the game, full screen */
.cg { position: fixed; inset: 0; z-index: 80; background: #08040A; color: #FFFFFF; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; outline: none }
body.cg-open { overflow: hidden }
.cg-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: ew-resize }
.cg-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 0; pointer-events: none }
.cg-sc { display: flex; align-items: baseline; gap: 8px }
.cg-score { font-size: clamp(34px, 6vw, 52px); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 4px 22px hsl(var(--h) 90% 50% / .75) }
.cg-mult { font-size: 20px; font-weight: 900; color: #FFD54A }
.cg-lives { display: inline-flex; gap: 6px; margin-left: auto }
.cg-lives i { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .2) }
.cg-lives i.on { background: hsl(var(--h) 92% 64%); box-shadow: 0 0 10px hsl(var(--h) 92% 64%) }
.cg-x { pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #FFFFFF; cursor: pointer }
.cg-x .ic { width: 22px; height: 22px }
.cg-x:focus-visible, .cg-res .btn:focus-visible { outline: 3px solid #7EE8FA; outline-offset: 2px }
.cg-time { position: absolute; z-index: 2; left: 16px; right: 16px; top: calc(max(12px, env(safe-area-inset-top)) + 58px); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; pointer-events: none }
.cg-time i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--h) 92% 62%), #FFD54A) }
.cg-msg { position: absolute; z-index: 2; left: 0; right: 0; top: 36%; margin: 0; text-align: center; font-size: clamp(64px, 15vw, 128px); line-height: 1; font-weight: 900; pointer-events: none; text-shadow: 0 8px 44px hsl(var(--h) 90% 50% / .85) }
.cg-help { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); pointer-events: none }
.cg-res { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 38%, hsl(var(--h) 70% 22% / .9), rgba(8, 4, 10, .94) 70%) }
.cg-res[hidden] { display: none }
.cg-res-k { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82) }
.cg-res-n { margin: 0; font-size: clamp(76px, 18vw, 144px); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 10px 54px hsl(var(--h) 90% 55% / .85) }
.cg-res-b { margin: 0 0 14px; min-height: 24px; font-size: 16px; font-weight: 700; color: #FFE58F }
.cg-res-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(440px, calc(100vw - 48px)) }
.cg-res .btn { min-height: 48px; background: rgba(255, 255, 255, .15); color: #FFFFFF; font-weight: 800; white-space: normal; text-align: center; line-height: 1.2 }
.cg-res .btn:hover { background: rgba(255, 255, 255, .26) }
.cg-res .btn.primary { grid-column: 1 / -1; background: #FFFFFF; color: #121212 }
@media (prefers-reduced-motion: no-preference) { .cg-res:not([hidden]) .cg-res-n { animation: cg-pop .5s cubic-bezier(.2, 1.6, .4, 1) } }
@keyframes cg-pop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }

/* which drops first, on a coin's page */
.cbm-h h2 { margin: 2px 0 4px; font-size: 20px }
.cbm-h .fine { margin: 0 0 12px }
.cbm-r { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--bg) }
.cbm-r + .cbm-r { margin-top: 8px }
.cbm-r.me { box-shadow: inset 0 0 0 2px hsl(var(--h) 80% 50%) }
.cbm-c { width: 48px; aspect-ratio: 1 }
.cbm-x { display: grid; gap: 4px; min-width: 0 }
.cbm-x a { color: var(--ink); text-decoration: none; font-size: 16px; min-height: 24px }
/* 11-04 pivot proof: the battle row's ticker link reaches a 44 px tap area; the negative margin keeps the row where it was */
.cbm-x > a { display: block; padding: 10px 0; margin: -10px 0 }
.cbm-x small { color: var(--ink2); font-size: 13px; font-weight: 600 }
.cbm .cc-bar { background: var(--bg3) }
.cbm .cc-pick { flex: none; min-width: 96px; background: var(--ink); color: var(--bg) }
.cbm .cc-pick.on { background: hsl(var(--h) 88% 60%); color: #12000A }

/* honest launch */
.hf h2 .ic { width: 20px; height: 20px }
.hf-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px }
.hf-r { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg) }
.hf-r span { font-size: 13px; font-weight: 700; color: var(--ink2) }
.hf-r b { font-size: 15px; overflow-wrap: anywhere }
.hf-r b i { font-style: normal; font-weight: 600; color: var(--ink2) }
.hf-r code { font-size: 13px }
.hf-l { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--ink2) }

/* ---------- Promote */
.pm { --pm: hsl(var(--h) 80% 46%); display: grid; gap: 24px; min-width: 0 }
.pm-top { display: grid; gap: 14px; min-width: 0 }
.pm-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; color: var(--ink2); font-weight: 700; text-decoration: none }
.pm-back .ic { width: 20px; height: 20px }
.pm-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center }
.pm-head h1 { margin: 2px 0 6px; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: -.02em }
.pm-head p { margin: 0; max-width: 64ch; color: var(--ink2) }
.pm-art { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, hsl(var(--h) 70% 50%), hsl(var(--h) 70% 26%)); color: #FFFFFF; font-size: 32px; font-weight: 900 }
.pm-art.coin { background: none; border-radius: 0 }
.pm-sign { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--bg2) }
.pm-mylink .pm-code textarea { min-height: 44px }
.pm-nav { position: sticky; top: 72px; z-index: 5; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--bg2); box-shadow: var(--shadow, none); overflow-x: auto; scrollbar-width: none }
.pm-nav a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap }
.pm-nav a:hover { background: var(--bg3) }
.pm-sec { display: grid; gap: 14px; min-width: 0; scroll-margin-top: 140px }
.pm-sec-h h2 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.01em }
.pm-sec-h .fine { margin: 0; max-width: 72ch }
.pm-gh { margin: 8px 0 0; font-size: 15px }
.pm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.pm-seg { display: flex; flex-wrap: wrap; gap: 8px }
.pm-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer }
.pm-chip:hover { background: var(--bg2) }
.pm-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.pm-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px }
.pm-ad { margin: 0; display: grid; grid-template-rows: auto auto; gap: 8px; min-width: 0; padding: 10px; border-radius: 18px; background: var(--bg2) }
.pm-ad-f { display: grid; place-items: center; min-height: 140px; padding: 8px; border-radius: 12px; background: repeating-conic-gradient(var(--bg3) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; overflow: hidden }
.pm-ad-f canvas { display: block; max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18) }
.pm-ad figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0 }
.pm-ad figcaption span { display: grid; min-width: 0 }
.pm-ad figcaption b { font-size: 14px; overflow-wrap: anywhere }
.pm-ad figcaption small { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums }
.pm-zipnote:empty { display: none }
.pm-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start }
.pm-code textarea { width: 100%; min-width: 0; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.pm-code .btn { min-height: 44px }
.pm-wopt:empty { display: none }
.pm-site-mock { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; color: #121212 }
.pm-site-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #EFEFEF; border-bottom: 1px solid #E0E0E0 }
.pm-site-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CFCFCF }
.pm-site-bar span { margin-left: 8px; padding: 2px 12px; border-radius: 999px; background: #FFFFFF; color: #555555; font-size: 13px }
.pm-site-page { position: relative; min-height: 300px; padding: 22px 20px 90px }
.pm-site-mock.w-splash .pm-site-page { min-height: 420px }
.pm-sk { display: grid; gap: 10px; max-width: 560px }
.pm-sk b { display: block; width: 46%; height: 22px; border-radius: 8px; background: #DADADA }
.pm-sk i { display: block; height: 12px; border-radius: 6px; background: #E8E8E8 }
.pm-sk i.s { width: 70% }
.pm-pv iframe { border: 0; display: block; background: transparent; color-scheme: normal }
.pv-bar { position: absolute; left: 0; right: 0; width: 100%; height: 64px }
.pv-bar.bottom { bottom: 0 } .pv-bar.top { top: 0 }
.pm-site-mock.w-bar .pm-site-page:has(.pv-bar.top) { padding-top: 86px }
.pv-pop { position: absolute; right: 14px; bottom: 14px; width: min(360px, calc(100% - 28px)); height: 200px; border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3) }
.pv-splash { position: absolute; inset: 0; width: 100%; height: 100% }
.pv-ticker { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px }
.pv-flow { margin-top: 18px; display: grid; justify-items: start; max-width: 100% }
.pv-flow iframe { max-width: 100% }
.pm-chl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start }
.pm-qr { width: 180px; padding: 10px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--line) }
.pm-qr svg { display: block; width: 100%; height: auto }
.pm-chl-x { display: grid; gap: 10px; min-width: 0 }
.pm-chl-x .fine { margin: 0 }
.pm-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px }
.pm-word { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 14px; border-radius: 18px; background: var(--bg2) }
.pm-word textarea { width: 100%; min-width: 0; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif }
.pm-door { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, var(--bg2), var(--bg3)) }
.pm-door h2 { margin: 0 0 4px }
.pm-door .fine { margin: 0; max-width: 60ch }
.pm-btn .ic, .pm-door .ic { width: 20px; height: 20px }
.pm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px }
.pm-pick-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 72px; padding: 10px 14px; border-radius: 18px; background: var(--bg2); color: var(--ink); text-decoration: none }
.pm-pick-r:hover { background: var(--bg3) }
.pm-pick-a { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--bg3); font-size: 22px; font-weight: 900 }
.pm-pick-a.coin { background: none }
.pm-pick-t { display: grid; min-width: 0 }
.pm-pick-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pm-pick-t small { color: var(--ink2); font-size: 13px }
.pm-pick-r > .ic { width: 22px; height: 22px; color: var(--ink2) }
@media (max-width: 640px) {
  .pm-head { grid-template-columns: minmax(0, 1fr) }
  .pm-art { width: 56px; height: 56px; font-size: 26px }
  .pm-nav { top: 64px }
  .pm-chl { grid-template-columns: minmax(0, 1fr) }
  .pm-qr { width: min(220px, 100%) }
  .pm-code { grid-template-columns: minmax(0, 1fr) }
  .pm-code .btn { justify-self: start }
  .pm-site-page { padding: 16px 14px 84px }
}

/* the billboard at night: a sky, the board on its pole, lamps, and a car going by */
.bb-scene { position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 7; min-height: 220px; border-radius: 22px; isolation: isolate;
  background: radial-gradient(circle at 82% 18%, #FFF9E0 0 18px, rgba(255, 249, 224, .25) 19px, transparent 60px), linear-gradient(#060814, #1A1236 62%, #2A1B3D 70%, #111111 70.5%) }
.bb-sky { position: absolute; inset: 0 0 32% 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #FFFFFF, transparent), radial-gradient(1px 1px at 28% 12%, #FFFFFF, transparent), radial-gradient(1.5px 1.5px at 44% 30%, #FFFFFF, transparent), radial-gradient(1px 1px at 61% 8%, #FFFFFF, transparent), radial-gradient(1px 1px at 72% 34%, #FFFFFF, transparent), radial-gradient(1.5px 1.5px at 92% 40%, #FFFFFF, transparent), radial-gradient(1px 1px at 6% 46%, #FFFFFF, transparent) }
@media (prefers-reduced-motion: no-preference) { .bb-sky { animation: bb-twinkle 4s ease-in-out infinite alternate } }
@keyframes bb-twinkle { to { opacity: .55 } }
.bb { position: absolute; left: 50%; top: 9%; width: min(78%, 760px); translate: -50% 0; padding: 8px; border-radius: 6px; background: linear-gradient(#2B2B2B, #161616); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 80px hsl(var(--h) 90% 55% / .25); z-index: 2 }
.bb-face { position: relative; overflow: hidden; aspect-ratio: 7 / 2; background: #000000 }
.bb-face canvas { display: block; width: 100%; height: 100% }
.bb-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 40%) }
.bb-lamp { position: absolute; top: -14px; width: 26px; height: 10px; border-radius: 4px 4px 2px 2px; background: #3A3A3A }
.bb-lamp::after { content: ""; position: absolute; left: 50%; top: 8px; width: 120px; height: 90px; translate: -50% 0; background: radial-gradient(ellipse at 50% 0, rgba(255, 244, 200, .32), transparent 70%); pointer-events: none }
.bb-l1 { left: 16% } .bb-l2 { left: 48% } .bb-l3 { left: 80% }
@media (prefers-reduced-motion: no-preference) { .bb-lamp::after { animation: bb-lamp 3.2s ease-in-out 1 both } }
@keyframes bb-lamp { 0% { opacity: 0 } 10% { opacity: 1 } 14% { opacity: .2 } 22% { opacity: 1 } }
.bb-pole { position: absolute; left: 50%; top: 40%; bottom: 30%; width: 16px; translate: -50% 0; background: linear-gradient(90deg, #1A1A1A, #3A3A3A, #1A1A1A); z-index: 1 }
.bb-road { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(#111111, #050505); overflow: hidden }
.bb-road::before { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 3px; background: repeating-linear-gradient(90deg, #E8C547 0 34px, transparent 34px 64px); opacity: .8 }
.bb-road .car { position: absolute; bottom: 22%; left: -30%; width: 120px; height: 22px; border-radius: 10px 14px 4px 4px; background: #202638 }
.bb-road .car::before { content: ""; position: absolute; right: -150px; top: 2px; width: 160px; height: 18px; background: radial-gradient(ellipse at 0 50%, rgba(255, 246, 210, .55), transparent 70%) }
.bb-road .car::after { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 6px; border-radius: 2px; background: #FF3B3B; box-shadow: 0 0 10px #FF3B3B }
@media (prefers-reduced-motion: no-preference) { .bb-road .car { animation: bb-car 9s linear infinite } }
@keyframes bb-car { 0% { left: -30% } 60%, 100% { left: 130% } }
.bb-scene figcaption { position: absolute; left: 14px; bottom: 10px; z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #FFFFFF; font-size: 13px; font-weight: 700 }
@media (max-width: 640px) { .bb-scene { aspect-ratio: 4 / 3 } .bb { width: 90%; top: 14% } .bb-pole { top: 36% } }

@media print { .cb, .cs .stage-cv, .cg-card, .cg, .confetti, .pm-nav, .bb-scene { display: none !important } }
@media (prefers-contrast: more) { .cc { background: #000000; border-color: #FFFFFF } .cb-sub, .cc-tag, .cc-n { color: #FFFFFF } }

/* ================= HUSTLE · 11-03 (the owner's "very bright new modern social media", "the aesthetic shall match that demograph",
   "Instagram people hustling, brutal, ruthless", "match pump or dex"): near-black, money green, gold, hard offset shadows, condensed caps,
   a gold ticker tape, money rain, a 3D coin and the line in 3D. The mechanics stay honest. Remove this block to go back to the neon night look. */
:root { --gold: #FFD54A; --gold2: #E0A800; --money: #14F195; --money-ink: #04130B; --brutal: Impact, Haettenschweiler, "AvenirNextCondensed-Heavy", "Futura-CondensedExtraBold", "sans-serif-condensed", "Arial Narrow Bold", "Arial Black", sans-serif }
.cb, .cs { background: #050505; border: 2px solid #000000; box-shadow: 0 0 0 2px var(--gold), 8px 8px 0 2px #000000 }
.cb { margin: 2px 10px 26px 2px }
.cb-eye { background: var(--gold); color: #111111; border-radius: 6px; font-family: var(--brutal); font-weight: 400; letter-spacing: .1em; font-size: 14px }
.cb-dot { background: #E0001B }
.cb-h { font-family: var(--brutal); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; font-size: clamp(42px, 7.4vw, 92px); line-height: .9; max-width: 13ch }
.cb-h em { display: inline-block; margin-top: .06em; padding: .02em .14em 0; background: var(--money); color: var(--money-ink); -webkit-background-clip: border-box; background-clip: border-box; rotate: -2deg; box-shadow: 5px 5px 0 #000000; animation: none }
@media (prefers-reduced-motion: no-preference) { .cb-h em { animation: hu-sticker 3.2s ease-in-out infinite } }
@keyframes hu-sticker { 0%, 100% { rotate: -2deg; scale: 1 } 50% { rotate: 1deg; scale: 1.04 } }
.cb-sub { color: rgba(255, 255, 255, .9) }
.cc { background: #0E0E0E radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 213, 74, .16), transparent 55%); border: 2px solid #2C2C2C; border-radius: 18px; box-shadow: 6px 6px 0 #000000; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) }
@media (prefers-reduced-motion: no-preference) { .cc { transition: transform .15s ease-out, box-shadow .2s } .cc:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) } }
.cc.lead { border-color: var(--gold); box-shadow: 6px 6px 0 #000000, 0 0 46px -10px rgba(255, 213, 74, .65) }
.cc-lead { top: -14px; background: var(--gold); color: #111111; border: 2px solid #000000; border-radius: 6px; font-family: var(--brutal); font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 #000000 }
.cc-art { position: relative; padding: 5px; border-radius: 50%; background: conic-gradient(from var(--ring, 0deg), var(--gold), var(--money), #9945FF, #FF2E93, var(--gold)) }
.cc-art::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #0E0E0E }
.cc-art .coin { position: relative }
@property --ring { syntax: "<angle>"; initial-value: 0deg; inherits: false }
@media (prefers-reduced-motion: no-preference) { .cc-art { animation: hu-ring 5s linear infinite } }
@keyframes hu-ring { to { --ring: 360deg } }
.cc-sym { font-family: var(--brutal); font-weight: 400; letter-spacing: .02em; font-size: clamp(30px, 3vw, 42px); line-height: 1 }
.cc-bar { height: 10px; border-radius: 4px; background: #1E1E1E; border: 1px solid #2E2E2E }
.cc-bar i { border-radius: 3px; background: linear-gradient(90deg, var(--money), var(--gold)) }
.cc-pick { background: var(--gold); color: #111111; border: 2px solid #000000; border-radius: 10px; box-shadow: 4px 4px 0 #000000; font-family: var(--brutal); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase }
.cc-pick:hover { background: #FFE27A }
.cc-pick:active { translate: 2px 2px; box-shadow: 2px 2px 0 #000000 }
.cc-pick.on { background: var(--money); color: var(--money-ink) }
.cc-pick .ic { width: 20px; height: 20px }
.cc-open { border-radius: 10px; border: 2px solid #333333; background: #161616 }
.cb-tape { background: var(--gold); color: #111111; border-top: 2px solid #000000; font-family: var(--brutal); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase }
.cb-tape b, .cb-tape i { color: #111111 }
.cc-pick span, .l3-go span, .cg-go span { white-space: nowrap }
@media (max-width: 759px) { .cb { margin: 2px 8px 22px 2px } .cc-lead { right: 14px } .cc-sym { font-size: 30px } .cc-pick { font-size: 18px; padding: 0 12px } }
/* 11-04 pivot proof: the ticker link's tap area reaches 44 px; the negative margin keeps the card exactly where it was */
.cc-sym { display: block; padding: 7px 0; margin: -7px 0 }
/* the coin page */
.cs { margin: 2px 10px 18px 2px }
.cs-sym { font-family: var(--brutal); font-weight: 400; letter-spacing: .01em; color: var(--gold); text-shadow: 5px 5px 0 #000000, 0 0 40px rgba(255, 213, 74, .35); font-size: clamp(54px, 8.4vw, 104px); line-height: .9 }
.cs-tag { text-transform: uppercase; letter-spacing: .04em; font-weight: 800 }
.cs-chip { background: transparent; border: 2px solid var(--gold); color: var(--gold); border-radius: 6px; font-family: var(--brutal); font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase }
a.cs-chip:hover { background: var(--gold); color: #111111 }
.cs-live { border-radius: 6px; font-family: var(--brutal); font-weight: 400; font-size: 16px; letter-spacing: .08em }
@media (prefers-reduced-motion: no-preference) { .cs-live { animation: hu-blink 1.2s steps(2, jump-none) infinite } }
@keyframes hu-blink { 50% { background: #FF2E3E } }
.ca { border: 2px solid var(--money); background: rgba(4, 19, 11, .85) }
.ca-l { color: var(--money) }
.cs .ca .btn.primary { background: var(--money); color: var(--money-ink); border: 2px solid #000000; box-shadow: 3px 3px 0 #000000 }
/* the 3D coin: a face, a back and a 24-slice rim */
.cs-coin { --d: clamp(136px, 17vw, 212px); width: var(--d); height: var(--d) }
.c3d { position: relative; width: 100%; height: 100%; perspective: 900px }
.c3d-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(10deg) rotateY(-30deg) }
@media (prefers-reduced-motion: no-preference) { .c3d-spin { animation: c3d-spin 7s linear infinite } }
@keyframes c3d-spin { from { transform: rotateX(10deg) rotateY(0deg) } to { transform: rotateX(10deg) rotateY(360deg) } }
.c3d-f, .c3d-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden }
.c3d-f { transform: translateZ(8px) }
.c3d-b { transform: rotateY(180deg) translateZ(8px) }
.c3d-f svg, .c3d-b svg { display: block; width: 100%; height: 100% }
.c3d-rim { position: absolute; inset: 0; transform-style: preserve-3d }
.c3d-rim i { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * .1309 + 2px); height: 16px; margin: -8px 0 0 calc(var(--d) * -.06545 - 1px);
  background: repeating-linear-gradient(90deg, hsl(var(--h) 70% 30%) 0 2px, hsl(var(--h) 85% 58%) 2px 4px); transform: rotateZ(calc(var(--i) * 15deg)) translateY(calc(var(--d) * -.49)) rotateX(90deg) }
.c3d-shadow { position: absolute; left: 18%; right: 18%; bottom: -12%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 213, 74, .35), transparent) }
@media (prefers-reduced-motion: no-preference) { .c3d-shadow { animation: c3d-shadow 7s linear infinite } }
@keyframes c3d-shadow { 0%, 50%, 100% { transform: scaleX(1) } 25%, 75% { transform: scaleX(.3) } }
@media (max-width: 759px) { .cs-coin { --d: 150px } }
/* the line in 3D */
.l3 { position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: end; min-height: 300px; margin: 2px 10px 18px 2px; border-radius: 24px; background: #050505; color: #FFFFFF; box-shadow: 0 0 0 2px var(--money), 8px 8px 0 2px #000000 }
.l3-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.l3-x { position: relative; z-index: 1; display: grid; justify-items: start; gap: 4px; max-width: 440px; margin: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(5, 5, 5, .74); border: 1px solid rgba(255, 255, 255, .14) }
.l3-k { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--money) }
.l3-x b { font-family: var(--brutal); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .02em; text-transform: uppercase }
.l3-s { font-size: 14px; color: rgba(255, 255, 255, .9) }
.l3-go { margin-top: 8px; min-height: 44px; background: var(--gold); color: #111111; border: 2px solid #000000; border-radius: 10px; box-shadow: 4px 4px 0 #000000; font-family: var(--brutal); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase }
.l3-go:hover { background: #FFE27A }
.l3-go:active { translate: 2px 2px; box-shadow: 2px 2px 0 #000000 }
.l3-go .ic { width: 20px; height: 20px }
@media (max-width: 480px) { .l3 { min-height: 320px } .l3-x { margin: 10px; max-width: none } }
/* the game card */
.cg-card { background: #0B0B0B; color: #FFFFFF; border: 2px solid #000000; box-shadow: 0 0 0 2px var(--gold), 6px 6px 0 2px #000000; margin: 2px 10px 18px 2px }
.cg-card .eyebrow { color: var(--gold) }
.cg-card .fine, .cg-card .cg-nm small { color: rgba(255, 255, 255, .78) }
.cg-t h2 { font-family: var(--brutal); font-weight: 400; font-size: 30px; letter-spacing: .02em; text-transform: uppercase }
.cg-go { background: var(--money); color: var(--money-ink); border: 2px solid #000000; border-radius: 10px; box-shadow: 4px 4px 0 #000000; font-family: var(--brutal); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase }
.cg-go:hover { background: #4BFFB0 }
.cg-go:active { translate: 2px 2px; box-shadow: 2px 2px 0 #000000 }
.cg-board li { background: #161616; color: #FFFFFF }
.cg-board li.cg-none { color: rgba(255, 255, 255, .78) }
.cg-rk { color: var(--gold) }
@media (prefers-reduced-motion: no-preference) { .cg-go { animation: cg-pulse-g 2.4s ease-in-out infinite } }
@keyframes cg-pulse-g { 0%, 100% { box-shadow: 4px 4px 0 #000000, 0 0 0 0 rgba(20, 241, 149, .55) } 50% { box-shadow: 4px 4px 0 #000000, 0 0 0 10px rgba(20, 241, 149, 0) } }
.cg-res .btn.primary { background: var(--money); color: var(--money-ink) }
.cg-score { color: var(--gold) }

/* ---------- the whole app, brighter and punchier (the owner's "visually engrave everything animated") */
.btn.primary, .btn.hype, #top .create-btn, #top .create-btn:hover { background: var(--gold); color: #111111 }
.btn.primary:hover, .btn.hype:hover { background: #FFE27A; opacity: 1 }
:root[data-theme="light"] .btn.primary, :root[data-theme="light"] .btn.hype, :root[data-theme="light"] #top .create-btn { box-shadow: 0 0 0 2px #111111, 3px 3px 0 2px #111111 }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .btn.primary, :root:not([data-theme]) .btn.hype, :root:not([data-theme]) #top .create-btn { box-shadow: 0 0 0 2px #111111, 3px 3px 0 2px #111111 } }
@media (prefers-reduced-motion: no-preference) { .btn { transition: transform .12s ease, background-color .15s, box-shadow .15s } .btn:active { transform: scale(.96) } }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--gold), var(--money), #9945FF, #FF2E93, var(--gold)); background-size: 300% 100% }
@media (prefers-reduced-motion: no-preference) { .top::after { animation: hu-line 12s linear infinite } }
@keyframes hu-line { to { background-position: 300% 0 } }
:root[data-theme="dark"] .logo { background: linear-gradient(90deg, #FFE58F, var(--gold), #FFB800); -webkit-background-clip: text; background-clip: text; color: transparent }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo { background: linear-gradient(90deg, #FFE58F, var(--gold), #FFB800); -webkit-background-clip: text; background-clip: text; color: transparent } }
#toast { border: 2px solid var(--gold) }
@media (prefers-reduced-motion: no-preference) {
  #main.nav-in > * { animation: hu-rise .42s cubic-bezier(.2, .8, .2, 1) both }
  #toast.on { animation: hu-toast .35s cubic-bezier(.2, 1.4, .4, 1) }
}
@keyframes hu-rise { from { opacity: 0; translate: 0 14px } to { opacity: 1; translate: 0 0 } }
@keyframes hu-toast { from { opacity: 0; translate: 0 16px; scale: .96 } to { opacity: 1; translate: 0 0; scale: 1 } }
/* Promote in the same voice */
.pm-head h1, .pm-sec-h h2 { font-family: var(--brutal); font-weight: 400; letter-spacing: .01em; text-transform: uppercase }
.pm-head h1 { font-size: clamp(34px, 5vw, 56px); line-height: .95 }
.pm-chip.on { background: var(--gold); color: #111111; border-color: #111111 }
.pm-nav a:hover { background: var(--gold); color: #111111 }

/* 11-04 design walk at 1251 / 1563: the battle chip on the coin stage is a full 44 px target, and the title breathes (no line box touches the chip or the tag) */
a.cs-chip { min-height: 44px; margin-bottom: 4px }
.cs-sym { padding-bottom: .25em }
.cs-tag { margin-top: 2px }