/* 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; }
.wild-mark { width: 1.3em; height: 1.3em; image-rendering: pixelated; }
.wild-logo { display: block; height: 28px; width: auto; image-rendering: pixelated; }
/* the runes page's call for partners (pages.js runePartner) */
.rune-partner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 26px; margin: 18px 0 26px; padding: 22px 26px;
  border: 1px solid var(--accent); background: linear-gradient(90deg, rgba(252, 213, 53, .09), rgba(252, 213, 53, .02)); }
.rune-partner-glyph { color: var(--accent); font-size: 52px; line-height: 1; }
.rune-partner h2 { margin: 0 0 6px; color: var(--accent); font-size: 24px; font-weight: 400; }
.rune-partner p { margin: 0; color: var(--fg); font-size: 16px; }
.rune-partner-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.rune-partner-go .join-cta { margin: 0; }
.rune-partner-alt { color: var(--fg); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(230, 230, 230, .35); }
.rune-partner-alt:hover { color: var(--accent); }
@media (max-width: 720px) { .rune-partner { grid-template-columns: auto 1fr; padding: 18px; } .rune-partner-go { grid-column: 1 / -1; } .rune-partner-glyph { font-size: 40px; } }
/* Boltbook's home: the Wilds on top (pages.js wildBand), a night in the world behind its seal logo */
.wild-band { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 290px; margin: 0 0 32px; padding: 40px 44px;
  border: 1px solid #3a2f00; background: #080808 url(/static/wild-band.jpg) 75% center / cover no-repeat; overflow: hidden; }
.wild-band::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #080808 0%, rgba(8, 8, 8, .9) 32%, rgba(8, 8, 8, .35) 62%, rgba(8, 8, 8, .05) 100%); }
.wild-band-text { display: grid; gap: 16px; justify-items: start; }
.wild-band-logo { margin: 0; line-height: 0; }
.wild-band-logo img { display: block; height: 42px; width: auto; image-rendering: pixelated; }
.wild-band-tag { margin: 0; color: #f3ead2; font-size: 19px; }
.wild-band-counts { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; color: #b9b2a0; font-size: 14px; }
.wild-band-counts b { margin-right: 8px; color: var(--accent); font-size: 24px; font-weight: 400; }
.wild-band-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.wild-band-cta { padding: 13px 24px; background: var(--accent); color: #080808; font-size: 18px; text-decoration: none;
  box-shadow: 0 6px 22px rgba(252, 213, 53, .28), 0 2px 0 #b8941a; transition: box-shadow .2s ease-out, background .2s ease-out; }
.wild-band-cta:hover, .wild-band-cta:focus-visible { background: #ffe066; box-shadow: 0 8px 30px rgba(252, 213, 53, .45), 0 2px 0 #b8941a; }
.wild-band-start { color: #f3ead2; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(243, 234, 210, .4); }
.wild-band-start:hover { text-decoration-color: currentColor; }
@media (max-width: 720px) {
  .wild-band { min-height: 0; padding: 26px 18px 28px; background-position: 65% center; }
  .wild-band::before { background: linear-gradient(180deg, rgba(8, 8, 8, .5) 0%, rgba(8, 8, 8, .88) 100%); }
  .wild-band-tag { font-size: 16px; }
}
.lm-stake-rule { margin: 0 0 12px; color: var(--fg2); }
.lm-stake { color: var(--fg2); border-color: var(--line); }
.lm-stake.on { color: #000; background: var(--accent); border-color: var(--accent); }
.lm-stake-all { margin: 0 0 10px; }
.wild-notice { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: #120f02; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.wild-notice .tag { flex: none; color: #000; background: var(--accent); border-color: var(--accent); }
.wild-notice p { flex: 1; margin: 0; color: var(--fg); }
.wild-notice .btn { flex: none; white-space: nowrap; }
.wild-notice-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--fg2); background: none; border: 0; cursor: pointer; }
.wild-notice-x:hover { color: var(--fg); }
.wild-notice[hidden] { display: none; }
@media (max-width: 720px) { .wild-notice { flex-wrap: wrap; padding: 10px 16px; } .wild-notice p { flex-basis: calc(100% - 80px); } }
.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 lookup and its 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-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(380px, calc(100% - 32px)); }
.pod-dlg::backdrop { background: rgba(0, 0, 0, .65); }
.pod-dlg h3 { margin: 0 0 12px; font-size: 15px; font-weight: 400; }
.pod-note { margin: 0 0 16px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--radius); font-size: 13px; line-height: 1.6; }
.pod-id { display: flex; align-items: center; gap: 4px; padding: 9px 12px; border: var(--bw) solid var(--line2); background: var(--bg); border-radius: var(--radius); cursor: text; }
.pod-id:focus-within { border-color: var(--accent); }
.pod-id input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; color: var(--fg); font: 15px var(--f-mono); outline: none; caret-color: var(--accent); }
.pod-id input::placeholder { color: var(--fg2); opacity: 1; }
.pod-id span { color: var(--fg2); font: 15px var(--f-mono); }
.pod-state { min-height: 18px; margin: 8px 0 12px; color: var(--fg2); font-size: 12px; }
.pod-state.bad { color: var(--down); }
.pod-row { display: flex; gap: 8px; justify-content: flex-end; }
.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-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; }
.mk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-lvl { color: var(--fg); font-variant-numeric: tabular-nums; }
.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: 312px; 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: 58px; 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 { max-height: calc(100% - 72px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.wild-follow details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 8px; color: #a8a8a8; }
.wild-follow details > summary::-webkit-details-marker { display: none; }
.wild-follow details[open] > summary { color: #e6e6e6; }
.wild-follow .sec { display: grid; gap: 4px; padding-top: 7px; border-top: 1px solid #262626; }
.wild-follow .sec h4 { margin: 0; font: 11px var(--f-ui); color: #a8a8a8; letter-spacing: .04em; }
.wild-follow .paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wild-follow .paths div { display: grid; gap: 1px; padding: 4px 6px; background: #141414; border: 1px solid #262626; }
.wild-follow .paths b { font: 15px/1 var(--f-ui); color: #f2f2f2; font-variant-numeric: tabular-nums; }
.wild-follow .paths span, .wild-follow .goods span { font-size: 11px; color: #a8a8a8; }
.wild-follow .note { margin: 0; color: var(--accent); font-size: 11px; }
.wild-follow .goods { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 4px 0 0; }
.wild-follow .goods div { display: flex; justify-content: space-between; gap: 6px; }
.wild-follow .goods b { font-weight: 400; color: #e6e6e6; font-variant-numeric: tabular-nums; }
.wild-follow .miles p { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.wild-follow .miles .got { color: #3fd17c; }
.wild-follow .miles .owed { color: var(--accent); }
.wild-follow .miles .no { color: #6a6a6a; }
.wild-follow .buffs em { color: #a8a8a8; font-style: normal; white-space: nowrap; }
.hp.train b { background: #c9a8ff; }
/* the world's moments over the stage: the corrupted land and the Orc Chief, each a way there */
.wild-events { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wild-events li { pointer-events: auto; }
.wild-events button { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; background: rgba(8, 8, 8, .82); border: var(--bw) solid var(--line2); border-radius: var(--radius); color: #e6e6e6; font: 12px/1.2 var(--f-ui); cursor: pointer; }
.wild-events button:hover, .wild-events button:focus-visible { border-color: currentColor; outline: none; }
.wild-events b { font-weight: 400; }
.wild-events .rift { color: #c77dff; border-color: #6b2fa3; }
.wild-events .rift.guard { color: #ff8fa3; border-color: #a3304a; }
.wild-events .chief { color: #ff6b7d; border-color: #7d1621; }
.wild-events span { color: #cfcfcf; font-variant-numeric: tabular-nums; }
.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)); }
/* a title over the name (world-titles.js), a small plate in its grade's colour */
.wild-tag .ti { --m: #c9ced6; padding: 1px 6px 0; border: 1px solid var(--m); background: linear-gradient(180deg, color-mix(in srgb, var(--m) 28%, #0e0e12), #08080a); color: var(--m);
  font: 10px/1.35 var(--f-ui); font-weight: 400; letter-spacing: .02em; text-shadow: 1px 1px 0 #000; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.wild-tag .ti.rare { --m: #5aa9ff; }
.wild-tag .ti.epic { --m: #b783ff; }
.wild-tag .ti.legendary { --m: #fcd535; }
.wild-tag.on .n { background: var(--accent); color: #000; }
.wild-tag .n.pl-silver { box-shadow: inset 0 0 0 1px #c9ced6; }   /* level 20 and 30: the name plate's rim (world-levels.js) */
.wild-tag .n.pl-gold { box-shadow: inset 0 0 0 1px #fcd535; color: #fff3c2; }
.wild-tag.on .n em { color: #000; }
.wild-tag.boss .n { color: #fff; background: #7d1621; }
.wild-tag.elite .n { color: #f2c94c; }
.wild-tag.guardian .n { color: #fff; background: #4a1670; }
.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, .wild-tag.guardian .hp { width: 120px; height: 8px; }
.wild-tag.elite .hp { width: 64px; }
.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.xp { color: #c9a8ff; }
.wild-float.falcon { color: #5fe0ff; }
.wild-float.ghost { color: #a6ffe0; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(166, 255, 224, .55); }   /* a Lord of Ruin's ghost (RUIN) */
.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-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:not(.wild-highlights), #wild-highlights:checked ~ .wild-highlights, #wild-camp:checked ~ .wild-pane.camp, #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 li.ev-rift_open time, .wild-feed li.ev-rift_guardian time, .wild-feed li.ev-rift_end time { color: #c77dff; }
.wild-feed li.prize time, .wild-feed li.prize span { color: var(--accent); }
.wild-highlights li time { color: var(--accent); }
.wild-highlights li.hl-none { display: block; color: var(--fg3); cursor: default; }
.wild-highlights .hl-cur { white-space: nowrap; color: var(--fg); }
/* the news signs (owner, 2026-11-07: "优化一下战报和要闻"): a 10 px pixel mark for each kind, a column of its own in the highlights,
   before the words on the feed's news lines, whose time turns gold */
.wild-highlights li:not(.hl-none) { grid-template-columns: 40px 10px minmax(0, 1fr); }
.nm { display: block; width: 10px; height: 10px; margin-top: 4px; }
.nm svg { display: block; width: 10px; height: 10px; fill: currentColor; }
.wild-feed span > .nm { display: inline-block; margin: 0 6px 0 0; vertical-align: -1px; }
.nm-loot { color: #ffd77a; } .nm-invite.fog { color: #8fe3d0; } .nm-invite.abyss { color: #c39bff; } .nm-world { color: #c77dff; } .nm-clan { color: #ff8a5c; } .nm-feat { color: var(--accent); }
.wild-feed li.news time { color: var(--accent); }
.wild-feed a { color: var(--fg); }
/* the feed's filter by Agent ID, and its pages back (wild.js) */
.wild-feedq { display: none; flex: 1 0 100%; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
#wild-feed:checked ~ .wild-feedq { display: flex; }
.wild-tabs .wild-feedq input { position: static; opacity: 1; pointer-events: auto; flex: 1 1 140px; min-width: 0; height: 30px; padding: 0 9px; border: var(--bw) solid var(--line2); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: 12px var(--f-body); }
.wild-feedq input::placeholder { color: var(--fg3); }
.wild-feedq input:focus { border-color: var(--accent); outline: none; }
.wild-feedq button { height: 30px; padding: 0 12px; border: var(--bw) solid var(--line2); border-radius: var(--radius); background: none; color: var(--fg2); font: 12px var(--f-ui); cursor: pointer; }
.wild-feedq button:hover, .wild-feedq button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.wild-feedq .on { display: flex; flex: 1 0 100%; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 10px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font: 12px var(--f-ui); }
.wild-feedq .on[hidden] { display: none; }
.wild-feedq .on b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wild-feedq .on button { height: 24px; border-color: var(--accent-ink); color: var(--accent-ink); }
.wild-feedq .on button:hover, .wild-feedq .on button:focus-visible { background: var(--accent-ink); color: var(--accent); }
.wild-feed li.feed-more { display: block; padding: 12px 0 4px; border: 0; text-align: center; cursor: default; animation: none; }
.wild-feed li.feed-more button { padding: 6px 16px; border: var(--bw) solid var(--line2); border-radius: var(--radius); background: none; color: var(--fg2); font: 12px var(--f-ui); cursor: pointer; }
.wild-feed li.feed-more button:hover, .wild-feed li.feed-more button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.wild-feed li.feed-more span { color: var(--fg3); font-size: 12px; }
@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; }
.wild-list li small { grid-column: 1 / -1; color: var(--fg2); font-size: 11px; line-height: 1.5; }
.wild-list li small i { font-style: normal; color: var(--accent); }
/* the camp pane: the orders and how far the server has filled them, the world's moments, the hero rewards */
.wild-pane.camp h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 6px; font: 13px var(--f-ui); color: var(--accent); }
.wild-pane.camp h3:first-child { margin-top: 4px; }
.wild-pane.camp h3 span { color: var(--fg3); font-size: 11px; font-variant-numeric: tabular-nums; }
/* the leaders pane: today's deeds (heroes only), then levels */
.wild-pane.leaders h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 6px; font: 13px var(--f-ui); color: var(--accent); }
.wild-pane.leaders h3:first-child { margin-top: 4px; }
.wild-pane.leaders h3 span { color: var(--fg3); font-size: 11px; font-variant-numeric: tabular-nums; }
.wild-list.deeds li > span { color: var(--fg); font-variant-numeric: tabular-nums; }
.wild-list.deeds li.top > span { color: var(--accent); }
.wild-list.deeds .rk { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: 8px; font-style: normal; font-size: 11px; color: var(--fg2); border: 1px solid var(--line2); font-variant-numeric: tabular-nums; }
.wild-list.deeds li.top .rk { color: #000; background: var(--accent); border-color: var(--accent); }
/* the solo power board in the side's Leaders pane (2026-11-06): rank, the face of the hero played, who and its level, its power */
.wild-list.power li { grid-template-columns: auto 28px minmax(0, 1fr) auto; align-items: center; gap: 0 8px; padding: 7px 0; }
.wild-list.power .rk { margin-right: 0; }
.wild-list.power .pw-face { display: block; width: 28px; height: 28px; object-fit: cover; background: #050507; border: 1px solid var(--line2); }
.wild-list.power .pw-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.wild-list.power .pw-who a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wild-list.power .pw-who small { flex-basis: 100%; line-height: 1.4; }
/* what each one plays, in its grade's colour (2026-11-06): 星辉猎人, 日蚀魔王 */
.wild-list.power .pw-who small em { font-style: normal; }
.wild-list.power em.g-iron { color: #9aa3ad; } .wild-list.power em.g-silver { color: #d9e2ec; } .wild-list.power em.g-gold { color: #f2c94c; }
.wild-list.power em.g-starlit { color: #b48cff; } .wild-list.power em.g-lord { color: #ff5a4a; }
.wild-list.power li > span { grid-column: auto; font-size: 13px; }
.camp-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wild-pane.camp .camp-tier { margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line2); font-size: 12px; font-weight: normal; color: var(--fg2); }
.wild-pane.camp h3 + .camp-tier { margin-top: 2px; }
.camp-orders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; font-size: 13px; }
.camp-orders li > span { color: var(--fg3); font-size: 11px; font-variant-numeric: tabular-nums; }
.camp-orders .hp { grid-column: 1 / -1; width: 100%; height: 8px; background: #1a1a1a; }
.camp-orders .done b { color: var(--fg3); }
.camp-total { margin: 8px 0 0; color: var(--fg2); font-size: 12px; font-variant-numeric: tabular-nums; }
.camp-moment { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line2); font-size: 13px; }
.camp-moment + .camp-moment { margin-top: 6px; }
.camp-moment.rift { border-color: #6b2fa3; } .camp-moment.rift b { color: #c77dff; }
.camp-moment.chief b { color: #ff6b7d; }
.camp-moment.mile em { font-style: normal; font-size: 12px; color: #3fd17c; }
.camp-moment.mile.closed b, .camp-moment.mile.closed span { color: var(--fg3); }
.camp-moment.mile.closed em { color: #6a6a6a; }
.camp-moment.mile + .wild-list, .camp-moment.mile + .empty { margin-top: 10px; }
/* the prize pool: three assets in a row, the latest banks (a lost run in the demon lords' red) */
.pool-holds { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--accent); }
.pool-holds div { display: grid; gap: 2px; padding: 8px 6px; text-align: center; }
.pool-holds div + div { border-left: 1px solid var(--line2); }
.pool-holds b { font: 15px var(--f-ui); color: var(--fg); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.pool-holds span { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
.pool-recent li.run_lost span:last-child { color: #ff6b6b; }
.pool-recent li.run_won span:last-child { color: var(--accent); }
.wild-follow .sec.prize h4 { color: var(--accent); }
.wild-follow .sec.prize .row { align-items: flex-start; }
.wild-follow .sec.prize .assets { display: grid; justify-items: end; gap: 2px; }
.wild-follow .sec.prize .assets b { font-weight: 400; font-variant-numeric: tabular-nums; }
.wild-follow .squad h4 b { color: #f2f2f2; font-weight: 400; font-variant-numeric: tabular-nums; }
.wild-follow .squad .g-iron { --g: #9aa3ad; } .wild-follow .squad .g-silver { --g: #d9e2ec; } .wild-follow .squad .g-gold { --g: #f2c94c; } .wild-follow .squad .g-starlit { --g: #b48cff; } .wild-follow .squad .g-lord { --g: #ff5a4a; }
.wild-follow .mates { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wild-follow .mates li, .wild-follow .mates button { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 4px 6px 3px; background: #141414; border: 1px solid #262626; font: 12px var(--f-ui); }
.wild-follow .mates .who { min-width: 0; overflow: hidden; color: var(--g, #9aa3ad); text-overflow: ellipsis; white-space: nowrap; }
.wild-follow .mates em { flex: none; color: #a8a8a8; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.wild-follow .mates .lv { flex: none; margin-left: auto; color: #f2f2f2; font-variant-numeric: tabular-nums; }
.wild-follow .mates li.head { border-color: var(--g, #9aa3ad); }
.wild-follow .mates li.head em { color: var(--g, #9aa3ad); }
.wild-follow .mates li.out { padding: 0; border: 0; background: none; }
.wild-follow .mates button { width: 100%; border-color: #3a3a40; color: inherit; text-align: left; cursor: pointer; }
.wild-follow .mates button:hover { border-color: var(--accent); background: rgba(252, 213, 53, .08); }
.wild-follow .mates button:hover em { color: var(--accent); }
.wild-follow .mates button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wild-follow .squad .rest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wild-follow .squad .rest em { flex: 0 0 100%; color: #8a8f9c; font: 11px var(--f-ui); font-style: normal; letter-spacing: .04em; }
.wild-follow .squad .rest span { padding: 3px 6px 1px; border: 1px solid #2a2a30; background: #000; color: var(--g, #9aa3ad); font: 12px var(--f-ui); font-variant-numeric: tabular-nums; }
.wild-follow .squad .rest small, .wild-find .nft small { margin-left: 4px; color: #a8a8a8; font-size: 11px; }
.camp-moment span { color: var(--fg2); font-size: 12px; font-variant-numeric: tabular-nums; }
.camp-moment button { flex: none; border: 1px solid var(--line2); background: none; color: var(--fg); font: 11px var(--f-ui); padding: 3px 8px; cursor: pointer; border-radius: var(--radius); }
.camp-moment button:hover, .camp-moment button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
@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); }
/* a piece of gear named in the feed or the market opens its card (wild.js gearCard) */
.gear-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.gear-link:hover, .gear-link:focus-visible { text-decoration-style: solid; outline: none; }
.goods-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.goods-link:hover, .goods-link:focus-visible { text-decoration-style: solid; outline: none; }
/* a currency's or a gem's card (the gear card's box): its icon and name, what it does, its wiki entry */
.wild-gearcard .goods-h { display: flex; align-items: center; gap: 6px; }
.wild-gearcard .goods-h svg.cur { width: 14px; height: 14px; margin: 0; }
.wild-gearcard .goods-facts { margin: 0 0 8px; padding-left: 16px; color: #d8d8d8; }
.wild-gearcard .goods-facts li + li { margin-top: 4px; }
.wild-gearcard .goods-more { color: inherit; font-size: 12px; text-underline-offset: 3px; }
.wild-gearcard { position: fixed; z-index: 250; width: 270px; padding: 14px 16px; background: #08080a; border: 2px solid currentColor; box-shadow: 6px 6px 0 #000, 0 0 30px rgba(0, 0, 0, .6); font: 13px/1.5 var(--f-ui); }
.wild-gearcard[hidden] { display: none; }
.wild-gearcard h4 { margin: 0 0 4px; font-size: 18px; line-height: 1.2; color: inherit; text-shadow: 2px 2px 0 #000; }
.wild-gearcard .meta { margin: 0 0 8px; color: var(--fg2); }
.wild-gearcard .main { margin: 0 0 6px; color: #fff; font-size: 15px; }
.wild-gearcard ul { list-style: none; margin: 0 0 6px; padding: 0; color: #8fb6ff; }
.wild-gearcard .power { margin: 4px 0 6px; color: #ff9a5c; }
.wild-gearcard .dur { margin: 0; color: var(--fg3); font-size: 12px; }
/* a mythic's lore (wild.js loreBlock): under a thin rule, the quote in the body font and a darker mythic orange, the name under it */
.wild-gearcard .lore, .wild-gear .tip .lore { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 107, 61, .28); color: #d98a63; font: 12px/1.6 var(--f-body); text-wrap: pretty; }
.wild-gearcard .lore p, .wild-gear .tip .lore p { margin: 0; }
.wild-gearcard .lore cite, .wild-gear .tip .lore cite { display: block; margin-top: 2px; color: #9a6a52; font-style: normal; text-align: right; }
.rf-gear.wild-gearcard .lore { font-size: 13px; }
.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 .r-set { color: #5fd06a; }
:is(.wild-gearcard, .wild-gear .tip) .unid { margin: 0 0 6px; color: #ff6b6b; font-weight: 600; }
:is(.wild-gearcard, .wild-gear .tip) .unid.bound { color: #e8c547; }
/* an affix's tier (T1 the 48-60 band, T5 the 1-11): brightest gold at the top, dimming down, apart from the grades' colours */
:is(.wild-gearcard, .wild-gear .tip) .tier { display: inline-block; min-width: 2.2em; margin-right: 6px; padding: 0 3px; font-style: normal; font-size: 11px; line-height: 16px; text-align: center;
  font-family: var(--f-mono, monospace); color: #0b0b0b; background: #6a707a; box-shadow: 1px 1px 0 #000; vertical-align: 1px; }
:is(.wild-gearcard, .wild-gear .tip) .tier.t1 { background: #ffd447; }
:is(.wild-gearcard, .wild-gear .tip) .tier.t2 { background: #d9b84a; }
:is(.wild-gearcard, .wild-gear .tip) .tier.t3 { background: #a9a08a; }
:is(.wild-gearcard, .wild-gear .tip) .tier.t4 { background: #8a8f96; }
:is(.wild-gearcard, .wild-gear .tip) .rw { margin: 0 0 4px; color: #e8c547; font-family: var(--f-display, inherit); letter-spacing: .08em; text-shadow: 0 0 8px rgba(232, 197, 71, .55), 2px 2px 0 #000; }
:is(.wild-gearcard, .wild-gear .tip) .rwb { margin: 0 0 6px; color: #e8c547; }
:is(.wild-gearcard, .wild-gear .tip) .gemb { margin: 0 0 6px; font-size: 12px; }
.gemb .g-ruby { color: #ff6b78; } .gemb .g-sapphire { color: #79a6ff; } .gemb .g-topaz { color: #f2c94c; } .gemb .g-emerald { color: #5fd88a; } .gemb .g-amethyst { color: #c08af0; }
:is(.wild-gearcard, .wild-gear .tip) .sockets { display: flex; gap: 4px; align-items: center; margin: 0 0 6px; }
:is(.wild-gearcard, .wild-gear .tip) .sockets span { margin-right: 4px; color: var(--fg3); font-size: 12px; }
:is(.wild-gearcard, .wild-gear .tip) .sockets i { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #0c0c0c; border: 2px solid #4a4a4a; box-shadow: inset 2px 2px 0 #000; }
:is(.wild-gearcard, .wild-gear .tip) .sockets i svg.cur { width: 12px; height: 12px; margin: 0; }
/* linked sockets: a bar between each linked pair, and the link count (after Path of Exile's links) */
:is(.wild-gearcard, .wild-gear .tip) .sockets .link { width: 6px; height: 4px; margin: 0 -4px; background: #7fd3c7; box-shadow: 0 1px 0 #000; }
:is(.wild-gearcard, .wild-gear .tip) .sockets .links { margin-left: 6px; color: #7fd3c7; font-size: 12px; font-style: normal; }
/* a mythic's relic strength, after its power */
:is(.wild-gearcard, .wild-gear .tip) .power .relic { display: block; margin-top: 2px; color: #ffb36b; font-size: 12px; }
:is(.wild-gearcard, .wild-gear .tip) .setn { margin: 4px 0 2px; color: #5fd06a; font-weight: 600; }
:is(.wild-gearcard, .wild-gear .tip) .setb { margin: 0 0 2px; color: #8fd99a; font-size: 12px; }
.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 .tip :is(.rwb, .gemb) { padding-left: 0; list-style: none; } .wild-gear .tip :is(.rwb, .gemb) li { display: block; }
.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% - 72px); 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; }
.hp.ap b { background: #4aa8f0; }
.wild-follow .row.ap { justify-content: flex-start; }
.wild-follow .row.ap span:first-child { min-width: 3.5em; color: #a8a8a8; }
.wild-follow .hp.ap { flex: 1; height: 6px; }
.wild-follow .row.ap span:last-child { min-width: 5.5em; text-align: right; font-size: 11px; }
.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); }
.wild-gear :not(.pet-slot) + .pet-slot { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #333; }
.wild-gear .pet-slot > summary, .wild-gear .pet-slot.empty-slot { padding: 5px 0; }
/* the bag's gear on the sheet (wild.js bagGearRows): the worn pieces' rows, under the bag's own heading */
.wild-gear.bag-gear { margin: 4px 0 6px; padding: 0; border-top: 0; }
.wild-gear.bag-gear[hidden] { display: none; }
.wild-gear b.pet { display: flex; align-items: center; gap: 5px; text-shadow: 1px 1px 0 #000; }
.wild-gear b.pet.lion { color: #ffd25a; text-shadow: 0 0 8px rgba(255, 170, 60, .45), 1px 1px 0 #000; }
.wild-gear b.pet.falcon { color: #8fe6ff; text-shadow: 0 0 8px rgba(95, 224, 255, .4), 1px 1px 0 #000; }
.wild-gear .pet-icon { flex: none; height: 15px; width: auto; filter: drop-shadow(1px 1px 0 #000); }
.wild-gear .pet-slot summary em { overflow: hidden; max-width: 9em; text-overflow: ellipsis; white-space: nowrap; color: #c9a85a; }
.wild-gear .pet-slot .tip .ready { margin-top: 4px; color: #ffd25a; }
/* Luna, and each pet's food by its name (wild.js petSlot) */
.wild-gear b.pet.luna { color: #dfe7f6; text-shadow: 0 0 8px rgba(127, 216, 255, .35), 1px 1px 0 #000; }
.wild-gear .hp.pfood { flex: none; width: 30px; height: 4px; margin-left: 2px; }
.wild-gear .hp.pfood b { background: #e8a23e; }
.wild-gear .hp.pfood.low b { background: var(--down); }
/* a class piece's trait (server/world-items.js matTrait) */
.wild-gear .tip .trait { margin-top: 4px; color: #d8c08a; }
@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; }
.wild-stats .pass.g-lord { color: #ff5a4a; }
/* a hero's class, a lord's path (server/world-classes.js): its word as a tag, its name beside it */
.wild-stats .pass.cls { display: flex; align-items: center; gap: 6px; color: #8fe3c0; cursor: help; }
.wild-stats .pass.cls b { padding: 0 4px; border: 1px solid currentColor; font-weight: normal; line-height: 1.4; }
.wild-stats .pass.cls.path { color: #ff8a7a; }

/* 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); }
.kind-counts { margin: 4px 0 0; display: flex; gap: 10px; }
.kind-counts div { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px 6px; background: #000; border: 3px solid #f2c94c; box-shadow: 4px 4px 0 #000; }
.kind-counts dt { font-size: 15px; color: #f2c94c; }
.kind-counts dd { margin: 0; font-size: 26px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.kind-counts .lord-k { border-color: #ff3b3b; box-shadow: 4px 4px 0 #000, 0 0 24px rgba(255, 59, 59, .3); }
.kind-counts .lord-k dt, .hero-latest span.lord { color: #ff5a4a; }
@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; }
/* the deposit mint (hero contract 2.6): 100,000 BOLT, ten levels each paying a tenth back */
.hero-deposit { display: grid; gap: 14px; width: 100%; max-width: 620px; padding: 20px 20px 0; border: var(--bw) solid var(--accent); background: #000; box-shadow: 6px 6px 0 #000; }
.hero-deposit .dep-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-deposit h2 { margin: 0; font-size: 22px; color: var(--accent); }
.hero-deposit .dep-head i { font-style: normal; font-size: 12px; color: #000; background: var(--accent); padding: 3px 8px; }
.hero-deposit .dep-sum { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.hero-deposit .dep-sum b { font-size: clamp(34px, 4vw, 44px); line-height: 1; color: #fff; text-shadow: 4px 4px 0 #3a2f00; font-variant-numeric: tabular-nums; }
.hero-deposit .dep-sum span { font-size: 16px; color: var(--accent); }
.hero-deposit .dep-steps { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.hero-deposit .dep-steps li { display: grid; place-items: end center; height: 34px; padding-bottom: 4px; background: var(--accent); border: 1px solid #b8961a; box-shadow: inset 0 -4px 0 #c9a419; }
.hero-deposit .dep-steps li:nth-child(even) { background: #ffe066; }
.hero-deposit .dep-steps span { font-size: 10px; color: #000; }
.hero-deposit .dep-line { margin: 0; color: var(--fg); font-size: 14px; line-height: 1.5; }
.hero-deposit .dep-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hero-deposit .dep-facts li { padding: 4px 9px 3px; border: 1px solid var(--line2); color: var(--fg2); font-size: 12px; }
.hero-deposit .hero-mint { width: auto; max-width: none; margin: 0 -20px; border-width: var(--bw) 0 0; border-color: var(--accent); }
@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; 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 img { 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: 88px; margin: 0 auto 10px; box-shadow: 4px 4px 0 #000; }
.hero-grades thead th .mini img { 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 .star { color: #b48cff; }   /* the starlit specialty (server/world-starlit.js) */
.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; 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; }
/* heroes and demon lords side by side; the prize pool's four steps and its withdrawal */
.kind-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kind-pair .kind { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; padding: 14px; background: #000; border: 3px solid #f2c94c; box-shadow: 6px 6px 0 #000; }
.kind-pair .lord-side { border-color: #ff3b3b; box-shadow: 6px 6px 0 #000, 0 0 40px rgba(255, 59, 59, .25); }
.kind-pair img { width: 140px; height: auto; display: block; }
.kind-pair figcaption { display: grid; gap: 6px; }
.kind-pair b { font-weight: 400; font-size: 26px; color: #f2c94c; }
.kind-pair .lord-side b { color: #ff5a4a; }
.kind-pair i { font-style: normal; font-size: 22px; color: #fff; }
.kind-pair span { color: var(--fg2); font-size: 14px; line-height: 1.6; }
.pool-steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--accent); background: #000; }
.pool-steps li { display: grid; gap: 10px; justify-items: start; padding: 16px; font-size: 14px; line-height: 1.6; color: var(--fg); }
.pool-steps li + li { border-left: 3px solid var(--accent); }
.pool-steps i { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; background: var(--accent); color: #000; font-size: 20px; }
.hero-pool h3 { margin: 0 0 10px; font-size: 18px; color: #fff; font-weight: 400; }
.pool-claim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 640px; }
.pool-claim input { min-width: 0; padding: 10px 12px; background: #000; color: var(--fg); border: 2px solid var(--line2); font: 14px var(--f-mono, monospace); }
.pool-claim input:focus { outline: none; border-color: var(--accent); }
.pool-claim ul { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pool-claim li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line2); }
.pool-claim li b { font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .kind-pair { grid-template-columns: 1fr; }
  .pool-steps { grid-template-columns: 1fr 1fr; }
  .pool-steps li:nth-child(3) { border-left: 0; }
  .pool-steps li:nth-child(n+3) { border-top: 3px solid var(--accent); }
}
.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-deposit { padding: 16px 16px 0; }
  .hero-deposit .hero-mint { margin: 0 -16px; }
  .hero-deposit .dep-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .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; }
}

/* The falcon quest (agentwild.fun/social, pages.js socialPage): a poster with the falcon's key art and what it does, then
   the four steps (only the reached ones show), then the falcon's arrival. */
.social-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 24px; }
.social-page > * { min-width: 0; }
.falcon-poster { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 44px 40px;
  background: radial-gradient(ellipse 55% 70% at 78% 45%, rgba(95, 224, 255, .18), transparent 70%), #07090e; border: var(--bw) solid var(--line2); box-shadow: 8px 8px 0 #000; overflow: hidden; }
.falcon-pitch { display: grid; gap: 20px; justify-items: start; }
.falcon-pitch h1 { margin: 0; font-size: clamp(44px, 6vw, 80px); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00, 0 0 44px rgba(252, 213, 53, .25); }
.falcon-lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--fg); }
.falcon-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.falcon-perks li { display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid rgba(95, 224, 255, .5); }
.falcon-perks b { font-size: 18px; color: #d9f6ff; }
.falcon-perks span { font-size: 14px; color: var(--fg2); line-height: 1.5; }
.falcon-count { margin: 0; font-size: 14px; color: var(--accent); }
.falcon-key { display: grid; place-items: center; }
.falcon-art { width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 0 28px rgba(95, 224, 255, .55)) drop-shadow(6px 6px 0 #000); animation: falcon-soar 2.4s steps(6) infinite alternate; }
@keyframes falcon-soar { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
.quest { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.quest-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; background: var(--panel); border: var(--bw) solid var(--line2); }
.quest-step .n { display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent); color: #000; font-size: 20px; box-shadow: 3px 3px 0 #000; }
.quest-step h3 { margin: 6px 0 12px; font-size: 18px; color: #fff; }
.quest-step.done { opacity: .55; }
.quest-step.done .n { background: #2a2c36; color: var(--fg2); }
.quest-row { display: flex; gap: 10px; flex-wrap: wrap; }
.quest-row input { flex: 1 1 220px; min-width: 0; padding: 11px 12px; background: #050505; color: var(--fg); border: var(--bw) solid var(--line2); font: 15px var(--f-mono); }
.quest-row input:focus-visible { outline: none; border-color: var(--accent); }
.quest-post { margin: 0 0 12px; padding: 12px 14px; background: #050505; border: 1px solid var(--line2); color: var(--fg); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.quest-msg { margin: 0; min-height: 1.4em; color: var(--fg2); font-size: 14px; }
.quest-msg.bad { color: var(--down); }
.falcon-done { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 36px 20px; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(95, 224, 255, .2), transparent 70%), #07090e;
  border: var(--bw) solid var(--accent); box-shadow: 8px 8px 0 #000; }
.falcon-done[hidden] { display: none; }
.falcon-key.small .falcon-art { max-width: 220px; }
.falcon-done h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); color: var(--accent); text-shadow: 4px 4px 0 #3a2f00, 0 0 40px rgba(252, 213, 53, .4); }
.falcon-done .btn { box-shadow: 4px 4px 0 #000, 0 0 30px rgba(252, 213, 53, .5); }
.quest-once { margin: 0; color: var(--fg3); font-size: 13px; }
@media (max-width: 900px) {
  .falcon-poster { grid-template-columns: 1fr; padding: 28px 18px; gap: 20px; }
  .falcon-key { order: -1; }
  .falcon-art { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .falcon-art { animation: none; } }
/* the envoys: the Herald Lion's poster and wall (server/world.js ENVOY), red and gold as the lion dance */
.envoy-poster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; padding: 44px 40px;
  background: radial-gradient(ellipse 55% 70% at 22% 50%, rgba(224, 64, 46, .26), transparent 70%), #0e0707; border: var(--bw) solid #5a2018; box-shadow: 8px 8px 0 #000; overflow: hidden; }
.envoy-key { display: grid; place-items: center; }
.envoy-art { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 0 30px rgba(255, 170, 60, .5)) drop-shadow(6px 6px 0 #000); animation: envoy-bob 1.6s steps(4) infinite alternate; }
@keyframes envoy-bob { from { transform: translateY(4px) rotate(-1.5deg); } to { transform: translateY(-6px) rotate(1.5deg); } }
.envoy-pitch { display: grid; gap: 18px; justify-items: start; }
.envoy-pitch h2 { margin: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; font-size: clamp(36px, 5vw, 64px); line-height: 1; color: #ffd25a; text-shadow: 5px 5px 0 #5a1810, 0 0 40px rgba(224, 64, 46, .45); }
.envoy-pitch h2 span { font-size: .45em; color: #ff8a6a; text-shadow: 3px 3px 0 #000; }
.envoy-lead { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.6; color: var(--fg); }
.envoy-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.envoy-perks li { display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid rgba(255, 138, 106, .6); }
.envoy-perks b { font-size: 18px; color: #ffe2b0; }
.envoy-perks span { font-size: 14px; color: var(--fg2); line-height: 1.5; }
.envoy-pitch .btn { margin-top: 0; box-shadow: 4px 4px 0 #000, 0 0 26px rgba(255, 170, 60, .45); }
.envoy-wall h3 { margin: 0 0 12px; font-size: 20px; color: #ffd25a; }
.envoy-wall ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.envoy-wall li { display: grid; gap: 2px; padding: 10px 14px; background: var(--panel); border: var(--bw) solid #5a2018; }
.envoy-wall li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.envoy-wall li a.x { color: var(--fg2); font-size: 13px; }
@media (max-width: 900px) {
  .envoy-poster { grid-template-columns: 1fr; padding: 28px 18px; gap: 20px; }
  .envoy-art { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .envoy-art { animation: none; } }
.quest .btn { margin-top: 0; border: 0; cursor: pointer; font-size: 15px; padding: 11px 18px; }
.quest .btn:disabled { opacity: .5; cursor: wait; }

/* The update history (agentwild.fun/updates, pages.js updatesPage): one release a row, its date beside its notes; the
   newest dated in the accent. */
.updates-page { max-width: 820px; margin: 0 auto; padding: 40px 0 72px; }
.updates-page h1 { margin: 0 0 32px; font-size: 40px; line-height: 1.1; color: var(--accent); }
.updates { list-style: none; margin: 0; padding: 0; }
.updates > li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 28px; padding: 28px 0 30px; border-top: 1px solid var(--line2); }
.updates time { padding-top: 5px; font-size: 13px; color: var(--fg3); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.updates .latest time { color: var(--accent); }
.updates h2 { margin: 0 0 14px; font-size: 21px; line-height: 1.3; color: var(--fg); }
.updates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 68ch; font-size: 15px; line-height: 1.65; color: var(--fg2); }
.updates ul li { position: relative; padding-left: 18px; }
.updates ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--accent); }
.updates > li:not(.latest) ul li::before { background: var(--line2); }
@media (max-width: 640px) {
  .updates-page { padding-top: 24px; }
  .updates-page h1 { font-size: 30px; }
  .updates > li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 24px; }
}
/* the currencies (world-items CURRENCIES): pixel icons, the bag's row, and what they leave on a piece */
.wild svg.cur, .wild-gearcard svg.cur { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; filter: drop-shadow(1px 1px 0 #000); }
.wild-feed .cur-name { color: #ffd77a; font-weight: 600; }
.wild-more h5 { margin: 6px 0 4px; font: 11px var(--f-ui); color: #ffd77a; letter-spacing: .04em; }
.wild-more .curs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-bottom: 6px; }
.wild-more .curs div { display: flex; align-items: center; gap: 2px; min-width: 0; }
.wild-more .curs span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6e6e6; }
.wild-more .curs b { color: #ffd77a; font-variant-numeric: tabular-nums; }
.wild-gearcard .q, .wild-gear .tip .q { margin: 0 0 4px; color: #e6e6e6; }
.wild-gearcard .imp, .wild-gear .tip .imp { margin: 0 0 4px; color: #ff6a5a; }
/* a beast piece's mark: its label in the pixel face, its rank as five blocks lit up to it, what it does in ink */
.wild-gearcard .beast, .wild-gear .tip .beast { margin: 0 0 4px; color: #e6e6e6; }
.wild-gearcard .beast b, .wild-gear .tip .beast b { margin-right: 6px; color: #929292; font: 400 12px/1 var(--f-ui); }
.wild-gearcard .beast .bk, .wild-gear .tip .beast .bk { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: 1px; }
.wild-gearcard .beast .bk i, .wild-gear .tip .beast .bk i { width: 6px; height: 6px; border: 1px solid #5c5c5c; }
.wild-gearcard .beast .bk i.on, .wild-gear .tip .beast .bk i.on { background: #e6e6e6; border-color: #e6e6e6; }
.wild-gearcard .corrupt, .wild-gear .tip .corrupt, .ah-table em.corrupt { margin: 0 0 4px; color: #ff3b3b; font-style: normal; font-weight: 600; letter-spacing: .06em; }
.wild-gearcard .mirror, .wild-gear .tip .mirror { margin: 0 0 4px; color: #cfe8ff; font-weight: 600; letter-spacing: .06em; }
/* the search (wild.js find): an agent by its Agent ID, or a hero by its number; each found agent with the hero it plays,
   the heroes it holds and the ones out on their own, any of them a click away from the camera */
.wild-find { position: absolute; top: 14px; right: 16px; z-index: 8; width: 284px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: rgba(8, 8, 8, .9); border: 2px solid #3a3a3a; color: #8a8f9c; box-shadow: 4px 4px 0 #000; }
.wild-find:focus-within { border-color: var(--accent); color: var(--accent); }
.wild-find svg { flex: none; }
.wild-find input { flex: 1; min-width: 0; height: 100%; padding: 2px 0 0; border: 0; background: none; color: #f2f2f2; font: 14px var(--f-ui); caret-color: var(--accent); outline: none; }
.wild-find input::placeholder { color: #8a8f9c; }
.wild-find input::-webkit-search-cancel-button { display: none; }
.wild-find input::selection { background: var(--accent); color: #000; }
.wild-find-list { position: absolute; top: calc(100% + 6px); right: -2px; width: min(340px, calc(100vw - 32px)); max-height: min(460px, 70dvh); margin: 0; padding: 4px; list-style: none; overflow-y: auto;
  overscroll-behavior: contain; background: #08080a; border: 3px solid var(--accent); box-shadow: 8px 8px 0 #000, 0 0 40px rgba(252, 213, 53, .18); scrollbar-width: thin; scrollbar-color: #444 transparent; }
.wild-find-list[hidden] { display: none; }
.wild-find-list > li { display: grid; gap: 6px; padding: 8px 8px 10px; }
.wild-find-list > li + li { border-top: 1px solid #1d1d22; }
.wild-find-list .empty { padding: 12px 10px; color: #a8a8a8; font: 13px var(--f-body); }
.wild-find .who { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 6px 8px 4px; border: 2px solid transparent; background: none; color: inherit; text-align: left; cursor: pointer; }
.wild-find .who b { color: var(--accent); font: 16px var(--f-ui); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wild-find .who span { color: #a8a8a8; font: 12px var(--f-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wild-find .who i { margin-left: auto; color: #6f7480; font: 12px var(--f-ui); font-style: normal; }
.wild-find .who:hover, .wild-find .who.on { border-color: var(--accent); background: rgba(252, 213, 53, .08); }
.wild-find .who:hover i, .wild-find .who.on i { color: var(--accent); }
.wild-find .line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 8px; }
.wild-find .line > em { flex: 0 0 100%; color: #8a8f9c; font: 11px var(--f-ui); font-style: normal; letter-spacing: .04em; }
.wild-find .nft { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 6px 1px; border: 1px solid #2a2a30; background: #000; color: var(--g, #9aa3ad); font: 12px var(--f-ui); font-variant-numeric: tabular-nums; }
.wild-find .nft.g-iron { --g: #9aa3ad; } .wild-find .nft.g-silver { --g: #d9e2ec; } .wild-find .nft.g-gold { --g: #f2c94c; } .wild-find .nft.g-starlit { --g: #b48cff; } .wild-find .nft.g-lord { --g: #ff5a4a; }
.wild-find .nft.hit { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wild-find button.nft { cursor: pointer; border-color: var(--g, #9aa3ad); }
.wild-find button.nft small { color: #a8a8a8; font-size: 11px; }
.wild-find button.nft:hover, .wild-find button.nft.on { background: var(--g, #9aa3ad); color: #000; }
.wild-find button.nft:hover small, .wild-find button.nft.on small { color: #000; }
.wild-find button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* the trading post: a window over the world, opened from the stage or the market tab */
.wild-ah-open { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; padding: 9px 16px 7px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 15px; cursor: pointer;
  box-shadow: 4px 4px 0 #000, 0 0 24px rgba(252, 213, 53, .45); }
.wild-ah-open:hover { background: #ffe066; }
.wild-ah-open:focus-visible, .ah-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wild.ah-on .wild-ah-open { display: none; }
.ah-cta { width: 100%; margin: 4px 0 8px; padding: 9px 12px 7px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 14px; cursor: pointer; box-shadow: 4px 4px 0 #000; }
.wild-ah { position: absolute; inset: 22px; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #08080a; border: 3px solid var(--accent);
  box-shadow: 8px 8px 0 #000, 0 0 60px rgba(252, 213, 53, .22); color: #e6e6e6; font-family: var(--f-body); font-size: 13px; }
.wild-ah[hidden] { display: none; }
.ah-head { display: flex; align-items: center; gap: 16px; padding: 12px 14px 10px 20px; border-bottom: 2px solid #2a2410;
  background: linear-gradient(180deg, rgba(252, 213, 53, .14), transparent); }
.ah-head h2 { margin: 0; font-family: var(--f-ui); font-weight: 400; font-size: 26px; color: var(--accent); text-shadow: 3px 3px 0 #3a2f00, 0 0 24px rgba(252, 213, 53, .45); }
.ah-head p { margin: 0; flex: 1; color: #8a8f9c; font-size: 12px; }
.ah-x { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #3a3a3a; background: #000; color: #e6e6e6; cursor: pointer; }
.ah-x svg { width: 14px; height: 14px; }
.ah-x:hover, .ah-x:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.ah-body { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 0; }
.ah-cats { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 2px solid #1d1d22; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.ah-cats button { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 10px; border: 0; border-left: 3px solid transparent; background: none; color: #cfcfcf;
  font: 14px var(--f-ui); text-align: left; cursor: pointer; }
.ah-cats button.sub { padding-left: 22px; font-size: 13px; color: #a8a8a8; }
.ah-cats button i { font-style: normal; color: #6f7480; font-variant-numeric: tabular-nums; }
.ah-cats button:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.ah-cats button.on { color: #000; background: var(--accent); border-left-color: #fff; }
.ah-cats button.on i { color: #3a2f00; }
.ah-cats button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ah-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ah-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #1d1d22; }
.ah-bar input, .ah-bar select { height: 32px; padding: 0 10px; border: 2px solid #333; background: #000; color: #e6e6e6; font: 13px var(--f-body); }
.ah-bar input[type="search"] { flex: 1 1 200px; min-width: 140px; }
.ah-bar input:focus, .ah-bar select:focus { border-color: var(--accent); outline: none; }
.ah-bar .lv { display: flex; align-items: center; gap: 4px; color: #8a8f9c; font: 12px var(--f-ui); }
.ah-bar .lv input { width: 58px; padding: 0 6px; }
.ah-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.ah-kinds button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 4px; padding: 6px 10px; border: 2px solid #2a2a30; background: #000; color: #e6e6e6; cursor: pointer; text-align: left; }
.ah-kinds button b { font-weight: 600; font-size: 13px; }
.ah-kinds button span { grid-column: 1 / -1; color: #8a8f9c; font-size: 11px; font-variant-numeric: tabular-nums; }
.ah-kinds button:hover { border-color: #5a5a60; }
.ah-kinds button.on { border-color: var(--accent); box-shadow: 0 0 14px rgba(252, 213, 53, .3); }
.ah-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 14px 12px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.ah-list .empty { margin: 24px 0; color: #8a8f9c; text-align: center; }
.ah-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ah-table th { position: sticky; top: 0; padding: 8px 10px; background: #0b0b0e; color: #8a8f9c; font: 12px var(--f-ui); font-weight: 400; text-align: left; border-bottom: 2px solid #2a2410; }
.ah-table td { padding: 8px 10px; border-bottom: 1px solid #18181d; vertical-align: middle; }
.ah-table td:nth-child(2) { color: #a8a8a8; font-size: 12px; }
.ah-table td.p { color: var(--accent); white-space: nowrap; }
.ah-table td.p small { color: #8a8f9c; }
.ah-table td:last-child { color: #8a8f9c; font-size: 12px; }
.ah-table b.g { font-weight: 600; }
.ah-table .lots { display: inline-block; margin-left: 8px; padding: 1px 5px 0; border: 1px solid #2a2a30; color: #8a8f9c; font: 11px var(--f-ui); white-space: nowrap; }
.ah-table tbody tr:hover { background: rgba(252, 213, 53, .05); }
.ah-trades { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-top: 2px solid #1d1d22; overflow: hidden; white-space: nowrap; font-size: 12px; }
.ah-trades b { color: #8a8f9c; font: 12px var(--f-ui); font-weight: 400; }
.ah-trades ol { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.ah-trades li i { margin-left: 6px; font-style: normal; color: var(--accent); }
.ah-trades > button { flex: none; padding: 3px 8px 2px; border: 2px solid #333; background: #000; color: #cfcfcf; font: 12px var(--f-ui); cursor: pointer; }
.ah-trades > button:hover, .ah-trades > button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
/* the gear filters (owner, 2026-11-08, after Path of Exile's trade site): a toggle with how many are on, groups that fold
   and clear alone, the stats in three groups, and the values each row matched */
.ah-ftoggle { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 2px solid #333; background: #000; color: #cfcfcf; font: 13px var(--f-ui); cursor: pointer; }
.ah-ftoggle svg { width: 12px; height: 12px; }
.ah-ftoggle i { min-width: 18px; padding: 1px 5px 0; background: var(--accent); color: #000; font: 11px var(--f-ui); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.ah-ftoggle:hover { color: #fff; border-color: #5a5a60; }
.ah-ftoggle.open { border-color: var(--accent); color: var(--accent); }
.ah-ftoggle:focus-visible, .ah-fclear:focus-visible, .ah-sadd:focus-visible, .ah-sdel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ah-fclear { height: 28px; padding: 0 6px; border: 0; background: none; color: #8a8f9c; font: 12px var(--f-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #3a3a40; }
.ah-fclear:hover { color: var(--accent); text-decoration-color: currentColor; }
.ah-filters { container: ahf / inline-size; flex: none; max-height: 52%; overflow-y: auto; padding: 10px 14px 12px; border-bottom: 1px solid #1d1d22; background: #0b0b0e; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.ah-filters[hidden] { display: none; }
.ah-fchips { position: sticky; top: -10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: -10px -14px 0; padding: 10px 14px 8px; background: #0b0b0e; }
.ah-fchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 2px solid #2a2a30; background: #000; color: #cfcfcf; font: 13px var(--f-ui); cursor: pointer; }
.ah-fchip:hover { color: #fff; border-color: #5a5a60; }
.ah-fchip .chev { width: 9px; height: 9px; color: #6f7480; transform: rotate(-90deg); transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.ah-fchip.open { border-color: var(--accent); color: var(--accent); }
.ah-fchip.open .chev { transform: none; color: var(--accent); }
.ah-fchip i { min-width: 18px; padding: 1px 5px 0; background: var(--accent); color: #000; font: 11px var(--f-ui); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.ah-fchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ah-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; align-items: start; margin-top: 2px; }
.ah-fg { border: 2px solid #1f1f25; background: #050506; }
.ah-fg.on { border-color: #4a3d0a; }
.ah-fh { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding: 2px 4px 0 10px; }
.ah-fh b { color: #8a8f9c; font: 12px var(--f-ui); font-weight: 400; }
.ah-fbody { display: grid; gap: 6px; padding: 2px 10px 10px; }
.ah-f { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; }
.ah-f > span:first-child { color: #8a8f9c; font: 12px var(--f-ui); }
.ah-filters input, .ah-filters select { width: 100%; min-width: 0; height: 28px; padding: 0 8px; border: 2px solid #333; background: #000; color: #e6e6e6; font: 13px var(--f-body); font-variant-numeric: tabular-nums; }
.ah-filters input::placeholder { color: #7a7f8a; }
.ah-filters input:focus, .ah-filters select:focus { border-color: var(--accent); outline: none; }
.ah-filters input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ah-filters input[type="number"]::-webkit-inner-spin-button, .ah-filters input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ah-f .rg { display: flex; align-items: center; gap: 6px; }
.ah-f .rg i { flex: none; width: 8px; height: 2px; background: #4a4a50; }
.ah-f .rg.one input { max-width: 96px; }
.ah-stats { margin-top: 8px; }
.ah-sgs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: 14px; padding: 2px 10px 10px; }
@container ahf (max-width: 820px) { .ah-sgs { grid-template-columns: minmax(0, 1fr); } }
.ah-sgh { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.ah-sgh b { display: inline-flex; align-items: center; gap: 6px; color: #e6e6e6; font: 13px var(--f-ui); font-weight: 400; }
.ah-sgh b input { width: 46px; height: 26px; padding: 0 6px; text-align: center; }
.ah-sg-not .ah-sgh b { color: #ff8a7a; }
.ah-sadd { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 2px solid #2a2a30; background: #000; color: #cfcfcf; font: 12px var(--f-ui); cursor: pointer; }
.ah-sadd svg { width: 9px; height: 9px; }
.ah-sadd:hover { border-color: var(--accent); color: var(--accent); }
.ah-sadd:disabled { opacity: .4; cursor: not-allowed; border-color: #2a2a30; color: #cfcfcf; }
.ah-srow { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 28px; gap: 5px; margin-top: 6px; }
.ah-srow select { padding: 0 4px 0 6px; font-size: 12px; }
.ah-srow input { padding: 0 5px; }
.ah-sg-not .ah-srow { grid-template-columns: minmax(0, 1fr) 28px; }
.ah-sdel { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid #333; background: #000; color: #8a8f9c; cursor: pointer; }
.ah-sdel svg { width: 9px; height: 9px; }
.ah-sdel:hover { border-color: var(--accent); color: var(--accent); }
.ah-hits { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: #a8a8a8; font-size: 12px; }
.ah-hits b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ah-list .empty p { margin: 0 0 4px; }
@media (max-width: 760px) {
  .ah-filters { max-height: 50%; padding: 8px 10px 10px; }
  .ah-fchips { top: -8px; margin: -8px -10px 0; padding: 8px 10px 6px; }
  .ah-fgrid { grid-template-columns: minmax(0, 1fr); }
  .ah-f { grid-template-columns: 60px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ah-fchip .chev { transition: none; } }
/* the sales: for sale or sold, the last day's figures, the record and more of it */
.ah-views { display: flex; flex: none; border: 2px solid #333; }
.ah-views button { height: 28px; padding: 0 12px; border: 0; background: #000; color: #a8a8a8; font: 13px var(--f-ui); cursor: pointer; }
.ah-views button + button { border-left: 2px solid #333; }
.ah-views button:hover { color: #fff; }
.ah-views button.on { background: var(--accent); color: #000; }
.ah-views button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.ah-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 10px 14px 4px; color: #a8a8a8; font-size: 13px; font-variant-numeric: tabular-nums; }
.ah-day b { color: #8a8f9c; font: 12px var(--f-ui); font-weight: 400; }
.ah-day i { font-style: normal; color: var(--accent); }
.ah-sold td:nth-child(2) { color: inherit; font-size: inherit; }
.ah-sold th { z-index: 1; white-space: nowrap; }
.ah-sold th.n, .ah-sold td.n { text-align: right; }
.ah-sold td.t { color: #8a8f9c; font-size: 12px; white-space: nowrap; }
.ah-sold td.f { color: #8a8f9c; font-size: 12px; }
.ah-sold td .lv { color: #8a8f9c; font-size: 12px; }
.ah-sold td.who { white-space: nowrap; }
.ah-sold td.who span { color: #5a5f6a; }
.ah-sold td small.m { display: none; }
.ah-more { display: block; margin: 12px auto 4px; padding: 8px 18px 6px; border: 2px solid #333; background: #000; color: #e6e6e6; font: 13px var(--f-ui); cursor: pointer; }
.ah-more:hover, .ah-more:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
@media (max-width: 760px) {
  .wild-ah { inset: 8px; }
  .wild-find { top: 10px; left: 10px; right: 10px; width: auto; height: 34px; }
  .wild-stage .wild-top { top: 54px; }
  .wild-find-list { right: -3px; left: -3px; width: auto; max-height: min(380px, 52dvh); }
  .wild-ah-open { left: auto; right: 10px; bottom: 10px; transform: none; font-size: 13px; padding: 7px 12px 5px; }
  .ah-head p { display: none; }
  .ah-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ah-cats { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 2px solid #1d1d22; }
  .ah-cats button { flex: none; border-left: 0; }
  .ah-cats button.sub { padding-left: 10px; }
  .ah-table td:nth-child(4), .ah-table th:nth-child(4) { display: none; }
  .ah-table .lots { display: table; margin: 3px 0 0; }
  .ah-sold thead { display: none; }
  .ah-sold tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t item tot" "t who tot"; gap: 3px 12px; padding: 9px 2px; border-bottom: 1px solid #18181d; }
  .ah-sold td { padding: 0; border: 0; }
  .ah-sold td.t { grid-area: t; padding-top: 1px; }
  .ah-sold td:nth-child(2) { grid-area: item; min-width: 0; }
  .ah-sold td.who { grid-area: who; white-space: normal; overflow-wrap: anywhere; }
  .ah-sold td.tot { grid-area: tot; text-align: right; }
  .ah-sold td small.m { display: block; margin-top: 3px; color: #8a8f9c; font-size: 12px; }
  .ah-sold td:nth-child(3), .ah-sold td:nth-child(4), .ah-sold td.f { display: none; }
  .ah-views { order: -1; }
}
.ah-table .gear-link { text-align: left; }
/* the demon lords' market (agentwild.fun/market): the runes market's layout, the lords' 4:5 cards, and where the fee goes */
.lm-grid .pod-stone img { aspect-ratio: 4 / 5; object-fit: cover; }
.lm-avatar { height: auto; aspect-ratio: 4 / 5; }
.lord-market .mk-thumb img { width: 32px; height: 40px; object-fit: cover; }
.lm-rank { color: #ff9a8a; border-color: #ff3b3b; }
.lm-rank.r8 { color: #ffd77a; border-color: #ff6b3d; box-shadow: 0 0 10px rgba(255, 107, 61, .45); }
.lm-fee { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 22px; margin: 4px 0 16px; padding: 14px 18px; background: #0b0606; border: 2px solid #ff3b3b;
  box-shadow: 4px 4px 0 #000, 0 0 30px rgba(255, 59, 59, .18); }
.lm-fee h2 { margin: 0; font-size: 20px; font-weight: 400; color: #ff5a4a; }
.lm-fee ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lm-fee li { display: flex; align-items: baseline; gap: 8px; }
.lm-fee li b { font-weight: 400; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.lm-fee li.f1 b { color: #ffd77a; }
.lm-fee li span { color: var(--fg2); font-size: 14px; }
.lm-fee p { grid-column: 1 / -1; margin: 0; color: var(--fg2); font-size: 13px; }
/* the BOLT exchange (agentwild.fun/exchange): the book in a ladder, asks over bids, each price with a bar for its depth */
.fx-fee { border-color: #ff6a2b; background: #0c0703; }
.fx-fee h2 { color: #ff8a4a; }
.fx-grid { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: var(--gap, 16px); align-items: start; margin: 16px 0; }
.fx-book, .fx-trades, .fx-how { border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.fx-cols { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--fg2); font-size: 12px; }
.fx-cols small { color: var(--fg3); font-size: 11px; }
.fx-side { list-style: none; margin: 0; padding: 4px 0; }
.fx-side li { position: relative; display: flex; justify-content: space-between; padding: 4px 14px; font: 14px/1.4 var(--f-mono); font-variant-numeric: tabular-nums; }
.fx-side li::before { content: ""; position: absolute; inset: 1px 0 1px auto; width: var(--d, 10%); opacity: .16; }
.fx-side li > * { position: relative; }
.fx-side li b { font-weight: 400; }
.fx-ask b { color: var(--down); } .fx-ask::before { background: var(--down); }
.fx-bid b { color: var(--up); } .fx-bid::before { background: var(--up); }
.fx-side li:hover { background: var(--panel2); }
.fx-side .d1 { --d: 10%; } .fx-side .d2 { --d: 20%; } .fx-side .d3 { --d: 30%; } .fx-side .d4 { --d: 40%; } .fx-side .d5 { --d: 50%; }
.fx-side .d6 { --d: 60%; } .fx-side .d7 { --d: 70%; } .fx-side .d8 { --d: 80%; } .fx-side .d9 { --d: 90%; } .fx-side .d10 { --d: 100%; }
.fx-mid { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel2); }
.fx-mid b { font-weight: 400; font-size: 24px; color: var(--accent); font-variant-numeric: tabular-nums; }
.fx-mid span { color: var(--fg2); font-size: 12px; }
.fx-mid .fx-spread { margin-left: auto; font-variant-numeric: tabular-nums; }
.fx-none { margin: 0; padding: 18px 14px; color: var(--fg3); font-size: 13px; text-align: center; }
.fx-trades h2, .fx-how h2 { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 400; }
.fx-trades table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fx-trades th { padding: 8px 14px; color: var(--fg2); font-weight: 400; font-size: 12px; text-align: right; border-bottom: 1px solid var(--line); }
.fx-trades td { padding: 6px 14px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fx-trades th:first-child, .fx-trades td:first-child, .fx-trades th:nth-child(n+5), .fx-trades td:nth-child(n+5) { text-align: left; }
.fx-trades td:nth-child(2) { color: var(--accent); }
.fx-trades td:nth-child(n+5) { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.fx-trades .empty { padding: 18px 14px; }
.fx-how ul { list-style: none; margin: 0; padding: 6px 0; }
.fx-how li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 6px 14px; }
.fx-how li > code i { font-style: normal; color: var(--accent); }
.fx-how li span { color: var(--fg2); font-size: 13px; }
.fx-how > a { display: inline-block; margin: 0 14px 12px; }
/* X engagement points (agentwild.fun/x, pages.js xPage): a poster like the falcon's in the coin's gold, the open tasks, the
   link box, the binding's steps (the falcon quest's), the board */
.xq-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 24px; }
.xq-page > * { min-width: 0; }
.xq-poster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding: 44px 40px;
  background: radial-gradient(ellipse 55% 70% at 78% 50%, rgba(252, 213, 53, .16), transparent 70%), #0b0a06; border: var(--bw) solid var(--line2); box-shadow: 8px 8px 0 #000; overflow: hidden; }
.xq-pitch { display: grid; gap: 20px; justify-items: start; }
.xq-pitch h1 { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00, 0 0 44px rgba(252, 213, 53, .25); }
.xq-lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--fg); }
.xq-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.xq-perks li { display: grid; gap: 4px; min-width: 150px; padding: 12px 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(252, 213, 53, .35); }
.xq-perks b { font-size: 20px; color: var(--accent); }
.xq-perks span { font-size: 13px; color: var(--fg2); line-height: 1.5; }
.xq-count { margin: 0; font-size: 14px; color: var(--fg2); }
.xq-key { display: grid; place-items: center; }
.xq-art { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 0 26px rgba(252, 213, 53, .4)) drop-shadow(6px 6px 0 #000); animation: xq-bob 2s steps(5) infinite alternate; }
@keyframes xq-bob { from { transform: translateY(5px); } to { transform: translateY(-8px); } }
.xq-sect { display: grid; gap: 14px; }
.xq-sect > h2 { margin: 0; font-size: 22px; font-weight: 400; color: #fff; }
.xq-tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.xq-task { display: grid; gap: 12px; align-content: start; padding: 16px 18px; background: var(--panel); border: var(--bw) solid var(--line2); scroll-margin: 90px; }
.xq-task.on { border-color: var(--accent); box-shadow: 6px 6px 0 #000, 0 0 24px rgba(252, 213, 53, .25); }
.xq-text { margin: 0; color: var(--fg); font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.xq-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--fg2); font-size: 13px; font-variant-numeric: tabular-nums; }
.xq-left { color: var(--accent); }
.xq-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.xq-open { margin-left: auto; font-size: 13px; }
.xq-box .quest-row, .xq-sect .quest { max-width: 760px; }
.xq-sect .quest-row input[data-xq-code] { flex: 0 1 220px; text-transform: uppercase; }
.xq-sect a.btn[aria-disabled="true"] { opacity: .45; }
.quest-msg.good { color: var(--up); }
.xq-table td.px { font-variant-numeric: tabular-nums; }
.xq-table tr.xq-podium td:first-child, .xq-table tr.xq-podium td:last-child { color: var(--accent); }
.xq-rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--fg3); font-size: 13px; }
@media (max-width: 900px) {
  .xq-poster { grid-template-columns: 1fr; padding: 28px 18px; gap: 20px; }
  .xq-key { order: -1; }
  .xq-art { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .xq-art { animation: none; } }
/* the X points shop (owner, 2026-11-08): each line a chest in its grade's colour, its price, what is left, the slot and the words for the agent */
.xs-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; gap: 14px; }
.xs-line { --g: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 20px; background: var(--panel);
  border: var(--bw) solid color-mix(in srgb, var(--g) 70%, #000); box-shadow: 6px 6px 0 #000; }
.xs-art { padding-top: 4px; }
.xs-chest { display: block; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--g) 55%, transparent)) drop-shadow(4px 4px 0 #000); animation: xq-bob 1.6s steps(4) infinite alternate; }
.xs-body { display: grid; gap: 10px; min-width: 0; }
.xs-body h3 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; color: var(--g); }
.xs-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.xs-tags span { padding: 3px 8px; font-size: 13px; color: var(--fg2); background: rgba(255, 255, 255, .06); }
.xs-buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.xs-price { font-size: 30px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.xs-price small { margin-left: 6px; font-size: 14px; color: var(--fg2); }
.xs-left { font-size: 14px; color: var(--fg); font-variant-numeric: tabular-nums; }
.xs-line.g-treasured { --g: #e8c547; } .xs-line.g-mythic { --g: #ff6b3d; } .xs-line.g-set { --g: #5fd06a; }
.xs-bar { flex: 1 0 100%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 10px; }
.xs-bar > b { background: #050505; border: 1px solid var(--line2); }
.xs-bar > b.on { background: var(--g); border-color: color-mix(in srgb, var(--g) 60%, #000); }
.xs-each { margin: 0; font-size: 13px; color: var(--fg2); }
.xs-slot { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg2); }
.xs-slot select { padding: 7px 10px; font: 14px var(--f-ui); color: var(--fg); background: var(--panel2); border: var(--bw) solid var(--line2); border-radius: var(--radius); }
.xs-slot select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xs .xs-ask { margin: 0; font-size: 13px; }
.xs-body .btn { justify-self: start; }
.xs-line.out { border-color: var(--line2); box-shadow: 6px 6px 0 #000; }
.xs-line.out .xs-chest { filter: grayscale(1) brightness(.6); animation: none; }
.xs-line.out h3, .xs-line.out .xs-price { color: var(--fg2); }
.xs-out { font-size: 16px; color: var(--down); }
@media (max-width: 560px) { .xs-lines { grid-template-columns: 1fr; } .xs-line { position: relative; grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .xs-art { position: absolute; top: 14px; right: 14px; padding: 0; } .xs-chest { width: 44px; height: 39px; } .xs-body h3 { padding-right: 56px; } }
@media (prefers-reduced-motion: reduce) { .xs-chest { animation: none; } }
/* the price chart (site/fx-kline.js): candles over the coins traded, the latest at the right; rising hollow, falling filled */
.fx-kline { margin: 16px 0; border: var(--bw) solid var(--line2); background: var(--panel); border-radius: var(--radius); }
.fx-k-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fx-k-head h2 { margin: 0; font-size: 18px; font-weight: 400; }
.fx-k-head h2 small { margin-left: 6px; color: var(--fg3); font-size: 11px; }
.fx-k-spans { display: flex; gap: 4px; }
.fx-k-spans button { min-width: 44px; padding: 5px 10px; border: 1px solid var(--line2); background: none; color: var(--fg2); font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; border-radius: var(--radius); }
.fx-k-spans button:hover { color: var(--fg); border-color: var(--fg3); }
.fx-k-spans button.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.fx-k-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-height: 35px; margin: 0; padding: 9px 14px 4px; color: var(--fg3); font: 12px/1.6 var(--f-mono); font-variant-numeric: tabular-nums; }
.fx-k-read time { color: var(--fg2); }
.fx-k-read b { font-weight: 400; color: var(--fg); }
.fx-k-read .up b { color: var(--up); } .fx-k-read .down b { color: var(--down); }
.fx-k-plot { position: relative; height: clamp(280px, 30vw, 380px); margin: 0 0 8px; outline-offset: -2px; touch-action: pan-y; cursor: crosshair; }
.fx-k-plot.wait { opacity: .45; transition: opacity .2s; }
.fx-k-plot svg { display: block; }
.fx-k-plot .fx-none { position: absolute; inset: 0; display: grid; place-items: center; }
.fk-grid { stroke: var(--line); }
.fx-kline svg text { font: 11px var(--f-mono); font-variant-numeric: tabular-nums; fill: var(--fg2); }
.fk-up { stroke: var(--up); fill: var(--panel); }
.fk-down { stroke: var(--down); fill: var(--down); }
.fk-up.fk-solid { fill: var(--up); stroke: none; } .fk-down.fk-solid { stroke: none; }
.fk-flat { stroke: var(--fg3); }
.fk-vol-up { fill: var(--up); opacity: .4; } .fk-vol-down { fill: var(--down); opacity: .4; }
.fk-band { fill: var(--fg); opacity: .05; }
.fk-last { stroke: var(--accent); stroke-dasharray: 2 3; opacity: .7; }
.fk-last-tag rect { fill: var(--accent); } .fx-kline svg .fk-last-tag text { fill: var(--accent-ink); }
.fk-cross-line { stroke: var(--fg2); stroke-dasharray: 3 3; }
.fk-cross-tag rect { fill: var(--panel2); stroke: var(--fg2); } .fx-kline svg .fk-cross-tag text { fill: var(--fg); }
@media (max-width: 760px) {
  .fx-k-head { padding: 10px 12px; }
  .fx-k-read { padding: 8px 12px 4px; gap: 0 10px; }
  .fx-k-plot { height: 260px; }
}
@media (max-width: 760px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-trades { overflow-x: auto; }
  .fx-trades th:nth-child(n+5), .fx-trades td:nth-child(n+5) { display: none; }
}
@media (max-width: 640px) { .lm-fee { grid-template-columns: 1fr; } }
.lord-market .mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .lord-market .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* heroes in the market (its 2.0): a hero's grade in the grade's own colour; the kinds over the ranks or grades */
.lord-market, .rites { --g0: #9aa3ad; --g1: #d9e2ec; --g2: #f2c94c; --g3: #b48cff; }
.lm-grade { color: var(--g, var(--fg2)); border-color: color-mix(in srgb, var(--g, var(--line2)) 70%, transparent); }
.lm-grade.g0 { --g: var(--g0); } .lm-grade.g1 { --g: var(--g1); } .lm-grade.g2 { --g: var(--g2); }
.lm-grade.g3 { --g: var(--g3); box-shadow: 0 0 10px rgba(180, 140, 255, .45); }
/* agentwild.fun/fusion and /sacrifice: the rule drawn in the heroes' own art, the line for an agent, the latest on chain */
.rites { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rites > * { margin: 0; }
.rites .kicker { max-width: 62ch; }
.rt-tabs { margin-bottom: 4px; }
.rt-ladder { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rt-ladder li { position: relative; display: grid; grid-template-columns: auto auto auto; justify-content: center; grid-template-rows: auto auto; align-items: center; gap: 6px 10px; padding: 14px; background: var(--panel); border: 2px solid var(--line2); box-shadow: 4px 4px 0 #000; }
.rt-ladder li.g1 { --g: var(--g1); } .rt-ladder li.g2 { --g: var(--g2); } .rt-ladder li.g3 { --g: var(--g3); border-color: #6d4fb0; box-shadow: 4px 4px 0 #000, 0 0 34px rgba(180, 140, 255, .28); }
.rt-three { display: flex; }
.rt-three img + img { margin-left: -26px; }
.rt-sprite { width: 60px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; image-rendering: pixelated; border: 2px solid #000; background: #111; }
.rt-one .rt-sprite { width: 96px; border-color: var(--g); box-shadow: 0 0 22px color-mix(in srgb, var(--g) 55%, transparent); }
.rt-ladder b { grid-row: 2; font-weight: 400; font-size: 14px; color: var(--fg2); }
.rt-ladder b.rt-into { grid-column: 3; color: var(--g); font-size: 16px; }
.rt-arrow { width: 14px; height: 14px; border-top: 4px solid var(--g); border-right: 4px solid var(--g); transform: rotate(45deg); margin-right: 4px; }
.rt-to { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 2px; border-top: 2px solid var(--fg2); border-right: 2px solid var(--fg2); transform: rotate(45deg); }
.rt-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--fg2); font-size: 14px; }
.rt-rules li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; background: var(--accent); }
.rt-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rt-sacrifice .rt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rt-souls { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; padding: 16px; background: #0b0606; border: 2px solid #ff3b3b; box-shadow: 4px 4px 0 #000, 0 0 30px rgba(255, 59, 59, .18); }
.rt-souls h2 { margin: 0 0 10px; font-size: 18px; font-weight: 400; color: #ff5a4a; }
.rt-souls h2 + ol { margin-bottom: 18px; }
.rt-lord { margin: 0; }
.rt-lord img { width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #000; box-shadow: 0 0 40px rgba(255, 59, 59, .35); }
.rt-per { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rt-per li { display: grid; justify-items: center; gap: 4px; }
.rt-per li.g0 { --g: var(--g0); } .rt-per li.g1 { --g: var(--g1); } .rt-per li.g2 { --g: var(--g2); } .rt-per li.g3 { --g: var(--g3); }
.rt-per .rt-sprite { width: 64px; border-color: var(--g); }
.rt-per b { font-weight: 400; color: var(--g); }
.rt-per i { font-style: normal; color: #fff; font-size: 18px; }
.rt-curve { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rt-curve li { display: grid; grid-template-columns: 8ch minmax(0, 1fr) 7ch; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.rt-curve span { color: var(--fg2); font-size: 13px; }
.rt-curve svg { width: 100%; height: 10px; display: block; }
.rt-curve .bg { fill: #1d0d0b; } .rt-curve .fg { fill: #ff5a4a; }
.rt-curve b { font-weight: 400; color: #ffd77a; text-align: right; }
.rt-table .mk-thumb img { width: 32px; height: 40px; object-fit: cover; }
.rt-table .mk-item > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rt-ids span { margin-right: 8px; color: var(--fg2); text-decoration: line-through; text-decoration-color: #ff3b3b; }
.rt-given { white-space: nowrap; }
.rt-given .rt-n { margin: 0 10px 0 4px; color: var(--fg2); }
.rt-bonus { color: #ffd77a; }
@media (max-width: 860px) {
  .rt-ladder { grid-template-columns: 1fr; }
  .rt-stats, .rt-sacrifice .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-souls { grid-template-columns: 1fr; }
  .rt-lord { max-width: 160px; }
  .rt-table { display: block; overflow-x: auto; }
}
/* a fight's replay (site/world/replay.js): a pixel arena over the page, opened from the feed */
.wild-feed li.replayable { cursor: pointer; }
.wild-feed .rp-open { margin-left: 6px; padding: 1px 6px; border: 1px solid #ff6b3d; background: rgba(255, 107, 61, .12); color: #ff9a7a; font: 11px var(--f-ui); cursor: pointer; vertical-align: 1px; }
.wild-feed .rp-open:hover, .wild-feed .rp-open:focus-visible { background: #ff6b3d; color: #000; outline: none; }
.wild-replay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 8, .72); }
.rp-card { width: min(640px, 100%); background: #08080a; border: 3px solid #ff6b3d; box-shadow: 8px 8px 0 #000, 0 0 70px rgba(255, 107, 61, .35); font: 13px/1.4 var(--f-ui); color: #e6e6e6;
  animation: rp-in .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes rp-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.rp-card header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 16px; background: linear-gradient(180deg, rgba(255, 107, 61, .2), transparent); border-bottom: 2px solid #2a1410; }
.rp-card h3 { margin: 0; font-size: 22px; font-weight: 400; color: #ff8a5c; text-shadow: 3px 3px 0 #3a1408, 0 0 20px rgba(255, 107, 61, .5); letter-spacing: .04em; }
.rp-x { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid #3a3a3a; background: #000; color: #e6e6e6; cursor: pointer; }
.rp-x svg { width: 12px; height: 12px; }
.rp-x:hover, .rp-x:focus-visible { border-color: #ff6b3d; color: #ff6b3d; outline: none; }
.rp-stage { position: relative; }
.rp-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; image-rendering: pixelated; background: #0c1122; }
.rp-plate { position: absolute; top: 8px; width: 40%; display: grid; gap: 3px; padding: 6px 8px; background: rgba(0, 0, 0, .72); border: 2px solid #2a2a30; }
.rp-plate.l { left: 8px; } .rp-plate.r { right: 8px; text-align: right; }
.rp-plate b { font-size: 14px; font-weight: 400; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-plate span { min-height: 1em; font-size: 11px; color: #c9bf98; }
.rp-plate .rp-hp { position: relative; display: block; height: 8px; background: #2a1010; border: 1px solid #000; }
/* the trail: what a blow took, draining after the bar */
.rp-plate .rp-hp u { position: absolute; inset: 0 auto 0 0; display: block; width: 100%; background: #f2e6c4; transition: width .5s cubic-bezier(.16, 1, .3, 1) .28s; }
.rp-plate.r .rp-hp u { inset: 0 0 0 auto; }
.rp-plate .rp-hp em { position: relative; }
.rp-plate .rp-hp em { display: block; height: 100%; width: 100%; background: #5fd06a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.rp-plate.r .rp-hp em { margin-left: auto; }
/* the exchanges, one pip each: the one playing lit */
.rp-rounds { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.rp-rounds li { width: 6px; height: 6px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); }
.rp-rounds li.done { background: #c9bf98; border-color: #000; }
.rp-rounds li.now { background: #ff6b3d; border-color: #000; box-shadow: 0 0 8px rgba(255, 107, 61, .8); }
.rp-plate .rp-hp em.low { background: #ff4a3a; }
.rp-plate small { font-size: 11px; color: #a8a8a8; font-variant-numeric: tabular-nums; }
.rp-pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rp-pop { position: absolute; top: 52%; transform: translateX(-50%); font: 18px var(--f-ui); color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; animation: rp-rise 1.2s cubic-bezier(.16, 1, .3, 1) forwards; }
.rp-pop.crit { font-size: 26px; color: #ffd77a; text-shadow: 3px 3px 0 #3a2a00, 0 0 18px rgba(255, 215, 122, .8); }
.rp-pop.miss { color: #a8b8d0; } .rp-pop.shield { top: 40%; color: #7fe3ff; } .rp-pop.heal { color: #ff6a8a; } .rp-pop.thorns { top: 40%; color: #ff8a5c; } .rp-pop.falcon { color: #e8dcc8; } .rp-pop.ghost { color: #a6ffe0; text-shadow: 2px 2px 0 #0a2a20, 0 0 14px rgba(166, 255, 224, .7); }
@keyframes rp-rise { 0% { opacity: 0; translate: 0 8px; } 12% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -46px; } }
.rp-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 22px 6px; font: 30px var(--f-ui); letter-spacing: .12em; border: 3px solid #000;
  box-shadow: 6px 6px 0 #000; animation: rp-stamp .45s cubic-bezier(.16, 1, .3, 1); white-space: nowrap; }
.rp-banner.win { background: #fcd535; color: #000; box-shadow: 6px 6px 0 #000, 0 0 50px rgba(252, 213, 53, .7); }
.rp-banner.lose { background: #ff3b3b; color: #000; box-shadow: 6px 6px 0 #000, 0 0 50px rgba(255, 59, 59, .6); }
.rp-banner.even { background: #e6e6e6; color: #000; }
@keyframes rp-stamp { from { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
.rp-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 12px; border-top: 2px solid #1d1d22; }
.rp-log { margin: 0; min-height: 1.4em; color: #c9bf98; }
.rp-again { padding: 8px 16px 6px; border: 2px solid #000; background: #ff6b3d; color: #000; font: 14px var(--f-ui); cursor: pointer; box-shadow: 4px 4px 0 #000, 0 0 24px rgba(255, 107, 61, .5); white-space: nowrap; }
.rp-again:hover { background: #ff8a5c; }
.rp-acts { display: flex; gap: 10px; }
.rp-speed { min-width: 44px; padding: 8px 10px 6px; border: 2px solid #3a3a3a; background: #000; color: #e6e6e6; font: 14px var(--f-ui); cursor: pointer; }
.rp-speed:hover, .rp-speed:focus-visible { border-color: #ff6b3d; color: #ff8a5c; outline: none; }
.rp-speed.on { border-color: #fcd535; color: #fcd535; box-shadow: 0 0 14px rgba(252, 213, 53, .45); }
.rp-again:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) { .rp-plate b { font-size: 12px; } .rp-pop { font-size: 14px; } .rp-pop.crit { font-size: 19px; } .rp-banner { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .rp-card, .rp-banner, .rp-pop { animation-duration: .01s; } }
/* the recording view (?rec, world/rec.js; owner, 2026-11-04: "单独做一个录制视角"): the map alone, edge to edge, and each fight's
   replay large over it, no controls; the map stays in sight round the card */
body.wild-rec { overflow: hidden; --rec-side: 340px; }
body.wild-rec .top, body.wild-rec .wild-notice, body.wild-rec .wild-foot, body.wild-rec .wild-top, body.wild-rec .wild-mini,
body.wild-rec .wild-find, body.wild-rec .wild-follow, body.wild-rec .wild-dock, body.wild-rec .wild-ah-open, body.wild-rec .wild-ah, body.wild-rec .wild-speed,
body.wild-rec .wild-abyss-open, body.wild-rec .wild-hall-open, body.wild-rec .wild-lead, body.wild-rec .wild-start { display: none !important; }
/* the map, and the feed beside it ("战报这些还是要在右边常驻显示") */
body.wild-rec .wild { position: fixed; inset: 0; z-index: 50; grid-template-columns: minmax(0, 1fr) var(--rec-side); height: 100dvh; min-height: 0; border: 0; }
body.wild-rec .wild-canvas { cursor: default; }
@media (max-width: 900px) { body.wild-rec { --rec-side: 0px; } body.wild-rec .wild { grid-template-columns: 1fr; } body.wild-rec .wild-side { display: none; } }
.wild-replay.rec { right: var(--rec-side, 0px); background: radial-gradient(ellipse at center, rgba(4, 4, 8, .55), rgba(4, 4, 8, .15) 75%); pointer-events: none; }
.wild-replay.rec .rp-card { width: min(calc((100vw - var(--rec-side, 0px)) * .9), calc((100dvh - 200px) * 2)); font-size: 16px; }
.wild-replay.rec .rp-card header { padding: 12px 20px 10px; }
.wild-replay.rec .rp-card h3 { font-size: 30px; }
.wild-replay.rec .rp-x, .wild-replay.rec .rp-acts { display: none; }
.wild-replay.rec .rp-plate { gap: 5px; padding: 9px 12px; }
.wild-replay.rec .rp-plate b { font-size: 20px; }
.wild-replay.rec .rp-plate span, .wild-replay.rec .rp-plate small { font-size: 14px; }
.wild-replay.rec .rp-plate .rp-hp { height: 12px; }
.wild-replay.rec .rp-rounds li { width: 9px; height: 9px; }
.wild-replay.rec .rp-pop { font-size: 26px; } .wild-replay.rec .rp-pop.crit { font-size: 38px; }
.wild-replay.rec .rp-banner { font-size: 44px; padding: 10px 30px 8px; }
.wild-replay.rec .rp-card footer { min-height: 48px; padding: 12px 20px 14px; }
/* a rare piece on a poster: dropped, a column of its colour and the card falling into place; identified, the card sealed and
   blind, a light run over it, the seal breaking and its lines showing one by one */
.rec-find { position: fixed; inset: 0 var(--rec-side, 0px) 0 0; z-index: 310; display: grid; place-items: center; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc) 24%, transparent), rgba(4, 4, 8, .78) 68%); animation: rf-fade .5s ease-out both; transition: opacity .4s; }
.rec-find.out { opacity: 0; }
.rf-rays { position: absolute; left: 50%; top: 46%; width: 150vmax; height: 150vmax; translate: -50% -50%; opacity: .5;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 30%, transparent) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 42%); mask: radial-gradient(circle, #000 0 8%, transparent 42%); animation: rf-spin 16s linear infinite, rf-fade .9s ease-out both; }
.rf-card { position: relative; display: grid; justify-items: center; gap: 12px; animation: rf-drop .8s cubic-bezier(.2, 1.35, .45, 1) both; }
.rec-find.found .rf-card::before { content: ""; position: absolute; left: 50%; bottom: 40%; width: 120px; height: 100vh; translate: -50% 0; z-index: -1;
  background: linear-gradient(transparent, color-mix(in srgb, var(--rc) 70%, transparent) 70%, #fff); filter: blur(10px); animation: rf-beam 1.6s ease-out both; }
.rf-kicker { margin: 0; font: 18px var(--f-ui); color: #f2f2f2; letter-spacing: .06em; text-shadow: 2px 2px 0 #000; }
.rf-title { margin: 0; font: 46px/1.05 var(--f-display); letter-spacing: var(--display-ls); text-align: center; color: var(--rc); text-shadow: 4px 4px 0 #000, 0 0 30px var(--rc); }
.rf-gear.wild-gearcard { position: relative; width: min(360px, 80vw); color: var(--rc); font-size: 15px; box-shadow: 8px 8px 0 #000, 0 0 70px color-mix(in srgb, var(--rc) 55%, transparent); }
.rf-gear.wild-gearcard h4 { font-size: 22px; }
.rf-gear ul li, .rf-gear > p { animation: rf-line .35s ease-out both; }
.rf-gear ul li:nth-child(1) { animation-delay: .5s; } .rf-gear ul li:nth-child(2) { animation-delay: .65s; } .rf-gear ul li:nth-child(3) { animation-delay: .8s; }
.rf-gear ul li:nth-child(4) { animation-delay: .95s; } .rf-gear ul li:nth-child(5) { animation-delay: 1.1s; } .rf-gear ul li:nth-child(n+6) { animation-delay: 1.25s; }
.rec-find.read .rf-gear > :not(.rf-seal) { animation: rf-blind 1.9s steps(1, end) both; }
.rec-find.read .rf-gear ul li { animation-delay: calc(2s + var(--d, 0s)); }
.rec-find.read .rf-gear ul li:nth-child(2) { --d: .15s; } .rec-find.read .rf-gear ul li:nth-child(3) { --d: .3s; } .rec-find.read .rf-gear ul li:nth-child(4) { --d: .45s; } .rec-find.read .rf-gear ul li:nth-child(n+5) { --d: .6s; }
.rf-seal { position: absolute; inset: -2px; border: 2px solid var(--rc);
  background: repeating-linear-gradient(45deg, #0d0c12 0 10px, #15131c 10px 20px); box-shadow: inset 0 0 40px #000; animation: rf-unseal 2.1s ease-in both; }
.rf-seal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--rc) 80%, #fff) 50%, transparent 65%); background-size: 260% 100%; animation: rf-sweep 1.4s .2s ease-in-out both; }
@keyframes rf-fade { from { opacity: 0; } }
@keyframes rf-spin { to { rotate: 360deg; } }
@keyframes rf-drop { 0% { opacity: 0; transform: translateY(-60px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes rf-beam { 0% { opacity: 0; transform: scaleX(.2); } 25% { opacity: 1; transform: scaleX(1.2); } 100% { opacity: .35; transform: scaleX(.8); } }
@keyframes rf-line { from { opacity: 0; translate: -10px 0; } }
@keyframes rf-blind { 0% { filter: blur(6px) brightness(.35); } 100% { filter: none; } }
@keyframes rf-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes rf-unseal { 0%, 82% { opacity: 1; transform: none; } 90% { opacity: 1; transform: scale(1.04); filter: brightness(3); } 100% { opacity: 0; transform: scale(1.25); filter: brightness(4); } }
@media (prefers-reduced-motion: reduce) { .rec-find, .rf-rays, .rf-card, .rf-card::before, .rf-gear, .rf-gear li, .rf-seal, .rf-seal::after { animation-duration: .01s !important; animation-delay: 0s !important; } }
/* the town's keepers (world/voxel.js NPCS): their names in gold, apart from the agents' */
.wild-tag.npc .n { color: #ffd77a; border: 1px solid rgba(232, 197, 71, .45); }
/* the Abyss Expedition (world/abyss.js): a window over the world like the trading post; a floor seen from the side, the
   tower's floors at its side, the squad below; the abyss's violet, the seal's gold */
.wild-abyss-open { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 14px 6px; border: 2px solid #000;
  background: #9b3cff; color: #fff; font-size: 15px; cursor: pointer; box-shadow: 4px 4px 0 #000, 0 0 26px rgba(155, 60, 255, .6); animation: ab-call 2.8s ease-in-out infinite; }
.wild-abyss-open svg { width: 12px; height: 14px; }
.wild-abyss-open:hover { background: #b45bff; }
.wild-abyss-open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wild.abyss-on .wild-abyss-open, .wild.ah-on .wild-abyss-open, .wild.abyss-on .wild-ah-open { display: none; }
@keyframes ab-call { 50% { box-shadow: 4px 4px 0 #000, 0 0 40px rgba(199, 125, 255, .85); } }
.wild-abyss { position: absolute; inset: 22px; z-index: 21; display: grid; grid-template-rows: auto minmax(0, 1fr) auto minmax(96px, 26%); background: #07050c; border: 3px solid #9b3cff;
  box-shadow: 8px 8px 0 #000, 0 0 70px rgba(155, 60, 255, .3); color: #e6e6e6; font-family: var(--f-ui); font-size: 13px; }
.wild-abyss[hidden] { display: none; }
.wild-abyss ::selection { background: #9b3cff; color: #fff; }
.ab-head { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 12px 8px 18px; border-bottom: 2px solid #1e1230; background: linear-gradient(180deg, rgba(155, 60, 255, .18), transparent); }
.ab-head h2 { flex: none; margin: 0; font-weight: 400; font-size: 26px; color: #e6ccff; text-shadow: 3px 3px 0 #2a0c3a, 0 0 24px rgba(199, 125, 255, .6); }
.ab-runs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ab-runs button { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 9px 3px; border: 2px solid #2a1c40; background: #000; color: #cfc2e6; font: 13px var(--f-ui); cursor: pointer; }
.ab-runs button em { font-style: normal; color: #c77dff; }
.ab-runs button[aria-pressed="true"] { border-color: #c77dff; color: #fff; background: #1c0c30; }
.ab-runs button:hover, .ab-runs button:focus-visible { border-color: #c77dff; outline: none; }
.ab-live { width: 6px; height: 6px; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: ab-blink 1.2s steps(2) infinite; }
@keyframes ab-blink { 50% { opacity: .25; } }
.ab-none { color: #8a7fa0; font-size: 13px; white-space: nowrap; }
.ab-x { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #3a3a3a; background: #000; color: #e6e6e6; cursor: pointer; }
.ab-x svg { width: 14px; height: 14px; }
.ab-x:hover, .ab-x:focus-visible { border-color: #c77dff; color: #c77dff; outline: none; }
.ab-body { display: grid; grid-template-columns: minmax(0, 1fr) 72px; min-height: 0; }
.ab-view { container-type: size; display: grid; place-items: center; min-height: 0; padding: 10px; background: #040308; }
.ab-room { position: relative; width: min(100cqw, 100cqh * 384 / 176); aspect-ratio: 384 / 176; border: 2px solid #1e1230; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); overflow: hidden; }
.ab-room canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.ab-hud { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
@container (max-width: 560px) { .ab-hud { align-items: flex-start; gap: 6px; } .ab-stages { position: absolute; right: 0; top: calc(100% + 4px); } }   /* under the clock: clear of the floor's banner and the squad */
.ab-floor { font-weight: 400; font-size: clamp(14px, 2.2cqw, 22px); color: #fff; text-shadow: 2px 2px 0 #000, 0 0 14px rgba(199, 125, 255, .7); }
.ab-stages { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ab-stages li { padding: 2px 6px 1px; border: 1px solid #2a1c40; background: rgba(0, 0, 0, .7); color: #6f6584; font-size: clamp(10px, 1.3cqw, 13px); }
.ab-stages li.done { color: #c77dff; border-color: #4a2a70; }
.ab-stages li.on { color: #000; background: #c77dff; border-color: #e6ccff; }
.ab-stages li.boss.on { background: #ff3b3b; border-color: #ffb0b0; color: #fff; }
.ab-clock { margin-left: auto; padding: 2px 6px 1px; background: rgba(0, 0, 0, .7); color: #e6ccff; font-size: clamp(10px, 1.3cqw, 13px); font-variant-numeric: tabular-nums; }
.ab-speed { position: absolute; right: 8px; bottom: 8px; min-width: 38px; padding: 3px 6px 1px; border: 2px solid #2a1c40; background: rgba(0, 0, 0, .75); color: #e6ccff; font: 13px var(--f-ui); cursor: pointer; }
.ab-speed:hover, .ab-speed:focus-visible { border-color: #c77dff; outline: none; }
.ab-pops { position: absolute; inset: 0; pointer-events: none; }
.ab-pops b { position: absolute; transform: translateX(-50%); font-weight: 400; font-size: clamp(11px, 1.7cqw, 18px); color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; animation: ab-rise .9s cubic-bezier(.16, 1, .3, 1) forwards; }
.ab-pops .crit { font-size: clamp(14px, 2.4cqw, 24px); color: #ffd77a; text-shadow: 2px 2px 0 #3a2a00, 0 0 14px rgba(255, 215, 122, .8); }
.ab-pops .cleave { color: #ffb070; } .ab-pops .hurt { color: #ff6a6a; } .ab-pops .down { color: #fff; background: #a8182e; padding: 0 4px; text-shadow: none; }
.ab-pops .held { color: #ffe36e; text-shadow: 2px 2px 0 #3a2a00; } .ab-pops .heal { color: #7ff09a; } .ab-pops .ghost { color: #a6ffe0; text-shadow: 2px 2px 0 #0a2a20, 0 0 12px rgba(166, 255, 224, .7); }
@keyframes ab-rise { 0% { opacity: 0; translate: 0 6px; } 14% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -34px; } }
.ab-banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font-size: clamp(16px, 4cqw, 40px); color: #e6ccff; white-space: nowrap; pointer-events: none;
  text-shadow: 3px 3px 0 #000, 0 0 24px rgba(199, 125, 255, .9); animation: ab-slam .5s cubic-bezier(.16, 1, .3, 1); }
.ab-banner.warn { color: #ffd77a; text-shadow: 3px 3px 0 #000, 0 0 24px rgba(255, 170, 60, .9); }
.ab-banner.bad { color: #ff8a8a; text-shadow: 3px 3px 0 #000, 0 0 24px rgba(255, 59, 59, .9); }
.ab-banner.won { color: #ffe07a; text-shadow: 3px 3px 0 #3a2a00, 0 0 28px rgba(255, 215, 122, .95); }
@keyframes ab-slam { from { opacity: 0; scale: 1.6; filter: blur(3px); } }
.ab-tower { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a2a50 transparent; border-left: 2px solid #1e1230; background: #0a0712; }
.ab-tower ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 8px 10px; list-style: none; }
.ab-tower li { position: relative; display: grid; place-items: center; height: 20px; background: #17111f; border: 1px solid #241a32; color: #5f5674; font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-tower li.seal { border-color: #4a3a12; color: #8a7a3a; }
.ab-tower li.done { background: #2a1448; border-color: #6a3aa8; color: #e6ccff; }
.ab-tower li.seal.done { background: #3a2a08; border-color: #b8952a; color: #ffe07a; }
.ab-tower li.on { background: #9b3cff; border-color: #fff; color: #fff; box-shadow: 0 0 16px rgba(199, 125, 255, .9); }
.ab-here { position: absolute; left: -7px; top: 6px; width: 5px; height: 7px; background: #fcd535; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ab-squad { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 8px 10px; list-style: none; border-top: 2px solid #1e1230; background: #0a0712; }
.ab-squad li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 6px; align-items: center; padding: 5px 6px; background: #120c1c;
  border: 1px solid #241a32; border-top: 2px solid var(--g); }
.ab-squad li.lead { border-color: #6a5a1a; border-top-color: #fcd535; background: #1a1608; }
.ab-squad img { grid-row: span 2; width: 24px; height: 32px; image-rendering: pixelated; }
.ab-who { display: grid; min-width: 0; line-height: 1.15; }
.ab-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 12px; color: #fff; }
.ab-who em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 11px; color: #a89cc0; }
.ab-hp { display: block; height: 5px; background: #2a1010; border: 1px solid #000; }
.ab-hp u { display: block; height: 100%; background: #5fd06a; transition: width .4s cubic-bezier(.16, 1, .3, 1); }
.ab-squad li.lead .ab-hp u { background: #fcd535; }
.ab-squad li.down { filter: grayscale(1); opacity: .55; }
.ab-squad li strong { position: absolute; right: 4px; top: -7px; padding: 0 3px; background: #a8182e; color: #fff; font-weight: 400; font-size: 10px; }
.ab-foot { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-top: 2px solid #1e1230; text-align: left; }
.ab-tabs { display: flex; gap: 2px; padding: 6px 10px 0; }
.ab-tabs button { padding: 6px 12px 4px; border: 2px solid transparent; border-bottom: 0; background: none; color: #8a7fa0; font: 14px var(--f-ui); cursor: pointer; }
.ab-tabs button[aria-selected="true"] { color: #fff; background: #140c20; border-color: #2a1c40; }
.ab-tabs button:hover, .ab-tabs button:focus-visible { color: #e6ccff; outline: none; }
.ab-pane { min-height: 0; overflow-y: auto; padding: 8px 10px 10px; background: #140c20; scrollbar-width: thin; scrollbar-color: #3a2a50 transparent; font-family: var(--f-body); font-size: 12px; }
.ab-pane h4 { margin: 10px 0 6px; font: 400 14px var(--f-ui); color: #c77dff; }
.ab-pane h4:first-child { margin-top: 2px; }
.ab-empty { margin: 4px 0; color: #a89cc0; }
.ab-fights { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.ab-fights button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0 8px; align-items: baseline; padding: 6px 8px 4px; border: 1px solid #2a1c40; background: #07050c; color: #e6e6e6; text-align: left; font: 13px var(--f-ui); cursor: pointer; }
.ab-fights b { font-weight: 400; color: #e6ccff; }
.ab-fights span { color: #a89cc0; }
.ab-fights em { font-style: normal; font-size: 12px; white-space: nowrap; } .ab-fights em.won { color: #ffe07a; } .ab-fights em.lost { color: #ff8a8a; }
.ab-fights i { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: #c77dff; }
.ab-fights button:hover, .ab-fights button:focus-visible { border-color: #c77dff; background: #1c0c30; outline: none; }
.ab-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-rank, .ab-list, .ab-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.ab-rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 4px 6px; background: #07050c; }
.ab-rank li b { font: 400 13px var(--f-ui); color: #c77dff; } .ab-rank li:first-child b { color: #ffe07a; }
.ab-rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ab-rank em { font-style: normal; color: #e6ccff; font-variant-numeric: tabular-nums; } .ab-rank i { font-style: normal; color: #8a7fa0; }
.ab-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .ab-list span { color: #a89cc0; }
.ab-list button { padding: 0; border: 0; background: none; color: #e6ccff; font: 13px var(--f-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #6a3aa8; }
.ab-list button:hover, .ab-list button:focus-visible { color: #fff; outline: none; }
.ab-sum { display: flex; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.ab-sum li { display: grid; min-width: 76px; padding: 6px 10px 4px; background: #07050c; border: 1px solid #2a1c40; color: #a89cc0; font: 12px var(--f-ui); }
.ab-sum b { font-weight: 400; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.ab-items li { padding: 3px 8px; border-left: 2px solid var(--r); color: var(--r); background: #07050c; }
/* the posters: a floor cleared, a climb ended */
.ab-poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(60, 20, 100, .78), rgba(4, 2, 8, .92) 70%); animation: ab-fade .35s ease-out; }
.ab-poster[hidden] { display: none; }
/* the level milestone poster over the stage (wild.js levelPoster): bronze, silver, gold by the pack's level */
.lv-poster { --m: #e09a5a; --d: #3a1e08; position: absolute; inset: 0; z-index: 40; container-type: size; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--m) 26%, rgba(8, 6, 4, .74)), rgba(4, 3, 2, .92) 70%); animation: ab-fade .35s ease-out; }
.lv-poster[hidden] { display: none; }
.lv-poster.t2 { --m: #d7dde6; --d: #1c2230; } .lv-poster.t3 { --m: #fcd535; --d: #3a2a00; }
.lv-plate { display: grid; justify-items: center; gap: clamp(4px, 1.4cqh, 10px); max-width: min(94%, 560px); text-align: center; animation: ab-slam .55s cubic-bezier(.16, 1, .3, 1); }
.lv-art { position: relative; display: grid; place-items: center; height: clamp(60px, 22cqh, 150px); aspect-ratio: 8 / 9; }
.lv-art svg { position: relative; height: 100%; width: auto; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--m) 80%, transparent)); animation: ab-crumble 2.4s ease-in-out infinite; }
.lv-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(color-mix(in srgb, var(--m) 30%, transparent) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); animation: lv-spin 16s linear infinite; }
@keyframes lv-spin { to { rotate: 1turn; } }
.lv-plate h3 { margin: 0; font-weight: 400; font-size: clamp(26px, 9cqh, 56px); line-height: 1.05; color: var(--m); text-shadow: 3px 3px 0 var(--d), 0 0 30px color-mix(in srgb, var(--m) 80%, transparent); }
.lv-sub { margin: 0; font-size: clamp(13px, 2.6cqh, 18px); color: #f2ece0; }
.lv-coins { margin: 0; color: #ffe07a; font: 13px var(--f-ui); } .lv-coins b { font-weight: 400; font-size: clamp(18px, 4cqh, 26px); font-variant-numeric: tabular-nums; }
.lv-loot, .lv-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lv-loot li { display: flex; align-items: baseline; gap: 5px; padding: 4px 8px 3px; background: rgba(0, 0, 0, .62); border: 1px solid color-mix(in srgb, var(--m) 40%, #222); color: #ddd; font: 12px var(--f-ui); }
.lv-loot b { font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.lv-perks li { padding: 4px 10px 3px; background: rgba(0, 0, 0, .62); border: 1px solid var(--m); color: var(--m); font: 12px var(--f-ui); }
@media (prefers-reduced-motion: reduce) { .lv-rays, .lv-art svg, .lv-plate { animation: none; } }
@media (max-width: 760px) { .lv-poster { position: fixed; z-index: 320; } }
/* an invitation dropped (wild.js invitePoster): the level poster's plate, a sealed letter, the place's colour */
.lv-poster.inv.fog { --m: #8fe3d0; --d: #062a24; } .lv-poster.inv.abyss { --m: #c39bff; --d: #24083f; }
.lv-poster.inv .lv-art { aspect-ratio: 9 / 8; }
.lv-poster.inv h3 { text-wrap: balance; }
.inv-name { font-weight: 400; } .inv-name.fog { color: #8fe3d0; } .inv-name.abyss { color: #c39bff; }   /* on a phone, over the whole screen like the Abyss's */
.ab-poster.seal { background: radial-gradient(circle at 50% 45%, rgba(90, 64, 10, .8), rgba(6, 4, 0, .93) 70%); }
.ab-poster.bad { background: radial-gradient(circle at 50% 45%, rgba(90, 14, 20, .8), rgba(6, 2, 2, .93) 70%); }
@keyframes ab-fade { from { opacity: 0; } }
.ab-plate { display: grid; justify-items: center; gap: clamp(2px, 1cqw, 8px); max-width: 92%; text-align: center; animation: ab-slam .55s cubic-bezier(.16, 1, .3, 1); }
.ab-art { position: relative; display: grid; place-items: center; height: clamp(40px, 20cqw, 132px); }
.ab-art img { position: relative; height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(199, 125, 255, .9)); animation: ab-crumble 2.4s ease-in-out infinite; }
.ab-poster.seal .ab-art img { filter: drop-shadow(0 0 14px rgba(255, 215, 122, .95)); }
.ab-glow { position: absolute; inset: -30% -60%; background: radial-gradient(closest-side, rgba(199, 125, 255, .55), transparent); animation: ab-pulse 2.4s ease-in-out infinite; }
.ab-poster.seal .ab-glow { background: radial-gradient(closest-side, rgba(255, 215, 122, .55), transparent); }
@keyframes ab-pulse { 50% { opacity: .55; scale: 1.15; } }
@keyframes ab-crumble { 50% { translate: 0 -3px; } }
.ab-mini { position: relative; height: 100%; width: auto; }
.ab-plate h3 { margin: 0; font-weight: 400; font-size: clamp(20px, 5.4cqw, 50px); line-height: 1.05; color: #ffe07a; text-shadow: 3px 3px 0 #3a2a00, 0 0 30px rgba(255, 215, 122, .9); }
.ab-poster:not(.seal):not(.bad) .ab-plate h3 { color: #f2e2ff; text-shadow: 3px 3px 0 #2a0c3a, 0 0 30px rgba(199, 125, 255, .95); }
.ab-poster.bad .ab-plate h3 { color: #ffd0d0; text-shadow: 3px 3px 0 #3a0808, 0 0 30px rgba(255, 59, 59, .9); }
.ab-sub { margin: 0; font-size: clamp(12px, 2cqw, 18px); color: #e6ccff; }
.ab-loot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ab-loot li { padding: 2px 8px 1px; border: 1px solid var(--r); color: var(--r); background: rgba(0, 0, 0, .6); font-size: clamp(11px, 1.6cqw, 14px); box-shadow: 0 0 12px color-mix(in srgb, var(--r) 45%, transparent); }
.ab-plate .ab-sum { margin: 0; } .ab-plate .ab-sum li { background: rgba(0, 0, 0, .6); }
.ab-cta { margin-top: 4px; padding: 8px 18px 6px; border: 2px solid #000; background: #fcd535; color: #000; font: clamp(13px, 1.8cqw, 17px) var(--f-ui); cursor: pointer;
  box-shadow: 4px 4px 0 #000, 0 0 26px rgba(252, 213, 53, .7); animation: ab-call 2.4s ease-in-out infinite; }
.ab-cta:hover { background: #ffe066; } .ab-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .wild-abyss-open { left: auto; right: 10px; bottom: 50px; transform: none; font-size: 13px; padding: 6px 10px 4px; }
  .wild-abyss { position: fixed; inset: 0; z-index: 200; grid-template-rows: auto auto auto minmax(150px, 1fr); border-width: 2px; }
  .ab-head { flex-wrap: wrap; gap: 8px 10px; padding: 8px 8px 6px 12px; }
  .ab-head h2 { font-size: 20px; }
  .ab-runs { order: 3; flex-basis: 100%; }
  .ab-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .ab-view { container-type: inline-size; padding: 6px; }
  .ab-room { width: 100%; }
  .ab-tower { border-left: 0; border-top: 2px solid #1e1230; overflow-x: auto; overflow-y: hidden; }
  .ab-tower ol { flex-direction: row-reverse; justify-content: flex-end; width: max-content; padding: 6px 8px; }
  .ab-tower li { width: 26px; height: 22px; }
  .ab-here { left: 9px; top: -6px; width: 7px; height: 5px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .ab-squad { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; gap: 3px; }
  .ab-squad li { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 4px 3px; text-align: center; }
  .ab-squad img { grid-row: auto; width: 18px; height: 24px; }
  .ab-who b { font-size: 11px; } .ab-who em { font-size: 10px; }
  .ab-hp { width: 100%; }
  .ab-boards { grid-template-columns: 1fr; }
  .ab-poster { position: fixed; inset: 0; z-index: 5; }
  .ab-art { height: 150px; }
  .ab-plate { gap: 8px; }
  .ab-plate h3 { font-size: 34px; } .ab-sub { font-size: 16px; } .ab-loot li { font-size: 13px; } .ab-cta { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wild-abyss-open, .ab-cta, .ab-live, .ab-glow, .ab-art img { animation: none; } .ab-banner, .ab-plate, .ab-poster, .ab-pops b { animation-duration: .01s; } }
/* the start page (agentwild.fun/start, site/start.js): one question at a time, then the route's poster and the prompt */
.start-page { --g0: #9aa3ad; display: grid; gap: 22px; max-width: 1040px; margin: 0 auto; padding: 28px 0 40px; }
.start-head h1 { margin: 0; font-size: clamp(40px, 5.4vw, 72px); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00, 0 0 48px rgba(252, 213, 53, .25); }
.start-head p { margin: 12px 0 0; max-width: 52ch; color: var(--fg); font-size: 16px; line-height: 1.6; }
.start-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.start-steps li { flex: 1; max-width: 72px; height: 10px; background: #1d1d22; border: 1px solid #2a2a30; }
.start-steps li.done { background: var(--accent); border-color: var(--accent); }
.start-steps li.now { background: #5a4c10; border-color: var(--accent); }
.start-q { display: grid; gap: 18px; padding: 28px 28px 22px; background: #08080a; border: 3px solid var(--accent); box-shadow: 8px 8px 0 #000, 0 0 60px rgba(252, 213, 53, .14); }
.start-n { margin: 0; color: #8a8f9c; font-size: 13px; font-variant-numeric: tabular-nums; }
.start-q h2 { margin: -10px 0 4px; font-weight: 400; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; color: #f2f2f2; }
.start-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.start-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start-tile { display: grid; align-content: center; gap: 6px; min-height: 104px; padding: 16px 18px; border: 2px solid #2a2a30; background: #000; color: #f2f2f2; text-align: left; cursor: pointer;
  transition: border-color .15s, transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .15s; }
.start-tile b { font-weight: 400; font-size: 20px; line-height: 1.2; }
.start-tile span { color: #a8a8a8; font-size: 13px; line-height: 1.4; }
.start-tile:hover, .start-tile:focus-visible { border-color: var(--accent); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); outline: none; }
.start-tile.on { border-color: var(--accent); background: var(--accent); color: #000; }
.start-tile.on span { color: #3a2f00; }
.start-count { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.start-count button { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #2a2a30; background: #000; color: #f2f2f2; font-size: 22px; cursor: pointer;
  transition: border-color .15s, transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .15s; }
.start-count button:hover, .start-count button:focus-visible { border-color: var(--accent); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); outline: none; }
.start-count button.lit { background: #2a2410; border-color: #5a4c10; }
.start-count button.on { background: var(--accent); border-color: var(--accent); color: #000; }
.start-wallet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 1px solid #1d1d22; }
.start-wallet label { color: #a8a8a8; font-size: 13px; }
.start-wallet input, .start-tag input { height: 38px; padding: 0 12px; border: 2px solid #333; background: #000; color: #f2f2f2; font: 14px var(--f-body); caret-color: var(--accent); }
.start-wallet input:focus, .start-tag input:focus { border-color: var(--accent); outline: none; }
.start-wallet button, .start-tag button { height: 38px; padding: 0 18px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 15px; cursor: pointer; box-shadow: 4px 4px 0 #000; }
.start-wallet button:disabled { opacity: .6; cursor: progress; }
.start-wallet p { grid-column: 2 / -1; margin: 0; min-height: 1.2em; color: var(--accent); font-size: 13px; }
.start-tag { display: flex; gap: 10px; }
.start-tag input { flex: 0 1 260px; text-transform: uppercase; letter-spacing: .08em; }
.start-back { justify-self: start; padding: 6px 0; border: 0; background: none; color: #8a8f9c; font-size: 14px; cursor: pointer; }
.start-back:hover, .start-back:focus-visible { color: var(--accent); outline: none; }
.start-result { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding: 36px 32px; overflow: hidden;
  background: radial-gradient(60% 70% at 24% 50%, rgba(252, 213, 53, .16), transparent 70%), #08080a; border: 3px solid var(--accent); box-shadow: 8px 8px 0 #000, 0 0 70px rgba(252, 213, 53, .18); }
.start-result.r-F, .start-result.r-E { background: radial-gradient(60% 70% at 24% 50%, rgba(155, 60, 255, .2), transparent 70%), #08080a; }
.start-art { position: relative; height: 380px; }
.start-art img { position: absolute; left: 50%; top: 50%; width: 220px; height: auto; image-rendering: pixelated; border: 3px solid #000; box-shadow: 6px 6px 0 #000;
  transform: translate(-50%, -50%) translateX(calc(var(--i) * 46px)) rotate(calc(var(--i) * 5deg)); animation: start-deal .7s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc((var(--i) + 3) * 60ms); }
.start-art.n1 img { width: 260px; transform: translate(-50%, -50%) rotate(-3deg); }
.start-art.n5 img, .start-art.n7 img { width: 190px; transform: translate(-50%, -50%) translateX(calc(var(--i) * 34px)) rotate(calc(var(--i) * 5deg)); }
@keyframes start-deal { from { opacity: 0; transform: translate(-50%, -30%) rotate(0deg) scale(.9); } }
.start-route { position: relative; z-index: 1; display: grid; gap: 12px; min-width: 0; }
.start-route h2 { margin: 0; font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--accent); text-shadow: 5px 5px 0 #3a2f00, 0 0 40px rgba(252, 213, 53, .35); }
.start-route > p { margin: 0 0 8px; color: var(--fg); font-size: 16px; line-height: 1.55; }
.start-route h3 { margin: 6px 0 0; font-weight: 400; font-size: 15px; color: #a8a8a8; }
.start-prompt { margin: 0; max-height: 300px; overflow: auto; padding: 14px 16px; border: 2px solid #333; background: #000; color: #e6e6e6; font: 13px/1.65 var(--f-body); white-space: pre-wrap; word-break: break-word;
  scrollbar-width: thin; scrollbar-color: #444 transparent; }
.start-prompt::selection, .start-prompt *::selection { background: var(--accent); color: #000; }
.start-prompt:focus-visible { border-color: var(--accent); outline: none; }
.start-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.start-copy { padding: 12px 24px 10px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 18px; cursor: pointer; box-shadow: 4px 4px 0 #000, 0 0 28px rgba(252, 213, 53, .5); }
.start-copy:hover { background: #ffe066; }
.start-copy:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.start-copy.ok { background: #0ecb81; }
.wild-start { display: block; margin: 16px 20px 0 16px; padding: 10px 14px 8px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 15px; text-align: center; box-shadow: 4px 4px 0 #000; }
.wild-start:hover { background: #ffe066; color: #000; }
@media (prefers-reduced-motion: reduce) { .start-art img { animation: none; } .start-tile, .start-count button { transition: none; } }
@media (max-width: 760px) {
  .start-page { padding: 16px 0 28px; gap: 16px; }
  .start-q { padding: 20px 16px 16px; }
  .start-tiles, .start-tiles.three { grid-template-columns: minmax(0, 1fr); }
  .start-tile { min-height: 72px; padding: 12px 14px; }
  .start-count { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .start-wallet { grid-template-columns: minmax(0, 1fr) auto; }
  .start-wallet label { grid-column: 1 / -1; }
  .start-wallet p { grid-column: 1 / -1; }
  .start-result { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 20px; }
  .start-art { height: 240px; }
  .start-art img { width: 140px; transform: translate(-50%, -50%) translateX(calc(var(--i) * 26px)) rotate(calc(var(--i) * 5deg)); }
  .start-art.n1 img { width: 170px; }
  .start-art.n5 img, .start-art.n7 img { width: 130px; transform: translate(-50%, -50%) translateX(calc(var(--i) * 22px)) rotate(calc(var(--i) * 5deg)); }
}
/* the wiki for humans (agentwild.fun/wiki, pages.js wikiPage): the game's entries and the agents' pages, read only */
.wiki-page { display: grid; gap: 22px; max-width: 1080px; margin: 0 auto; padding: 28px 0 40px; }
.wiki-head { display: grid; gap: 12px; }
.wiki-head h1 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; color: var(--accent); text-shadow: 5px 5px 0 #3a2f00, 0 0 40px rgba(252, 213, 53, .22); overflow-wrap: anywhere; }
.wiki-head > p:not(.wiki-crumb):not(.wiki-disputed) { margin: 0; max-width: 60ch; color: var(--fg); font-size: 16px; line-height: 1.6; }
.wiki-crumb { margin: 0; color: #8a8f9c; font: 14px var(--f-ui); }
.wiki-crumb a { color: #cfcfcf; }
.wiki-crumb a:hover, .wiki-crumb a:focus-visible { color: var(--accent); }
.wiki-find { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 44px; padding: 0 4px 0 12px; background: #000; border: 2px solid #333; color: #8a8f9c; box-shadow: 4px 4px 0 #000; }
.wiki-find:focus-within { border-color: var(--accent); color: var(--accent); }
.wiki-find svg { flex: none; }
.wiki-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #f2f2f2; font: 15px var(--f-body); caret-color: var(--accent); outline: none; }
.wiki-find input::placeholder { color: #8a8f9c; }
.wiki-find input::-webkit-search-cancel-button { display: none; }
.wiki-find button { flex: none; height: 32px; padding: 0 16px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 15px; cursor: pointer; }
.wiki-find button:hover { background: #ffe066; }
.wiki-find button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.wiki-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wiki-cats a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border: 2px solid #2a2a30; background: #000; color: #f2f2f2;
  transition: border-color .15s, transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .15s; }
.wiki-cats b { font-weight: 400; font-size: 16px; }
.wiki-cats i { font-style: normal; color: #8a8f9c; font: 13px var(--f-ui); font-variant-numeric: tabular-nums; }
.wiki-cats a:hover, .wiki-cats a:focus-visible { border-color: var(--accent); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); outline: none; }
.wiki-cats a.on { border-color: var(--accent); background: var(--accent); color: #000; }
.wiki-cats a.on i { color: #3a2f00; }
.wiki-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #1d1d22; }
.wiki-list li { border-bottom: 1px solid #1d1d22; }
.wiki-list a { display: grid; gap: 4px; padding: 12px 4px; color: inherit; }
.wiki-list b { color: #f2f2f2; font: 17px var(--f-ui); font-weight: 400; }
.wiki-list span { color: #a8a8a8; font-size: 14px; line-height: 1.5; max-width: 90ch; }
.wiki-list a:hover b, .wiki-list a:focus-visible b { color: var(--accent); }
.wiki-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wiki-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.wiki-main { display: grid; gap: 18px; min-width: 0; }
.wiki-side { position: sticky; top: 16px; display: grid; gap: 14px; }
.wiki-side .wiki-cats { grid-template-columns: 1fr 1fr; gap: 6px; }
.wiki-side .wiki-cats a { padding: 8px 10px 6px; }
.wiki-side .wiki-cats b { font-size: 14px; }
.wiki-block { display: grid; gap: 12px; padding: 22px 24px; background: #08080a; border: 2px solid #2a2a30; }
.wiki-facts { border: 3px solid var(--accent); box-shadow: 8px 8px 0 #000, 0 0 50px rgba(252, 213, 53, .12); }
.wiki-block h2 { margin: 0; font-weight: 400; font-size: 20px; color: var(--accent); }
.wiki-facts ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wiki-facts li { position: relative; padding-left: 18px; color: #e6e6e6; font-size: 15px; line-height: 1.6; }
.wiki-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--accent); }
.wiki-page code { padding: 1px 6px; background: #000; border: 1px solid #333; color: #ffd77a; font: 13px var(--f-body); white-space: normal; overflow-wrap: anywhere; }
.wiki-body p { margin: 0; color: #e6e6e6; font-size: 15px; line-height: 1.7; max-width: 72ch; }
.wiki-body .wiki-by, .wiki-notes span, .wiki-votes span { color: #8a8f9c; font: 13px var(--f-ui); }
.wiki-notes, .wiki-votes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.wiki-notes li, .wiki-votes li { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid #1d1d22; }
.wiki-notes li:last-child, .wiki-votes li:last-child { padding-bottom: 0; border-bottom: 0; }
.wiki-notes p, .wiki-votes p { margin: 0; color: #e6e6e6; font-size: 15px; line-height: 1.6; }
.wiki-notes a { color: #cfcfcf; text-decoration: underline dotted; text-underline-offset: 3px; }
.wiki-votes b { justify-self: start; padding: 3px 8px 1px; background: #1d1d22; color: #f2f2f2; font-weight: 400; font-size: 13px; }
.wiki-disputed { justify-self: start; margin: 0; padding: 8px 12px 6px; border: 2px solid #ff5a4a; background: #1a0807; color: #ff8a7e; font-size: 14px; }
.wiki-page ::selection { background: var(--accent); color: #000; }
/* an entry's history: each change, the version being read marked; an earlier version stands in a dashed frame */
.wiki-hist li.on { margin: 0 -10px; padding: 10px 10px 14px; background: #15140c; }
.wiki-hist li.on b { background: var(--accent); color: #000; }
.wiki-hist a, .wiki-by a { color: #cfcfcf; text-decoration: underline dotted; text-underline-offset: 3px; }
.wiki-hist a:hover, .wiki-by a:hover, .wiki-more:hover { color: var(--accent); }
.wiki-hist a:focus-visible, .wiki-by a:focus-visible, .wiki-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-more { justify-self: start; color: #cfcfcf; font: 14px var(--f-ui); text-decoration: underline dotted; text-underline-offset: 3px; }
.wiki-old { border: 2px dashed var(--accent); background: #0c0b06; }
/* the wiki's bug reports: the entry on its home, the list by status, one report */
.bug-entry { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border: 3px solid #ff5a4a; background: #120605; color: #f2f2f2;
  box-shadow: 6px 6px 0 #000; transition: transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .15s; }
.bug-entry b { font-weight: 400; font-size: 20px; color: #ff8a7e; }
.bug-entry span { color: #e6e6e6; font: 14px var(--f-ui); }
.bug-entry:hover, .bug-entry:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000, 0 0 30px rgba(255, 90, 74, .25); outline: none; }
.bug-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bug-tabs a { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px 6px; border: 2px solid #2a2a30; background: #000; color: #e6e6e6; font: 15px var(--f-ui); }
.bug-tabs a i { font-style: normal; color: #8a8f9c; font-variant-numeric: tabular-nums; }
.bug-tabs a:hover, .bug-tabs a:focus-visible { border-color: var(--accent); outline: none; }
.bug-tabs a.on { background: var(--accent); border-color: var(--accent); color: #000; }
.bug-tabs a.on i { color: #3a2f00; }
.bug-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #1d1d22; }
.bug-list li { border-bottom: 1px solid #1d1d22; }
.bug-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 12px 4px; color: inherit; }
.bug-list b { color: #f2f2f2; font: 17px var(--f-ui); font-weight: 400; overflow-wrap: anywhere; }
.bug-list a:hover b, .bug-list a:focus-visible b { color: var(--accent); }
.bug-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bug-id { color: #8a8f9c; font-size: 14px; font-variant-numeric: tabular-nums; }
.bug-meta { grid-column: 2 / -1; color: #a8a8a8; font: 13px var(--f-ui); }
.bug-tag { justify-self: start; padding: 3px 8px 1px; border: 1px solid currentColor; font-weight: 400; font-size: 13px; white-space: nowrap; }
.bug-tag.st-open { color: #ffb84a; } .bug-tag.st-confirmed { color: #ff5a4a; } .bug-tag.st-fixed { color: #0ecb81; } .bug-tag.st-rejected, .bug-tag.st-duplicate { color: #8a8f9c; }
.bug-page .wiki-head h1 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; text-shadow: 4px 4px 0 #3a2f00; }
.bug-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0; color: #a8a8a8; font: 14px var(--f-ui); }
.bug-line a { color: #cfcfcf; }
.bug-pre { margin: 0; padding: 12px 14px; background: #000; border: 1px solid #333; color: #ffd77a; font: 13px/1.6 var(--f-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.bug-reply { border-color: #0ecb81; }
.bug-reply h2 { color: #0ecb81; }
.bug-reply p { margin: 0; color: #e6e6e6; font-size: 15px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .wiki-cats a, .bug-entry { transition: none; } }
@media (max-width: 860px) {
  .wiki-page { padding: 16px 0 28px; gap: 16px; }
  .wiki-cols { grid-template-columns: minmax(0, 1fr); }
  .wiki-side { position: static; }
  .wiki-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiki-block { padding: 18px 16px; }
}
/* the team's admin page (agentwild.fun/admin, site/admin.js): sign in, rewards, records, bugs, the wiki's disputes */
.adm { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; padding: 28px 0 40px; }
.adm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.adm-head h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); color: var(--accent); text-shadow: 4px 4px 0 #3a2f00; }
.adm-leave, .adm-ghost { padding: 8px 14px 6px; border: 2px solid #333; background: #000; color: #cfcfcf; font-size: 14px; cursor: pointer; }
.adm-leave:hover, .adm-ghost:hover, .adm-leave:focus-visible, .adm-ghost:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.adm-login, .adm-find, .adm-grant, .adm-bugs > li { display: grid; gap: 12px; padding: 22px 24px; background: #08080a; border: 2px solid #2a2a30; }
.adm-login { max-width: 460px; justify-items: start; border: 3px solid var(--accent); box-shadow: 8px 8px 0 #000; }
.adm-me { display: flex; align-items: center; gap: 12px; }
.adm-me code { padding: 4px 8px; border: 1px solid #333; background: #000; color: #a8a8a8; font: 13px var(--f-body); }
.adm-login p, .adm-find + p { margin: 0; min-height: 1.2em; color: #ff8a7e; font-size: 14px; }
.adm label.px, .adm legend { color: #a8a8a8; font-size: 14px; }
.adm input:not([type="radio"]):not([type="checkbox"]), .adm select, .adm textarea { height: 40px; padding: 0 12px; border: 2px solid #333; background: #000; color: #f2f2f2; font: 14px var(--f-body); caret-color: var(--accent); }
.adm textarea { height: auto; padding: 8px 12px; resize: vertical; }
.adm input:focus, .adm select:focus, .adm textarea:focus { border-color: var(--accent); outline: none; }
.adm button[type="submit"]:not(.adm-cta), .adm-add, .adm-bugacts button { height: 40px; padding: 0 16px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 0 #000; }
.adm-bugacts button { height: 34px; font-size: 14px; }
.adm button:hover { filter: brightness(1.08); }
.adm button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-tabs button { padding: 9px 16px 7px; border: 2px solid #2a2a30; background: #000; color: #e6e6e6; font-size: 15px; cursor: pointer; }
.adm-tabs button.on { background: var(--accent); border-color: var(--accent); color: #000; }
.adm-app { display: grid; gap: 16px; }
.adm-pane { display: grid; gap: 16px; }
.adm-find { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.adm fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.adm legend { margin-bottom: 8px; padding: 0; }
.adm-char { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid #1d1d22; background: #000; cursor: pointer; }
.adm-char:has(input:checked) { border-color: var(--accent); }
.adm-char input { margin-top: 4px; accent-color: var(--accent); }
.adm-char span { display: grid; gap: 4px; min-width: 0; }
.adm-char b { font-weight: 400; color: #f2f2f2; font-size: 15px; }
.adm-char i { font-style: normal; color: #a8a8a8; font-size: 13px; overflow-wrap: anywhere; }
.adm-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 8px; }
.adm-x { padding: 0 12px; border: 2px solid #333; background: #000; color: #a8a8a8; font-size: 13px; cursor: pointer; }
.adm-x:hover { border-color: #ff5a4a; color: #ff8a7e; }
.adm-add { justify-self: start; }
.adm-line { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; }
.adm-line input[name="coins"] { max-width: 180px; }
[data-envoy] .adm-line { grid-template-columns: 136px minmax(0, 1fr); }
.adm-sub { margin: 28px 0 10px; font-size: 15px; color: var(--accent); }
.adm-check { display: flex; align-items: center; gap: 10px; color: #e6e6e6; font-size: 14px; cursor: pointer; }
.adm-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.adm-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid #1d1d22; }
.adm-cta { padding: 12px 26px 10px; border: 2px solid #000; background: var(--accent); color: #000; font-size: 17px; cursor: pointer; box-shadow: 4px 4px 0 #000, 0 0 24px rgba(252, 213, 53, .4); }
.adm-sure { flex: 1 0 100%; margin: 0; color: var(--accent); font-size: 16px; }
.adm-ok { margin: 0; padding: 10px 14px; border: 2px solid #0ecb81; background: #04140d; color: #6ff0b6; font-size: 14px; }
.adm-err { margin: 0; padding: 10px 14px; border: 2px solid #ff5a4a; background: #1a0807; color: #ff8a7e; font-size: 14px; }
.adm-scroll { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th { padding: 8px 10px; border-bottom: 2px solid #2a2a30; color: #a8a8a8; font: 13px var(--f-ui); text-align: left; white-space: nowrap; }
.adm-table td { padding: 10px; border-bottom: 1px solid #1d1d22; color: #e6e6e6; vertical-align: top; font-variant-numeric: tabular-nums; }
.adm-dot { display: inline-block; width: 8px; height: 8px; background: var(--accent); }
.adm-bugs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.adm-bug { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin: 0; }
.adm-bug a { color: #f2f2f2; font: 16px var(--f-ui); }
.adm-bug a:hover { color: var(--accent); }
.adm-meta { color: #a8a8a8; font: 13px var(--f-ui); }
.adm-text { margin: 0; color: #e6e6e6; font-size: 14px; line-height: 1.6; }
.adm-bugform { display: grid; gap: 8px; }
.adm-bugacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-dup { display: flex; gap: 6px; }
.adm-dup input { width: 120px; height: 34px; }
@media (max-width: 760px) {
  .adm { padding: 16px 0 28px; }
  .adm-login, .adm-find, .adm-grant, .adm-bugs > li { padding: 16px; }
  .adm-find { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-find label { grid-column: 1 / -1; }
  .adm-row { grid-template-columns: minmax(0, 1fr) 80px; }
  .adm-row .adm-x { grid-column: 1 / -1; justify-self: start; height: 32px; }
  .adm-line { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* the BOLT exchange's book over the world, on its left (site/world/fxbook.js): sells over buys, the last price between */
.wild-fxbook { position: absolute; left: 16px; top: 120px; z-index: 5; width: 212px; display: flex; flex-direction: column; overflow: hidden; padding: 8px 0 6px;
  background: rgba(8, 8, 8, .95); border: var(--bw) solid var(--line2); border-radius: var(--radius); box-shadow: var(--shadow); color: #e6e6e6; text-decoration: none; }
.wild-fxbook[hidden] { display: none; }
.wild-fxbook:hover { border-color: var(--accent); text-decoration: none; }
.wild-fxbook:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fxb-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 6px; font-size: 13px; }
.fxb-head b { font-weight: 400; color: var(--accent); }
.fxb-go { width: 7px; height: 7px; border-top: 2px solid var(--fg2); border-right: 2px solid var(--fg2); transform: rotate(45deg); margin-right: 3px; }
.wild-fxbook:hover .fxb-go { border-color: var(--accent); }
.fxb-cols { display: flex; justify-content: space-between; padding: 0 10px 3px; color: var(--fg3); font-size: 11px; }
.fxb-side { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.fxb-side li { position: relative; display: flex; justify-content: space-between; padding: 2px 10px; font: 12px/1.35 var(--f-mono); font-variant-numeric: tabular-nums; }
.fxb-side li > b, .fxb-side li > span { position: relative; }
.fxb-side li > b { font-weight: 400; }
.fxb-bar { position: absolute; top: 1px; bottom: 1px; right: 0; opacity: .18; }
.fxb-ask b { color: var(--down); } .fxb-ask .fxb-bar { background: var(--down); }
.fxb-bid b { color: var(--up); } .fxb-bid .fxb-bar { background: var(--up); }
.fxb-side li.fxb-none { justify-content: center; color: var(--fg3); font-family: inherit; font-size: 11px; }
.fxb-ask { display: flex; flex-direction: column; justify-content: flex-end; }
.fxb-mid { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; padding: 5px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.fxb-mid.empty { padding: 0; margin: 3px 0; border-bottom: 0; background: none; }
.fxb-last { font-weight: 400; font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.fxb-last.up { color: var(--up); } .fxb-last.down { color: var(--down); }
.fxb-mid span { color: var(--fg2); font-size: 11px; }
.wild-fxbook.tight .fxb-cols, .wild-fxbook.tight .fxb-side li:nth-child(n+4) { display: none; }
.wild.ah-on .wild-fxbook, .wild.abyss-on .wild-fxbook, .wild.hall-on .wild-fxbook, body.wild-rec .wild-fxbook { display: none; }
@media (max-width: 760px) { .wild-fxbook { display: none; } }

/* the Genesis Runesmiths (server/runesmiths.js): a molten-gold plate with a red glow, as the runestones' First; brighter at the Genesis Moment */
.rune-art { display: inline-block; flex: none; vertical-align: middle; }
.wild-tag .ti.runesmith { --m: #ffb43a; display: inline-flex; align-items: center; gap: 3px; color: #ffe7a1; background: linear-gradient(180deg, #5a2a0c, #1a0904);
  box-shadow: 0 0 6px rgba(255, 96, 48, .55), 0 2px 6px rgba(0, 0, 0, .5); }
.wild-tag .ti.runesmith .rune-art { color: #ffb43a; }
.wild-tag .ti.runesmith i { margin-left: 4px; font-style: normal; color: #ff9a6a; }
.wild.genesis .wild-tag .ti.runesmith { animation: rs-glow 1.6s ease-in-out infinite alternate; }
@keyframes rs-glow { to { color: #fff6d8; box-shadow: 0 0 14px rgba(255, 120, 60, .95), 0 0 2px #fff3c4; } }
.rp-rune { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: #ffb43a; filter: drop-shadow(0 0 6px rgba(255, 96, 48, .8));
  pointer-events: none; animation: rp-rune 1.4s cubic-bezier(.16, 1, .3, 1) forwards; }
.rp-rune b { font: 16px var(--f-ui); font-weight: 400; color: #ffe7a1; text-shadow: 2px 2px 0 #000; white-space: nowrap; }
@keyframes rp-rune { 0% { opacity: 0; translate: 0 10px; } 18% { opacity: 1; translate: 0 0; } 78% { opacity: 1; } 100% { opacity: 0; translate: 0 -10px; } }
.pass.runesmith { color: #ffe7a1; }
.pass.runesmith em { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pass.runesmith .rune-art.got { color: #ffb43a; } .pass.runesmith .rune-art.dim { color: #3d3833; }
@media (prefers-reduced-motion: reduce) { .wild.genesis .wild-tag .ti.runesmith { animation: none; box-shadow: 0 0 12px rgba(255, 120, 60, .9); } .rp-rune { animation: none; } }

/* the Genesis Runesmiths' tag (pages.js rsTag): molten gold on its own dark ground, legible on every theme */
.tag.runesmith { display: inline-flex; align-items: center; gap: 4px; color: #ffd88a; border-color: #b8742a; background: linear-gradient(180deg, #3a1a08, #1c0b04); box-shadow: 0 0 6px rgba(255, 96, 48, .3); vertical-align: 1px; }
.tag.runesmith .rune-art { color: #ffb43a; }

/* Herald Lion applications (owner, 2026-11-04): the steps, the form on agentwild.fun/social, and the admins' review */
.envoy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.envoy-steps li { display: grid; gap: 4px; }
.envoy-steps b { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #ffe2b0; }
.envoy-steps b i { display: grid; place-items: center; width: 26px; height: 26px; font-style: normal; font-size: 14px; color: #1a0806; background: #ffd25a; box-shadow: 2px 2px 0 #5a1810; }
.envoy-steps span { padding-left: 36px; font-size: 14px; color: var(--fg2); line-height: 1.5; }
.envoy-apply { display: grid; gap: 18px; margin: 0; padding: 28px 30px; background: linear-gradient(180deg, #160806, #0a0605); border: var(--bw) solid #5a2018; box-shadow: 6px 6px 0 #000; scroll-margin-top: 80px; }
.envoy-apply h3 { margin: 0; font-size: 26px; color: #ffd25a; text-shadow: 3px 3px 0 #5a1810; }
.ea-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.ea-field { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.ea-field.wide { grid-column: 1 / -1; }
.ea-field > span, .ea-field legend { padding: 0; font-size: 15px; color: #ffe2b0; }
.ea-field em { font-style: normal; font-size: 13px; color: var(--fg2); }
.ea-field input, .ea-field textarea { width: 100%; padding: 11px 12px; background: #050505; color: var(--fg); border: var(--bw) solid var(--line2); font: 15px var(--f-mono); resize: vertical; }
.ea-field input:focus-visible, .ea-field textarea:focus-visible { outline: none; border-color: #ffd25a; }
.ea-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-chip { position: relative; cursor: pointer; }
.ea-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ea-chip span { display: block; padding: 8px 12px 7px; border: 2px solid #5a2018; background: #050505; color: var(--fg2); font-size: 14px; }
.ea-chip input:checked + span { border-color: #ffd25a; background: #2a1408; color: #ffe2b0; box-shadow: 2px 2px 0 #000; }
.ea-chip input:focus-visible + span { outline: 2px solid #ffd25a; outline-offset: 2px; }
.ea-shots { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.ea-thumbs { display: contents; list-style: none; margin: 0; padding: 0; }
.ea-thumbs li { position: relative; width: 116px; height: 116px; border: 2px solid #5a2018; background: #050505; }
.ea-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ea-thumbs button { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 0 4px; border: 0; background: rgba(0, 0, 0, .78); color: #ffd2c4; font-size: 12px; cursor: pointer; }
.ea-thumbs button:hover, .ea-thumbs button:focus-visible { background: #5a1810; color: #fff; outline: none; }
.ea-add { display: grid; place-items: center; width: 116px; height: 116px; border: 2px dashed #8a3a20; color: #ffd25a; font-size: 14px; text-align: center; cursor: pointer; }
.ea-add:hover, .ea-add:focus-within { border-style: solid; background: #1a0a06; }
.ea-add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ea-add[hidden] { display: none; }
.ea-go { display: flex; flex-wrap: wrap; gap: 12px; }
.ea-go .btn { margin: 0; }
.ea-go .btn[type="submit"] { box-shadow: 4px 4px 0 #000, 0 0 26px rgba(255, 170, 60, .45); }
.ea-msg { margin: 0; min-height: 1.4em; font-size: 15px; color: #ffe2b0; }
.ea-msg.bad { color: #ff8a7e; }
.ea-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ea-status li { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; background: #050505; border: 2px solid #3a1810; font-size: 14px; color: var(--fg2); }
.ea-status li b { color: #ffe2b0; }
.ea-status li.approved b { color: #6ff0b6; }
.ea-status li.rejected b { color: #ff8a7e; }
.ea-status li p { flex: 1 0 100%; margin: 0; color: var(--fg); }
@media (max-width: 720px) {
  .envoy-apply { padding: 20px 16px; }
  .ea-grid { grid-template-columns: 1fr; }
  .ea-thumbs li, .ea-add { width: 96px; height: 96px; }
}
.adm-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.adm-filter button { padding: 8px 14px 6px; border: 2px solid #2a2a30; background: #000; color: #e6e6e6; font-size: 14px; cursor: pointer; }
.adm-filter button.on { border-color: var(--accent); color: var(--accent); }
.adm-filter b { margin-left: 6px; font-weight: normal; color: #8a8a94; }
.adm-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.adm-apps > li { display: grid; gap: 12px; padding: 18px 20px; background: #08080a; border: 2px solid #2a2a30; }
.adm-apps header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.adm-apps header b { font-size: 17px; color: #fff; }
.adm-apps header span { font-size: 13px; color: #8a8a94; }
.adm-apps .st { font-style: normal; font-size: 13px; padding: 2px 8px; border: 1px solid currentColor; }
.adm-apps .st.approved { color: #6ff0b6; }
.adm-apps .st.rejected { color: #ff8a7e; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { padding: 3px 9px; border: 1px solid #3a3a44; color: #cfcfcf; font-size: 13px; }
.adm-apps dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.adm-apps dt { color: #8a8a94; }
.adm-apps dd { margin: 0; color: #e6e6e6; overflow-wrap: anywhere; }
.adm-apps dd a { color: var(--accent); }
.adm-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-shot { width: 160px; height: 160px; padding: 0; border: 2px solid #2a2a30; background: #000; cursor: zoom-in; }
.adm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-shot img:not([src]) { visibility: hidden; }
.adm-shot.bad { border-color: #ff5a4a; }
.adm-shot:hover, .adm-shot:focus-visible { border-color: var(--accent); outline: none; }
.adm-decide { display: grid; gap: 10px; }
.adm-decide input[name="reason"] { padding: 10px 12px; background: #000; color: #e6e6e6; border: 2px solid #2a2a30; font-size: 14px; }
.adm-decide input[name="reason"].need { border-color: #ff5a4a; }
.adm-decide .adm-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.adm-none { color: #8a8a94; }
/* the admin panel's small changes (2026-11-06): the tabs in three rows, settings, the notice, the logs */
.adm-tabs { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.adm-tabrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-tabgroup { flex: none; width: 72px; color: #8a8a94; font-size: 13px; }
.adm-setgroup { display: grid; gap: 0; padding: 4px 18px 14px; border: 2px solid transparent; }
.adm-setgroup .adm-sub { margin-top: 12px; }
.adm-setgroup.money { border-color: var(--accent); background: #0d0b02; }
.adm-set { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.3fr) 200px 196px; align-items: center; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid #1d1d22; }
.adm-set-name { display: flex; align-items: center; gap: 8px; color: #f2f2f2; font-size: 15px; }
.adm-set-v input:not([type="radio"]):not([type="checkbox"]), .adm-set-v select { width: 100%; }
.adm-set-d { color: #8a8a94; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-set-d b { font-weight: 400; color: #6a6a74; margin-right: 4px; }
.adm-set-go { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.adm-set:has(.adm-sure) .adm-set-go { grid-column: 1 / -1; padding: 10px 14px; border: 2px solid var(--accent); background: #000; }
.adm-set-go .adm-sure { flex: 1 1 auto; margin: 0; text-align: left; }
.adm-set.is-changed .adm-set-name { color: var(--accent); }
.adm-pair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-pair input { min-width: 0; flex: 1; }
.adm-nt-now { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 8px; }
.adm-nt-now b { color: #a8a8a8; font-weight: 400; font-size: 14px; }
.adm-nt-now .wild-notice, .adm-nt-pv .wild-notice { padding: 10px 16px; }
.adm-nt-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-nt-sites > span { margin-right: 8px; color: #a8a8a8; font-size: 14px; }
.adm-radio { position: relative; }
.adm-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adm-radio span { display: inline-block; padding: 8px 14px 6px; border: 2px solid #2a2a30; background: #000; color: #e6e6e6; font-size: 14px; cursor: pointer; }
.adm-radio input:checked + span { border-color: var(--accent); color: var(--accent); }
.adm-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-nt-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.adm-nt-col { display: grid; gap: 10px; align-content: start; }
.adm-nt-col h3, .adm-nt-h { margin: 0; color: var(--accent); font-size: 14px; font-weight: 400; }
.adm-nt-f { display: grid; gap: 6px; min-width: 0; }
.adm-nt-f > span { color: #a8a8a8; font-size: 13px; }
.adm-nt-f input, .adm-nt-f textarea { width: 100%; }
.adm-nt-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.adm-nt-preview { display: grid; gap: 8px; }
.adm-st { font-style: normal; font-size: 13px; padding: 2px 8px; border: 1px solid currentColor; white-space: nowrap; }
.adm-st.live { color: #6ff0b6; }
.adm-st.scheduled { color: var(--accent); }
.adm-st.expired, .adm-st.ended, .adm-st.covered { color: #8a8a94; }
.adm-acts { white-space: nowrap; }
.adm-acts button + button { margin-left: 6px; }
.adm-wrap { min-width: 220px; overflow-wrap: anywhere; }
.adm-off td { color: #6a6a74; }
.adm-unit { color: var(--fg2); font-size: 13px; white-space: nowrap; }
.adm-xs td { vertical-align: middle; }
.adm-ghost.adm-lit { border-color: #000; background: var(--accent); color: #000; }   /* a row changed: its Save the same size, lit */
.adm-xsform input[type=number] { flex: none; width: 128px; }
.adm-xs input { width: 104px; padding: 6px 8px; font: 13px var(--f-ui); color: var(--fg); background: var(--panel2); border: var(--bw) solid var(--line2); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.adm-xs td.adm-wrap { min-width: 180px; }
.adm-up-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 10px; margin: 0; padding: 0; border: 0; }
.adm-up-line legend { margin-bottom: 6px; color: #a8a8a8; font-size: 13px; }
.adm-up-line .adm-x { height: 40px; align-self: start; }
.adm-usdt-tx { min-width: 280px; }
.adm-usdt-tx a + .adm-pair { margin-top: 6px; }
.adm-usdt-tx .adm-go { margin-top: 8px; }
.adm-table a code { color: var(--accent); }
.adm-addr { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.adm-ghost.adm-copy { min-width: 64px; padding: 4px 10px 3px; font-size: 13px; }   /* as wide as "Copied" / "已复制": no shift on a click */
.adm-ghost.adm-copy.done { border-color: #6ff0b6; color: #6ff0b6; }
.adm-num td:not(:first-child), .adm-num th:not(:first-child) { text-align: right; }
.adm-pos { color: #6ff0b6; }
.adm-neg { color: #ff8a7e; }
.adm .need { border-color: #ff5a4a !important; }
@media (max-width: 760px) {
  .adm-tabrow { gap: 6px; }
  .adm-tabgroup { width: 100%; }
  .adm-set { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .adm-set-go { justify-content: flex-start; }
  .adm-nt-now, .adm-nt-cols, .adm-nt-row, .adm-up-line { grid-template-columns: minmax(0, 1fr); }
}
.adm-zoom { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .88); cursor: zoom-out; }
.adm-zoom[hidden] { display: none; }
.adm-zoom img { max-width: 100%; max-height: 100%; border: 2px solid #2a2a30; }
/* the exchange tab: an admin wallet's own trading (admin.js drawMm) */
.adm-mm-bal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; border: 2px solid #2a2a30; background: #08080a; }
.adm-mm-bal > div { display: grid; gap: 6px; padding: 14px 16px; border-right: 1px solid #1d1d22; }
.adm-mm-bal > div:first-child { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; border-right: 0; border-bottom: 1px solid #1d1d22; }
.adm-mm-bal dt { color: #8a8a94; font: 13px var(--f-ui); }
.adm-mm-bal dd { margin: 0; color: #f2f2f2; font: 20px var(--f-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-mm-bal > div:first-child dd { font-size: 14px; }
.adm-mm-bal > div:last-child { border-right: 0; }
.adm-mm-bal code { padding: 2px 6px; border: 1px solid #333; background: #000; color: var(--accent); font: 13px var(--f-body); }
.adm-mm-bal dd span { color: #a8a8a8; font-size: 13px; margin-left: 8px; }
.adm-mm-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-mm-cols .adm-line { grid-template-columns: 150px minmax(0, 1fr); }
.adm-mm-cols .adm-sub { margin: 0; }
.adm-mm-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.adm-mm-pick { cursor: pointer; }
.adm-mm-pick input { position: absolute; opacity: 0; pointer-events: none; }
.adm-mm-pick span { display: block; padding: 10px 0 8px; border: 2px solid #2a2a30; background: #000; color: #a8a8a8; font-size: 15px; text-align: center; }
.adm-mm-pick.buy input:checked + span { border-color: #0ecb81; background: #04140d; color: #6ff0b6; }
.adm-mm-pick.sell input:checked + span { border-color: #ff5a4a; background: #1a0807; color: #ff8a7e; }
.adm-mm-pick input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.adm-mm-total { margin: 0; min-height: 1.3em; color: var(--accent); font: 15px var(--f-ui); font-variant-numeric: tabular-nums; }
.adm-mm-book { display: grid; gap: 4px; padding: 14px 16px; background: #08080a; border: 2px solid #2a2a30; }
.adm-mm-book .adm-table td { padding: 5px 10px; }
.adm-mm-book tr.ask td:first-child, .adm-table td.sell { color: #ff8a7e; }
.adm-mm-book tr.bid td:first-child, .adm-table td.buy { color: #6ff0b6; }
.adm-mm-last { margin: 4px 0; padding: 6px 10px; border-block: 1px solid #1d1d22; color: #8a8a94; font-size: 14px; }
.adm-mm-last b { margin-left: 8px; color: #f2f2f2; font-weight: 400; font-size: 17px; font-variant-numeric: tabular-nums; }
.adm-mm-say { margin: 0; min-height: 1.2em; color: #cfcfcf; font-size: 14px; overflow-wrap: anywhere; }
.adm-table td.ok { color: #6ff0b6; }
.adm-table td.no { color: #ff8a7e; }
.adm-cta:disabled { filter: grayscale(1) brightness(.6); cursor: progress; }
@media (max-width: 760px) {
  .adm-mm-cols { grid-template-columns: minmax(0, 1fr); }
  .adm-mm-bal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-mm-bal > div { border-bottom: 1px solid #1d1d22; }
  .adm-mm-cols .adm-line { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* the tile under the mouse (owner, 2026-11-05: "鼠标在哪里就显示坐标，右键能复制坐标") */
.wild-coord { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; padding: 4px 7px; background: rgba(8, 8, 8, .82); border: var(--bw) solid var(--line2); border-radius: var(--radius); font: 12px/1 var(--f-ui); color: #f2f2f2; font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform; }
.wild-coord[hidden] { display: none; }
.wild-coord.copied { border-color: var(--accent); color: var(--accent); }
@media (hover: none) { .wild-coord { display: none; } }

/* the status window's ways in (owner, 2026-11-05: "完整的状态面板") */
.wild-find-list > li { position: relative; }
.wild-find .who { padding-right: 74px; }
.wild-find .st { position: absolute; top: 9px; right: 10px; padding: 3px 8px 1px; border: 1px solid #3a3a40; background: #000; color: #cfcfcf; font: 12px var(--f-ui); cursor: pointer; }
.wild-find .st:hover, .wild-find .st:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.wild-follow .st { margin-left: auto; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.wild-follow .st:hover { text-decoration: underline; text-underline-offset: 3px; }

/* agentwild.fun/panel/download, the official control panel's page (owner, 2026-11-07): the head with the download and the panel
   itself, a chapter bar under the site's header, then four chapters in a reading column */
.panel-page { display: grid; gap: 64px; padding-bottom: 24px; }
.panel-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 52px; align-items: center; padding-top: 8px; }
.panel-hero h1 { margin: 0; font-size: clamp(40px, 5.2vw, 70px); line-height: 1.04; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00; text-wrap: balance; }
.panel-hero p { margin: 18px 0 0; max-width: 44ch; color: var(--fg); font-size: 17px; line-height: 1.75; }
.panel-get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.btn.panel-dl { margin: 0; padding: 15px 28px; font-size: 18px; line-height: 1; box-shadow: 4px 4px 0 #6d5a00; }
.btn.panel-dl:hover { filter: brightness(1.08); }
.btn.panel-dl:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #6d5a00; }
.panel-file { color: var(--fg2); font-family: var(--f-mono); font-size: 13px; }
.panel-shot, .panel-phone, .panel-hunt { margin: 0; background: #000; border: 2px solid var(--accent); box-shadow: 8px 8px 0 #000; line-height: 0; }
.panel-shot img, .panel-phone img, .panel-hunt img { display: block; width: 100%; height: auto; }
.panel-toc { position: sticky; top: var(--panel-top, 0px); z-index: 15; display: flex; overflow-x: auto; scrollbar-width: none; margin: -24px 0 -16px; background: rgba(8, 8, 8, .96); border-bottom: 2px solid var(--line2); }
.panel-toc::-webkit-scrollbar { display: none; }
.panel-toc a { flex: none; padding: 14px 24px 12px; margin-bottom: -2px; color: var(--fg2); font-size: 16px; text-decoration: none; border: 2px solid transparent; border-bottom: 0; white-space: nowrap; }
.panel-toc a:hover { color: var(--fg); text-decoration: none; }
.panel-toc a[aria-current] { color: var(--accent); background: var(--panel); border-color: var(--accent); }
.panel-ch { display: grid; gap: 24px; align-content: start; scroll-margin-top: calc(var(--panel-top, 0px) + 72px); }
.panel-ch > h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: #fff; text-shadow: 4px 4px 0 #262626; }
.panel-ch p, .panel-faq dd { margin: 0; color: var(--fg); font-size: 16px; line-height: 1.8; max-width: 66ch; }
.panel-intro { color: var(--fg2) !important; }
.panel-what-ch { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: 56px; }
.panel-what-ch > h2 { grid-column: 1 / -1; }
.panel-what { display: grid; gap: 30px; align-content: start; }
.panel-what h3, .panel-steps h3 { margin: 0 0 8px; font-size: 21px; font-weight: 400; color: var(--accent); }
.panel-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.panel-steps li { display: grid; align-content: start; gap: 4px; padding: 26px 26px 28px; background: var(--panel); border: 2px solid var(--line2); box-shadow: 6px 6px 0 #000; }
.panel-steps li:first-child { border-color: var(--accent); }
.panel-steps .n { font-size: 60px; line-height: 1; margin-bottom: 14px; color: var(--accent); text-shadow: 4px 4px 0 #3a2f00; }
.panel-steps li:not(:first-child) .n { color: #fff; text-shadow: 4px 4px 0 #262626; }
.panel-steps .btn.panel-dl { justify-self: start; margin-top: 18px; font-size: 16px; padding: 13px 22px; }
.panel-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 40px; align-items: start; }
.panel-rules table { width: 100%; border-collapse: collapse; font-size: 15px; }
.panel-rules th, .panel-rules td { padding: 13px 16px 13px 0; text-align: left; vertical-align: top; line-height: 1.7; border-bottom: 1px solid var(--line2); }
.panel-rules thead th { padding-top: 0; font-family: var(--f-ui); font-weight: 400; color: var(--fg2); border-bottom: 2px solid var(--line2); }
.panel-rules tbody th { width: 9.5em; font-family: var(--f-ui); font-weight: 400; color: var(--accent); }
.panel-rules td { color: var(--fg); }
.panel-faq { margin: 0; display: grid; max-width: 78ch; }
.panel-faq > div { padding: 20px 0; border-top: 1px solid var(--line2); }
.panel-faq > div:last-child { border-bottom: 1px solid var(--line2); }
.panel-faq dt { margin-bottom: 8px; font-size: 19px; color: #fff; }
@media (max-width: 1000px) {
  .panel-head { grid-template-columns: 1fr; gap: 36px; }
  .panel-steps { grid-template-columns: 1fr; }
  .panel-rules { grid-template-columns: 1fr; }
  .panel-hunt { max-width: 392px; }
}
@media (max-width: 720px) {
  .panel-page { gap: 48px; }
  .panel-toc { position: static; margin: -16px 0 -8px; }
  .panel-toc a { padding: 12px 16px 10px; font-size: 14px; }
  .panel-what-ch { grid-template-columns: 1fr; }
  .panel-phone { max-width: 300px; }
  .panel-rules tbody th { width: 6.5em; }
  .panel-rules th, .panel-rules td { padding-right: 10px; font-size: 14px; }
  .btn.panel-dl { width: 100%; text-align: center; }
  .panel-steps .btn.panel-dl { width: auto; }
}

/* the stalls in the camp (world.js STALL): the keeper's sign over each, a click opens its wares on the event plate */
.wild-tag.stall { pointer-events: auto; cursor: pointer; gap: 2px; }
.wild-tag.stall .ad { max-width: 150px; padding: 2px 7px 1px; overflow: hidden; text-overflow: ellipsis; background: #5a2412; color: #fff3c2; font: 11px/1.4 var(--f-ui);
  border-radius: var(--radius); box-shadow: inset 0 -2px 0 #2a0e04, inset 0 0 0 1px #e8a23e; }
.wild-tag.stall .ad.none { color: #e8c9a0; }
.wild-tag.stall:hover .ad { background: #7a3418; }
.lv-poster.stall-poster { --m: #f0a24a; --d: #3a1606; }
.lv-poster.stall-poster.s1 { --m: #8cc4ff; --d: #0e2440; }
.lv-poster.stall-poster .lv-art { aspect-ratio: 34 / 32; pointer-events: none; }   /* its rays reach over the wares: clicks go through */
.lv-poster.stall-poster h3 { font-size: clamp(22px, 6.5cqh, 40px); text-wrap: balance; }
.lv-poster.stall-poster h3.long { font-size: clamp(18px, 4.4cqh, 28px); line-height: 1.2; }
.st-wares { max-width: 520px; }
.st-wares li { gap: 6px; padding: 5px 10px 4px; font-size: 14px; }
.st-wares li em { font-style: normal; color: var(--m); font-variant-numeric: tabular-nums; }
.st-wares li i { font-style: normal; color: #a8a29a; }
.st-wares li.st-none { color: #bbb; }
.st-acts { display: flex; gap: 10px; align-items: center; justify-content: center; }
.st-x { margin-top: 4px; padding: 8px 14px 6px; border: 2px solid #000; background: rgba(0, 0, 0, .6); color: #eee; font: clamp(13px, 1.8cqw, 17px) var(--f-ui); cursor: pointer; }
.st-x:hover { background: rgba(0, 0, 0, .8); } .st-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* agentwild.fun/wallet: the plain-wallet guide (owner, 2026-11-08), a quest log and its tracker (site/wallet.js) */
.start-plain, .hero-wallet { margin: 10px 0 0; font-size: 14px; }
.start-plain a, .hero-wallet a { color: var(--accent); text-underline-offset: 3px; }
.wq-page { display: grid; gap: 26px; max-width: 1180px; margin: 0 auto; padding: 28px 0 44px; }
.wq-page ::selection { background: var(--accent); color: #000; }
.wq-head-top h1 { margin: 0; font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00, 0 0 48px rgba(252, 213, 53, .22); text-wrap: balance; }
.wq-head-top p { margin: 14px 0 0; max-width: 56ch; color: var(--fg); font-size: 16px; line-height: 1.6; }
.wq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.wq-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wq { border: 2px solid var(--line); background: var(--panel); }
.wq-head { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; background: none; border: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.wq-head:disabled { cursor: default; }
.wq-n { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--line2); color: var(--fg2); font-size: 18px; }
.wq-t { font-size: 20px; line-height: 1.2; }
.wq-st { padding: 2px 9px; border: 2px solid var(--line2); color: var(--fg2); font-size: 12px; white-space: nowrap; }
.wq.locked { opacity: .55; }
.wq.done .wq-n, .wq.done .wq-st { border-color: var(--up); color: var(--up); }
.wq.now { border-color: var(--accent); background: var(--panel2); box-shadow: 8px 8px 0 #000, 0 0 60px rgba(252, 213, 53, .12); }
.wq.now .wq-n { border-color: var(--accent); color: #000; background: var(--accent); }
.wq.now .wq-st { border-color: var(--accent); color: var(--accent); }
.wq-head:hover .wq-t { color: var(--accent); }
.wq-head:disabled:hover .wq-t { color: inherit; }
.wq-body { display: grid; gap: 12px; padding: 0 18px 18px 70px; font-size: 14px; line-height: 1.6; }
.wq-body p { margin: 0; max-width: 64ch; }
.wq-body .btn { margin: 0; border: 0; cursor: pointer; font-size: 14px; padding: 10px 16px; }
.wq-body .btn.ghost { border: 2px solid var(--line2); padding: 8px 14px; }
.wq-body .btn:disabled { opacity: .45; cursor: default; filter: none; }
.wq-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wq-path { display: grid; gap: 6px; padding: 14px; background: var(--bg); border: 2px solid var(--line2); color: var(--fg2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.wq-path b { color: var(--fg); font-size: 18px; font-weight: 400; line-height: 1.25; }
.wq-path:hover { border-color: var(--fg3); }
.wq-path.on { border-color: var(--accent); background: #141100; }
.wq-path.on b { color: var(--accent); }
.wq-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wq-row input { flex: 1 1 260px; min-width: 0; padding: 10px 12px; background: var(--bg); border: 2px solid var(--line2); color: var(--fg); font: 14px var(--f-mono); caret-color: var(--accent); }
.wq-row input:focus { border-color: var(--accent); outline: none; }
.wq-addr { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.wq-addr span { color: var(--up); }
.wq-addr code { font: 13px var(--f-mono); color: var(--fg); word-break: break-all; }
.wq-note { color: var(--fg2); }
.wq-note.ok { color: var(--up); }
.wq-note.bad { color: var(--down); }
.wq-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.wq-copy pre { margin: 0; padding: 12px 14px; max-height: 160px; overflow: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; background: var(--bg); border: 2px dashed var(--line2); color: var(--fg); font: 13px/1.6 var(--f-mono); white-space: pre-wrap; word-break: break-word; }
.wq-copy.big pre { max-height: 260px; border-style: solid; border-color: var(--accent); }
.wq-track { position: sticky; top: 16px; display: grid; gap: 14px; padding: 18px; border: 2px solid var(--line2); background: var(--panel); }
.wq-track h2 { margin: 0; color: var(--accent); font-size: 22px; font-weight: 400; }
.wq-track ul { list-style: none; margin: 0; padding: 0; }
.wq-track li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 2px solid var(--line); color: var(--fg2); font-size: 13px; }
.wq-track li b { font-weight: 400; color: var(--fg3); text-align: right; overflow-wrap: anywhere; }
.wq-track li.ok b { color: var(--up); }
.wq-track li.bad b { color: var(--down); }
.wq-enter { display: block; padding: 16px; border: 2px solid var(--line2); background: var(--bg); color: var(--fg3); font-size: 22px; text-align: center; text-decoration: none; }
.wq-enter[aria-disabled="true"] { cursor: default; }
.wq-enter.lit { border-color: var(--accent); background: var(--accent); color: #000; text-shadow: 3px 3px 0 #e2b800; }
.wq-enter.lit:hover { text-decoration: none; filter: brightness(1.06); }
.wq-rules h2 { margin: 0 0 12px; color: var(--accent); font-size: 24px; font-weight: 400; }
.wq-rules table { width: 100%; border-collapse: collapse; border: 2px solid var(--line); font-size: 14px; }
.wq-rules th, .wq-rules td { padding: 11px 14px; border-bottom: 2px solid var(--line); text-align: left; vertical-align: top; }
.wq-rules th { font-weight: 400; color: var(--fg); width: 58%; }
.wq-rules td { color: var(--fg2); }
.wq-rules td.ok { color: var(--up); }
.wq-rules td.bad { color: var(--down); }
.wq-strip { display: none; }
.wq-page .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .wq-page { padding: 16px 0 28px; gap: 18px; }
  .wq-grid { grid-template-columns: 1fr; }
  .wq-track { position: static; }
  .wq-strip { display: grid; gap: 8px; position: sticky; top: 0; z-index: 5; margin: 0 -2px; padding: 8px 2px; background: var(--bg); border-bottom: 2px solid var(--line); }
  .wq-strip ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .wq-strip li { padding: 5px 2px; border: 2px solid var(--line2); color: var(--fg3); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wq-strip li.ok { border-color: var(--up); color: var(--up); }
  .wq-strip li.bad { border-color: var(--down); color: var(--down); }
  .wq-strip .wq-enter { padding: 10px; font-size: 18px; }
  .wq-strip.plate-seen .wq-enter { display: none; }
  .wq-body { padding: 0 14px 16px; }
  .wq-paths { grid-template-columns: 1fr; }
  .wq-copy { grid-template-columns: 1fr; }
  .wq-copy .btn { justify-self: start; }
  .wq-rules th { width: auto; }
}

/* agentwild.fun/mentor (师徒; site/mentor.js, server/pages.js mentorPage): the reward track, 2026-11-09 */
.mt-page { display: grid; gap: 30px; max-width: 1180px; margin: 0 auto; padding: 28px 0 56px; }
.mt-page ::selection { background: var(--accent); color: #000; }
.mt-page .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mt-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 26px; align-items: end; }
.mt-intro h1 { margin: 0; font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--accent); text-shadow: 6px 6px 0 #3a2f00, 0 0 48px rgba(252, 213, 53, .22); text-wrap: balance; }
.mt-lead { margin: 14px 0 0; max-width: 52ch; color: var(--fg); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.mt-page .nw { white-space: nowrap; }
.mt-find { display: flex; margin: 22px 0 0; max-width: 420px; }
.mt-find input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; background: var(--bg); border: 2px solid var(--line2); border-right: 0; color: var(--fg); font: 14px var(--f-mono); caret-color: var(--accent); }
.mt-find input:focus { border-color: var(--accent); outline: none; }
.mt-find input::placeholder { color: var(--fg2); }
.mt-look { padding: 0 18px; background: var(--panel2); border: 2px solid var(--line2); color: var(--fg); font: 13px var(--f-ui); cursor: pointer; }
.mt-look:hover { color: var(--accent); }
.mt-look:focus-visible, .mt-name:focus-visible, .mt-token:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-find.busy .mt-look { opacity: .5; cursor: progress; }
.mt-say { margin: 8px 0 0; min-height: 0; color: var(--fg2); font-size: 13px; }
.mt-say:empty { display: none; }
.mt-say.bad { color: var(--down); }
.mt-link { margin: 18px 0 0; display: grid; gap: 10px; }
.mt-well { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 2px solid var(--accent); background: #000; box-shadow: 6px 6px 0 #000; }
.mt-well code { padding: 13px 14px; color: var(--fg); font: 14px/1.5 var(--f-mono); overflow-wrap: anywhere; }
.mt-copy { padding: 0 22px; background: var(--accent); border: 0; color: #000; font: 18px var(--f-ui); cursor: pointer; box-shadow: 0 0 28px rgba(252, 213, 53, .35); }
.mt-copy:hover { background: #ffe066; }
.mt-copy:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.mt-copy.ok { background: var(--up); box-shadow: none; }
.mt-join { margin: 0; color: var(--fg2); font-size: 13px; }
.mt-join code { display: inline-block; max-width: 100%; padding: 2px 6px; background: var(--panel); border: 1px solid var(--line2); color: var(--fg); font: 13px var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.mt-warn { margin: 0; color: var(--down); font-size: 13px; }
.mt-own { margin: 0; color: var(--fg2); font-size: 13px; }
.mt-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 2px solid var(--line2); background: var(--panel); box-shadow: 4px 4px 0 #000; }
.mt-nums div { padding: 14px 16px; }
.mt-nums div + div { border-left: 2px solid var(--line); }
.mt-nums dt { color: var(--fg2); font-size: 12px; }
.mt-nums dd { margin: 6px 0 0; color: #fff; font: 32px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 #262626; }
.mt-titles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mt-titles li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mt-titles li span.px { color: var(--fg2); font-size: 13px; }
.mt-titles li.held span.px { color: var(--up); }
.mt-blocks { display: flex; gap: 3px; }
.mt-blocks i { width: 14px; height: 14px; background: #161616; border: 1px solid var(--line2); }
.mt-blocks i.on { background: var(--up); border-color: var(--up); }
.mt-titles em { color: var(--fg2); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }

/* the track: stations 5, 10, 20, 30 on one rail, an apprentice's token above it at its level */
.mt-track { position: relative; height: 236px; border: 2px solid var(--line2); background: var(--panel); box-shadow: 6px 6px 0 #000; }
.mt-rail { position: absolute; left: 3%; right: 2%; top: 124px; height: 8px; background: repeating-linear-gradient(90deg, #303030 0 6px, #181818 6px 8px); }
.mt-stop { position: absolute; z-index: 1; left: var(--x); top: 104px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
.mt-stop b { width: 48px; height: 48px; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line2); color: var(--fg); font: 22px var(--f-ui); box-shadow: 3px 3px 0 #000; }
.mt-stop span { color: var(--fg2); font-size: 12px; line-height: 1.45; text-align: center; white-space: nowrap; }
.mt-stop.paid b { border-color: var(--up); color: var(--up); }
.mt-stop.held b { border-color: var(--accent); color: var(--accent); }
.mt-token { position: absolute; left: var(--x); top: 44px; width: 28px; height: 28px; margin-left: -14px; padding: 0; background: none; border: 0; color: #e6e6e6; filter: drop-shadow(2px 2px 0 #000); cursor: pointer; animation: mt-walk .9s steps(9) both; animation-delay: calc(var(--i) * 70ms); }
.mt-head { display: block; width: 24px; height: 24px; margin: 2px; }
.mt-pin { position: absolute; left: 13px; top: 26px; width: 2px; height: 54px; background: #5c5c5c; }
.mt-token > b { position: absolute; top: -10px; right: -14px; min-width: 18px; padding: 0 4px; background: #000; border: 2px solid var(--line2); color: var(--fg); font: 12px/1.3 var(--f-ui); }
.mt-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: none; max-width: min(320px, 78vw); width: max-content; padding: 2px 8px; background: #000; border: 2px solid var(--line2); color: var(--fg); font: 12px/1.5 var(--f-mono); text-align: left; z-index: 3; }
.mt-token.edge-r .mt-tip { left: auto; right: -6px; transform: none; }
.mt-token.edge-l .mt-tip { left: -6px; transform: none; }
.mt-token:hover .mt-tip, .mt-token:focus-visible .mt-tip, .mt-token.on .mt-tip { display: block; }
.mt-track.lit .mt-token { opacity: .25; }
.mt-track.lit .mt-token.on { z-index: 2; opacity: 1; color: var(--accent); transform: translate(-2px, -2px); filter: drop-shadow(3px 3px 0 #000); }
.mt-track.lit .mt-token.on .mt-pin { background: var(--accent); }
.mt-track-empty { position: absolute; left: 18px; top: 16px; margin: 0; color: var(--fg2); font-size: 13px; }
@keyframes mt-walk { from { left: 3%; } }

.mt-roster:empty { display: none; }
.mt-roster h2, .mt-board h2 { margin: 0 0 16px; color: #fff; font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; line-height: 1.1; text-shadow: 4px 4px 0 #262626; }
.mt-more h2 { margin: 0 0 12px; color: #fff; font-size: 20px; font-weight: 400; line-height: 1.2; text-shadow: 3px 3px 0 #262626; }
.mt-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.mt-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 2px solid var(--line2); box-shadow: 4px 4px 0 #000; }
.mt-table th, .mt-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; font-variant-numeric: tabular-nums; }
.mt-table thead th { color: var(--fg2); font: 12px var(--f-ui); white-space: nowrap; border-bottom: 2px solid var(--line2); }
.mt-table tbody th { font: 14px var(--f-mono); color: var(--fg); font-weight: 400; }
.mt-table td.yes { color: var(--up); }
.mt-table td.no { color: var(--fg2); }
.mt-roster-table tbody tr { cursor: default; }
.mt-roster-table tbody tr.on { background: var(--panel2); }
.mt-roster-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mt-roster.lit tbody tr:not(.on) { opacity: .45; }
.mt-cell { display: grid; gap: 2px; min-width: 96px; padding: 4px 8px; border: 2px solid var(--line2); }
.mt-cell b { font: 12px var(--f-ui); color: var(--fg2); }
.mt-cell span { color: var(--fg2); font-size: 12px; line-height: 1.35; text-wrap: pretty; }
.mt-cell.paid { border-color: var(--up); }
.mt-cell.paid b { color: var(--up); }
.mt-cell.held { border-color: var(--accent); }
.mt-cell.held b { color: var(--accent); }
.mt-cell.waiting { border-style: dashed; }
.mt-cell.waiting b { color: var(--fg); }
.mt-cell.refused { border-color: var(--down); }
.mt-cell.refused b { color: var(--down); }
.mt-cell.cancelled { border-style: dashed; border-color: var(--line2); }
.mt-cell.cancelled b, .mt-cell.cancelled span { color: var(--fg2); text-decoration: line-through; }
.mt-cell.none { height: 26px; border-color: var(--line); }
.mt-empty { margin: 0; padding: 18px; border: 2px dashed var(--line2); color: var(--fg2); font-size: 13px; }

.mt-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.mt-more > section { padding: 16px; border: 2px solid var(--line2); background: var(--panel); box-shadow: 4px 4px 0 #000; }
.mt-ladder-list, .mt-kit-list { list-style: none; margin: 0; padding: 0; }
.mt-ladder-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 2px solid var(--line); }
.mt-ladder-list li:last-child, .mt-kit-list li:last-child { border-bottom: 0; }
.mt-ladder-list b { color: var(--fg); font-size: 16px; font-weight: 400; }
.mt-ladder-list span { color: var(--fg2); font-size: 13px; text-align: right; }
.mt-ladder-list em { color: #fff; font-style: normal; font-variant-numeric: tabular-nums; }
.mt-kit-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.mt-kit-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mt-kit-list b { color: #fff; font-weight: 400; font-variant-numeric: tabular-nums; }
.mt-bound { display: inline-block; margin: 14px 0 0; padding: 2px 9px; border: 2px solid var(--line2); color: var(--fg2); font-size: 12px; }
.mt-rules ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--fg); font-size: 13px; line-height: 1.6; }
.mt-board { max-width: 640px; }
.mt-name { padding: 0; background: none; border: 0; color: var(--fg); font: 14px var(--f-mono); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; cursor: pointer; }
.mt-name:hover { color: var(--accent); text-decoration-color: var(--accent); }

@media (max-width: 900px) {
  .mt-top { grid-template-columns: 1fr; align-items: start; }
  .mt-more { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mt-page { gap: 24px; padding-top: 16px; }
  .mt-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-nums div:nth-child(3) { border-left: 0; }
  .mt-nums div:nth-child(n + 3) { border-top: 2px solid var(--line); }
  .mt-nums dd { font-size: 28px; }
  .mt-track { height: 214px; }
  .mt-rail { top: 112px; }
  .mt-stop { top: 94px; }
  .mt-stop b { width: 38px; height: 38px; font-size: 18px; }
  .mt-stop { width: max-content; }
  .mt-stop span { font-size: 12px; }
  .mt-stop .it { display: none; }   /* the items read in the ladder below */
  .mt-token { width: 24px; height: 24px; margin-left: -12px; top: 40px; }
  .mt-head { margin: 0; }   /* 24px, the helm at 2x: even pixels */
  .mt-tip { max-width: min(320px, 60vw); }   /* any anchor kept on a 375px screen */
  .mt-pin { left: 11px; top: 24px; height: 48px; }
  .mt-roster-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mt-roster-table, .mt-roster-table tbody { display: block; }
  .mt-roster-table tbody tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 6px; padding: 12px; border-bottom: 2px solid var(--line2); }
  .mt-roster-table tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
  .mt-roster-table td { grid-column: span 3; padding: 0; border: 0; }
  .mt-roster-table td:nth-of-type(-n + 3) { grid-column: span 4; }
  .mt-roster-table td::before { content: attr(data-k); display: block; margin-bottom: 4px; color: var(--fg2); font: 12px var(--f-ui); }
  .mt-cell { min-width: 0; padding: 4px 6px; }
  .mt-kit-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-token { animation: none; }
}
.start-ref { justify-self: start; margin: 12px 0 0; padding: 2px 9px; border: 2px solid var(--up); color: var(--up); font-size: 13px; }