main{max-width:940px}
.lede{color:var(--soft);font-size:.95rem}

.panel{background:#f3ece1;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 26px rgba(80,60,40,.14);padding:10px 10px 4px;margin-bottom:var(--gap)}
#stage{width:100%}
#stage canvas{display:block;width:100%!important;height:auto!important;border-radius:9px;
  touch-action:none;cursor:grab}
#stage canvas:active{cursor:grabbing}

.readout{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
  padding:9px 6px 8px;color:#8a7a66;font-size:.85rem}
.readout b{color:var(--ink);font-weight:700}
.readout b.up{color:#3f8f6a}
.readout b.down{color:#c1553f}

.controls{justify-content:center;flex-wrap:wrap;margin-bottom:var(--gap)}

/* ⚠️ 5.6em 不是 CN 的 4.4em：列宽由最长的 "Friction" 决定 */
.knobs label{display:grid;grid-template-columns:5.6em 1fr 5.4em;align-items:center;
  gap:12px;margin-bottom:13px;color:var(--ink);font-size:.92rem}
.knobs label:last-child{margin-bottom:0}
.knobs .k{color:var(--ink)}
.knobs input[type=range]{padding:0;border:none;background:transparent;box-shadow:none;accent-color:var(--accent)}
.knobs span:last-child{color:var(--soft);font-size:.85rem;text-align:right}

@media(max-width:600px){
  .knobs label{grid-template-columns:5.2em 1fr 5em;gap:8px;font-size:.86rem}
  .readout{gap:12px;font-size:.8rem}
}

/* 结算条 + 共享榜（8-15 加规则闭环时补的） */
.over{background:#fff6ea;border-color:#efdcc4}
.over .big{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.over .big b{color:var(--accent);font-size:1.3rem}
.postrow{flex-wrap:wrap}
/* 名字框是 textarea 假扮的单行（原因写在 app.js 里）：高度自己钉死、不给它滚 */
.postrow textarea{flex:0 1 10em;height:2.6em;line-height:1.4;padding:.5em .7em;
  resize:none;overflow:hidden;white-space:nowrap;font-family:inherit;font-size:.95rem}

.best{color:var(--soft);font-size:.85rem;margin-left:auto}
.best b{color:var(--ink)}
.flash{color:#3f8f6a;font-size:.85rem;opacity:0;transition:opacity .2s}
.flash.on{opacity:1}

.two{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--gap);align-items:start}
.ch{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.blist{font-size:.9rem;color:var(--soft);min-height:5em}
.brow{display:flex;align-items:baseline;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:none}
.brow .r{color:var(--accent);font-weight:700;font-size:.8rem;width:2.2em;flex:none}
.brow .n{color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow b{color:var(--ink)}
.mini{font-size:.78rem;margin:10px 0 0}

@media(max-width:760px){
  .two{grid-template-columns:1fr}
  .best{margin-left:0;width:100%}
}