/* crypto.css · 11-03 (hype-crypto-web lane), loaded last: the picture home, the coin cards and rows, Create, the Launch screen, the share kit,
   the army, the pledge, Get Hype. The HUSTLE vocabulary of coins.css (gold, money green, black, condensed caps, hard shadows) at YouTube's
   spacing and Canva's tiles. Dark first; every colour pair AA; targets 44 px; nothing under 13 px. */
:root { --k-r: 22px; --k-gap: 14px; --k-panel: #0B0B0C; --k-panel2: #141416; --k-line: rgba(255, 255, 255, .12); --k-mut: rgba(255, 255, 255, .74) }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.amber { color: #F5A524 }
.cpic { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden }
.cpic > svg, .cpic > img { display: block; width: 100%; height: 100%; object-fit: cover }
.cpic.sm { width: 48px; height: 48px; flex: 0 0 48px }

/* ---------- the header (PATTERN §1.1, §1b): a context pill, one big rounded search with a camera, ONE filled "Hype a coin", the Inbox count, the account */
.ctx-pill { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; white-space: nowrap }
.ctx-pill .ic { width: 22px; height: 22px; color: var(--ink) }
.ctx-pill span { display: grid; line-height: 1.15 } .ctx-pill small { font-size: 13px; color: var(--ink2) } .ctx-pill b { font-size: 14px }
@media (min-width: 1100px) { .ctx-pill:not([hidden]) { display: inline-flex } }
.top-cam { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--line); border-left: 0; border-right: 0; background: var(--bg2) }
#top .create-btn { border-radius: 999px; font-weight: 800 }
@media (max-width: 759px) { #top .create-btn { display: inline-flex; min-height: 44px; padding: 0 12px; font-size: 14px } #top .create-btn span { display: none } #top .create-btn::after { content: "Hype"; font-weight: 800 } }
.acct { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap }
@media (max-width: 759px) { .acct span { display: none } }
#top .inbox .dot[hidden] { display: block !important; background: var(--bg3); color: var(--ink) }

/* ---------- the promo band: only a real launch (PATTERN §1b) */
.kpromo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; margin: 0 0 14px; padding: 8px 16px; border-radius: 12px; background: hsl(var(--h) 85% 92%); color: #0F172A; text-decoration: none }
.kpromo b { font-size: 15px } .kpromo span { font-size: 14px; color: #334155 } .kpromo .ic { margin-left: auto; width: 20px; height: 20px }
:root[data-theme="dark"] .kpromo { background: hsl(var(--h) 45% 18%); color: #F1F5F9 } :root[data-theme="dark"] .kpromo span { color: #CBD5E1 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpromo { background: hsl(var(--h) 45% 18%); color: #F1F5F9 } :root:not([data-theme="light"]) .kpromo span { color: #CBD5E1 } }

/* ---------- the hero row: four tall colour blocks (eyebrow · two-line headline · one button · a picture), carousel arrows */
.heroes-w { position: relative; margin: 0 0 14px }
.heroes { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 330px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; scrollbar-width: none }
.heroes::-webkit-scrollbar { display: none }
@media (min-width: 1100px) { .heroes { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible } .hero-ar { display: none !important } }
.hero-ar { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; color: #111111; box-shadow: 0 2px 10px rgba(0, 0, 0, .25) }
.hero-ar.l { left: -6px } .hero-ar.r { right: -6px }
@media (pointer: coarse) { .hero-ar { display: none } }
.hero-c { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 420px; padding: 18px 18px 14px; border-radius: 14px; color: #FFFFFF; overflow: hidden; isolation: isolate }
.h-soon { background: #0057E7 } .h-king { background: #D6006F } .h-play { background: #C2360A } .h-make { background: #14F195; color: #04130B }
.hero-e { margin: 0; font-size: 15px; font-weight: 600 }
.hero-c h2 { display: grid; margin: 0; font-size: 30px; font-weight: 900; line-height: 1.08; letter-spacing: -.02em }
.hero-c h2 span { overflow-wrap: normal; word-break: normal }
.hero-l2 { font-size: 26px }
.bign { font-size: 34px; font-weight: 900; letter-spacing: -.02em }
.hero-btn { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: #FFD54A; color: #111111; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: none }
.hero-btn.on { background: #FFFFFF; color: #111111 }
.h-make .hero-btn { background: #111111; color: #FFFFFF }
.hero-p { position: relative; flex: 1; display: grid; place-items: center; width: 100%; min-height: 150px }
.hero-p .cpic, .hero-p > svg, .hero-game { width: min(190px, 68%); height: auto; aspect-ratio: 1; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)) }
.hero-crown { position: absolute; z-index: 2; top: -2px; left: 50%; translate: -50% 0; color: #FFD54A }
.hero-crown .ic { width: 52px; height: 52px; fill: #FFD54A; stroke: #7A5200; stroke-width: 1.2 }
.hero-game { position: relative } .hero-game svg { width: 100%; height: 100% }
.hero-game i { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFD54A 55%, #7A5200); box-shadow: 0 6px 10px rgba(0, 0, 0, .35) }
.hero-game .hg-1 { left: -18%; top: 6% } .hero-game .hg-2 { right: -16%; top: 22%; width: 20% } .hero-game .hg-3 { left: 2%; bottom: -6%; width: 18% }
@media (prefers-reduced-motion: no-preference) { .hero-game i { animation: hg 2.6s ease-in-out infinite } .hero-game .hg-2 { animation-delay: -.9s } .hero-game .hg-3 { animation-delay: -1.7s } @keyframes hg { 50% { translate: 0 10px } } }
/* Vinted's floating card: the "Got a coin?" block carries a white card with the ticker field */
.h-make .hero-f { display: grid; gap: 8px; width: 100%; padding: 12px; border-radius: 14px; background: #FFFFFF; color: #0F172A; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); box-sizing: border-box }
.hero-in { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-radius: 12px; border: 1px solid #CBD5E1; font-size: 22px; font-weight: 900 }
.hero-in input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; color: #0F172A; font-size: 20px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; outline: none }
.hero-in input::placeholder { color: #64748B }
.hero-in:focus-within { border-color: #111111; box-shadow: 0 0 0 2px #111111 }
.h-make .hero-f .hero-btn { width: 100% }
.hero-how { display: inline-flex; align-items: center; min-height: 44px; color: #04130B; font-size: 14px; font-weight: 700; text-decoration: underline }
.heroes-w + form.sign, .hero-c form.sign { margin: 8px 0 }

/* ---------- the chip row: icon + word, white pills with a 1 px border, one accent word */
.kchips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 0 6px; scrollbar-width: none }
.kchips::-webkit-scrollbar { display: none }
.kchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap }
.kchip:hover { border-color: var(--ink2) }
.kchip-g, .kchip-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg2) }
.kchip-g .ic { width: 18px; height: 18px }
.kchip-i svg { width: 32px; height: 32px }
.kchip.acc { color: #C2410C; border-color: #FDBA74 } .kchip.acc .kchip-g { background: #FFEDD5; color: #C2410C }
:root[data-theme="dark"] .kchip.acc { color: #FDBA74; border-color: #9A3412 } :root[data-theme="dark"] .kchip.acc .kchip-g { background: #431407; color: #FDBA74 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kchip.acc { color: #FDBA74; border-color: #9A3412 } :root:not([data-theme="light"]) .kchip.acc .kchip-g { background: #431407; color: #FDBA74 } }
.kchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.fam-i { display: block; width: 68px; height: 68px; border-radius: 50% } .fam-i.sm { width: 28px; height: 28px } .fam-i.big { width: 120px; height: 120px }
.fam-svg { display: block; width: 100%; height: 100% }

/* ---------- white cards titled with ›, holding 2 × 2 picture tiles (one word each, honest badges, big numbers) */
.quads { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin: 6px 0 22px }
.quad { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line) }
.quad-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none }
.quad-h h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.01em }
.quad-h .ic { width: 22px; height: 22px }
.quad-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.qt { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 44px; padding: 10px 6px; border-radius: 10px; background: var(--bg2); color: var(--ink); text-decoration: none; text-align: center }
.qt:hover { outline: 2px solid var(--ink2) }
.qt-p { position: relative; display: block; width: 76px; height: 76px }
.qt-p .cpic, .qt-p .fam-svg { width: 100%; height: 100% }
.qt-p .av { width: 76px; height: 76px; font-size: 28px }
.qt-b { position: absolute; top: -4px; right: -10px; padding: 2px 7px; border-radius: 6px; background: #CC0C39; color: #FFFFFF; font-size: 13px; font-weight: 800; white-space: nowrap }
.qt-b.live { background: #0B7A43 }
.qt-n { font-size: 24px; font-weight: 900; line-height: 1.05 }
.qt-w { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700 }

/* ---------- Picked for you: five square picture tiles, a heart on each */
.kpick { margin: 0 0 22px }
.kpick-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px }
.kpick-h h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em }
.kpick-h .link { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; font-weight: 700 }
.kpick-g { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px }
.kpick-g::-webkit-scrollbar { display: none }
.kp { position: relative }
.kp-a { display: grid; gap: 2px; color: var(--ink); text-decoration: none }
.kp-a .cpic { border-radius: 10px; aspect-ratio: 1; background: hsl(var(--h) 40% 92%) }
:root[data-theme="dark"] .kp-a .cpic { background: hsl(var(--h) 30% 16%) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kp-a .cpic { background: hsl(var(--h) 30% 16%) } }
.kp-a .cpic > svg { padding: 12%; box-sizing: border-box } .kp-a .cpic > img { border-radius: 10px }
.kp-a b { margin-top: 6px; font-size: 16px; font-weight: 900 } .kp-a small { font-size: 13px; color: var(--ink2) }
.kp-heart { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #111111; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2) }
.kp-heart.on { color: #CC0C39 }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 6px 0 22px }

/* ---------- the floating action, 56 px, bottom-right (PATTERN §1.6) */
.kfab { position: fixed; z-index: 35; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FFD54A; color: #111111; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); text-decoration: none }
.kfab .ic { width: 26px; height: 26px }
@media (max-width: 759px) { .kfab { bottom: calc(var(--tabs) + 14px + env(safe-area-inset-bottom, 0px)) } }
@media print { .kfab { display: none } }

/* ---------- rows of coin cards (YouTube shelves; arrows on desktop) */
.krow { margin: 0 0 22px }
.krow-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px }
.krow-h h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em }
.krow-h h2 .ic { width: 22px; height: 22px; color: var(--gold) }
.krow-n { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: var(--bg3); color: var(--ink); font-size: 13px; font-weight: 800; text-align: center }
.krow-ar { margin-left: auto; display: none; gap: 6px }
/* 11-04 pivot proof: a family row's title link is a 44 px target */
.krow-a { display: inline-flex; align-items: center; min-height: 44px }
.krow.over .krow-ar { display: inline-flex }
@media (pointer: coarse) { .krow.over .krow-ar { display: none } }
.krow-ar .icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2) }
.krow-ar .icon-btn:disabled { opacity: .35 }
.krow-s { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 10px; scrollbar-width: none }
.krow-s::-webkit-scrollbar { display: none }
@media (min-width: 700px) { .krow-s { grid-auto-columns: 196px } }
.kc { scroll-snap-align: start; display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 16px; background: var(--bg2); color: var(--ink); border: 1px solid var(--line) }
.kc-pic { position: relative; display: block }
.kc-pic .cpic { box-shadow: 0 8px 16px rgba(0, 0, 0, .18) }
.kc-b { position: absolute; top: -4px; right: -4px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: #FFFFFF; color: #111111; border: 2px solid #000000; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 2px 2px 0 #000000 }
.kc-b.live { background: var(--money); color: var(--money-ink) }
.kc-b.due { background: var(--gold); color: #111111 }
.kc-x { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0 }
.kc-sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -.01em; text-decoration: none }
.kc-n { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-size: 17px; font-weight: 900 }
.kc-n .ic { width: 17px; height: 17px; color: var(--ink2) }
.kc-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: 999px; background: var(--gold); color: #111111; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer }
.kc-go .ic { width: 18px; height: 18px }
.kc-go.on { background: var(--money); color: var(--money-ink) }
.kc-go.mine { background: var(--ink); color: var(--bg) }
.kc-go:active { transform: scale(.97) }
.krow + form.sign, .heroes + form.sign { margin: -8px 0 20px }

/* ---------- King (on a family page) */
.king { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 16px; margin: 0 0 20px; padding: 16px; border-radius: var(--k-r); color: #FFFFFF; background: radial-gradient(110% 120% at 0% 0%, hsl(var(--h) 85% 34%), #050505 70%); border: 2px solid #000000; box-shadow: 0 0 0 2px var(--gold), 7px 7px 0 2px #000000 }
.king-x { display: grid; gap: 4px; min-width: 0; justify-items: start }
.king-k { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--gold); color: #111111; font-family: var(--brutal); font-size: 16px; letter-spacing: .08em; text-transform: uppercase }
.king-k .ic { width: 18px; height: 18px }
.king-sym { color: var(--gold); font-family: var(--brutal); font-size: clamp(34px, 6vw, 58px); line-height: 1; text-decoration: none; text-shadow: 4px 4px 0 #000000 }
.king-n { display: inline-flex; align-items: center; gap: 6px; font-size: 18px }
.king-n .ic { color: var(--money) }
.king-n small { color: var(--k-mut); font-size: 14px }
.king .kc-b { position: static }
@media (max-width: 560px) { .king { grid-template-columns: 84px 1fr } .king .kc-go { grid-column: 1 / -1 } }

/* ---------- pages */
.kpage { max-width: 1080px; margin: 0 auto }
.kh { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; font-family: var(--brutal); font-weight: 400; font-size: clamp(30px, 5vw, 44px); letter-spacing: .02em; text-transform: uppercase }
.kh .ic { width: 32px; height: 32px; color: var(--gold) }
.kh2 { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 18px; font-weight: 800 }
.kh2 .ic { color: var(--gold) }
.kback { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 800; text-decoration: none }
.kempty { display: grid; justify-items: center; gap: 14px; padding: 40px 16px; text-align: center }
.kempty h1 { margin: 0; font-family: var(--brutal); font-weight: 400; font-size: 34px; text-transform: uppercase }
.kempty-c { width: 120px; height: 120px } .kempty-c svg { width: 100%; height: 100% }
.kf-info { margin-top: 10px; font-size: 14px }
.kf-info summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--ink2); font-weight: 700; list-style: none }
.kf-info summary::-webkit-details-marker { display: none }
.kf-info p { margin: 0 0 8px; color: var(--ink); line-height: 1.55 }

/* ---------- Create */
.kform .kf-grid { display: grid; gap: 18px }
@media (min-width: 900px) { .kform .kf-grid { grid-template-columns: 340px 1fr; align-items: start } .kf-prev { position: sticky; top: 88px } }
.kf-prev { display: grid; justify-items: center; gap: 6px; padding: 22px 18px; border-radius: var(--k-r); background: radial-gradient(120% 90% at 50% 0%, #1E1A08, #050505 70%); color: #FFFFFF; border: 2px solid #000000; box-shadow: 0 0 0 2px var(--gold), 7px 7px 0 2px #000000; text-align: center }
.kf-coin { width: min(200px, 56vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6)) }
.kf-coin svg, .kf-coin img { display: block; width: 100%; height: 100%; object-fit: cover }
.kf-sym { margin: 6px 0 0; color: var(--gold); font-family: var(--brutal); font-size: 46px; line-height: 1; letter-spacing: .02em; text-shadow: 4px 4px 0 #000000; overflow-wrap: anywhere }
.kf-name { margin: 0; font-size: 18px; font-weight: 800 }
.kf-line { margin: 0; color: var(--k-mut); font-size: 15px; max-width: 30ch }
.kf-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 }
.kf-meta span:not(:empty) { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--k-line); font-size: 13px; font-weight: 700 }
.kf-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 16px; border-radius: 12px; background: var(--gold); color: #111111; font-family: var(--brutal); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; opacity: .9 }
.kf-warn { margin: 6px 0 0; color: #FFC970; font-size: 14px; font-weight: 700 }
.kf-x { display: grid; gap: 12px; min-width: 0 }
.kf-big { display: flex; align-items: center; gap: 4px; padding: 4px 14px; border-radius: 16px; background: var(--bg2); border: 2px solid var(--line); color: var(--gold); font-family: var(--brutal); font-size: 40px }
.kf-big:focus-within { border-color: var(--gold) }
.kf-big input { flex: 1; min-width: 0; min-height: 60px; border: 0; background: transparent; color: var(--ink); font-family: var(--brutal); font-size: 40px; letter-spacing: .04em; text-transform: uppercase; outline: none }
.kf-in { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 16px; box-sizing: border-box }
.kf-in:focus { outline: 2px solid var(--gold); outline-offset: 1px }
.klooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px }
.klook { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 16px; border: 2px solid var(--line); background: var(--bg2); cursor: pointer }
.klook input[type=radio] { position: absolute; opacity: 0; pointer-events: none }
.klook-c { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--ink2) }
.klook-c svg { width: 100%; height: 100% }
.klook.up .klook-c .ic { width: 34px; height: 34px }
.klook b { font-size: 13px; font-weight: 800 }
.klook:has(input[type=radio]:checked) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) }
.klook:has(input[type=radio]:focus-visible) { outline: 3px solid #4C9AFF; outline-offset: 2px }
.kc-radios { display: flex; flex-wrap: wrap; gap: 8px }
.kr { position: relative; display: inline-flex }
.kr input { position: absolute; opacity: 0; pointer-events: none }
.kr span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer }
.kr input:checked + span { background: var(--gold); color: #111111; border-color: #111111 }
.kr input:focus-visible + span { outline: 3px solid #4C9AFF; outline-offset: 2px }
.kfams { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none }
.kfams .kr span { padding-left: 6px; white-space: nowrap }
.kf-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 800; list-style: none }
.kf-more summary::-webkit-details-marker { display: none }
.kf-more[open] { display: grid; gap: 8px }
.kform .kf-go.btn { min-height: 56px; justify-content: center; border: 2px solid #000000; border-radius: 14px; box-shadow: 5px 5px 0 #000000; font-family: var(--brutal); font-weight: 400; font-size: 24px; letter-spacing: .05em; text-transform: uppercase; opacity: 1 }
.kform + form.sign { max-width: 640px; margin: 14px 0 }

/* ---------- My coins */
.mcs { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px }
.mc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line) }
.mc-a { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none }
.mc-t { display: grid; min-width: 0 } .mc-t b { font-family: var(--brutal); font-weight: 400; font-size: 22px; color: var(--ink) } .mc-t small { color: var(--ink2); font-size: 13px }
.mc-n { display: grid; justify-items: end; font-size: 18px } .mc-n small { font-size: 13px; color: var(--ink2) } .mc-n .ic { width: 16px; height: 16px }

/* ---------- the share kit */
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0 }
.kit-b { position: relative; display: grid; justify-items: center; gap: 4px; min-height: 76px; padding: 8px 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); cursor: pointer }
.kit-b b { font-size: 13px; font-weight: 800 }
.kit-b small { display: inline-flex; align-items: center; gap: 2px; min-height: 16px; font-size: 13px; font-weight: 800; color: var(--money-ink); background: transparent }
.kit-b.done small { padding: 0 6px; border-radius: 999px; background: var(--money) }
.kit-b small .ic { width: 13px; height: 13px }
.kit-b:hover { border-color: var(--gold) }
.kit-b:active { translate: 1px 1px }
.kit-g { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #111111; color: #FFFFFF; border: 2px solid hsl(var(--kh, 45) 90% 60%) }
.kit-g .ic { width: 22px; height: 22px }
.k-x { --kh: 0 } .k-x .kit-g { border-color: #FFFFFF } .k-telegram { --kh: 200 } .k-whatsapp { --kh: 140 } .k-farcaster { --kh: 265 } .k-reddit { --kh: 16 } .k-discord { --kh: 235 } .k-instagram { --kh: 330 } .k-tiktok { --kh: 175 } .k-youtube { --kh: 358 } .k-email { --kh: 45 } .k-sms { --kh: 110 } .k-link, .k-more { --kh: 45 }

/* ---------- the army */
.army { color: #FFFFFF; background: var(--k-panel); border: 2px solid #000000; box-shadow: 0 0 0 2px var(--money), 7px 7px 0 2px #000000; margin: 2px 10px 18px 2px }
.army .kf-info summary { color: var(--k-mut) } .army .kf-info p { color: #FFFFFF } .army .link { color: var(--gold) }
.army-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.army-h h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--brutal); font-weight: 400; font-size: 30px; letter-spacing: .03em; text-transform: uppercase; color: #FFFFFF }
.army-h h2 .ic { color: var(--gold) }
.army-n { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 22px } .army-n .ic { color: var(--money) }
.rk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; border: 2px solid #000000; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap }
.rk .ic { width: 16px; height: 16px }
.rk-0 { background: #2B2B2E; color: #FFFFFF } .rk-1 { background: #CFE8FF; color: #04223D } .rk-2 { background: var(--money); color: var(--money-ink) } .rk-3 { background: var(--gold); color: #111111 }
.army-me { display: grid; gap: 6px; margin: 12px 0 }
.army-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden }
.army-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--money), var(--gold)) }
.army-next { font-size: 15px; font-weight: 800; color: var(--gold) }
.army .kit-b { background: #151517; border-color: rgba(255, 255, 255, .14); color: #FFFFFF }
.army .kit-b small { color: var(--money-ink) }
.army-join { margin: 12px 0 }
.army-l { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; padding: 0 }
.army-l li { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; background: rgba(255, 255, 255, .05); opacity: .6 }
.army-l li.on { opacity: 1; background: rgba(255, 255, 255, .1) }
.army-l small { font-size: 13px; color: var(--k-mut) }
@media (max-width: 420px) { .army-l .rk b { display: none } .army-l .rk { padding: 4px } }
.army-bh { margin: 14px 0 6px; font-size: 15px; font-weight: 800; color: var(--k-mut) }
.army-b { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.army-b li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 12px; background: rgba(255, 255, 255, .05) }
.army-b li.me { background: rgba(20, 241, 149, .14) }
.army-i { width: 22px; color: var(--gold); font-weight: 900; text-align: center }
.army-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 }
.army-b b { font-size: 17px }
.army-none { display: flex; align-items: center; gap: 8px; color: var(--k-mut) }
.rally { display: grid; gap: 4px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--gold); color: #111111; border: 2px solid #000000; box-shadow: 4px 4px 0 #000000 }
.rally-k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--brutal); font-size: 18px; letter-spacing: .06em; text-transform: uppercase }
.rally p { margin: 0; font-size: 17px; font-weight: 800 }
.rally small { font-size: 13px; color: #3D2E00 }
.rally-f summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 800; color: var(--gold); list-style: none }
.rally-f input { flex: 1; min-height: 44px; min-width: 0; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: #050505; color: #FFFFFF; font-size: 16px }

/* ---------- the pledge */
.pledge { display: grid; gap: 10px; margin: 2px 10px 18px 2px }
.pl-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center }
.pl-n, .pl-t { display: inline-flex; align-items: baseline; gap: 6px }
.pl-n b, .pl-t b { font-size: 24px; font-weight: 900 }
.pl-n .ic { width: 18px; height: 18px; color: var(--money); align-self: center }
.pl-n small, .pl-t small { font-size: 13px; color: var(--ink2) }
.pl-me { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.pl-me .btn { min-height: 44px }
.pl-me .btn.on { background: var(--money); color: var(--money-ink) }
.pl-amt { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); font-weight: 800 }
.pl-amt input { width: 72px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none }
.pl-me small { color: var(--ink2); font-size: 13px }

/* ---------- the fresh box */
.fresh { display: grid; gap: 10px; color: #FFFFFF; background: radial-gradient(120% 120% at 0% 0%, hsl(var(--h) 80% 30%), #050505 70%); border: 2px solid #000000; box-shadow: 0 0 0 2px var(--gold), 7px 7px 0 2px #000000; margin: 2px 10px 18px 2px }
.fresh-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.fresh-h b { color: var(--gold); font-family: var(--brutal); font-weight: 400; font-size: 40px; line-height: 1; text-shadow: 4px 4px 0 #000000 }
.fresh-k { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--money); color: var(--money-ink); font-weight: 900; font-size: 14px; letter-spacing: .04em; text-transform: uppercase }
.fresh .kit-b { background: #151517; border-color: rgba(255, 255, 255, .14); color: #FFFFFF }
.fresh .copyrow input { color: #FFFFFF; background: #050505; border-color: rgba(255, 255, 255, .25) }
.btn.big { min-height: 52px; font-size: 18px }

/* ---------- the Launch screen */
.lk-check { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 16px; padding: 0 }
@media (max-width: 520px) { .lk-check { grid-template-columns: repeat(3, 1fr) } }
.lk-check li { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink2) }
.lk-check li b { font-size: 13px; font-weight: 800 }
.lk-c { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg3); color: var(--ink) }
.lk-check li.ok { color: var(--ink) } .lk-check li.ok .lk-c { background: var(--money); color: var(--money-ink) }
.lk-pack { display: grid; gap: 10px }
.lk-art { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.lk-pic { width: 120px; flex: 0 0 120px }
.lk-dl { display: flex; flex-wrap: wrap; gap: 8px }
.lk-dl .btn { display: inline-grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; min-height: 52px }
.lk-dl .btn small { grid-column: 2; font-size: 13px; color: var(--ink2) }
.lk-r { display: grid; grid-template-columns: 78px 1fr 44px 52px; align-items: center; gap: 8px }
.lk-l { font-size: 13px; font-weight: 800; color: var(--ink2) }
.lk-r input { min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 15px }
.lk-r .btn { min-width: 44px; min-height: 44px; padding: 0; justify-content: center }
.lk-r small { font-size: 13px; color: var(--ink2); text-align: right } .lk-r small.over { color: #E5484D; font-weight: 800 }
@media (max-width: 480px) { .lk-r { grid-template-columns: 1fr 44px; } .lk-r .lk-l { grid-column: 1 / -1 } .lk-r small { display: none } }
.lk-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 800 }
.lk-open { justify-content: center; border: 2px solid #000000; border-radius: 14px; box-shadow: 5px 5px 0 #000000; font-family: var(--brutal); font-weight: 400; font-size: 22px; letter-spacing: .05em; text-transform: uppercase }
.lk-ann summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none }
.lk-ann summary b { display: inline-flex; align-items: center; gap: 6px }
.lk-hooks { display: grid; gap: 8px; margin-top: 8px }
.lk-hooks input { min-width: 0; flex: 1; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 15px }
.lk-hooks .row { display: flex; flex-wrap: wrap; gap: 8px }

/* ---------- Where to post, the rules */
.where { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.wh { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line) }
.wh-x { flex: 1; display: grid; gap: 2px; min-width: 0 }
.wh-x b { font-size: 17px } .wh-x small { font-size: 13px; color: var(--ink2) } .wh-x p { margin: 4px 0; font-size: 14px }
.wh .btn { min-width: 44px; min-height: 44px }
.rules-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.rules-l li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--bg2); font-size: 16px }
.rules-l .ic { flex: 0 0 auto; color: var(--money) }

/* ---------- Get Hype */
.get-g { display: grid; gap: 14px }
@media (min-width: 760px) { .get-g { grid-template-columns: 1.3fr 1fr } }
.get-how { display: grid; justify-items: start; gap: 12px }
.get-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35) }
.get-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; counter-reset: s }
.get-steps li { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--bg2); text-align: center; font-size: 14px }
.gs-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gold); color: #111111 }
.get-ok, .get-scan { display: inline-flex; align-items: center; gap: 8px; font-size: 18px }
.get-ok .ic { color: var(--money) }
.get-qr { display: grid; justify-items: center; gap: 8px; background: #FFFFFF; color: #111111 }
.get-qr svg { width: min(240px, 70vw); height: auto }
.get-qr small { font-size: 13px; color: #3F3F3F }
.get-al { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.get-al b { display: inline-flex; align-items: center; gap: 6px; font-size: 16px }
.get-al small { flex-basis: 100%; font-size: 13px; color: var(--ink2) }
.get-al .btn.on { background: var(--money); color: var(--money-ink) }

/* ---------- a coin's page, fewer words on its face */
.coin-page .acts .hype-btn, .coin-page .new-banner, .coin-page .miles, .coin-page .place > p:not(.early):not(.perk), .coin-page .facts .tags, .coin-page .host-card, .coin-page .two-col, .coin-page .l3-s, .coin-page .cg-t .fine { display: none }
.cs-launch { margin-top: 12px; min-height: 48px; background: var(--gold); color: #111111; border: 2px solid #000000; border-radius: 12px; box-shadow: 4px 4px 0 #000000; font-family: var(--brutal); font-weight: 400; font-size: 20px; letter-spacing: .05em; text-transform: uppercase }
.c3d-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.h-make .hero-f .hero-in input, .h-make .hero-f .hero-in input:focus { background: transparent !important; color: #0F172A !important; border: 0 !important; box-shadow: none !important; height: auto }
.h-make .hero-f .hero-in { background: #FFFFFF; color: #0F172A }

/* 11-04: Up next on the drop page draws the coin (minted 3D) or the family object on its own ground, never a title on a colour block */
.nx-t.nx-own { display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, var(--acc-soft), rgba(0, 0, 0, 0) 68%), var(--bg2) }
.nx-t.nx-own > .cpic { width: min(64%, 112px); height: auto; aspect-ratio: 1 }
.nx-t.nx-own > .wc-obj { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0 }

/* 11-04 (rivals D18): the launchpad on the coin card, not only on its page */
.kc-pad { display: block; margin: -2px 0 6px; font-size: 13px; line-height: 1.3; color: var(--ink2); overflow-wrap: anywhere }

/* 11-04 (rivals E12): this week's top recruiters on the coin home */
.krec { margin: 8px 0 24px }
.krec .army-b { margin: 0 }
.krec-n { margin: 8px 0 0; font-size: 13px; color: var(--ink2) }

/* 11-04 (rivals N02): the host's sent / seen line under a rally call */
.rally .rally-seen { display: block; margin-top: 4px; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums }
.rally .rally-seen[hidden] { display: none }

/* 11-04 design walk at 1251 / 1563 (console auto "Perfect the design"): on a wide screen every chip shows (two lines, nothing cut at the edge);
   the quads fill their row (auto-fit, no empty fourth slot); "See more" is a full 44 px target */
@media (min-width: 900px) { .kchips { flex-wrap: wrap; overflow: visible; padding-bottom: 6px } }
.kpick-h .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px }
/* the coin creator's choice rows (families, chains, when): every choice shows on a wide screen, nothing cut at the edge */
@media (min-width: 900px) { .kc-radios { flex-wrap: wrap; overflow: visible } }
/* card links are full targets: a coin card's ticker is a centred 44 px box; an event card's title keeps its 4-line clamp and gets a 44 px floor */
.kc-x > .kc-sym:not(.wc-t) { display: inline-flex; align-items: center; min-height: 44px }
.wc .wc-t { min-height: 44px }