/* 讲价 — a market-stall haggle in two tones: tarp blue ground, navy ink, one chartreuse for whoever holds the price. */
:root{
  --ground:#5B6C9E; --navy:#1B2A4A; --navy2:#24365C; --cream:#F6F1E4; --soft:#C9D0E4; --lime:#C6F23A; --lime-ink:#14200A;
  --hair:rgba(246,241,228,.22); --hair2:rgba(27,42,74,.35);
  --cjk:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif;
  --disp:"ZCOOL KuaiLe","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--cream); font-family:var(--cjk); font-size:15px; line-height:1.6;
  padding:18px 14px 40px 104px; min-height:100vh; -webkit-text-size-adjust:100%;
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start;
}
a{color:var(--cream)}
button{font:inherit; cursor:pointer}
code{font-family:var(--mono)}
[hidden]{display:none !important}

/* ---------- the price tag: a narrow tag hung on the left edge, mid-height, carrying the CA ---------- */
.pricetag{
  position:fixed; left:8px; top:50%; transform:translateY(-50%); z-index:50;
  width:84px; padding:22px 7px 10px; border-radius:10px 10px 14px 14px;
  background:var(--cream); color:var(--navy); box-shadow:0 12px 30px rgba(14,22,44,.35);
  display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:center;
}
.tag-hole{position:absolute; top:7px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--ground); box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.tag-name{display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:var(--navy)}
.tag-name img{border-radius:6px; display:block}
.tag-name b{font-family:var(--disp); font-size:20px; font-weight:400; line-height:1}
.tag-tick{font-family:var(--mono); font-size:8.5px; letter-spacing:.04em; opacity:.7}
.tag-k{font-size:9px; font-weight:700; letter-spacing:.08em; border-top:1px dashed var(--hair2); padding-top:6px}
.tag-addr{display:block; font-size:8.6px; line-height:1.4; word-break:break-all; user-select:all; color:var(--navy); font-weight:500}
.tag-copy{background:var(--navy); color:var(--lime); border:0; border-radius:7px; padding:6px 2px; font-size:11px; font-weight:700}
.tag-copy:disabled{opacity:.45; cursor:default}
.tag-copy.done{background:var(--lime); color:var(--lime-ink)}
.tag-gmgn{font-size:9px; color:var(--navy); opacity:.75; text-decoration:none}
.tag-wallet{background:transparent; border:1px solid var(--navy); color:var(--navy); border-radius:7px; padding:5px 2px; font-size:10px; font-weight:700}
.tag-wallet.on{background:var(--navy); color:var(--cream); font-family:var(--mono); font-size:8.5px}
.tag-nav{display:flex; flex-direction:column; gap:2px; border-top:1px dashed var(--hair2); padding-top:6px}
.tag-nav a{font-size:11px; color:var(--navy); text-decoration:none; padding:2px 0; border-radius:5px}
.tag-nav a.here{background:var(--navy); color:var(--lime)}

/* ---------- the hero: a live paragraph saying who holds the price ---------- */
.say{padding:4px 2px 0}
.say-kick{display:flex; gap:8px; align-items:baseline; font-size:12px; margin-bottom:6px}
.say-kick b{font-family:var(--disp); font-weight:400; font-size:15px; color:var(--lime)}
.say-kick i{font-style:normal; color:var(--soft)}
.say-live{margin:0; font-size:15px; line-height:1.75; color:var(--cream)}
.say-live em{font-style:normal; font-family:var(--disp); color:var(--lime); font-size:19px; padding:0 1px}
.say-live a{color:var(--lime); text-decoration:none; font-family:var(--mono); font-size:13px}

/* ---------- the ladder ---------- */
.stall{background:var(--navy); border-radius:16px; padding:14px 14px 12px; position:relative}
.stall-head{display:flex; align-items:baseline; gap:8px}
.pot-k{font-size:12px; color:var(--soft)}
.pot-v{font-family:var(--disp); font-size:30px; line-height:1; color:var(--cream)}
.clock{margin-left:auto; font-family:var(--mono); font-size:20px; color:var(--lime); font-weight:500}
.clock.low{color:#FF8A5B}
.clock.out{color:var(--soft)}
.fuse{height:4px; background:rgba(246,241,228,.12); border-radius:2px; margin:10px 0 12px; overflow:hidden}
.fuse i{display:block; height:100%; width:100%; background:var(--lime); transition:width 1s linear}
.rungs{list-style:none; margin:0; padding:0 16px; position:relative; display:flex; flex-direction:column; gap:8px}
.rungs::before,.rungs::after{content:""; position:absolute; top:-6px; bottom:-6px; width:5px; border-radius:3px; background:var(--soft); opacity:.55}
.rungs::before{left:2px} .rungs::after{right:2px}
.rung{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; background:var(--navy2); border:1px solid var(--hair); position:relative}
.rung-p{font-family:var(--disp); font-size:22px; line-height:1; min-width:84px}
.rung-w{font-size:12px; color:var(--soft); line-height:1.35}
.rung-w a{color:var(--cream); font-family:var(--mono); font-size:11.5px; text-decoration:none}
.rung.ghost{background:transparent; border:1px dashed var(--hair)}
.rung.ghost .rung-p{color:var(--soft)}
.rung.dim{opacity:.5}
.rung.first{border:1.5px dashed var(--lime); animation:beckon 1.6s ease-in-out infinite}
.rung.first .rung-p,.rung.first .rung-w{color:var(--lime)}
.rung.held{background:var(--lime); border-color:var(--lime); color:var(--lime-ink); transform:scale(1.02)}
.rung.held .rung-p{color:var(--lime-ink); font-size:28px}
.rung.held .rung-w{color:var(--lime-ink)}
.rung.held .rung-w a{color:var(--lime-ink); font-weight:700}
.rung.held::after{content:"按住"; position:absolute; right:-6px; top:-9px; background:var(--cream); color:var(--navy); font-size:10px; font-weight:900; padding:1px 6px; border-radius:5px; transform:rotate(6deg)}
.rung.beaten .rung-p{text-decoration:line-through; text-decoration-color:rgba(246,241,228,.5); color:var(--soft)}
.rung.more{justify-content:center; background:transparent; border:0; padding:2px; font-size:12px; color:var(--soft)}
.rung.more a{color:var(--soft)}
.rung.fresh{animation:drop .5s ease-out}
.stall-foot{margin:12px 0 0; font-size:12px; color:var(--soft)}
@keyframes beckon{0%,100%{box-shadow:0 0 0 0 rgba(198,242,58,.0)}50%{box-shadow:0 0 0 4px rgba(198,242,58,.18)}}
@keyframes drop{from{transform:translateY(-14px); opacity:0}to{transform:none; opacity:1}}

/* ---------- the tool: a price keypad ---------- */
.tool{background:var(--cream); color:var(--navy); border-radius:16px; padding:14px}
.tool-k{display:block; font-size:12px; font-weight:700; margin-bottom:6px}
.tool-screen{display:flex; align-items:baseline; gap:6px; background:var(--navy); border-radius:10px; padding:8px 12px}
.tool-screen input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--lime); font-family:var(--disp); font-size:34px; line-height:1.1; padding:0}
.tool-screen input::placeholder{color:rgba(198,242,58,.4)}
.tool-screen span{font-family:var(--mono); font-size:11px; color:var(--soft)}
.tool-quick{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0}
.tool-quick button{background:transparent; border:1px solid var(--navy); color:var(--navy); border-radius:8px; padding:6px 0; font-size:12px; font-weight:700}
.keys{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.keys button{background:#E6DFCC; border:0; border-radius:8px; padding:9px 0; font-family:var(--disp); font-size:20px; color:var(--navy)}
.keys button:active{background:var(--lime)}
.tool-math{font-size:12.5px; line-height:1.55; margin:10px 0}
.tool-math b{font-family:var(--disp); font-weight:400; font-size:15px}
.tool-go{width:100%; background:var(--navy); color:var(--lime); border:0; border-radius:10px; padding:13px; font-size:16px; font-weight:900}
.tool-go:disabled{opacity:.6}
.tool-settle{width:100%; margin-top:8px; background:var(--lime); color:var(--lime-ink); border:0; border-radius:10px; padding:11px; font-weight:900}

/* ---------- the feed ---------- */
.feed{background:rgba(27,42,74,.55); border-radius:16px; padding:12px 14px}
.feed-h{margin:0 0 6px; font-size:13px; font-weight:700; display:flex; justify-content:space-between; align-items:baseline}
.feed-h small{font-weight:400; color:var(--soft); font-size:11px}
.feed-list{list-style:none; margin:0; padding:0; max-height:340px; overflow:auto}
.feed-list li{display:grid; grid-template-columns:44px 1fr; gap:8px; padding:7px 0; border-bottom:1px solid var(--hair); font-size:12.5px; line-height:1.45}
.feed-list li:last-child{border-bottom:0}
.feed-list li .t{font-family:var(--mono); font-size:10.5px; color:var(--soft); padding-top:2px}
.feed-list li b{font-family:var(--disp); font-weight:400; font-size:15px; color:var(--lime)}
.feed-list li a{color:var(--cream); font-family:var(--mono); font-size:11.5px; text-decoration:none}
.feed-list li.deal{background:rgba(198,242,58,.1); border-radius:6px; padding-left:4px}
.feed-list li.quiet{display:block; color:var(--soft)}
.feed-list li.new{animation:drop .5s ease-out}

/* ---------- rules ---------- */
.rules{padding:2px}
.rules h3,.other h3{font-family:var(--disp); font-weight:400; font-size:22px; margin:0 0 8px}
.rules ol{margin:0; padding-left:20px; font-size:13.5px}
.rules li{margin-bottom:6px}
.rules li b{color:var(--lime); margin-right:6px}
.example{margin-top:12px; background:var(--cream); color:var(--navy); border-radius:12px; padding:12px}
.ex-k{font-size:11px; font-weight:900; letter-spacing:.1em}
.example table{width:100%; border-collapse:collapse; margin:6px 0; font-size:13px}
.example td{padding:4px 6px; border-bottom:1px dashed var(--hair2)}
.example td:nth-child(2){font-family:var(--disp); font-size:17px; text-align:right}
.example td:last-child{text-align:right; font-size:12px}
.example tr.held td{background:var(--lime); font-weight:700}
.example p{margin:6px 0 0; font-size:12.5px}

/* ---------- other views ---------- */
.other{background:var(--navy); border-radius:16px; padding:14px}
.other table{width:100%; border-collapse:collapse; font-size:13px}
.other th{text-align:left; font-size:11px; color:var(--soft); font-weight:500; padding:4px}
.other td{padding:7px 4px; border-top:1px solid var(--hair)}
.other td.r,.other th.r{text-align:right}
.other a{color:var(--lime); text-decoration:none}
.other p{margin:0 0 10px}
.other .quiet{color:var(--soft)}
body.on-other .stall,body.on-other .tool,body.on-other .feed,body.on-other .rules{display:none}

/* ---------- footer ---------- */
.foot{font-size:11.5px; color:var(--soft); border-top:1px solid var(--hair); padding-top:12px}
.foot p{margin:0 0 4px}
.foot code{font-size:10.5px; word-break:break-all; color:var(--cream)}
.foot-links{display:flex; gap:14px}
.foot-links a{color:var(--cream)}

.sheet{position:fixed; inset:0; background:rgba(14,22,44,.6); display:flex; align-items:flex-end; justify-content:center; z-index:80}
.sheet-card{background:var(--cream); color:var(--navy); width:min(420px,100%); border-radius:16px 16px 0 0; padding:16px; display:flex; flex-direction:column; gap:10px}
.sheet-card #sheetB{display:flex; flex-direction:column; gap:6px}
.sheet-card button{background:var(--navy); color:var(--cream); border:0; border-radius:9px; padding:10px}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--navy); color:var(--lime); padding:9px 14px; border-radius:10px; font-size:13px; z-index:90; max-width:80vw}

/* ---------- ~720–1000: still one column, wider measure, bigger object ---------- */
@media (min-width:640px){
  body{padding:28px 32px 48px 140px; font-size:16px}
  .pricetag{left:16px; width:104px; padding:24px 9px 12px}
  .tag-addr{font-size:10.4px}
  .tag-tick{font-size:9.5px}
  .say-live{font-size:17px}
  .say-live em{font-size:23px}
  .pot-v{font-size:40px}
  .rung-p{font-size:28px; min-width:110px}
  .rung.held .rung-p{font-size:36px}
  .rung-w{font-size:13px}
  .keys button{padding:11px 0}
}

/* ---------- ≥1000: recompose — the ladder + its sentence on the left, the keypad + feed beside it ---------- */
@media (min-width:1000px){
  body{
    max-width:1260px; margin:0 auto; padding:36px 40px 56px 220px;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); column-gap:28px; row-gap:20px;
  }
  .pricetag{left:max(24px, calc(50vw - 630px + 24px)); width:150px; padding:28px 12px 14px; gap:8px}
  .tag-name b{font-size:26px}
  .tag-addr{font-size:11.3px; line-height:1.5}
  .tag-copy{font-size:13px; padding:8px 4px}
  .tag-gmgn{font-size:11px}
  .tag-wallet{font-size:12px; padding:7px 4px}
  .tag-nav a{font-size:13px}
  .say{grid-column:1 / 3}
  .say-live{font-size:19px; max-width:58em}
  .say-live em{font-size:26px}
  .stall{grid-column:1; grid-row:2 / span 2; align-self:start; padding:22px 24px 18px}
  .pot-v{font-size:52px}
  .clock{font-size:28px}
  .rungs{gap:10px; padding:0 22px}
  .rung{padding:12px 16px}
  .rung-p{font-size:34px; min-width:140px}
  .rung.held .rung-p{font-size:44px}
  .tool{grid-column:2; grid-row:2}
  .feed{grid-column:2; grid-row:3}
  .rules{grid-column:1 / 3; display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .rules h3{grid-column:1 / 3; margin:0}
  .example{margin-top:0}
  .other{grid-column:1 / 3}
  .foot{grid-column:1 / 3}
}