/* 视觉语言：一张骰宝台。
   台呢（深绿）承载平台这一侧的实时内容 —— 当前局、承诺、台面；
   纸承载玩家自己留存的东西 —— 注单、回执、验证结果。
   下注页与开奖历史页共用这一份。验证页（web/verifier/index.html）有自己的一份
   同名变量 —— 它要能脱离 api 单独托管（make serve-verifier），引用不到这里。
   改色要两处一起改。

   不引入外部字体：验证页的立场是不依赖第三方资源，下注页跟着它走。 */
:root {
  --felt: #0e3b30;
  --felt-hi: #15493b;
  --felt-lo: #0a2e25;
  --rule: #25594a;
  --board: #103f34;
  --brass: #c9a55c;
  --brass-line: rgba(201, 165, 92, .45);
  --ink: #ece7d8;
  --dim: #93b0a2;
  --paper: #eef0ea;
  --paper-hi: #f8f9f5;
  --paper-ink: #1f2622;
  --paper-dim: #69716c;
  --paper-rule: #d3d7ce;
  --chip: #c8412d;
  --chip-edge: #f3eee0;
  --win: #2e8a57;
  --warn: #f08a76;

  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--felt-lo); }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--felt-hi), var(--felt) 60%, var(--felt-lo));
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.hidden { display: none !important; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-family: var(--mono); font-size: .88em; }

/* ---- 顶栏 ---- */
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--rule);
  background: rgba(10, 46, 37, .7);
}
.brand { font: 700 1.1rem/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.tag {
  font: 500 .7rem/1 var(--sans); color: var(--brass); border: 1px solid var(--brass-line);
  border-radius: 99px; padding: .2rem .5rem; margin-left: .55rem; vertical-align: 2px;
}
.who { display: flex; align-items: baseline; gap: 1.25rem; font-size: .88rem; flex-wrap: wrap; justify-content: flex-end; white-space: nowrap; }
.who .k { color: var(--dim); margin-right: .35rem; font-size: .8rem; }
.who b { font-weight: 600; }
.linkbtn { background: none; border: none; padding: 0; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--ink); }

main { max-width: 1140px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) 4rem; }

/* ---- 纸 ---- */
.paper {
  background: var(--paper); color: var(--paper-ink); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 32px rgba(0, 0, 0, .35);
}
.paper a { color: var(--paper-ink); }
.paper-title {
  font: 600 .75rem/1 var(--sans); letter-spacing: .12em; color: var(--paper-dim); margin: 0 0 .9rem;
}

/* ---- 未登录 ---- */
.gate {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; min-height: calc(100vh - 12rem);
}
.thesis h1 { font: 900 clamp(1.9rem, 3.6vw, 2.75rem)/1.3 var(--serif); margin: 0 0 1.25rem; letter-spacing: .01em; }
.thesis p { color: var(--dim); max-width: 34em; margin: 0 0 1.25rem; }
.formula {
  display: inline-block; color: var(--brass); background: var(--felt-lo); border: 1px solid var(--rule);
  border-radius: 4px; padding: .5rem .75rem; font-size: .82rem; line-height: 1.5;
}
.login { padding: 1.5rem 1.5rem 1.25rem; }
.seg { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--paper-rule); margin-bottom: 1.25rem; }
.seg button {
  background: none; border: none; padding: 0 0 .6rem; margin-bottom: -1px; color: var(--paper-dim);
  border-bottom: 2px solid transparent; font-weight: 500;
}
.seg button[aria-selected="true"] { color: var(--paper-ink); border-bottom-color: var(--chip); font-weight: 600; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.field input {
  width: 100%; background: var(--paper-hi); border: 1px solid var(--paper-rule); border-radius: 4px;
  padding: .6rem .7rem; color: var(--paper-ink);
}
.field input:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 0; border-color: transparent; }
.primary {
  width: 100%; background: var(--chip); color: #fff; border: none; border-radius: 4px;
  padding: .7rem 1rem; font-weight: 600; letter-spacing: .08em;
  box-shadow: 0 2px 0 #8a2a1d;
}
.primary:not(:disabled):hover { filter: brightness(1.07); }
.primary:not(:disabled):active { transform: translateY(1px); box-shadow: 0 1px 0 #8a2a1d; }
.primary:focus-visible { outline-color: var(--paper-ink); }
.msg { font-size: .85rem; margin: .7rem 0 0; min-height: 1.4em; color: var(--paper-dim); }
.msg.err { color: #b3261e; }
.msg.ok { color: var(--win); }

/* ---- 通知条 ---- */
.notice { padding: 1rem 1.25rem; margin-bottom: 1.25rem; font-size: .9rem; }
.notice strong { display: block; margin-bottom: .35rem; }
.notice .code {
  display: block; font: 600 1.15rem/1.4 var(--mono); letter-spacing: .06em; margin: .35rem 0 .6rem; word-break: break-all;
}
.notice .quiet {
  background: none; border: 1px solid var(--paper-rule); border-radius: 4px; padding: .3rem .8rem;
  color: var(--paper-ink); font-size: .85rem; margin-top: .6rem;
}
.notice.felt {
  background: var(--felt-lo); color: var(--dim); border: 1px dashed var(--rule); border-radius: 4px; box-shadow: none;
}
.notice.felt code { display: block; color: var(--ink); margin-top: .4rem; word-break: break-all; line-height: 1.5; }

/* ---- 玩法切换 ----
   页面的第一个决定。两块大名牌，选中的那块亮起来；下面的一切都只讲它。 */
.game-switch { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.game-tab {
  flex: 1; display: flex; align-items: baseline; justify-content: center; gap: .7rem;
  background: rgba(10, 46, 37, .45); color: var(--dim);
  border: 1px solid var(--rule); border-radius: 10px; padding: .85rem 1rem;
}
.game-tab b { font: 700 1.25rem var(--serif); }
.game-tab span { font-size: .82rem; }
.game-tab:hover { color: var(--ink); border-color: var(--brass-line); }
.game-tab[aria-selected="true"] {
  color: var(--brass); background: var(--board); border-color: var(--brass);
  box-shadow: inset 0 0 0 1px var(--brass-line);
}
.game-tab[aria-selected="true"] span { color: var(--ink); }

/* ---- 当前局 ---- */
.draw { margin-bottom: 1.5rem; }
.draw-top { display: grid; grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr); align-items: end; gap: 1rem; }
.draw-label { color: var(--dim); font-size: .85rem; }
.drawno { display: block; font: 900 2rem/1.1 var(--serif); color: var(--ink); margin-top: .15rem; }
.clock { text-align: right; }
.clock .t {
  display: block; font: 200 3.4rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.clock .u { color: var(--dim); font-size: .85rem; }
.draw.closing .clock .t { color: var(--warn); }
.track { height: 3px; background: var(--rule); margin: .9rem 0 1.1rem; border-radius: 2px; overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--brass); }
.draw.closing .track i { background: var(--warn); }
/* 可验证的凭据：平时一行，点开才是指纹、轮次与回执。 */
.lock { border: 1px solid var(--rule); border-radius: 6px; background: rgba(10, 46, 37, .35); padding: 0; }
.lock summary {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; cursor: pointer;
  list-style: none; font: 400 .85rem/1.5 var(--sans); color: var(--dim);
}
.lock summary::-webkit-details-marker { display: none; }
.lock-badge {
  flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--brass);
  border: 1px solid var(--brass-line); border-radius: 99px; padding: .1rem .55rem;
}
.lock-line { flex: 1; }
.lock-more { flex: none; color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.lock[open] .lock-more { visibility: hidden; }
.lock .facts { padding: .4rem .9rem 0; }
.lock .receipt-row { padding: 0 .9rem .9rem; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem 2.25rem; margin: 0; }
.facts dt { color: var(--dim); font-size: .78rem; margin-bottom: .15rem; }
.facts dd { margin: 0; font-family: var(--mono); font-size: .86rem; }
.hash { display: flex; flex-wrap: wrap; column-gap: .55em; font-family: var(--mono); }
.hash span:nth-child(odd) { color: var(--ink); }
.hash span:nth-child(even) { color: #c4d3ca; }
.receipt-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1rem; font-size: .85rem; color: var(--dim); }
.ghost {
  background: transparent; border: 1px solid var(--brass-line); color: var(--brass); border-radius: 4px;
  padding: .35rem .85rem; font-size: .85rem;
}
.ghost:hover { border-color: var(--brass); }
.receipt-row .ok { color: var(--brass); }
.receipt-row .err { color: var(--warn); }

/* ---- 台面 + 下注单 ---- */
.table-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; margin-bottom: 2.5rem; }
.board {
  border: 1px solid var(--brass-line); border-radius: 14px; padding: .5rem 1.5rem 1rem;
  background: var(--board);
  box-shadow: inset 0 0 0 5px var(--felt), inset 0 0 0 6px rgba(201, 165, 92, .2);
}
.board-empty { color: var(--dim); padding: 1rem 0; margin: 0; }
.game { padding: 1rem 0 .5rem; }
.game-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem; }
.game-h h2 { font: 700 1.2rem/1.3 var(--serif); margin: 0; }
.game-h span { color: var(--dim); font-size: .78rem; }
.mk { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .85rem 0; }
.mk + .mk { border-top: 1px dashed var(--rule); }
.mk-h b { display: block; font: 700 1rem/1.3 var(--serif); }
.mk-h span { font: .74rem var(--mono); color: var(--dim); }
.cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .6rem; }
.cell {
  --cell-bg: transparent;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  min-height: 6.5rem; padding: .8rem .4rem; border-radius: 4px; color: var(--ink);
  background: var(--cell-bg); border: 1px solid var(--brass-line);
  box-shadow: inset 0 0 0 4px var(--felt), inset 0 0 0 5px rgba(201, 165, 92, .22);
  transition: background-color .15s, border-color .15s;
}
.cell:hover { --cell-bg: rgba(201, 165, 92, .07); border-color: rgba(201, 165, 92, .7); }
.cell[aria-pressed="true"] { --cell-bg: rgba(201, 165, 92, .14); border-color: var(--brass); }
.cell .glyph { font: 900 2.75rem/1 var(--serif); color: var(--brass); }
.cell[aria-pressed="true"] .glyph { color: var(--ink); }
.cell .hits { font: .72rem/1 var(--mono); color: var(--dim); letter-spacing: .12em; }
.cell .odds { font: 600 .8rem/1 var(--mono); color: var(--ink); }
.mk.many .cell { min-height: 4.4rem; padding: .6rem .2rem; gap: .35rem; }
.mk.many .glyph { font-size: 1.55rem; }

/* 筹码：选中的格子上放一枚，面值即当前注额。 */
.chip {
  position: absolute; top: -.7rem; right: -.55rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: repeating-conic-gradient(var(--chip-edge) 0 12deg, var(--chip) 12deg 45deg);
  box-shadow: 0 2px 0 #7a2418, 0 5px 10px rgba(0, 0, 0, .45);
  animation: chip-drop .18s ease-out;
}
.chip::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--chip);
  border: 1px dashed rgba(255, 255, 255, .5);
}
.chip b { position: relative; font: 700 .68rem/1 var(--mono); color: #fff; letter-spacing: -.02em; }
.mk.many .chip { width: 2.1rem; height: 2.1rem; top: -.6rem; right: -.45rem; }
.mk.many .chip b { font-size: .6rem; }
@keyframes chip-drop { from { transform: translateY(-10px) scale(1.15); opacity: 0; } }

.slip { position: sticky; top: 1rem; padding: 1.2rem 1.2rem 1.1rem; }
.pick { min-height: 5.6rem; border-bottom: 1px dashed var(--paper-rule); padding-bottom: .9rem; margin-bottom: .9rem; }
.pick.empty { color: var(--paper-dim); font-size: .9rem; display: flex; align-items: center; }
.pick .where { font-size: .78rem; color: var(--paper-dim); }
.pick .what { display: flex; align-items: baseline; gap: .6rem; margin: .15rem 0 .1rem; }
.pick .what b { font: 900 2rem/1.15 var(--serif); }
.pick .what span { font: 600 .95rem var(--mono); }
.pick .hits { font-size: .8rem; color: var(--paper-dim); }
.amt label { display: block; font-size: .78rem; color: var(--paper-dim); margin-bottom: .2rem; }
.amt input {
  width: 100%; border: none; border-bottom: 2px solid var(--paper-ink); background: transparent; border-radius: 0;
  font: 600 1.6rem/1.2 var(--mono); padding: .1rem 0 .2rem; color: var(--paper-ink);
}
.amt input:focus-visible { outline: none; border-bottom-color: var(--chip); }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .7rem 0 1rem; }
.presets button {
  background: var(--paper-hi); border: 1px solid var(--paper-rule); border-radius: 4px; padding: .3rem 0;
  font: .8rem var(--mono); color: var(--paper-ink);
}
.presets button:hover { border-color: var(--paper-dim); }
.win { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; font-size: .85rem; color: var(--paper-dim); }
.win b { font: 600 1.05rem var(--mono); color: var(--paper-ink); }

/* ---- 我的注单 ---- */
.section-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.section-h h2 { font: 700 1.2rem/1.3 var(--serif); margin: 0; }
.ledger { padding: 1.25rem 1.25rem .75rem; margin-bottom: 2.5rem; }
.ledger .section-h h2 { color: var(--paper-ink); }
.ledger .quiet { background: none; border: 1px solid var(--paper-rule); border-radius: 4px; padding: .25rem .75rem; color: var(--paper-ink); font-size: .82rem; }
.ledger .empty { color: var(--paper-dim); margin: .25rem 0 .75rem; font-size: .9rem; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; white-space: nowrap; }
th { text-align: left; font-weight: 500; font-size: .76rem; color: var(--paper-dim); padding: .35rem .6rem; border-bottom: 1px solid var(--paper-ink); }
td { padding: .6rem; border-bottom: 1px dashed var(--paper-rule); }
tr:last-child td { border-bottom: none; }
th.r, td.r { text-align: right; }
td .x { color: var(--paper-dim); font-family: var(--mono); font-size: .8rem; margin-left: .3rem; }
td .opt { font: 700 1rem var(--serif); }
td.none { color: var(--paper-dim); }
.st { font-size: .78rem; padding: .12rem .45rem; border-radius: 3px; border: 1px solid currentColor; }
.st-WON { color: var(--win); font-weight: 600; }
.st-LOST, .st-REFUNDED { color: var(--paper-dim); border-color: transparent; }
.st-PLACED { color: #8a6a22; }
.won { color: var(--win); font-weight: 600; }

/* ---- 未来局承诺 ---- */
.upcoming { margin-bottom: 2.5rem; }
.upcoming > p { color: var(--dim); font-size: .88rem; max-width: 46em; margin: 0 0 1rem; }
.commits { border-top: 1px solid var(--rule); }
.commit {
  display: grid; grid-template-columns: 5rem 8rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .84rem;
}
.commit .id { font: 700 .95rem var(--serif); }
.commit .at { font-family: var(--mono); color: var(--dim); white-space: nowrap; }
.none-felt { color: var(--dim); font-size: .88rem; }

/* ---- 说明 ---- */
details { border-top: 1px solid var(--rule); padding-top: 1rem; }
summary { cursor: pointer; color: var(--brass); font: 700 1rem var(--serif); }
details p { color: var(--dim); font-size: .9rem; max-width: 46em; }
details code { color: var(--ink); }

/* ---- 骰子与号码球 ---- */
/* 尺寸都跟着 font-size 走：同一套画法既当台上那颗大的，也当近 5 局里的小图标。 */
.tok { display: inline-block; width: 1.75rem; height: 1.75rem; font-size: 1.75rem; flex: none; }
.tok.empty { border: 1px dashed var(--rule); border-radius: 50%; width: 1.4rem; height: 1.4rem; margin: .175rem; }
.tok.text { width: auto; font: 700 .9rem/1.75rem var(--mono); }
.dface {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
  width: 100%; height: 100%; padding: 15%; border-radius: 22%;
  background: linear-gradient(145deg, #fbf8ef, #e2dac5);
  box-shadow: inset 0 -.06em .08em rgba(0, 0, 0, .2), inset 0 .03em .03em #fff;
}
.dface .pip {
  width: .15em; height: .15em; border-radius: 50%; background: #1d2320;
  box-shadow: inset 0 .02em .02em rgba(0, 0, 0, .6);
}
.dface.red .pip { background: var(--chip); }
.dface.one .pip { width: .27em; height: .27em; }
.ball {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f0806a, var(--chip) 48%, #7a2418);
  box-shadow: 0 .05em .1em rgba(0, 0, 0, .4);
}
.ball b {
  display: grid; place-items: center; width: 60%; height: 60%; border-radius: 50%;
  background: #f7f3e8; color: #1d2320; font: 700 .3em/1 var(--mono); letter-spacing: -.04em;
}

/* ---- 售票动画 ----
   售票期间骰子在翻、球上的号码在跳。这不是装饰：它表达的恰好是这一局此刻
   的真实状态 —— 结果还不存在，要等封盘后 drand 签出那一轮才定。
   封盘了就停。 */
.stage { text-align: center; }
.actors { display: flex; justify-content: center; align-items: flex-end; gap: 2rem; }
.actor { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.actor small { color: var(--dim); font-size: .75rem; }
.die3d { width: 3.2rem; height: 3.2rem; font-size: 3.2rem; perspective: 20rem; }
.cube {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(32deg);
}
.cube .side { position: absolute; inset: 0; backface-visibility: hidden; }
.cube .s1 { transform: translateZ(1.6rem); }
.cube .s6 { transform: rotateY(180deg) translateZ(1.6rem); }
.cube .s2 { transform: rotateY(90deg) translateZ(1.6rem); }
.cube .s5 { transform: rotateY(-90deg) translateZ(1.6rem); }
.cube .s3 { transform: rotateX(90deg) translateZ(1.6rem); }
.cube .s4 { transform: rotateX(-90deg) translateZ(1.6rem); }
.ballbox { width: 3.2rem; height: 3.2rem; font-size: 3.2rem; }
.stage.rolling .die3d { animation: hop .42s ease-in-out infinite alternate; }
.stage.rolling .cube { animation: tumble 1.25s linear infinite; }
.stage.rolling .ballbox .ball { animation: wobble .36s ease-in-out infinite alternate; }
.stage:not(.rolling) .actors { opacity: .55; }
.stage-note { color: var(--dim); font-size: .8rem; margin: .7rem 0 0; }
.stage-note b { color: var(--ink); font-weight: 500; }
@keyframes tumble { to { transform: rotateX(336deg) rotateY(392deg) rotateZ(360deg); } }
@keyframes hop { to { transform: translateY(-.35rem); } }
@keyframes wobble { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* ---- 近 5 局 ---- */
.recent {
  display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.recent-h { color: var(--dim); font-size: .8rem; white-space: nowrap; }
.recent-list { display: flex; gap: .5rem; flex: 1; flex-wrap: wrap; min-height: 2.5rem; align-items: center; }
.rd {
  display: flex; align-items: center; gap: .35rem; padding: .3rem .55rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--felt-lo);
  color: var(--ink); text-decoration: none; flex: none;
}
.rd:hover { border-color: var(--brass-line); }
.rd .id { font: .76rem var(--mono); color: var(--dim); margin-right: .1rem; }
.rd .pending { font-size: .75rem; color: var(--dim); padding: 0 .2rem; white-space: nowrap; }
.recent .all { font-size: .85rem; white-space: nowrap; }
.tok.land { animation: land .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes land { from { transform: translateY(-.9rem) rotate(-120deg) scale(.5); opacity: 0; } }

/* ---- 开奖历史页 ---- */
.hist-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.hist-h h1 { font: 900 clamp(1.7rem, 3vw, 2.2rem)/1.2 var(--serif); margin: 0; }
.hist-lede { color: var(--dim); font-size: .9rem; max-width: 48em; margin: 0 0 1.5rem; }
.hist-h + .game-switch { margin: 1rem 0 1.1rem; }
.hist-lede b { color: var(--ink); font-weight: 600; }
.hist th .x { margin-left: .2rem; }
.hist td { vertical-align: middle; }
.res { display: inline-flex; align-items: center; gap: .5rem; }
.res > b { font: 700 1rem var(--serif); min-width: 1.2em; }
.res .read { color: var(--paper-dim); font-size: .82rem; }
/* 翻页条：放在纸上，注单与开奖历史共用。 */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .9rem 0 .35rem; font-size: .85rem; color: var(--paper-dim);
  border-top: 1px dashed var(--paper-rule); margin-top: .25rem;
}
.pager span { font-family: var(--mono); min-width: 4.5em; text-align: center; }

/* ---- 窄屏 ---- */
@media (max-width: 880px) {
  .gate { grid-template-columns: 1fr; min-height: 0; }
  .table-wrap { grid-template-columns: 1fr; }
  .board { padding: .25rem 1rem .75rem; }
  .mk { grid-template-columns: 1fr; gap: .5rem; }
  .mk-h { display: flex; align-items: baseline; gap: .6rem; }
  .mk.many .cells { grid-template-columns: repeat(var(--cols-narrow), minmax(0, 1fr)); }
  .cell { min-height: 5.25rem; }
  .cell .glyph { font-size: 2.25rem; }

  /* 下注单贴底：选完格子不必滚到页尾去找按钮。 */
  .slip {
    position: sticky; top: auto; bottom: 0; z-index: 5; margin: 0 -1rem; border-radius: 12px 12px 0 0;
    display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; grid-template-areas: "pick pick" "amt place" "msg msg";
    gap: .6rem .8rem; align-items: end; padding: .9rem 1rem .6rem;
  }
  .slip .paper-title, .presets, .win, .pick .hits { display: none; }
  .pick { grid-area: pick; min-height: 0; margin: 0; padding-bottom: .6rem; }
  .pick .what b { font-size: 1.5rem; }
  .amt { grid-area: amt; }
  .amt input { font-size: 1.25rem; }
  .slip .primary { grid-area: place; }
  .slip .msg { grid-area: msg; margin: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:first-child { grid-column: 1 / -1; }
  .clock .t { font-size: 2.75rem; }
  .draw-top { grid-template-columns: 1fr auto; grid-template-areas: "no clock" "stage stage"; }
  .draw-top > :first-child { grid-area: no; }
  .draw-top .clock { grid-area: clock; }
  .draw-top .stage { grid-area: stage; margin-top: .5rem; }
  .recent-list { order: 1; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .recent-h { order: 0; }
  .recent .all { order: 3; margin-left: auto; }
  .commit { grid-template-columns: 4.5rem 1fr; }
  .commit .hash { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .who { gap: .9rem; }
  .who-name, .who-verify { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chip, .tok.land { animation: none; }
  .stage.rolling .die3d, .stage.rolling .cube, .stage.rolling .ballbox .ball { animation: none; }
  .cell { transition: none; }
}