:root {
  --bg: #0d0a05; --panel: rgba(22, 16, 7, .86); --panel-2: rgba(40, 29, 12, .7); --line: rgba(255, 196, 64, .15);
  --text: #f3e9d2; --muted: #a8976f; --gold: #ffc23d; --up: #4ade80; --down: #f87171; --violet: #c4a1ff; --sky: #7dd3fc;
  --mono: ui-monospace, "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
button { font: inherit; color: inherit; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); }

/* ── 顶栏 ── */
.hud { position: fixed; top: 0; left: 0; right: 0; height: 58px; display: flex; align-items: center; gap: 28px;
  padding: 0 18px; background: linear-gradient(var(--bg) 60%, transparent); z-index: 3; }
.brand { font-weight: 900; letter-spacing: .2em; color: var(--gold); font-size: 17px; white-space: nowrap; }
/* 品牌名来自 site-config.json（按配置原样显示）：太长就省略号截断，手机上更短，免得挤掉顶栏数字 */
#brand-name { display: inline-block; max-width: 12em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.brand em { font-style: normal; font-size: 11px; letter-spacing: 0; margin-left: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.brand em.live { background: rgba(74, 222, 128, .15); color: var(--up); }
.brand em.down { background: rgba(248, 113, 113, .15); color: var(--down); }
.stats { display: flex; gap: 22px; flex: 1; min-width: 0; overflow: hidden; }
.stats label { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats > div { min-width: 0; }
.stats b { display: block; font: 600 15px/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-badge { font-size: 11px; color: var(--gold); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
/* 语言切换（右上角，与徽标同一风格；手机宽度下徽标隐藏，它仍然保留） */
.lang-btn { flex: 0 0 auto; min-width: 42px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--gold); background: transparent;
  border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; white-space: nowrap; cursor: pointer; }
.lang-btn:hover { border-color: var(--gold); }
.lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* X 外链：与语言按钮同一风格的圆形图标按钮；地址来自 /site-config.json，没配好时带 hidden */
.x-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; color: var(--gold);
  border: 1px solid var(--line); border-radius: 99px; }
.x-link[hidden] { display: none; }
.x-link svg { width: 13px; height: 13px; }
.x-link:hover { border-color: var(--gold); }
.x-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 标签页 ── */
.tabs { position: fixed; top: 58px; left: 0; right: 0; display: flex; gap: 4px; padding: 0 14px; z-index: 3; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* ── 内容页（非蜂巢标签） ── */
.page { position: fixed; top: 100px; bottom: 34px; left: 16px; right: 16px; max-width: 1180px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px);
  overflow: auto; padding: 18px 20px; z-index: 2; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body[data-tab="hive"] .page { display: none; }
body:not([data-tab="hive"]) .side { display: none; }
.page h2 { margin: 0 0 4px; font-size: 18px; color: var(--gold); }
.page .sub { color: var(--muted); margin: 0 0 14px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 4px 12px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--panel-2); color: var(--gold); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kpi label { display: block; color: var(--muted); font-size: 11px; }
.kpi b { font: 600 18px/1.3 var(--mono); font-variant-numeric: tabular-nums; }

table { width: 100%; min-width: 760px; border-collapse: collapse; }
.mini { min-width: 0; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: -18px; background: rgb(22, 16, 7); }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.r, th.r { text-align: right; }
tr.click { cursor: pointer; }
tr.click:hover td { background: rgba(255, 194, 61, .05); }
td.why { color: var(--muted); min-width: 240px; max-width: 420px; }
.table-wrap { overflow-x: auto; }
.empty { color: var(--muted); padding: 30px 0; text-align: center; }

.bee-tag { font-weight: 600; white-space: nowrap; }
.lv { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; margin-left: 6px; border: 1px solid currentColor; }
.style { font-size: 11px; color: var(--muted); }
.side-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.side-tag.buy { background: rgba(74, 222, 128, .15); color: var(--up); }
.side-tag.sell { background: rgba(248, 113, 113, .15); color: var(--down); }
/* 「销毁」页：活着时的"烧一半"与死亡时的销毁（剩下的全部）区分开 */
.side-tag.half { background: rgba(255, 120, 60, .2); color: #ff9a5a; }
.side-tag.death { background: rgba(248, 113, 113, .15); color: var(--down); }
.reason { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.dead { opacity: .5; }
a.coin { color: inherit; text-decoration: underline dotted rgba(255, 194, 61, .5); }
a.coin:hover { color: var(--gold); }

/* ── 玩法说明 ── */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.steps li { counter-increment: s; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 10px 48px; position: relative; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 14px; top: 10px; font: 700 14px var(--mono); color: var(--gold); }
.steps b { color: var(--gold); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* ── 蜂巢标签右侧栏 ── */
.side { position: fixed; right: 16px; top: 104px; bottom: 40px; width: 330px; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); padding: 12px 14px; }
.card h3 { margin: 0 0 8px; font-size: 13px; color: var(--gold); }
.card.live { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bar { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width .4s; }
#feed { list-style: none; margin: 0; padding: 0; overflow: hidden auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#feed li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); animation: in .35s ease-out; }
#feed li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feed .tag { font-size: 11px; font-weight: 700; text-align: center; border-radius: 4px; height: fit-content; }
#feed .who { cursor: pointer; } #feed .who:hover { color: var(--gold); }
.t-claim { background: rgba(255, 194, 61, .2); color: var(--gold); }
.t-spawn { background: rgba(255, 255, 255, .12); }
.t-open { background: rgba(74, 222, 128, .15); color: var(--up); }
.t-close { background: rgba(248, 113, 113, .13); color: var(--down); }
.t-sweep { background: rgba(255, 194, 61, .14); color: var(--gold); }
.t-burn { background: rgba(255, 120, 60, .2); color: #ff9a5a; }
.t-die { background: rgba(120, 120, 120, .25); color: #bbb; }
.t-reap { background: rgba(220, 70, 40, .22); color: #ff8a6a; }   /* 死亡结算：剩下的代币全部销毁 */
@keyframes in { from { opacity: 0; transform: translateX(12px); } }

/* ── 蜜蜂详情抽屉 ── */
.drawer { position: fixed; top: 104px; left: 16px; bottom: 40px; width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; backdrop-filter: blur(12px); padding: 14px 16px; overflow-y: auto; z-index: 4; scrollbar-width: thin; }
.drawer.hidden { display: none; }
.drawer .close { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; }
.drawer h2 { margin: 0; font-size: 18px; }
.drawer h4 { margin: 14px 0 6px; font-size: 12px; color: var(--gold); font-weight: 600; }
.drawer dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.drawer dt { color: var(--muted); } .drawer dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.drawer .thought { background: var(--panel-2); border-left: 3px solid var(--gold); padding: 8px 10px; border-radius: 6px; margin-top: 10px; }
.gene { display: grid; grid-template-columns: 70px 1fr 56px; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; }
.gene .bar { margin: 0; }
html[lang="en"] .gene { grid-template-columns: 92px 1fr 56px; }   /* 英文基因名更长（Take profit、Position size…） */
.link { color: var(--sky); cursor: pointer; text-decoration: underline dotted; }
.mini { width: 100%; font-size: 12px; }
.mini td { padding: 4px 4px; }

.foot { position: fixed; left: 16px; right: 16px; bottom: 8px; display: flex; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: 11px; pointer-events: none; z-index: 1; }
.foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; }
/* 合约地址（左下角，来自 /site-config.json）：margin-right:auto 把它推到左边，没配置时右边的操作提示照样靠右 */
.foot .ca { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--gold); font-weight: 600; }
.foot .ca[hidden] { display: none; }
.foot .ca code { font-family: var(--mono); font-weight: 400; color: var(--muted); }
.ca-copy { font-size: 10px; font-weight: 600; color: var(--gold); background: transparent; border: 1px solid var(--line); border-radius: 99px;
  padding: 1px 8px; cursor: pointer; }
.ca-copy:hover { border-color: var(--gold); }
.ca-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 440px) {
  .hide-xs { display: none; }
  .brand { letter-spacing: .12em; }
  .lang-btn { min-width: 0; font-size: 10px; padding: 2px 7px; }
}
@media (max-width: 820px) {
  .hud { gap: 14px; }
  .stats { gap: 14px; }
  .hide-sm, .sim-badge { display: none; }
  .side { top: auto; left: 16px; right: 16px; width: auto; height: 38%; }
  .card#spawn-card { display: none; }
  .drawer { left: 16px; right: 16px; width: auto; top: auto; height: 62%; }
  .page { top: 100px; left: 8px; right: 8px; padding: 14px; }
}

/* ── 链上模式（v4，只在 s.chain 存在时出现；纸面模式下这些元素不存在或带 hidden） ── */
.st-ok { color: var(--up); }
.st-fail { color: var(--down); }
.st-warn { color: var(--gold); }
.st-pend { color: var(--muted); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .st-pend { animation: none; } }
.chain-chip { font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; border-radius: 99px; padding: 2px 9px; }
.chain-chip[hidden], .tabs button[hidden] { display: none; }
a.chain-link { color: var(--sky); text-decoration: underline dotted; }
a.chain-link:hover { color: var(--gold); }
.paper-tag { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin-left: 8px; }
.chain-line { font-size: 12px; margin-top: 4px; }
.drawer .chain-note { margin-top: 8px; font-size: 12px; }
.chain-tag { font-size: 11px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; font-family: system-ui, sans-serif; }
.page h3.sec { margin: 20px 0 8px; font-size: 14px; color: var(--gold); }
.page code { font-family: var(--mono); font-size: 12px; background: rgba(255, 255, 255, .06); border-radius: 4px; padding: 0 4px; word-break: break-all; }
.chain-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 6px; }
.chain-dl dt { color: var(--muted); white-space: nowrap; }
.chain-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chain-how ul { margin: 0; padding-left: 18px; }
/* K1（M9）：每个数字旁的"链上 / 模拟"标注，和数字在同一个视觉块里；顶栏用伪元素挂在标签前面（文字由标签自己的 data-rs-text 给出，attr() 只读伪元素所在的元素；手机上标签被截断时标注仍可见） */
.rs-tag { display: inline-block; vertical-align: middle; font: 600 10px/1.4 system-ui, sans-serif; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 5px; white-space: nowrap; }
.rs-tag.real { color: var(--up); }
.rs-tag.sim { color: var(--muted); }
.stats label[data-rs-text]::before { content: attr(data-rs-text); margin-right: 4px; font-size: 9px; font-weight: 600; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; }
.stats label[data-rs="real"]::before { color: var(--up); }
.stats label[data-rs="sim"]::before { color: var(--muted); }
.disclose li { margin-bottom: 6px; }
@media (max-width: 480px) { .stats label[data-rs-short]::before { content: attr(data-rs-short); } }
/* 链上模式的手机宽度（≤ 400px）：顶栏多了状态芯片，收起 X 按钮，免得数字被截断 */
@media (max-width: 400px) { .hud:has(#h-chain:not([hidden])) .x-link { display: none; } }
.chain-how li { margin: 3px 0; }
.banner { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; word-break: break-word; }
.banner.bad { color: var(--down); border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .1); }
.banner.warn { color: var(--gold); border-color: rgba(255, 194, 61, .4); background: rgba(255, 194, 61, .08); }
.banner.note { color: var(--muted); }
tr.pend td { color: var(--muted); }
.t-ready { background: rgba(74, 222, 128, .15); color: var(--up); }
.t-drop { background: rgba(248, 113, 113, .2); color: var(--down); }
@media (max-width: 440px) {
  /* 手机宽度：顶栏多了语言按钮，整体收紧一点，保证数字（例如 "299 / 469"）不被截断；写在 ≤820px 规则之后才能覆盖它 */
  .hud { gap: 10px; }
  .brand { font-size: 15px; }
  #brand-name { max-width: 4.6em; }   /* 约等于 "Waggle" 的宽度：375px 宽的手机上再长就会挤掉顶栏数字 */
  .brand em { margin-left: 6px; padding: 2px 6px; }
  .stats { gap: 10px; }
  .stats b { font-size: 13px; }
  .x-link { width: 24px; height: 22px; }
  /* 手机宽度：芯片变紧凑，只在芯片显示时（链上模式）收窄顶栏间距，纸面模式不受影响 */
  .chain-chip { flex: 0 0 auto; max-width: 84px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; padding: 1px 6px; }
  .hud:has(#h-chain:not([hidden])) { gap: 8px; padding: 0 10px; }
  .hud:has(#h-chain:not([hidden])) .stats { gap: 10px; }
  .chain-dl { grid-template-columns: 1fr; gap: 2px; }
  .chain-dl dd { margin-bottom: 6px; }
}