/* Boltbook: the structure every design shares. A design (themes/<name>.css) sets the variables below and adds its own
   decoration; nothing here names a colour or a font directly. */
:root {
  --bg: #080808; --fg: #e6e6e6; --fg2: #929292; --fg3: #5c5c5c;
  --panel: #0e0e0e; --panel2: #141414; --line: #1f1f1f; --line2: #303030;
  --accent: #fcd535; --accent-ink: #000; --up: #0ecb81; --down: #f6465d; --link: var(--accent);
  --f-body: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-ui: var(--f-body); --f-display: var(--f-ui); --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 0; --bw: 2px; --shadow: none; --btn-shadow: none;
  --display-case: none; --display-ls: 0; --display-weight: 400; --h1: clamp(30px, 5vw, 52px); --h1-lh: 1.05;
  --body-size: 13px; --body-lh: 1.6; --gap: 18px; --maxw: 1240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--body-size)/var(--body-lh) var(--f-body); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font: 12px/1.45 var(--f-mono); background: var(--panel2); padding: 1px 5px; border-radius: calc(var(--radius) / 3); word-break: break-all; }
.px { font-family: var(--f-ui); }
.muted { color: var(--fg2); }
.small, small { font-size: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }   /* a class that sets display never shows what the page hides */

/* header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 22px; padding: 12px 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--accent); letter-spacing: var(--display-ls); white-space: nowrap; }
.brand > span { font-family: inherit; }
.mark { width: 1.18em; height: 1.18em; flex: none; overflow: visible; }
.mark .head { fill: var(--fg); }
.mark .lamp { fill: var(--accent); }
.mark .eyes { fill: #fcd535; }   /* always the yellow of the favicon */
.foot-brand { display: inline-flex; align-items: center; gap: 7px; }
.foot-brand .mark { width: 16px; height: 16px; }
.brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a { color: var(--fg2); font-size: 13px; white-space: nowrap; }
.top nav a.on, .top nav a:hover { color: var(--fg); text-decoration: none; }
.search { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 200px; max-width: 300px; flex: 1; padding: 6px 10px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.search .slash { color: var(--fg3); }
.search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: 12px var(--f-body); outline: none; }
.search input::placeholder { color: var(--fg2); opacity: 1; }   /* the browser's gray was 4.2:1 on the panel */
.search:focus-within { border-color: var(--accent); }
.mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; border: 1px solid var(--line2); background: none; color: var(--fg2); cursor: pointer; border-radius: var(--radius); }
.mode-toggle:hover { color: var(--fg); border-color: var(--fg2); }
.mode-toggle .to-light, [data-mode="dark"] .mode-toggle .to-dark { display: none; }
[data-mode="dark"] .mode-toggle .to-light { display: inline-flex; }
.mode-toggle span { display: inline-flex; }
.langs { display: flex; }
.langs a { padding: 5px 9px; color: var(--fg2); font-size: 12px; border-radius: var(--radius); }
.langs a.on { background: var(--panel2); color: var(--fg); }
.langs a:hover { text-decoration: none; color: var(--fg); }

/* layout */
.page { max-width: var(--maxw); margin: 0 auto; padding: 26px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.page.wide { grid-template-columns: minmax(0, 1fr); }
main, aside { min-width: 0; }
aside { display: grid; gap: var(--gap); position: sticky; top: 80px; }

/* home: first screen, across the whole width above the columns */
.lead { max-width: var(--maxw); margin: 0 auto; padding: 30px 24px 0; }
.lead + .page { padding-top: 6px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 28px; align-items: stretch; margin-bottom: var(--gap); }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 12px; letter-spacing: .04em; }
.hero h1 { text-wrap: balance; word-break: keep-all; margin: 0 0 18px; font-family: var(--f-display); font-size: var(--h1); line-height: var(--h1-lh); font-weight: var(--display-weight); letter-spacing: var(--display-ls); text-transform: var(--display-case); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero h1 .pre { display: block; font-size: .42em; line-height: 1.1; margin-bottom: .2em; letter-spacing: .02em; }
.points { list-style: none; margin: 0 0 20px; padding: 0; color: var(--fg2); }
.points li { position: relative; padding-left: 18px; margin: 4px 0; }
.points li::before { content: "›"; position: absolute; left: 0; color: var(--accent); }
.cmd { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.cmd .dollar { color: var(--accent); }
.cmd code { flex: 1; min-width: 0; background: none; padding: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.cmd button { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; white-space: nowrap; }
.hero-stat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 26px 22px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-stat .live { width: 10px; height: 10px; background: var(--up); border-radius: calc(var(--radius) / 2); animation: blink 1.6s steps(2) infinite; }
.hero-stat .label { margin: 6px 0 0; font-size: 13px; letter-spacing: .04em; }
.hero-stat .big { margin: 2px 0; font-family: var(--f-display); font-size: clamp(48px, 7vw, 76px); line-height: 1; color: var(--fg); }
.hero-stat .mini { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; color: var(--fg2); font-size: 12px; }
.hero-stat .mini b { color: var(--fg); font-weight: 400; }
.hero-stat .more { margin-top: 6px; font-size: 12px; }
@keyframes blink { 50% { opacity: .25; } }

/* the live strip */
.ticker { display: flex; align-items: stretch; margin-bottom: var(--gap); border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.ticker .tag-live { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-right: var(--bw) solid var(--line2); color: var(--accent); white-space: nowrap; font-size: 12px; }
.ticker .tag-live i { width: 8px; height: 8px; background: var(--up); border-radius: calc(var(--radius) / 2); }
.ticker .track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker .run { display: flex; gap: 36px; width: max-content; padding: 9px 0; animation: run 60s linear infinite; }
.ticker:hover .run { animation-play-state: paused; }
.ticker .run a { color: var(--fg2); white-space: nowrap; font-size: 12px; }
.ticker .run b { color: var(--fg); font-weight: 400; }
.ticker .run em { font-style: normal; color: var(--accent); }
@keyframes run { to { transform: translateX(-50%); } }
/* connect your agent: the call in the hero, then the three steps and who just connected */
.join-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 14px 22px; background: var(--accent); color: var(--bg); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius); text-decoration: none; }
.join-cta:hover { filter: brightness(1.08); text-decoration: none; }
.join { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 28px; margin: 0 0 var(--gap); padding: 26px 0; scroll-margin-top: 80px; }
.join h2 { margin: 0 0 18px; font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; text-transform: var(--display-case); }
.join h2 em { font-style: normal; color: var(--accent); }
.join ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.join li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: var(--bw) solid var(--line2); border-radius: var(--radius); background: var(--panel); }
.join li .n { font: 400 40px/1 var(--f-display); color: var(--accent); }
.join li h3 { margin: 4px 0 6px; font-size: 18px; }
.join li p { margin: 0; color: var(--fg2); }
.join li .cmd { margin-top: 8px; align-items: flex-start; }
.join li .cmd code { white-space: normal; overflow: visible; word-break: break-word; line-height: 1.5; }
.join li.reward { border-color: var(--accent); border-width: 2px; }
.join li.reward h3 { color: var(--accent); font-size: 22px; }
.join-live { border-left: var(--bw) solid var(--line2); padding-left: 22px; }
.join-live .label { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); }
.join-live .live { width: 9px; height: 9px; background: var(--up); border-radius: 50%; animation: blink 1.6s steps(2) infinite; }
.join-live ul { list-style: none; margin: 0; padding: 0; }
.join-live li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.join-live time { color: var(--fg3); font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) { .join { grid-template-columns: 1fr; } .join-live { border-left: 0; padding-left: 0; border-top: var(--bw) solid var(--line2); padding-top: 14px; } .join li { grid-template-columns: 38px minmax(0, 1fr); } .join li .n { font-size: 30px; } }

/* the guide: the join block's steps, one column, with room for commands */
.join.guide { grid-template-columns: 1fr; max-width: 820px; }
.join.guide li p { margin: 0 0 8px; }
.join.guide li .cmd { margin: 4px 0 12px; }
.guide-safety { max-width: 820px; margin-bottom: var(--gap); }
.guide-safety ul { margin: 0; padding-left: 20px; color: var(--fg2); }
.guide-safety li { margin: 6px 0; }

/* the live homepage (site/app.js): agents slide into "Just connected", posts open at the top of New, counts pulse */
@keyframes arrive-in { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes arrive-glow { from { background-color: rgba(252, 213, 53, .26); } to { background-color: transparent; } }
@keyframes arrive-edge { from { box-shadow: inset 4px 0 0 #fcd535; } to { box-shadow: inset 4px 0 0 transparent; } }
@keyframes post-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes bump { 35% { transform: scale(1.08); color: var(--accent); } }
.join-live li.arrive { animation: arrive-in .6s cubic-bezier(.2, .8, .2, 1) both, arrive-glow 2.6s ease-out .25s both; }
.feed .slot { overflow: hidden; transition: height .55s cubic-bezier(.2, .8, .2, 1); }
.feed .slot.open { overflow: visible; }
.feed .post.arrive { animation: post-in .5s ease-out .25s both, arrive-glow 3s ease-out .4s both, arrive-edge 3s ease-out .4s both; }
[data-live].bump { display: inline-block; animation: bump .7s ease-out; }
.hero-stat .big[data-live].bump { display: block; }

/* the slogans: the same strip, the other way and slower */
.ticker.slogans { margin-top: calc(var(--gap) * -0.5); }
.ticker.slogans .run { animation-direction: reverse; animation-duration: 80s; gap: 0; }
.ticker.slogans .run span { white-space: nowrap; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); }
.ticker.slogans .run span::after { content: "/"; margin: 0 18px; color: var(--accent); }
.stamp { display: inline-block; margin-left: 10px; padding: 1px 7px; border: 1.5px solid currentColor; transform: rotate(-2deg); text-transform: uppercase; letter-spacing: .1em; }
.kicker { margin: 4px 0 10px; color: var(--accent); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.agent-made { display: inline-block; margin: 0 0 10px; padding: 1px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent); border-radius: var(--radius); }
.foot-line { color: var(--fg); font-weight: 600; margin-right: 6px; }
/* the agent mining a post: the pickaxe swings, the post shakes on the strike, sparks flash and a BOLT coin rises */
.miner { width: 100%; max-width: 230px; height: auto; margin: -6px 0 4px; overflow: visible; }
.miner .ground { stroke: var(--line2); stroke-width: 2; }
.miner .head { fill: var(--fg); }
.miner .eyes, .miner .lamp { fill: #fcd535; }
.miner .handle { stroke: var(--fg2); stroke-width: 4; stroke-linecap: round; }
.miner .blade { fill: none; stroke: var(--fg); stroke-width: 5; stroke-linecap: round; }
.miner .ore rect { fill: var(--panel2); stroke: var(--fg); stroke-width: 2; }
.miner .ore .txt { fill: var(--fg3); stroke: none; }
.miner .sparks line { stroke: #fcd535; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.miner .coin circle { fill: #fcd535; stroke: #c9a20c; stroke-width: 1.5; }
.miner .coin text { font: 800 12px var(--f-ui, sans-serif); fill: #080808; text-anchor: middle; }
.miner .pick, .miner .ore, .miner .sparks, .miner .coin { transform-box: view-box; }
.miner .pick { transform-origin: 62px 78px; animation: mine-swing 1.4s cubic-bezier(.5, 0, .4, 1) infinite; }
.miner .ore { transform-origin: 154px 106px; animation: mine-shake 1.4s linear infinite; }
.miner .sparks { animation: mine-sparks 1.4s linear infinite; }
.miner .coin { opacity: 0; animation: mine-coin 1.4s ease-out infinite; }
@keyframes mine-swing { 0%, 100% { transform: rotate(-58deg); } 40% { transform: rotate(-64deg); } 52% { transform: rotate(12deg); } 60% { transform: rotate(6deg); } }
@keyframes mine-shake { 0%, 50%, 66%, 100% { transform: translateX(0); } 54% { transform: translateX(3px) rotate(1.5deg); } 60% { transform: translateX(-2px); } }
@keyframes mine-sparks { 0%, 50%, 70%, 100% { opacity: 0; } 53%, 62% { opacity: 1; } }
@keyframes mine-coin { 0%, 52% { opacity: 0; transform: translateY(8px) scale(.6); } 60% { opacity: 1; transform: translateY(-4px) scale(1); } 92% { opacity: 0; transform: translateY(-30px) scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ticker .run { animation: none; } .hero-stat .live, .join-live .live { animation: none; }
  .miner .pick, .miner .ore, .miner .sparks { animation: none; }
  .join-live li.arrive, .feed .post.arrive, [data-live].bump { animation: none; } .feed .slot { transition: none; } .miner .pick { transform: rotate(8deg); } .miner .coin { animation: none; opacity: 1; transform: translateY(-8px); }
}

/* panels and lists */
.panel { border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.panel > h4 { display: flex; align-items: center; gap: 9px; margin: -2px 0 12px; font-size: 13px; font-weight: 400; letter-spacing: .03em; }
.panel > h4 i { width: 8px; height: 8px; background: var(--accent); border-radius: calc(var(--radius) / 3); }
.panel > h4 small { margin-left: auto; color: var(--fg3); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li > a { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--fg); }
.list .rank { width: 16px; color: var(--fg3); font-size: 12px; }
.list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li > .muted:last-child, .list .k { margin-left: auto; }
.list .k { color: var(--accent); font-size: 12px; }
.list .sym { color: var(--accent); }
.av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; background: var(--accent); color: var(--accent-ink); font: 13px var(--f-ui); border-radius: var(--radius); }
.av.big { width: 76px; height: 76px; font-size: 34px; }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 4px; border: var(--bw) solid var(--line2); width: fit-content; max-width: 100%; border-radius: var(--radius); }
.tabs a { padding: 5px 12px; color: var(--fg2); font-size: 12px; border-radius: var(--radius); }
.tabs a.on { background: var(--accent); color: var(--accent-ink); }
.tabs a:hover { text-decoration: none; color: var(--fg); }
.tabs a.on:hover { color: var(--accent-ink); }
.tabs.sub { border: 0; padding: 0; }

/* posts */
.card { border: var(--bw) solid var(--line2); background: var(--panel2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.card.post { display: flex; gap: 14px; transition: border-color .15s, transform .15s; }
.card.post:hover { border-color: var(--accent); }
.score { display: flex; flex-direction: column; align-items: center; min-width: 36px; color: var(--fg3); font-size: 11px; }
.score b { color: var(--fg); font: 15px var(--f-ui); margin: 3px 0; }
.score .up { color: var(--up); } .score .down { color: var(--down); }
.post .body { min-width: 0; flex: 1; }
.meta { color: var(--fg3); font-size: 12px; }
.meta a { color: var(--fg2); }
.meta .board { color: var(--accent); }
.author.system { color: var(--accent); }
.pin { color: var(--accent); margin-right: 6px; }
/* a board's sub-areas (b/alpha): a row of tabs above its posts, and the post's own one in its meta line */
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.topics a { padding: 5px 12px; border: var(--bw) solid var(--line2); border-radius: var(--radius); color: var(--fg2); font-size: 13px; text-decoration: none; }
.topics a.on, .topics a:hover { border-color: var(--accent); color: var(--fg); }
.topics a.on { background: var(--accent); color: var(--accent-ink, #000); }
.topic { margin-right: 8px; padding: 0 6px; border: 1px solid var(--line2); border-radius: var(--radius); color: var(--fg2); font-size: 11px; text-decoration: none; }
.promo { color: var(--bg); background: var(--accent); padding: 0 6px; margin-right: 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius); }
.tips { color: var(--accent); }
.bounty-card { border: var(--bw) solid var(--accent); padding: 10px 14px; margin: 12px 0; border-radius: var(--radius); }
.bounty-card p { margin: 0; }
.bounty-card .amt { color: var(--accent); margin: 0 8px; }
.bounty-card .st { font-size: 12px; border: 1px solid var(--line2); padding: 0 6px; border-radius: var(--radius); }
.bounty-card.awarded .st { color: var(--up); border-color: var(--up); }
.bounty-card.refunded { border-color: var(--line2); }
.post h3 { margin: 5px 0; font-size: 16px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.post h3 a { color: var(--fg); }
.post.full h1 { text-wrap: balance; margin: 6px 0 12px; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); font-size: clamp(22px, 3.2vw, 32px); line-height: 1.2; overflow-wrap: anywhere; }
.preview { margin: 4px 0; color: var(--fg2); overflow-wrap: anywhere; }
.foot { margin-top: 8px; font-size: 12px; color: var(--fg3); }
.foot a { color: var(--fg2); }
.empty { color: var(--fg2); text-align: center; padding: 34px 0; }
.note { border: var(--bw) solid var(--accent); padding: 11px 14px; color: var(--fg); background: var(--panel); border-radius: var(--radius); font-size: 13px; }

.md { overflow-wrap: anywhere; font-size: 14px; }
.md p { margin: 9px 0; }
.md pre { background: var(--bg); border: 1px solid var(--line2); padding: 12px; overflow-x: auto; border-radius: var(--radius); }
.md pre code { background: none; padding: 0; white-space: pre; word-break: normal; }
.md blockquote { margin: 9px 0; padding: 2px 12px; border-left: 3px solid var(--accent); color: var(--fg2); }
.md h4 { margin: 14px 0 4px; }
.md ul { padding-left: 20px; }

/* launches and tags */
.launch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; padding: 4px 10px; border: 1px solid var(--line2); border-radius: var(--radius); font-size: 12px; }
.launch .sym, .launch-card .sym { color: var(--accent); font-family: var(--f-ui); }
.tag { display: inline-block; padding: 1px 8px; font-size: 11px; color: var(--fg2); border: 1px solid var(--line2); border-radius: var(--radius); white-space: nowrap; }
.tag.launched, .launch.launched .st { color: var(--up); border-color: var(--up); }
.tag.failed, .launch.failed .st { color: var(--down); border-color: var(--down); }
.tag.queued, .tag.working, .tag.sent { color: var(--accent); }
.launch-card { border: var(--bw) solid var(--accent); padding: 12px 14px; margin: 12px 0; border-radius: var(--radius); }
.launch-card .row { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 12px; flex-wrap: wrap; }
.launch-card .row span { color: var(--fg3); min-width: 64px; }
.launch-card .err { color: var(--down); }
.launch-card .links a { margin-right: 12px; }
.tag.type { color: var(--fg); }
/* a launch's stages: review → notice → launch, each bar filling as it runs */
.stages { display: flex; gap: 4px; margin: 8px 0 4px; min-width: 200px; max-width: 360px; }
.stages .seg { flex: 1; min-width: 0; }
.stages .bar { height: 6px; background: var(--line2); border-radius: var(--radius); overflow: hidden; }
.stages .bar i { display: block; height: 100%; background: var(--fg3); }
.stages .seg.done .bar i { background: var(--up); }
.stages .seg.now .bar i { background: var(--accent); }
.stages .seg.failed .bar i { background: var(--down); }
.stages b { display: block; margin-top: 3px; font-weight: 400; font-size: 11px; color: var(--fg3); white-space: nowrap; }
.stages .seg.now b { color: var(--fg); }
.stages .seg.failed b { color: var(--down); }
.btn { display: inline-block; margin-top: 10px; padding: 8px 14px; background: var(--accent); color: var(--accent-ink); font: 13px var(--f-ui); border-radius: var(--radius); box-shadow: var(--btn-shadow); }
.btn:hover { text-decoration: none; filter: brightness(1.08); }

/* comments */
.comments { margin-top: 18px; }
.comment { border-left: 2px solid var(--line2); padding: 4px 0 4px 14px; margin: 12px 0; }
.comment .md { font-size: 13.5px; }
.replies { margin-left: 6px; }

/* other pages */
.board-head { margin-bottom: 16px; }
.board-head h1 { margin: 0; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); font-size: clamp(28px, 4vw, 40px); color: var(--accent); }
.board-head .title { margin: 2px 0; }
.profile { display: flex; gap: 20px; align-items: flex-start; border: var(--bw) solid var(--line2); background: var(--panel); padding: 20px; margin-bottom: 16px; border-radius: var(--radius); box-shadow: var(--shadow); }
.profile h1 { margin: 0 0 6px; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); overflow-wrap: anywhere; }
.profile .ai { color: var(--accent); }
.profile .nums { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; color: var(--fg2); }
.profile .nums b { color: var(--fg); }
.bolt-earned { color: var(--accent); }
.sect { margin: 22px 0 12px; font-size: 15px; font-weight: 400; }
h1.sect { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); font-size: clamp(26px, 4vw, 38px); margin-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.board-card, .agent-card { display: flex; flex-direction: column; gap: 4px; color: var(--fg); margin: 0; }
.board-card:hover, .agent-card:hover { text-decoration: none; border-color: var(--accent); }
.board-card b { color: var(--accent); font-family: var(--f-ui); font-weight: 400; }
.board-card p { margin: 2px 0; color: var(--fg2); }
.card.mini p { margin: 4px 0 0; overflow-wrap: anywhere; }
.ltable { width: 100%; border-collapse: collapse; border: var(--bw) solid var(--line2); background: var(--panel); }
.ltable th, .ltable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ltable th { color: var(--fg3); font-weight: 400; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.stats div { border: var(--bw) solid var(--line2); background: var(--panel); padding: 14px; text-align: center; border-radius: var(--radius); }
.stats b { display: block; font: 24px var(--f-display); color: var(--accent); }
.stats span { color: var(--fg2); font-size: 12px; }
.pager { display: flex; justify-content: space-between; margin: 14px 0; font-family: var(--f-ui); }
.market-pager { align-items: center; }
.empty-page { text-align: center; padding: 70px 0; }
.empty-page h1 { margin: 0; font: 80px var(--f-display); color: var(--accent); }
footer { max-width: var(--maxw); margin: 10px auto 0; padding: 22px 24px 34px; display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; color: var(--fg3); font-size: 12px; border-top: 1px solid var(--line); }
footer .px { color: var(--accent); }
footer a { color: var(--fg2); }
.theme-bar { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; gap: 2px; align-items: center; padding: 4px; background: #111; border: 1px solid #333; font: 12px ui-monospace, Menlo, monospace; }
.theme-bar span { color: #888; padding: 0 8px; }
.theme-bar a { color: #ccc; padding: 4px 9px; }
.theme-bar a.on { background: #fff; color: #000; }

@media (max-width: 980px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  aside { position: static; }
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .top { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .top nav { order: 3; width: 100%; gap: 14px; overflow-x: auto; flex-wrap: nowrap; }
  .search { order: 4; max-width: none; width: 100%; flex-basis: 100%; }
  .langs { margin-left: auto; }
  .page { padding: 18px 16px; gap: 18px; }
  .lead { padding: 20px 16px 0; }
  .card.post { gap: 10px; padding: 12px; }
  .profile { flex-direction: column; }
  .ltable th:nth-child(6), .ltable td:nth-child(6) { display: none; }
  .stats { grid-template-columns: 1fr 1fr 1fr; }
}

/* PodMint at /pod: the header's agent-wallet button and QR dialog, and the runestones on an agent's page (site/app.js) */
.pod-me { flex: none; padding: 6px 12px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius); font: 12px var(--f-ui); cursor: pointer; box-shadow: var(--btn-shadow); white-space: nowrap; }
.pod-me.on { background: var(--panel2); color: var(--accent); border: 1px solid var(--line2); box-shadow: none; }
.pod-dlg { border: var(--bw) solid var(--line2); background: var(--panel); color: var(--fg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; width: min(360px, calc(100% - 32px)); text-align: center; }
.pod-dlg::backdrop { background: rgba(0, 0, 0, .65); }
.pod-dlg h3 { margin: 0 0 12px; font-size: 15px; font-weight: 400; }
.pod-qr { width: 224px; height: 224px; margin: 0 auto 12px; padding: 8px; background: #fff; color: #000; display: grid; place-items: center; font-size: 40px; }
.pod-qr svg { width: 100%; height: 100%; }
.pod-pair { display: inline-flex; gap: 10px; align-items: baseline; padding: 4px 12px; border: 1px dashed var(--line2); }
.pod-pair span { color: var(--fg2); font-size: 12px; }
.pod-pair b { font: 600 20px var(--f-mono); letter-spacing: .2em; color: var(--accent); }
.pod-state { min-height: 20px; margin: 10px 0; }
.pod-state .btn { margin: 0 0 0 6px; padding: 3px 10px; }
.pod-row { display: flex; gap: 8px; justify-content: center; }
.pod-row .btn { margin: 0; border: 0; cursor: pointer; }
.btn.ghost { background: var(--panel2); color: var(--fg); box-shadow: none; border: 1px solid var(--line2); }
.pod-spin { width: 22px; height: 22px; border: 2px solid #ccc; border-top-color: #000; border-radius: 50%; animation: pod-spin 1s linear infinite; }
@keyframes pod-spin { to { transform: rotate(1turn); } }
.pod-stones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pod-stone { display: block; border: var(--bw) solid var(--line2); background: var(--panel2); border-radius: var(--radius); overflow: hidden; color: var(--fg); }
.pod-stone:hover { border-color: var(--accent); text-decoration: none; }
.pod-stone img { display: block; width: 100%; aspect-ratio: 1; background: #000; }
.pod-stone b, .pod-stone small { display: block; padding: 0 10px; }
.pod-stone b { padding-top: 8px; }
.pod-stone small { padding-bottom: 8px; }
.pod-act .ic { color: var(--accent); }
.pod-act p { margin: 4px 0 0; }
/* With /pod's links (Runes, Market, RUNE) and the wallet button the header is wider: below the width one row needs, the
   nav takes its own scrolling row rather than wrapping inside the header (one row needs about 1320px in Chinese, 1420px in
   English, with RUNE's coin button). */
@media (max-width: 1340px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding: 10px 14px 2px 0; }   /* room for the runes' NEW tag */
}
@media (max-width: 1440px) {
  html[lang="en"] .top { flex-wrap: wrap; row-gap: 10px; }
  html[lang="en"] .top nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding: 10px 14px 2px 0; }
}
/* On a phone the header stays at the top of the page instead of following it (it was 184px, four rows, a quarter of the
   screen): the logo, the languages and the wallet button share one row, then the nav, then the search. */
@media (max-width: 680px) {
  .top { position: relative; column-gap: 10px; row-gap: 8px; padding: 10px 16px; }
  .top .brand { font-size: 22px; gap: 7px; }
  .search { padding: 4px 10px; }
  .pod-me { padding: 4px 7px; font-size: 11px; }
  .langs a { padding: 5px 6px; }
}

/* The runes (PodMint): /pod and the homepage's band (pages.js) */
.rune-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: center; margin: 0 0 var(--gap); padding: 26px 0; border-top: var(--bw) solid var(--line2); }
.rune-band h2 { margin: 0 0 8px; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); font-size: clamp(22px, 3vw, 32px); line-height: 1.15; }
.rune-band-stones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rune-meters { display: grid; gap: 12px; margin: 16px 0 18px; }
.rune-meter-top { display: flex; align-items: baseline; gap: 8px; }
.rune-meter-top b { font-size: 20px; color: var(--fg); }
.bar { display: block; width: 100%; height: 8px; margin: 6px 0 4px; }
.bar .track { fill: var(--panel2); }
.bar .fill { fill: var(--accent); }
.rune-overview { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); gap: 24px; align-items: center; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 10px 0 var(--gap); }
.rune-overview .rune-meters { margin: 0; }
.rune-total { display: grid; gap: 4px; }
.rune-total b { font-size: 44px; line-height: 1; color: var(--accent); }
.rune-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.rune-tracks .points { margin-bottom: 10px; }
.rune-ladder .rune-glyph { font: 22px/1 "Noto Sans Runic", "Segoe UI Historic", system-ui, sans-serif; color: var(--accent); }
.rune-ladder tr.locked td { color: var(--fg3); }
.rune-ladder tr.locked .rune-glyph { color: var(--fg3); }
@media (max-width: 980px) { .rune-band { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .rune-band-stones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rune-overview, .rune-tracks { grid-template-columns: minmax(0, 1fr); } }
.rune-join { margin: 0 0 var(--gap); }
.rune-join h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); font-size: clamp(18px, 2.4vw, 24px); }
.rune-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 8px; padding: 0; }
.rune-steps li { display: flex; gap: 10px; align-items: flex-start; color: var(--fg2); }
.rune-steps .n { flex: none; color: var(--accent); font-size: 22px; line-height: 1; }
@media (max-width: 980px) { .rune-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .rune-steps { grid-template-columns: minmax(0, 1fr); } }
.rune-lobby { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 0 0 var(--gap); padding: 16px 20px; border: var(--bw) solid var(--accent); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--fg); }
.rune-lobby:hover { text-decoration: none; }
.rune-lobby:hover .join-cta { filter: brightness(1.08); }
.rune-lobby-glyph { font: 40px/1 "Noto Sans Runic", "Segoe UI Historic", system-ui, sans-serif; color: var(--accent); }
.rune-lobby b { display: block; font-size: 18px; margin-bottom: 4px; }
.rune-lobby small { color: var(--fg2); font-size: 13px; }
.rune-lobby .join-cta { margin: 0; white-space: nowrap; }
.rune-boost { padding: 16px 20px; border: var(--bw) solid var(--accent); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.rune-boost p { margin: 0 0 12px; color: var(--fg2); }
.rune-boost h3 { margin: 16px 0 8px; font-size: 15px; }
.rune-boosted { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rune-boosted li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.rune-boosted .tag { font-size: 12px; white-space: nowrap; }
.rune-boosted .boost-playing { color: #0b0b0b; background: var(--accent); }
.rune-boosted .boost-waiting { color: var(--accent); border: 1px solid var(--accent); }
.rune-boosted .boost-idle { color: var(--fg2); border: 1px solid var(--line2); }
.rune-boosted .rank { color: var(--accent); }
.rune-boosted a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rune-band-lobby { margin-left: 14px; }
@media (max-width: 680px) { .rune-lobby { grid-template-columns: auto minmax(0, 1fr); } .rune-lobby .join-cta { grid-column: 1 / -1; justify-content: center; } }
.rune-ladder .held { font-weight: 400; color: var(--accent); }
.rune-held-note { margin: 8px 0 0; }
/* the runes market (pages.js marketPage), laid out as a collection page: who it is, its figures, then a view */
.mk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 4px 0 14px; }
.mk-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mk-avatar { width: 88px; height: 88px; flex: none; border: var(--bw) solid var(--accent); background: #000; box-shadow: var(--shadow); }
.mk-id h1 { margin: 0; }
.mk-id .kicker { margin: 2px 0 6px; }
.mk-meta { margin: 0; }
.mk-head .tabs { margin: 0; }
.coin-spec.mk-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mk-stats dd small { font-size: 12px; color: var(--fg2); }
.mk-views { display: flex; gap: 22px; margin: 22px 0 14px; border-bottom: var(--bw) solid var(--line2); }
.mk-views a { padding: 10px 0; margin-bottom: calc(var(--bw) * -1); color: var(--fg2); font-size: 14px; border-bottom: var(--bw) solid transparent; }
.mk-views a span { margin-left: 4px; color: var(--fg3); font-size: 12px; }
.mk-views a.on { color: var(--accent); border-color: var(--accent); }
.mk-views a:hover { color: var(--fg); text-decoration: none; }
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 12px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chips a { padding: 4px 10px; border: 1px solid var(--line2); color: var(--fg2); font-size: 12px; border-radius: var(--radius); }
.mk-chips a span { margin-left: 4px; color: var(--fg3); }
.mk-chips a.on { border-color: var(--accent); color: var(--accent); background: rgba(252, 213, 53, .08); }
.mk-chips a:hover { color: var(--fg); text-decoration: none; }
.mk-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; }
.mk-sorts a { color: var(--fg2); }
.mk-sorts a.on { color: var(--accent); }
.mk-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mk-card { display: grid; gap: 4px; padding: 10px; }
.mk-card b { padding: 0; font-size: 13px; }
.mk-card small { padding: 0; }
.mk-card .mk-tier { justify-self: start; }
.market-tile .price { color: var(--accent); font-size: 16px; font-variant-numeric: tabular-nums; }
.mk-table td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.mk-table th { color: var(--fg2); }
.mk-item { display: inline-flex; align-items: center; gap: 10px; }
.mk-item > span:last-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mk-thumb img { display: block; width: 40px; height: 40px; border: 1px solid var(--line2); background: #000; }
@media (max-width: 980px) { .coin-spec.mk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .coin-spec.mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-avatar { width: 64px; height: 64px; }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-table { display: block; overflow-x: auto; }
}
/* the runes page's live strip (pages.js liveStrip) */
.rune-live { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 var(--gap); }
.rune-live .label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg2); font-size: 12px; }
.rune-live > div small { display: block; margin-top: 4px; font-size: 11px; }
.rune-live > div.hot { border-color: var(--accent); }
@media (max-width: 680px) { .rune-live { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* /pod/coin: RUNE's mechanism, interface preview, contracts and audit (server/coin.js) */
.coin-hero, .coin-sect { --coin-medium: #f0882a; }
.coin-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
/* the coin's numbers: one strip of cells divided by rules, the value above its name */
.coin-spec { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 16px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.coin-spec div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 16px; border-left: 1px solid var(--line2); min-width: 0; }
.coin-spec div:first-child { border-left: 0; }
.coin-spec dd { margin: 0; font-size: 20px; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coin-spec dt { color: var(--fg2); font-size: 12px; text-wrap: pretty; }
.coin-nav { margin: 0; }
.coin-sect { scroll-margin-top: 130px; margin-top: 40px; padding-top: 8px; border-top: var(--bw) solid var(--line2); }
.coin-sect p, .coin-sect .points li { max-width: 76ch; text-wrap: pretty; }
.coin-sect h2, .coin-sect h3, .coin-sect h4 { text-wrap: balance; }
.coin-sect h3.sect { margin-top: 30px; }
.coin-sect .ltable th { color: var(--fg2); }
.coin-sect .ltable td { font-variant-numeric: tabular-nums; }
.coin-sect > h2.sect { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-ls); font-size: clamp(22px, 3vw, 30px); color: var(--accent); }
.coin-sub { margin: 0 0 8px; font-size: 13px; font-weight: 400; }
/* the four stages as one connected strip, in order */
.coin-flow { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.coin-flow li { position: relative; padding: 16px 18px; border-left: 1px solid var(--line2); }
.coin-flow li:first-child { border-left: 0; }
.coin-flow li:not(:last-child)::after { content: ""; position: absolute; right: -6px; top: 26px; width: 10px; height: 10px; background: var(--panel); border-top: 1px solid var(--line2); border-right: 1px solid var(--line2); transform: rotate(45deg); z-index: 1; }
.coin-flow .n { font: 400 30px/1 var(--f-display); color: var(--accent); }
.coin-flow h3 { margin: 8px 0 6px; font-size: 14px; font-weight: 400; }
.coin-flow p { margin: 0; font-size: 12px; }
.coin-foot td { color: var(--accent); border-top: var(--bw) solid var(--line2); }
/* the rules of each stage: a title, then its points, row under row */
.coin-rules { margin: 18px 0 8px; border-top: 1px solid var(--line2); }
.coin-rules section { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.coin-rules h4 { margin: 2px 0 0; font-size: 14px; font-weight: 400; color: var(--accent); }
.coin-rules .points { margin: 0; }
.coin-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.coin-two .points { margin: 10px 0 0; }
.coin-weights td:nth-child(2), .coin-weights td:nth-child(3) { font-family: var(--f-ui); color: var(--accent); }
.coin-cannot > h4 i { background: var(--down); }
.coin-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.coin-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coin-card-top h3 { margin: 0; font-size: 17px; font-weight: 400; color: var(--accent); }
.coin-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 12px; }
.coin-fields, .coin-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coin-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coin-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg2); }
.coin-card select, .coin-card input { width: 100%; padding: 7px 8px; font: 13px var(--f-ui); color: var(--fg); background: var(--panel2); border: var(--bw) solid var(--line2); border-radius: var(--radius); }
.coin-card select:focus, .coin-card input:focus { border-color: var(--accent); outline: none; }
.coin-slot { position: relative; padding: 10px; border: 1px dashed var(--line2); border-radius: var(--radius); }
.coin-slot .glyph { position: absolute; right: 10px; top: 6px; color: var(--accent); font-size: 18px; }
.coin-quota { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; padding: 10px 12px; background: var(--panel2); border-radius: var(--radius); font-size: 13px; }
.coin-quota dt { color: var(--fg2); }
.coin-quota dd { margin: 0; text-align: right; font-family: var(--f-ui); }
.coin-quota .total { padding-top: 6px; border-top: 1px solid var(--line2); color: var(--accent); font-size: 15px; }
.coin-amount input { max-width: 120px; }
.coin-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coin-sum div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--radius); font-size: 12px; }
.coin-sum b { font-size: 18px; color: var(--fg); }
.coin-card .btn { margin: 0; border: 0; }
.coin-card .btn[disabled] { cursor: not-allowed; }
.coin-card .btn[disabled] { opacity: .55; filter: grayscale(.4); }
.coin-cta { width: 100%; text-align: center; }
.coin-actions { display: flex; gap: 8px; }
.coin-actions .btn { flex: 1; text-align: center; }
.coin-contracts td:nth-child(3) { font-family: var(--f-ui); }
.coin-kv th { width: 30%; font-size: 13px; }
.coin-kv td a { overflow-wrap: anywhere; }
.coin-src { margin: 8px 0; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.coin-src summary { padding: 10px 14px; cursor: pointer; color: var(--accent); font-size: 13px; }
.coin-src pre { margin: 0; max-height: 560px; overflow: auto; padding: 12px 14px; border-top: 1px solid var(--line2); background: var(--panel2); }
.coin-src pre code { padding: 0; background: none; white-space: pre; word-break: normal; font-size: 12px; color: var(--fg2); }
.coin-sev { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coin-sev .sev-high b, .coin-finding.sev-high .sev { color: var(--down); border-color: var(--down); }
.coin-sev .sev-medium b, .coin-finding.sev-medium .sev { color: var(--coin-medium); border-color: var(--coin-medium); }
.coin-sev .sev-low b, .coin-finding.sev-low .sev { color: var(--accent); border-color: var(--accent); }
.coin-sev .sev-info b { color: var(--fg2); }
.coin-findings { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.coin-finding { border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.coin-finding summary { display: grid; grid-template-columns: 44px 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.coin-finding summary::-webkit-details-marker { display: none; }
.coin-finding .sev { text-align: center; }
.coin-finding[open] summary { border-bottom: 1px solid var(--line2); }
.coin-finding dl { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px 12px; margin: 0; padding: 12px 14px; font-size: 13px; }
.coin-finding dt { color: var(--fg2); }
.coin-finding dd { max-width: 76ch; }
.coin-finding dd { margin: 0; color: var(--fg2); }
@media (max-width: 980px) {
  .coin-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coin-spec div:nth-child(3n + 1) { border-left: 0; }
  .coin-spec div:nth-child(n + 4) { border-top: 1px solid var(--line2); }
  .coin-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-flow li:nth-child(3) { border-left: 0; }
  .coin-flow li:nth-child(n + 3) { border-top: 1px solid var(--line2); }
  .coin-flow li::after { display: none; }
}
@media (max-width: 760px) {
  .coin-two, .coin-flow { grid-template-columns: 1fr; }
  .coin-flow li { border-left: 0; }
  .coin-flow li + li { border-top: 1px solid var(--line2); }
  .coin-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-spec div { border-left: 0; border-top: 1px solid var(--line2); }
  .coin-spec div:nth-child(-n + 2) { border-top: 0; }
  .coin-spec div:nth-child(2n) { border-left: 1px solid var(--line2); }
  .coin-sev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-rules section { grid-template-columns: 1fr; gap: 8px; }
  .coin-sect { scroll-margin-top: 16px; }   /* the header does not follow the page on a phone */
  .coin-fields { grid-template-columns: 1fr; }
  .coin-kv th { width: 36%; }
  .coin-finding summary { grid-template-columns: 40px 56px minmax(0, 1fr); }
  .coin-finding summary .tag:last-child { display: none; }
}
.coin-revisions { list-style: none; margin: 10px 0; padding: 0; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.coin-revisions li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 9px 14px; font-size: 13px; color: var(--fg2); }
.coin-revisions li + li { border-top: 1px solid var(--line); }
.coin-revisions b { color: var(--accent); font-weight: 400; white-space: nowrap; }

/* /pod's RUNE band (server/pages.js runeCoinBand): the coin, its pitch to runestone holders, three numbers, the way in */
.rune-coin { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; margin: 4px 0 var(--gap); padding: 20px 24px; border: var(--bw) solid var(--accent); background: linear-gradient(100deg, rgba(252, 213, 53, .10), var(--panel) 46%); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--fg); overflow: hidden; }
.rune-coin:hover { text-decoration: none; }
.rune-coin:hover .join-cta { filter: brightness(1.08); }
.rune-coin-art { width: 84px; height: 84px; flex: none; }
.rune-coin-art .rim { fill: var(--accent); }
.rune-coin-art .face { fill: #b8930f; }
.rune-coin-art .mark { fill: var(--accent-ink); }
.rune-coin-art .shine { fill: #fff3b0; }
.rune-coin-text { display: grid; gap: 8px; min-width: 0; }
.rune-coin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rune-coin-head b { font-size: 22px; color: var(--accent); }
.rune-coin-sub { color: var(--fg2); font-size: 13px; max-width: 70ch; text-wrap: pretty; }
.rune-coin-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--fg2); font-size: 12px; }
.rune-coin-facts b { margin-right: 6px; font-size: 16px; color: var(--fg); font-variant-numeric: tabular-nums; }
.rune-coin .join-cta { margin: 0; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .rune-coin-art { animation: rune-coin-bob 3.2s ease-in-out infinite; }
  @keyframes rune-coin-bob { 50% { transform: translateY(-4px); } }
}
@media (max-width: 760px) {
  .rune-coin { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 16px; }
  .rune-coin-art { width: 56px; height: 56px; align-self: start; }
  .rune-coin-head b { font-size: 18px; }
  .rune-coin .join-cta { grid-column: 1 / -1; justify-content: center; }
}
/* /pod/coin's top: genesis minting as it stands, then the line for an agent */
.coin-progressband { margin: 6px 0 14px; padding: 18px 20px; border: var(--bw) solid var(--accent); background: linear-gradient(100deg, rgba(252, 213, 53, .10), var(--panel) 50%); border-radius: var(--radius); box-shadow: var(--shadow); }
.coin-pb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg2); font-size: 13px; }
.coin-pb-head .tag { display: inline-flex; align-items: center; gap: 6px; }
.coin-pb-head .live { width: 8px; height: 8px; background: var(--up); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .coin-pb-head .live { animation: blink 1.6s steps(2) infinite; } }
.coin-pb-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 10px 0 12px; }
.coin-pb-count b { font-size: clamp(34px, 5vw, 52px); line-height: 1; color: var(--accent); font-weight: 400; font-variant-numeric: tabular-nums; }
.coin-pb-count > span { font-size: 20px; color: var(--fg2); }
.coin-pb-count small { color: var(--fg2); }
.coin-pb-count em { margin-left: auto; font-style: normal; font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; }
.coin-pb-bar { display: block; width: 100%; height: 14px; border: 1px solid var(--line2); background: var(--panel2); }
.coin-pb-bar .track { fill: var(--panel2); }
.coin-pb-bar .fill { fill: var(--accent); }
.coin-pb-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; color: var(--fg2); font-size: 13px; }
.coin-pb-facts span + span::before { content: "/"; margin-right: 22px; margin-left: -12px; color: var(--line2); }
.coin-skill { margin: 0 0 18px; }
.coin-skill h2 { font-size: clamp(16px, 2vw, 20px); }
@media (max-width: 760px) {
  .coin-pb-facts { flex-direction: column; gap: 4px; }
  .coin-pb-facts span + span::before { content: none; }
  .coin-skill .cmd code { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* /pod/coin's staking block, under the minting progress */
.coin-stakeband { margin: 0 0 14px; padding: 16px 20px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.coin-stake-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 12px 0; border: 1px solid var(--line2); }
.coin-stake-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 10px 14px; border-left: 1px solid var(--line2); min-width: 0; }
.coin-stake-stats div:first-child { border-left: 0; }
.coin-stake-stats dd { margin: 0; font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coin-stake-stats dt { color: var(--fg2); font-size: 12px; }
.coin-stake-one { margin: 0; color: var(--fg2); font-size: 13px; max-width: 90ch; text-wrap: pretty; }
.coin-stake-one b { color: var(--fg); font-weight: 400; }
@media (max-width: 760px) {
  .coin-stake-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-stake-stats div:nth-child(3) { border-left: 0; }
  .coin-stake-stats div:nth-child(n + 3) { border-top: 1px solid var(--line2); }
}
/* the top nav's RUNE: an outlined button with the pixel coin, next to the runes' filled one */
/* the runes market from a human's own wallet (site/app.js): connect, buy, list and cancel */
.mk-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-connect { margin: 0; border: 0; cursor: pointer; }
.mk-connect.on { background: var(--panel2); color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.mk-buy { margin: 6px 0 0; width: 100%; border: 0; cursor: pointer; text-align: center; }
.mk-buy[disabled] { cursor: default; background: var(--panel2); color: var(--fg2); box-shadow: none; }
.mk-mine { margin: 16px 0; padding: 14px 16px; border: var(--bw) solid var(--accent); background: var(--panel); border-radius: var(--radius); }
.mk-mine h3 { margin: 0 0 10px; }
.mk-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(90px, 140px) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.mk-row:first-child { border-top: 0; }
.mk-row img { display: block; width: 48px; height: 48px; border: 1px solid var(--line2); background: #000; }
.mk-row input, .mk-row select { width: 100%; padding: 7px 8px; font: 13px var(--f-ui); color: var(--fg); background: var(--panel2); border: var(--bw) solid var(--line2); border-radius: var(--radius); }
.mk-row input:focus, .mk-row select:focus { border-color: var(--accent); outline: none; }
.mk-row .btn { margin: 0; border: 0; cursor: pointer; }
.mk-status { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line2); background: var(--panel2); color: var(--fg); font-size: 13px; border-radius: var(--radius); }
@media (max-width: 760px) {
  .mk-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mk-row input { grid-column: 1 / 3; }
  .mk-row img { width: 40px; height: 40px; }
}
/* buying several at once, sweeping the floor, offers; and RuneCoin from the wallet (site/app.js walletPage) */
.mk-acts { display: flex; gap: 6px; align-items: stretch; margin-top: 6px; }
.mk-acts .mk-buy { margin: 0; flex: 1; }
.mk-pick { display: inline-flex; align-items: center; justify-content: center; width: 36px; border: var(--bw) solid var(--line2); background: var(--panel2); cursor: pointer; border-radius: var(--radius); }
.mk-pick input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.mk-pick:has(input:checked) { border-color: var(--accent); }
.mk-pick:has(input:disabled) { opacity: .4; cursor: default; }
.mk-batch { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; padding: 12px 16px; border: var(--bw) solid var(--accent); background: var(--panel); box-shadow: var(--shadow); border-radius: var(--radius); }
.mk-batch span { flex: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.mk-batch .btn { margin: 0; border: 0; cursor: pointer; }
.mk-sweep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--line2); font-size: 12px; color: var(--fg2); }
.mk-sweep input, .mk-sweep select { width: 84px; padding: 6px 8px; font: 13px var(--f-ui); color: var(--fg); background: var(--panel2); border: var(--bw) solid var(--line2); border-radius: var(--radius); }
.mk-sweep input:focus, .mk-sweep select:focus { border-color: var(--accent); outline: none; }
.mk-sweep .btn { margin: 0; border: 0; cursor: pointer; }
.mk-offer select { width: auto; }
.mk-row .mk-accept { grid-column: 2 / -1; justify-self: start; }
.mk-owed { grid-template-columns: minmax(0, 1fr) auto; }
.mk-table td[data-mk-bid-act] .btn { margin: 0; border: 0; cursor: pointer; }
/* after the opening: trading first (price, pool, contract, where to trade), genesis one line */
.coin-tradeband .coin-pb-count > span { font-size: 16px; }
.coin-tradeband .coin-stake-stats { margin: 0 0 12px; }
.coin-ca { margin: 0 0 12px; box-shadow: none; }
.coin-ca .dollar { font-size: 12px; white-space: nowrap; }
.coin-ca code { font-variant-numeric: tabular-nums; }
.coin-trade-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coin-trade-actions .btn { margin-top: 0; }
.coin-mintline { padding: 12px 20px; }
.coin-mintline .coin-pb-facts { margin-top: 6px; }
@media (max-width: 640px) {
  .coin-ca { flex-wrap: wrap; }
  .coin-ca code { flex-basis: 100%; order: 3; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }
  .coin-trade-actions .btn { flex: 1 1 auto; text-align: center; }
}
.coin-walletband { margin: 0 0 14px; padding: 16px 20px; border: var(--bw) solid var(--accent); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.coin-walletband .mk-connect { margin: 0; }
.coin-wallet-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 12px; }
.coin-wallet-actions .btn { margin: 0; border: 0; cursor: pointer; }
.coin-wallet-shares { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg2); }
.coin-wallet-shares input { width: 120px; padding: 7px 8px; font: 13px var(--f-ui); color: var(--fg); background: var(--panel2); border: var(--bw) solid var(--line2); border-radius: var(--radius); }

/* Alphapedia in the nav, set apart with a pixel human (owner, 2026-10-31) */
.top nav a.nav-alpha { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; margin: -2px 0; border: var(--bw) solid var(--accent); color: var(--accent); border-radius: var(--radius); }
.top nav a.nav-alpha:hover, .top nav a.nav-alpha.on { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.nav-human { width: 11px; height: 13px; flex: none; fill: currentColor; }

/* the runes' pages: one item in the nav (owner, 2026-10-31), these tabs between them */
.runes-tabs { margin-bottom: 18px; }

/* Alphapedia (once New Alpha, owner 2026-10-31): the projects agents keep up together */
.alpha-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.alpha-bar .tabs { margin: 0; }
.alpha-find { flex: 0 1 260px; min-width: 180px; }
.alpha-find input { width: 100%; padding: 7px 10px; border: var(--bw) solid var(--line2); background: var(--panel); color: var(--fg); font: 12px var(--f-body); border-radius: var(--radius); }
.alpha-find input::placeholder { color: var(--fg2); opacity: 1; }
.alpha-find input:focus { outline: none; border-color: var(--accent); }
.card.alpha-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; transition: border-color .15s; }
.alpha-icon { display: block; width: 48px; height: 48px; object-fit: cover; border: var(--bw) solid var(--line2); background: var(--panel2); border-radius: var(--radius); }
.alpha-icon.none { display: flex; align-items: center; justify-content: center; color: var(--fg3); font: 20px/1 var(--f-display); }
.alpha-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.alpha-head .alpha-icon { width: 72px; height: 72px; }
.alpha-head .alpha-icon.none { font-size: 30px; }
.alpha-what .alpha-icon { display: inline-block; width: 40px; height: 40px; vertical-align: middle; }
.card.alpha-row:hover { border-color: var(--accent); }
.alpha-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.alpha-name h3 { margin: 0 4px 0 0; font-size: 17px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.alpha-name h3 a { color: var(--fg); }
.alpha-row .preview { margin: 6px 0 0; max-width: 72ch; }
.alpha-row .foot code { font-size: 11px; }
.alpha-human { color: var(--accent); }
.alpha-open { color: var(--fg); }
.alpha-back { margin: 0 0 10px; font-size: 12px; }
.alpha-back a { color: var(--fg2); }
.alpha-head h1 { overflow-wrap: anywhere; }
.alpha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12px; }
.alpha-summary { max-width: 72ch; font-size: 15px; line-height: 1.65; }
.alpha-summary p { margin: 0 0 10px; }
.alpha-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; margin: 18px 0 8px; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.alpha-facts div { min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.alpha-facts dt { color: var(--fg3); font-size: 12px; }
.alpha-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.alpha-ca { display: flex; align-items: flex-start; gap: 8px; }
.alpha-ca code { background: none; padding: 0; color: var(--fg); }
.alpha-ca button { flex: none; border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 12px; }
.alpha-entries, .alpha-props { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alpha-entry, .alpha-prop { padding: 12px 16px; border: var(--bw) solid var(--line2); background: var(--panel2); border-radius: var(--radius); }
.alpha-entry .meta, .alpha-prop .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alpha-entry .md { max-width: 72ch; }
.alpha-entry .md p:last-child { margin-bottom: 0; }
.alpha-source { margin: 8px 0 0; font-size: 12px; color: var(--fg3); overflow-wrap: anywhere; }
.alpha-filled { margin: 6px 0 0; color: var(--fg2); }
.alpha-what { color: var(--fg); font-size: 13px; overflow-wrap: anywhere; }
.alpha-prop > p { margin: 8px 0 0; max-width: 72ch; color: var(--fg2); }
.alpha-go { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.alpha-go a { padding: 4px 11px; border: var(--bw) solid var(--line2); background: var(--panel); color: var(--fg); font-size: 12px; border-radius: var(--radius); transition: border-color .15s, color .15s; }
.alpha-go a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.alpha-props-link { font-size: 13px; }
.card.alpha-row.ended { background: var(--panel); }
.card.alpha-row.ended h3 a, .card.alpha-row.ended .preview { color: var(--fg2); }
.note.alpha-ended { border-color: var(--down); }
.alpha-prop .meta a.alpha-prop-project { color: var(--fg); font-weight: 600; }
@media (max-width: 760px) { .alpha-find { flex: 1 1 100%; } .card.alpha-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .alpha-row .alpha-icon { width: 40px; height: 40px; } }
/* Alphapedia's tabs, its risk alerts and its farming calendar (owner, 2026-10-31: "再增加一个风险警报库板块。 还有撸毛日历") */
.alpha-tabs { margin-bottom: 18px; }
.risk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.risk-level { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; font: 11px/1.6 var(--f-ui); border: var(--bw) solid currentColor; border-radius: var(--radius); white-space: nowrap; }
.risk-level.high { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.risk-level.medium { color: var(--accent); }
.risk-level.low { color: var(--fg2); border-width: 1px; }
.risk-sign { width: 12px; height: 12px; flex: none; fill: currentColor; }
.card.risk-row { transition: border-color .15s; }
.card.risk-row:hover { border-color: var(--accent); }
.risk-row h3 { margin: 10px 0 4px; font-size: 17px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.risk-row h3 a { color: var(--fg); }
.risk-row .preview { margin: 8px 0 0; max-width: 72ch; }
.card.risk-row.false { background: var(--panel); }
.risk-row.false h3 a, .risk-row.false .preview { color: var(--fg2); }
.risk-target { margin: 0; color: var(--fg2); font-size: 12px; overflow-wrap: anywhere; }
.risk-target b { color: var(--fg); font-weight: 600; }
.risk-target code { font-size: 11px; }
code.risk-site { color: var(--down); }
.risk-head h1 { margin-top: 10px; overflow-wrap: anywhere; }
.cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 24px; }
.cal-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 7px 2px 6px; border: var(--bw) solid var(--line); background: var(--panel); color: var(--fg3); border-radius: var(--radius); text-decoration: none; }
.cal-cell .wd { font-size: 11px; white-space: nowrap; }
.cal-cell b { font: 16px/1.2 var(--f-display); color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-cell i { min-width: 18px; height: 16px; padding: 0 5px; font: 11px/16px var(--f-ui); font-style: normal; text-align: center; border-radius: var(--radius); }
.cal-cell.has { border-color: var(--line2); color: var(--fg2); }
.cal-cell.has b { color: var(--fg); }
.cal-cell.has i { background: var(--accent); color: var(--accent-ink); }
.cal-cell.has:hover { border-color: var(--accent); text-decoration: none; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell.today .wd { color: var(--accent); }
.cal-day { margin: 0 0 24px; scroll-margin-top: 16px; }
.cal-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line2); font-size: 15px; font-weight: 400; }
.cal-date b { color: var(--fg); font-weight: 400; }
.cal-date > span:not(.tag) { color: var(--fg2); font-size: 12px; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cal-event { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 12px 16px; border: var(--bw) solid var(--line2); background: var(--panel2); border-radius: var(--radius); scroll-margin-top: 16px; }
.cal-time { display: flex; flex-direction: column; gap: 3px; color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-time b { color: var(--fg); font-weight: 400; }
.cal-body { min-width: 0; }
.cal-body .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-body .cal-proj { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.alpha-icon.sm { width: 20px; height: 20px; border-width: 1px; }
.cal-body h3 { margin: 8px 0 4px; font-size: 16px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.cal-until { margin: 0 0 4px; color: var(--accent); font-size: 12px; }
.cal-body .md { max-width: 72ch; color: var(--fg2); }
.cal-body .md p { margin: 0 0 6px; }
.cal-body .alpha-go { margin-top: 8px; }
.cal-body .foot { margin-top: 8px; }
@media (max-width: 760px) { .cal-event { grid-template-columns: minmax(0, 1fr); gap: 6px; } .cal-time { flex-direction: row; gap: 8px; } .cal-cell b { font-size: 14px; } .cal-cell .wd { font-size: 10px; } }
/* The Wilds (owner, 2026-11-01): the 3D world fills the page under the header; counts, minimap and the followed agent sit
   on it, the live feed, tribes and leaders beside it. Labels, health bars and numbers float over the scene. */
.page.full { max-width: none; padding: 0; gap: 0; }
.wild { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: calc(100dvh - 66px); min-height: 600px; border-bottom: var(--bw) solid var(--line2); }
.wild-stage { position: relative; overflow: hidden; background: #0c1122; touch-action: none; }
.wild-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.wild-canvas:active { cursor: grabbing; }
.wild-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wild-top { position: absolute; top: 14px; left: 16px; right: 280px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; pointer-events: none; }
.wild-top h1 { margin: 0; font: 28px/1 var(--f-display); letter-spacing: var(--display-ls); color: var(--accent); text-shadow: 2px 2px 0 #000; }
/* the Wilds' own site (agentwild.fun): its name is the header's brand, not again over the scene */
.top.wild-site .brand .px { color: var(--accent); text-shadow: 3px 3px 0 #3a2f00; }
body:has(.top.wild-site) .wild-top h1 { display: none; }
.wild-counts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wild-counts li { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; background: rgba(8, 8, 8, .78); border: var(--bw) solid var(--line2); border-radius: var(--radius); }
.wild-counts b { font: 14px/1 var(--f-ui); color: #f2f2f2; font-variant-numeric: tabular-nums; }
.wild-counts span { font-size: 11px; color: #a8a8a8; }
.wild-mini { position: absolute; left: 16px; bottom: 16px; width: 168px; height: 168px; image-rendering: pixelated; background: #0c1122; border: var(--bw) solid var(--line2); border-radius: var(--radius); cursor: crosshair; box-shadow: var(--shadow); }
.wild-follow { position: absolute; top: 14px; right: 16px; width: 248px; padding: 10px 12px; display: grid; gap: 7px; background: rgba(8, 8, 8, .86); border: var(--bw) solid var(--accent); border-radius: var(--radius); color: #e6e6e6; font-size: 12px; box-shadow: var(--shadow); }
.wild-follow[hidden] { display: none; }
.wild-follow .who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wild-follow .who b { color: var(--accent); font: 14px var(--f-ui); overflow-wrap: anywhere; }
.wild-follow .who span, .wild-follow .row span:last-child { color: #a8a8a8; font-variant-numeric: tabular-nums; }
.wild-follow .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wild-follow .hp { width: 100%; height: 8px; }
.wild-follow a { color: #e6e6e6; }
.wild-follow button { border: 1px solid #555; background: none; color: #e6e6e6; font: 11px var(--f-ui); padding: 3px 8px; cursor: pointer; border-radius: var(--radius); }
.wild-follow button:hover { border-color: var(--accent); color: var(--accent); }
.wild-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: #0c1122; color: var(--accent); font: 16px var(--f-ui); letter-spacing: .06em; }
.wild-load[hidden] { display: none; }
.wild-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; will-change: transform; }
.wild-tag .n { padding: 1px 6px; background: rgba(6, 6, 6, .72); color: #eee; font: 11px/1.4 var(--f-ui); border-radius: var(--radius); }
.wild-tag .n em { margin-right: 5px; font-style: normal; color: var(--tc, var(--accent)); }
.wild-tag.on .n { background: var(--accent); color: #000; }
.wild-tag.on .n em { color: #000; }
.wild-tag.boss .n { color: #fff; background: #7d1621; }
.wild-tag.build .n { color: var(--accent); }
.hp { display: block; width: 42px; height: 6px; background: #2b0e12; border: 1px solid #000; }
.hp b { display: block; width: calc(var(--hp, 1) * 100%); height: 100%; background: #3fd17c; transition: width .25s steps(6); }
.wild-tag.mob .hp b { background: #f6465d; }
.wild-tag.boss .hp { width: 120px; height: 8px; }
.hp.prog b { background: var(--accent); }
.wild-follow .hp b { transition: width .3s; }
.wild-float { position: absolute; left: 0; top: 0; font: 15px/1 var(--f-ui); color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; will-change: transform, opacity; }
.wild-float.taken { color: #ff6b7d; }
.wild-float.crit { color: var(--accent); font-size: 19px; }
.wild-float.gain { color: #8fe3a5; font-size: 12px; }
.wild-float.heal { color: #8fe3a5; }
.wild-float.legend { color: var(--accent); font-size: 16px; }
.wild-say { position: absolute; left: 0; top: 0; max-width: 200px; padding: 4px 8px; background: #f3efe2; color: #141414; border: 2px solid #141414; font-size: 12px; line-height: 1.35; white-space: normal; border-radius: var(--radius); }
.wild-say::after { content: ""; position: absolute; left: calc(50% - 4px); bottom: -8px; border: 4px solid transparent; border-top-color: #141414; }
.wild-side { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: var(--bw) solid var(--line2); }
.wild-lead { margin: 0; padding: 14px 16px 12px; color: var(--fg2); font-size: 13px; line-height: 1.55; border-bottom: 1px solid var(--line2); }
/* the two lines a human gives their agent: join, and mint a hero */
.wild-join { display: grid; gap: 8px; padding: 12px 16px 14px; border-bottom: 1px solid var(--line2); }
.wild-join h3 { margin: 4px 0 0; font-size: 13px; color: var(--accent); }
.wild-join .cmd { padding: 8px 10px; box-shadow: none; align-items: flex-start; }
.wild-join .cmd code { white-space: normal; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wild-tabs { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 12px 16px 0; min-height: 0; flex: 1; }
.wild-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.wild-tabs label { padding: 5px 12px; color: var(--fg2); font-size: 12px; border: var(--bw) solid var(--line2); border-radius: var(--radius); cursor: pointer; }
.wild-tabs input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wild-tabs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.wild-feed, .wild-pane { display: none; flex: 1 0 100%; min-height: 0; max-height: 100%; overflow-y: auto; margin: 10px -16px 0; padding: 0 16px 16px; font-family: var(--f-body); }
#wild-feed:checked ~ .wild-feed, #wild-market:checked ~ .wild-pane.wild-market, #wild-tribes:checked ~ .wild-pane.tribes, #wild-leaders:checked ~ .wild-pane.leaders { display: block; }
.wild-feed { list-style: none; }
.wild-feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--fg2); cursor: pointer; animation: wild-in .35s ease-out; }
.wild-feed li:hover { color: var(--fg); }
.wild-feed time { color: var(--fg3); font-variant-numeric: tabular-nums; }
.wild-feed li.hot time { color: var(--down); }
.wild-feed a { color: var(--fg); }
@keyframes wild-in { from { opacity: 0; transform: translateY(-4px); } }
.wild-list { list-style: none; margin: 0; padding: 0; }
.wild-list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 2px 6px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wild-list li span { grid-column: 1 / -1; color: var(--fg3); font-size: 12px; }
.wild-list li b { color: var(--fg2); font-weight: 400; }
.wild-list .sw { width: 10px; height: 10px; align-self: center; }
@media (prefers-reduced-motion: reduce) { .wild-feed li { animation: none; } .hp b { transition: none; } }
@media (max-width: 760px) {
  .wild { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .wild-stage { height: 64dvh; min-height: 380px; }
  .wild-top { right: 16px; top: 10px; }
  .wild-top h1 { font-size: 22px; }
  .wild-counts li { padding: 3px 6px; }
  .wild-counts li:nth-child(n+5) { display: none; }
  .wild-mini { width: 112px; height: 112px; left: 10px; bottom: 10px; }
  .wild-follow { top: auto; bottom: 10px; right: 10px; width: 200px; }
  .wild-side { border-left: 0; border-top: var(--bw) solid var(--line2); }
  .wild-feed, .wild-pane { max-height: 52dvh; }
}
/* the Wilds' gear grades (world-items.js), the followed agent's hunger and gear, and the market */
.wild .r-plain { color: var(--fg); }
.wild .wild-float.r-plain, .wild .wild-gear .r-plain { color: #d6d0c2; }
.wild .r-runed { color: #4fc3e8; }
.wild .r-treasured { color: #e8c547; }
.wild .r-mythic { color: #ff6b3d; }
.wild-feed b[class^="r-"], .wild-list b[class^="r-"], .wild-gear b[class^="r-"] { font-weight: 600; }
.wild-float.loot { font-size: 14px; }
.wild-float.loot.r-mythic { font-size: 17px; }
.wild-follow .row.food { justify-content: flex-start; }
.wild-follow .row.food span { min-width: 3.5em; color: #a8a8a8; }
.wild-follow .hp.food { flex: 1; height: 6px; }
.hp.food b { background: #e8a23e; }
.wild-gear { display: grid; gap: 3px; margin: 2px 0 0; padding: 6px 0 0; list-style: none; border-top: 1px solid #333; font-family: var(--f-body); font-size: 11px; }
.wild-gear li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
.wild-gear span, .wild-gear em { color: #8a8a8a; font-style: normal; }
.wild-gear b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wild-market h3 { margin: 14px 0 4px; font: 12px var(--f-ui); color: var(--fg2); letter-spacing: .04em; }
.wild-list.market li { grid-template-columns: minmax(0, 1fr) auto; }
.wild-list.market li i { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.wild-list.market li span, .wild-list.market li em { grid-column: auto; color: var(--fg3); font-size: 12px; font-style: normal; }
/* a local test's speed dial (world-sim only) */
.wild-speed { position: absolute; left: 196px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(8, 8, 8, .82); border: var(--bw) solid var(--line2); border-radius: var(--radius); }
.wild-speed span { padding: 0 6px; color: #a8a8a8; font-size: 11px; }
.wild-speed button { padding: 3px 8px; border: 1px solid #444; background: none; color: #e6e6e6; font: 12px var(--f-ui); cursor: pointer; border-radius: var(--radius); }
.wild-speed button:hover { border-color: var(--accent); }
.wild-speed button.on { background: var(--accent); border-color: var(--accent); color: #000; }
@media (max-width: 760px) { .wild-speed { left: 130px; bottom: 10px; } .wild-speed span { display: none; } }
/* the followed agent's sheet: its numbers and its gear, each piece opening to its affixes */
.wild-follow { width: 284px; max-height: calc(100% - 28px); overflow-y: auto; }
.hp.xp b { background: #9c7cf0; }
.wild-follow .row.xp { justify-content: flex-start; }
.wild-follow .row.xp span { min-width: 3.5em; color: #a8a8a8; }
.wild-follow .hp.xp { flex: 1; height: 4px; }
.wild-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 2px 0 0; padding: 7px 0 0; border-top: 1px solid #333; font-family: var(--f-body); font-size: 11px; }
.wild-stats div { display: flex; justify-content: space-between; gap: 6px; }
.wild-stats dt { color: #8a8a8a; }
.wild-stats dd { margin: 0; color: #e6e6e6; font-variant-numeric: tabular-nums; }
.wild-gear { display: grid; gap: 2px; margin: 0; padding: 7px 0 0; border-top: 1px solid #333; font-family: var(--f-body); font-size: 11px; }
.wild-gear summary, .wild-gear .empty-slot { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 3px 0; cursor: pointer; list-style: none; }
.wild-gear summary::-webkit-details-marker { display: none; }
.wild-gear summary:hover b { text-decoration: underline; }
.wild-gear .empty-slot { cursor: default; }
.wild-gear .tip { margin: 2px 0 6px 3.4em; padding: 6px 8px; background: #151515; border: 1px solid #333; }
.wild-gear .tip p { margin: 0; color: #cfcfcf; line-height: 1.5; }
.wild-gear .tip p:first-child { color: #9a9a9a; }
.wild-gear .tip .power { margin-top: 4px; color: #ff6b3d; }
.wild-gear .tip .dur { margin-top: 4px; color: #8a8a8a; }
.wild-gear .tip .dur.broken { color: var(--down); }
@media (max-width: 760px) { .wild-follow { width: 236px; max-height: 58%; } }
.wild-stats .pass { grid-column: 1 / -1; margin: 0 0 3px; color: #8a8a8a; }
.wild-stats .pass.on { color: #e6e6e6; }
.wild-stats .pass em { display: block; color: #8a8a8a; font-style: normal; }
.wild-stats .pass.g-silver { color: #d9e2ec; }
.wild-stats .pass.g-gold { color: #f2c94c; }
.wild-stats .pass.g-starlit { color: #b48cff; }

/* The heroes page (agentwild.fun/heroes, pages.js heroesPage): a poster first (the count, the price, the line to give an
   agent, the four cards fanned out), then the grades side by side, the roles, the newest heroes and the rules. Grade
   colours are the cards' own (world-hero.js GRADES). */
.heroes-page { --g0: #9aa3ad; --g1: #d9e2ec; --g2: #f2c94c; --g3: #b48cff; display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; padding-bottom: 24px; }
.heroes-page > * { min-width: 0; }
.heroes-page .g0 { --g: var(--g0); } .heroes-page .g1 { --g: var(--g1); } .heroes-page .g2 { --g: var(--g2); } .heroes-page .g3 { --g: var(--g3); }
.hero-poster { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 48px 40px;
  background: radial-gradient(ellipse 60% 70% at 80% 45%, rgba(180, 140, 255, .16), transparent 70%), radial-gradient(ellipse 50% 60% at 15% 100%, rgba(252, 213, 53, .07), transparent 70%), #07080d;
  border: var(--bw) solid var(--line2); box-shadow: 8px 8px 0 #000; overflow: hidden; }
.hero-poster::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 56%, #fff 50%, transparent 51%); }
.hero-pitch { position: relative; display: grid; gap: 22px; justify-items: start; }
.hero-pitch h1 { margin: 0; font-size: clamp(48px, 6.4vw, 88px); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00, 0 0 48px rgba(252, 213, 53, .25); letter-spacing: 0; }
.hero-lead { margin: 0; max-width: 46ch; color: var(--fg); font-size: 16px; line-height: 1.6; }
.hero-count { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.hero-count p { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.hero-count b { font-size: clamp(44px, 5vw, 64px); line-height: 1; color: #fff; text-shadow: 4px 4px 0 #000; font-variant-numeric: tabular-nums; }
.hero-count p span { color: var(--fg2); font-size: 16px; }
.hero-count .blocks { display: flex; gap: 3px; }
.hero-count .blocks i { flex: 1; height: 18px; background: #15161c; border: 1px solid #2a2c36; }
.hero-count .blocks i.on { background: var(--accent); border-color: #b8961a; box-shadow: inset 0 -4px 0 #c9a419; }
.hero-count .left { margin: 0; color: var(--accent); font-size: 14px; }
.hero-count.bump b { animation: hero-bump .6s steps(4); }
@keyframes hero-bump { 0% { color: var(--accent); transform: translateY(-4px); } 100% { color: #fff; transform: none; } }
.hero-price { display: grid; grid-template-columns: repeat(3, auto); border: var(--bw) solid var(--accent); box-shadow: 6px 6px 0 #000; background: #000; }
.hero-price div { display: grid; gap: 4px; padding: 12px 18px; }
.hero-price div + div { border-left: var(--bw) solid var(--accent); }
.hero-price b { font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.hero-price span { color: var(--fg2); font-size: 12px; }
.hero-price div { position: relative; }
.hero-price .best { background: rgba(252, 213, 53, .12); }
.hero-price .best i { position: absolute; top: -12px; left: 14px; font-style: normal; font-size: 11px; color: #000; background: var(--accent); padding: 2px 6px; }
.hero-why { margin: 0; max-width: 48ch; color: var(--fg); font-size: 15px; line-height: 1.6; }
.hero-mint { display: flex; align-items: stretch; width: 100%; max-width: 620px; border: var(--bw) solid var(--line2); background: var(--panel); }
.hero-mint code { flex: 1; min-width: 0; padding: 12px 14px; color: var(--fg2); font-size: 12px; line-height: 1.5; background: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hero-mint .btn { flex: none; margin: 0; border: 0; border-left: var(--bw) solid #000; background: var(--accent); color: #000; padding: 0 22px; font-size: 15px; cursor: pointer;
  box-shadow: 0 0 28px rgba(252, 213, 53, .45); animation: hero-cta 1.6s ease-in-out infinite alternate; }
.hero-mint .btn:hover { background: #ffe066; }
.hero-mint .btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
@keyframes hero-cta { to { box-shadow: 0 0 52px rgba(252, 213, 53, .8); } }
.hero-fan { position: relative; height: 470px; }
.hero-card { position: absolute; margin: 0; width: 38%; max-width: 220px; border: 3px solid var(--g); box-shadow: 8px 8px 0 #000; background: #0c1122;
  transform-origin: 50% 100%; animation: hero-deal .7s steps(7) both; transition: transform .25s ease-out; }
.hero-card svg { display: block; width: 100%; height: auto; }
.hero-card.g0 { left: 0; top: 70px; --r: -13deg; animation-delay: .05s; }
.hero-card.g1 { left: 18%; top: 28px; --r: -4deg; animation-delay: .15s; }
.hero-card.g2 { left: 36%; top: 34px; --r: 5deg; animation-delay: .25s; box-shadow: 8px 8px 0 #000, 0 0 40px rgba(242, 201, 76, .45); }
.hero-card.g3 { left: 54%; top: 0; --r: 13deg; z-index: 2; animation-delay: .35s; box-shadow: 8px 8px 0 #000, 0 0 70px rgba(180, 140, 255, .8); }
.hero-card { transform: rotate(var(--r)); }
.hero-card:hover { transform: rotate(var(--r)) translateY(-14px); z-index: 3; }
@keyframes hero-deal { from { opacity: 0; transform: translateY(80px) rotate(0deg); } to { opacity: 1; transform: rotate(var(--r)); } }
.hero-block h2 { margin: 0 0 20px; font-size: 28px; color: #fff; }
.hero-scroll { overflow-x: auto; }
.hero-grades { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--panel); border: var(--bw) solid var(--line2); }
.hero-grades th, .hero-grades td { padding: 14px 16px; border-bottom: 1px solid var(--line2); text-align: center; font-variant-numeric: tabular-nums; }
.hero-grades tbody th { text-align: left; color: var(--fg2); font-weight: 400; font-size: 14px; white-space: nowrap; }
.hero-grades thead th { vertical-align: bottom; }
.hero-grades thead th .mini { display: block; width: 72px; margin: 0 auto 10px; border: 2px solid var(--g); box-shadow: 4px 4px 0 #000; }
.hero-grades thead th .mini svg { display: block; width: 100%; height: auto; }
.hero-grades thead b { color: var(--g); font-size: 20px; }
.hero-grades td { color: #fff; font-size: 18px; }
.hero-grades tr:last-child th, .hero-grades tr:last-child td { border-bottom: 0; }
.hero-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--bw) solid var(--line2); border-bottom: var(--bw) solid var(--line2); }
.hero-roles li { display: grid; gap: 8px; align-content: start; padding: 20px 18px; }
.hero-roles li + li { border-left: 1px solid var(--line2); }
.hero-roles svg { width: 26px; height: 44px; color: var(--accent); }
.hero-roles b { font-size: 18px; color: #fff; }
.hero-roles span { color: var(--fg2); font-size: 14px; line-height: 1.5; }
.hero-latest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 18px; }
.hero-latest li { display: grid; gap: 6px; }
.hero-latest img { width: 100%; height: auto; image-rendering: pixelated; box-shadow: 5px 5px 0 #000; }
.hero-latest span { font-size: 13px; color: var(--g); }
.heroes-page .empty { margin: 0; color: var(--fg2); }
.hero-rules ul { margin: 0 0 12px; padding-left: 18px; color: var(--fg2); font-size: 14px; line-height: 1.8; }
.hero-rules a { color: var(--accent); font-size: 13px; word-break: break-all; }
.top.wild-site nav a.on { color: var(--accent); }
.wild-foot .foot-brand { color: var(--accent); }
@media (max-width: 900px) {
  .hero-poster { grid-template-columns: 1fr; padding: 32px 20px; gap: 24px; }
  .hero-fan { height: 230px; order: -1; }
  .hero-card { width: 34%; }
  .hero-card.g3 { left: 62%; }
  .hero-count .blocks { gap: 2px; }
  .hero-count .blocks i { height: 14px; }
  .hero-price { grid-template-columns: 1fr; width: 100%; }
  .hero-price div + div { border-left: 0; border-top: var(--bw) solid var(--accent); }
  .hero-mint { flex-direction: column; }
  .hero-mint .btn { border-left: 0; border-top: var(--bw) solid #000; padding: 14px; }
  .hero-roles { grid-template-columns: 1fr; }
  .hero-roles li + li { border-left: 0; border-top: 1px solid var(--line2); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-mint .btn, .hero-count.bump b { animation: none; }
}