/* =========================================================================
 * 本地子集字体 —— 由麻将项目 tools/build-fonts.mjs 从上游完整 TTF 裁出，
 * 只含本游戏会渲染的 416 个字符（清单与 sha256 见 fonts/fonts.manifest.json）。
 * 换字形集必须换文件名（…-v2.woff2）：站点给公共资源打一年缓存，同名覆盖会拿旧字。
 * 玩家自填的昵称、以及上游字体本来就没有的字（如 ✕），按 font-family 顺序逐字回退到系统字体。
 * ========================================================================= */
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/mj-notoserif-sc400-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/mj-notoserif-sc500-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/mj-notoserif-sc700-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/mj-notoserif-sc900-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/mj-notosans-sc400-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/mj-notosans-sc500-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/mj-notosans-sc700-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/mj-mashanzheng-400-v1.woff2") format("woff2");
}

/* =========================================================================
   墨局 · 麻将  —— 国潮水墨 UI
   ========================================================================= */
:root {
  --paper: #FBF6E9;
  --paper-2: #F3EAD6;
  --paper-3: #EADFC6;
  --ink: #2B2724;
  --ink-soft: #5B5349;
  --ink-faint: #8C8478;
  --vermilion: #B23A2E;
  --vermilion-l: #D45B45;
  --jade: #2F6B4F;
  --gold: #C9A227;
  --table: #39463F;
  --table-deep: #232C28;

  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --brush: "Ma Shan Zheng", "Xingkai SC", "STXingkai", "Kaiti SC", "STKaiti", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

#errbox {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999;
  max-width: 60vw; max-height: 40vh; overflow: auto;
  display: none; padding: 12px 16px; border-radius: 8px;
  background: rgba(120, 20, 14, 0.94); color: #FFE9E4;
  font: 12px/1.6 ui-monospace, Menlo, monospace; white-space: pre-wrap;
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--table-deep);
  overflow: hidden;
  font-family: var(--serif);
  color: var(--ink);
  user-select: none;
}

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; display: block; }

.hidden { display: none !important; }

/* ---------------------------------------------------------------- 顶部 */
#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  pointer-events: none;
  z-index: 20;
}
#topbar > * { pointer-events: auto; }

#topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 27, 24, 0.82), rgba(20, 27, 24, 0));
  pointer-events: none;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.seal-mini {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--vermilion);
  color: var(--paper);
  font-family: var(--brush);
  font-size: 19px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(178, 58, 46, 0.4), inset 0 0 0 1.5px rgba(251, 246, 233, 0.5);
  letter-spacing: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text b {
  font-size: 17px; color: var(--paper);
  letter-spacing: 0.16em; font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.brand-text i {
  font-style: normal; font-size: 11.5px; color: rgba(242, 233, 214, 0.58);
  letter-spacing: 0.1em; font-family: var(--sans);
}

.topstats { display: flex; gap: 8px; position: relative; }
.stat {
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(251, 246, 233, 0.07);
  border: 1px solid rgba(232, 222, 198, 0.14);
  font-size: 12.5px;
  color: rgba(242, 233, 214, 0.9);
  letter-spacing: 0.1em;
  font-family: var(--sans);
  font-weight: 500;
}
.stat em { font-style: normal; }

.topright { display: flex; gap: 8px; position: relative; }
button.ghost {
  padding: 7px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(232, 222, 198, 0.26);
  color: rgba(242, 233, 214, 0.78);
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.18s;
}
button.ghost:hover {
  background: rgba(251, 246, 233, 0.1);
  color: var(--paper);
  border-color: rgba(232, 222, 198, 0.5);
}

/* ---------------------------------------------------------------- 牌谱 */
#log {
  position: absolute;
  top: 72px; right: 22px;
  width: 250px; max-height: 62vh;
  background: rgba(251, 246, 233, 0.96);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  display: flex; flex-direction: column;
  z-index: 30;
  overflow: hidden;
  border: 1px solid rgba(43, 39, 36, 0.08);
}
.log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 12px; letter-spacing: 0.2em; color: var(--ink-soft);
  border-bottom: 1px solid rgba(43, 39, 36, 0.07);
}
button.mini {
  border: none; background: none; cursor: pointer;
  font-family: var(--serif); font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.1em;
}
button.mini:hover { color: var(--vermilion); }
.log-list {
  overflow-y: auto; padding: 8px 14px 14px;
  font-size: 12.5px; line-height: 1.95; color: var(--ink-soft);
  font-family: var(--sans);
}
.log-list div { display: flex; gap: 6px; }
.log-list b { font-weight: 500; color: var(--ink); min-width: 34px; font-family: var(--serif); }
.log-list .t-red b, .log-list .t-red { color: var(--vermilion); }
.log-list .t-gold b, .log-list .t-gold { color: #96700D; }
.log-list .t-mute { color: var(--ink-faint); }
.log-list .t-mute b { color: var(--ink-faint); }

/* ---------------------------------------------------------------- 右侧操作列
 * 竖排在屏幕右缘：自上而下 胡 → 槓 → 碰 → 过（最常用的最靠上）。
 * 尺寸基准 --act 与底边 --actions-bottom 由 main.js 按牌桌实际缩放算出：
 * 宽窗落在牌桌右侧黑边留白里，窄窗则停在手牌上沿之上并自动缩小，永远不压牌。 */
#actions {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: var(--actions-bottom, 180px);
  width: calc(var(--act, 66px) * 1.15);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--act, 66px) * 0.18);
  z-index: 25;
  pointer-events: none;
}
#actions[data-dock="row"] {
  /* 竖屏手机：横排贴在手牌下方，从右往左仍是 胡 → 槓 → 碰 → 过（拇指先够到最常用的） */
  flex-direction: row-reverse;
  align-items: flex-end;
  width: auto;
}
#actions .act {
  pointer-events: auto;
  width: var(--act, 66px);
  height: var(--act, 66px);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--brush);
  font-size: calc(var(--act, 66px) * 0.41);
  letter-spacing: 0;
  cursor: pointer;
  border: none;
  color: var(--paper);
  position: relative;
  transition: transform 0.16s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s;
  animation: actIn 0.3s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes actIn {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#actions .act::after {
  content: "";
  position: absolute; inset: 6%;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 246, 233, 0.45);
}
#actions .act:hover { transform: translateY(-4px) scale(1.06); }
#actions .act:active { transform: translateY(0) scale(0.97); }

#actions .act.hu {
  background: radial-gradient(circle at 35% 28%, var(--vermilion-l), var(--vermilion));
  box-shadow: 0 10px 26px rgba(178, 58, 46, 0.5);
  width: calc(var(--act, 66px) * 1.15);
  height: calc(var(--act, 66px) * 1.15);
  font-size: calc(var(--act, 66px) * 0.44);
}
#actions .act.kong {
  background: radial-gradient(circle at 35% 28%, #4C8E6C, var(--jade));
  box-shadow: 0 10px 24px rgba(47, 107, 79, 0.45);
}
#actions .act.pong {
  background: radial-gradient(circle at 35% 28%, #4A423A, var(--ink));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
#actions .act.pass {
  background: transparent;
  color: rgba(242, 233, 214, 0.72);
  border: 1.5px solid rgba(232, 222, 198, 0.34);
  box-shadow: none;
  font-size: calc(var(--act, 66px) * 0.33);
  width: calc(var(--act, 66px) * 0.94);
  height: calc(var(--act, 66px) * 0.94);
  align-self: flex-end;
}
#actions .act.pass::after { display: none; }
#actions .act.pass:hover { color: var(--paper); border-color: rgba(232, 222, 198, 0.7); }

#actions .act .badge {
  position: absolute;
  right: calc(100% + 5px); top: 50%;
  transform: translateY(-50%);
  min-width: 22px; padding: 1px 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #3A2E08;
  font-family: var(--sans);
  font-size: max(10px, calc(var(--act, 66px) * 0.17));
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* 横排时按钮左边挨着下一个按钮，角标改挂到头顶，避免叠字 */
#actions[data-dock="row"] .act .badge {
  right: 50%; top: -4px;
  transform: translate(50%, -100%);
}

#hint {
  position: absolute;
  left: var(--table-cx, 50%); bottom: 14px;
  transform: translateX(-50%);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: rgba(242, 233, 214, 0.82);
  background: rgba(24, 32, 28, 0.62);
  border: 1px solid rgba(232, 222, 198, 0.14);
  padding: 6px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 25;
  pointer-events: none;
  font-family: var(--sans);
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s;
}
#hint:empty { opacity: 0; padding: 0; border-color: transparent; }

/* ---------------------------------------------------------------- 遮罩层 */
.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(18, 24, 21, 0.7), rgba(12, 17, 15, 0.92));
  backdrop-filter: blur(3px);
  z-index: 50;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 开场 */
.start-card {
  display: flex;
  width: min(880px, 92vw);
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: cardIn 0.5s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
@keyframes cardIn {
  from { transform: translateY(22px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.start-card::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(43, 39, 36, 0.12);
  pointer-events: none;
}
.start-left {
  width: 190px;
  background: linear-gradient(160deg, #33403A, #202A26);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
  padding: 40px 0;
  position: relative;
}
.vtitle { display: flex; flex-direction: column; gap: 6px; }
.vtitle span {
  font-family: var(--brush);
  font-size: 56px;
  color: var(--paper);
  line-height: 1;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-align: center;
}
.stamp {
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.45);
  padding: 10px 5px;
  border-radius: 2px;
}
.start-right { flex: 1; padding: 40px 44px 34px; }
.kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--ink-faint);
  font-family: var(--sans);
}
.start-right h1 {
  margin: 0 0 26px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.rules { display: flex; flex-direction: column; gap: 10px; }
.rule {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(43, 39, 36, 0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--paper);
}
.rule:hover { border-color: rgba(43, 39, 36, 0.3); background: #FFFDF7; }
.rule.on {
  border-color: var(--vermilion);
  background: #FFFBF2;
  box-shadow: 0 6px 22px rgba(178, 58, 46, 0.12);
}
.rule .r-seal {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 5px;
  font-family: var(--brush);
  font-size: 20px;
  color: var(--paper);
}
.rule .r-main { flex: 1; }
.rule .r-main b { display: block; font-size: 15px; letter-spacing: 0.12em; font-weight: 600; }
.rule .r-main span { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.04em; font-family: var(--sans); }
.rule .r-check {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(43, 39, 36, 0.25);
  flex: none;
}
.rule.on .r-check { border-color: var(--vermilion); background: var(--vermilion); box-shadow: inset 0 0 0 3px #FFFBF2; }

.start-actions {
  display: flex; align-items: center; gap: 18px;
  margin-top: 30px;
}
button.primary {
  padding: 13px 40px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.26em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 10px 26px rgba(43, 39, 36, 0.28);
}
button.primary:hover {
  background: var(--vermilion);
  box-shadow: 0 12px 30px rgba(178, 58, 46, 0.34);
  transform: translateY(-1px);
}
.tip { font-size: 11px; color: var(--ink-faint); font-family: var(--sans); letter-spacing: 0.05em; }

/* 定缺 */
.que-card {
  background: var(--paper);
  padding: 34px 42px 36px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: cardIn 0.4s cubic-bezier(.22, 1, .36, 1);
}
.que-card h2 {
  margin: 0 0 8px;
  font-size: 24px; font-weight: 600; letter-spacing: 0.34em;
  text-indent: 0.34em;
}
.que-card p {
  margin: 0 0 26px;
  font-size: 12px; color: var(--ink-faint); font-family: var(--sans);
  letter-spacing: 0.06em;
}
.que-options { display: flex; gap: 14px; }
.que-opt {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(43, 39, 36, 0.18);
  font-family: var(--brush);
  font-size: 34px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.34, 1.56, .64, 1);
  background: #FFFDF7;
}
.que-opt:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(178, 58, 46, 0.16);
}
.que-opt small { display: block; font-size: 10px; font-family: var(--sans); color: var(--ink-faint); letter-spacing: 0.1em; }

/* 结算 */
.result-card {
  width: min(620px, 92vw);
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: cardIn 0.45s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
.result-head {
  padding: 26px 34px 20px;
  border-bottom: 1px solid rgba(43, 39, 36, 0.09);
  display: flex; align-items: baseline; gap: 14px;
}
.result-head h2 {
  margin: 0; font-size: 26px; letter-spacing: 0.3em; font-weight: 600;
  font-family: var(--brush);
}
.result-head span { font-size: 13px; color: var(--ink-soft); font-family: var(--sans); letter-spacing: 0.08em; }
.result-body { padding: 20px 34px 6px; }
.pat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pat {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(43, 39, 36, 0.16);
  color: var(--ink-soft);
  font-family: var(--serif);
  animation: patIn 0.36s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes patIn { from { opacity: 0; transform: translateY(6px) scale(0.94); } to { opacity: 1; transform: none; } }
.pat.gold { border-color: rgba(201, 162, 39, 0.6); color: #8A6A0C; background: rgba(201, 162, 39, 0.08); }
.pat.red { border-color: rgba(178, 58, 46, 0.5); color: var(--vermilion); background: rgba(178, 58, 46, 0.06); }
.pat b { font-weight: 700; margin-left: 5px; }
.result-note { font-size: 12px; color: var(--ink-faint); font-family: var(--sans); letter-spacing: 0.04em; }
.result-foot {
  padding: 18px 34px 26px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.scores { display: flex; gap: 20px; }
.score-item { font-size: 11.5px; font-family: var(--sans); color: var(--ink-faint); letter-spacing: 0.06em; min-width: 56px; }
.score-item b { display: block; font-size: 17px; font-family: var(--serif); color: var(--ink); letter-spacing: 0; }
.score-item b.up { color: var(--vermilion); }
.score-item b.down { color: var(--jade); }

/* ---------------------------------------------------------------- 番数说明浮层 */
.fan-card {
  position: relative;
  width: min(680px, 94vw);
  max-height: min(88vh, 780px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: 6px;
  overflow: hidden;
  animation: cardIn .38s cubic-bezier(.22, 1, .36, 1);
}
.fan-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px 13px;
  border-bottom: 1px solid rgba(43, 39, 36, 0.10);
}
.fan-head-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fan-head-txt b {
  font-family: var(--brush);
  font-size: 19px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--ink);
}
.fan-head-txt i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.fan-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; line-height: 1;
  padding: 0;
}
.fan-list {
  overflow-y: auto;
  padding: 4px 18px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 39, 36, 0.20) transparent;
}
.fan-list::-webkit-scrollbar { width: 5px; }
.fan-list::-webkit-scrollbar-thumb { background: rgba(43, 39, 36, 0.20); border-radius: 3px; }
.fan-list::-webkit-scrollbar-track { background: transparent; }
.fan-foot {
  padding: 9px 20px 13px;
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink-faint);
  border-top: 1px solid rgba(43, 39, 36, 0.06);
}

/* 每行番型：名称 / 牌型示意 / 番数 一行，说明另起一行 */
.fb-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr auto;
  grid-template-areas:
    "name pat fan"
    "desc desc desc";
  align-items: center;
  gap: 6px 14px;
  padding: 11px 10px;
  border-radius: 6px;
  transition: background .15s;
}
.fb-row + .fb-row { border-top: 1px dashed rgba(43, 39, 36, 0.10); }
.fb-row:hover { background: rgba(43, 39, 36, 0.035); }
.fb-name {
  grid-area: name;
  font-family: var(--serif);
  font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.06em;
  white-space: nowrap;
}
.fb-desc {
  grid-area: desc;
  font-family: var(--sans);
  font-size: 11.5px; line-height: 1.55;
  color: var(--ink-faint); letter-spacing: 0.03em;
}
.fb-fan {
  grid-area: fan;
  font-family: var(--serif);
  font-size: 13px; font-weight: 700;
  color: var(--vermilion);
  background: rgba(178, 58, 46, 0.08);
  border: 1px solid rgba(178, 58, 46, 0.20);
  border-radius: 999px;
  padding: 3px 11px;
  min-width: 40px; text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fb-fan.dash {
  color: var(--ink-soft);
  background: rgba(43, 39, 36, 0.05);
  border-color: rgba(43, 39, 36, 0.16);
}

/* ---- 牌型示意：可读的小牌面 ---- */
.fb-pat {
  grid-area: pat;
  display: flex; align-items: center;
  gap: 5px; flex-wrap: wrap;
  min-height: 34px;
}
.fb-pat .pg {
  display: inline-flex; align-items: center;
  gap: 2px;
  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(43, 39, 36, 0.035);
}
.tm {
  width: 21px; height: 29px;
  border-radius: 3px;
  background: linear-gradient(180deg, #FFFDF4 0%, #F2E8CD 100%);
  border: 1px solid rgba(43, 39, 36, 0.42);
  box-shadow:
    inset 0 -1.5px 0 rgba(43, 39, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.10);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1; padding: 0;
  font-family: var(--serif); font-style: normal;
  flex: 0 0 auto;
}
.tm b {
  font-weight: 700; font-size: 12px; line-height: 1;
  letter-spacing: 0;
}
.tm s {
  text-decoration: none;
  font-size: 8px; line-height: 1;
  margin-top: 1.5px; letter-spacing: 0;
  opacity: 0.9;
}
.tm.honor b {
  font-family: var(--brush);
  font-size: 15px; font-weight: 500;
}
.tm-w b, .tm-w s { color: #B23A2E; }  /* 万：朱砂 */
.tm-t b, .tm-t s { color: #2F6B4F; }  /* 条：竹绿 */
.tm-p b, .tm-p s { color: #2C4B7C; }  /* 筒：青花 */
.tm-z b, .tm-z s { color: #2B2724; }  /* 字：墨 */
.tm-z.dragon-red b { color: #B23A2E; }
.tm-z.dragon-green b { color: #2F6B4F; }
.tm-x {
  background: transparent;
  border: 1px dashed rgba(43, 39, 36, 0.48);
  box-shadow: none;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0;
}

/* 无 pat 只有 mark 的番型：朱红小方章 */
.fb-mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 4px;
  background: rgba(178, 58, 46, 0.10);
  border: 1px solid rgba(178, 58, 46, 0.30);
  color: var(--vermilion);
  font-family: var(--brush);
  font-size: 15px; font-weight: 400; line-height: 1;
}

/* 顶栏小印章（保留原类名，兼容素材覆盖层） */
.fb-seal {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--vermilion); color: var(--paper);
  border-radius: 4px;
  font-family: var(--brush); font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(251, 246, 233, 0.45);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- 听牌条 */
#tenpai {
  position: absolute;
  left: var(--table-cx, 50%); bottom: var(--tenpai-bottom, 150px);
  transform: translateX(-50%) translateY(6px);
  display: flex; align-items: center; gap: 10px;
  max-width: min(700px, 76vw);
  padding: 5px 16px 5px 6px;
  background: rgba(24, 32, 28, 0.74);
  border: 1px solid rgba(201, 162, 39, 0.36);
  border-radius: 999px;
  backdrop-filter: blur(9px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
}
#tenpai.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#tenpai .tp-seal {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vermilion);
  color: var(--paper);
  font-family: var(--brush);
  font-size: 15px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(251, 246, 233, 0.45), 0 3px 10px rgba(178, 58, 46, 0.45);
}
#tenpai .tp-main {
  overflow: hidden; text-overflow: ellipsis;
  font-family: var(--serif);
  font-size: 15px; font-weight: 700;
  color: #FCF6E7;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#tenpai .tp-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  color: rgba(242, 233, 214, 0.74);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#tenpai.quiet { border-color: rgba(232, 222, 198, 0.16); background: rgba(24, 32, 28, 0.52); }
#tenpai.quiet .tp-seal { background: rgba(251, 246, 233, 0.14); color: rgba(242, 233, 214, 0.82); box-shadow: none; }
#tenpai.quiet .tp-main { font-weight: 500; font-size: 13.5px; color: rgba(242, 233, 214, 0.88); }
#tenpai.warn { border-color: rgba(178, 58, 46, 0.4); }
#tenpai.warn .tp-seal { background: rgba(178, 58, 46, 0.85); }

/* ---------------------------------------------------------------- 自适应 */
@media (max-width: 640px) {
  .fan-card { width: 96vw; max-height: 92vh; border-radius: 4px; }
  .fan-head { padding: 13px 15px 11px; gap: 10px; }
  .fan-head-txt b { font-size: 17px; letter-spacing: 0.12em; }
  .fan-head-txt i { font-size: 10.5px; }
  .fan-list { padding: 2px 10px 10px; }
  .fb-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name fan"
      "pat pat"
      "desc desc";
    padding: 10px 6px;
    gap: 5px 10px;
  }
  .fb-name { font-size: 13.5px; }
  .fb-desc { font-size: 11px; }
  .tm { width: 19px; height: 26px; }
  .tm b { font-size: 11px; }
  .tm s { font-size: 7.5px; }
  .tm.honor b { font-size: 13.5px; }
}

@media (max-width: 900px) {
  .start-card { flex-direction: column; width: min(440px, 92vw); }
  .start-left { width: 100%; flex-direction: row; padding: 22px 0; }
  .vtitle { flex-direction: row; }
  .vtitle span { writing-mode: horizontal-tb; font-size: 34px; }
  /* 操作按钮尺寸交给 main.js 的 --act（按牌桌缩放自适应），这里不再硬覆盖 */
  .topstats { display: none; }
}

/* ---------------------------------------------------------------- 番数表验收 */
body.fanonly { background: #3E4C45; }
body.fanonly #stage,
body.fanonly #topbar,
body.fanonly #actions,
body.fanonly #hint,
body.fanonly #tenpai,
body.fanonly #overlay-start,
body.fanonly #start { display: none !important; }
body.fanonly #overlay-fan,
body.fanonly #help { display: grid !important; }
body.fanonly #board,
body.fanonly #pause { display: none !important; }


/* =========================================================================
   素材重做 · HUD 层
   整段追加在文件末尾：同名选择器靠层叠顺序覆盖上面的旧规则，不动上面任何一段，
   避免和并发的排版改动互相覆盖。宣纸 / 朱印两张图由 tileArt.preload() 注入
   --art-paper / --art-seal，DOM 与 Canvas 共用同一份素材，不复制第二份。
   ========================================================================= */
:root {
  --bamboo: #2F6B4F;        /* 条：松竹绿 */
  --porcelain: #2C4B7C;     /* 筒：青花靛蓝 */
  --cinnabar: #B23A2E;      /* 万的下半 / 中 */
  --art-paper: none;
  --art-seal: none;
}

/* ---- 纸面卡片：宣纸底 + 墨线双框 + 四角压暗 ---- */
.start-card,
.result-card,
.que-card,
.fan-card,
.board-card,
.pause-card {
  background-color: #F7F0DE;
  /* 纸纹压到六成：原图折痕太抢眼，直接铺会像旧胶带而不是宣纸 */
  background-image:
    linear-gradient(180deg, rgba(252, 247, 235, 0.60), rgba(240, 231, 209, 0.60)),
    var(--art-paper),
    linear-gradient(180deg, rgba(255, 252, 242, 0.94), rgba(235, 224, 197, 0.94));
  background-size: auto, cover, auto;   /* 不平铺：这张宣纸不是无缝的，平铺会在接缝处出现一道亮棱 */
  background-blend-mode: normal, multiply, normal;
  border: 1px solid rgba(43, 39, 36, 0.30);
  box-shadow:
    0 22px 54px rgba(5, 11, 8, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 46px rgba(150, 128, 90, 0.16);
  backdrop-filter: none;
}
.start-card::after,
.result-card::after,
.fan-card::after,
.board-card::after,
.pause-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(43, 39, 36, 0.10);
  border-radius: 8px;
  pointer-events: none;
}

/* ---- 顶部计数：墨玉嵌金线；按钮：象牙描墨 ---- */
.stat {
  background: linear-gradient(180deg, rgba(30, 42, 36, 0.88), rgba(15, 23, 19, 0.92));
  border: 1px solid rgba(201, 162, 39, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 10px rgba(0, 0, 0, 0.36);
  color: #EADFC6;
}
button.ghost {
  background: linear-gradient(180deg, rgba(252, 248, 238, 0.95), rgba(231, 221, 197, 0.9));
  color: var(--ink);
  border: 1px solid rgba(43, 39, 36, 0.34);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
button.ghost:hover {
  background: linear-gradient(180deg, #FFFCF2, #F0E6CE);
  color: var(--cinnabar);
  border-color: rgba(178, 58, 46, 0.6);
}
button.ghost:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* ---- 番型小牌面：宣纸底 + 墨线描边，和真牌同一套材质语义 ---- */
.tm {
  background-image:
    linear-gradient(180deg, rgba(255, 253, 244, 0.96) 0%, rgba(242, 232, 205, 0.96) 100%),
    var(--art-paper);
  background-size: auto, cover;
  background-blend-mode: normal, multiply;
  border-color: rgba(43, 39, 36, 0.55);
  box-shadow:
    inset 0 -1.5px 0 rgba(43, 39, 36, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.22);
}
.tm-x { background-image: none; }

/* ---- 印章位：刻好的朱砂印，不是纯色圆角方块 ---- */
.seal-mini,
.fb-seal,
.b-seal,
.p-seal,
.stamp {
  background-color: var(--cinnabar);
  background-image: var(--art-seal);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  color: #FCF8EE;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(120, 30, 20, 0.40), inset 0 0 0 1px rgba(251, 246, 233, 0.30);
}

/* ---- 右缘操作列 / 底部提示：与牌桌同一层材质 ---- */
#actions button {
  background: linear-gradient(180deg, rgba(252, 248, 238, 0.96), rgba(230, 219, 194, 0.94));
  color: var(--ink);
  border: 1px solid rgba(43, 39, 36, 0.36);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#actions button:hover { border-color: rgba(178, 58, 46, 0.65); color: var(--cinnabar); }
#hint {
  background: linear-gradient(180deg, rgba(24, 34, 29, 0.9), rgba(14, 21, 18, 0.92));
  border: 1px solid rgba(201, 162, 39, 0.22);
  color: #E7DCC3;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

/* ---- 主按钮：朱砂印色，不是黑药丸 ---- */
button.primary {
  background: linear-gradient(180deg, #C24636, #94271D) !important;
  color: #FCF5E8 !important;
  border: 1px solid rgba(70, 18, 12, 0.5) !important;
  box-shadow: 0 4px 16px rgba(120, 30, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  letter-spacing: 0.22em;
}
button.primary:hover { background: linear-gradient(180deg, #D25442, #A32E22) !important; }
button.primary:active { transform: translateY(1px); }


/* =========================================================================
   第二轮 · 「够不够游戏」
   主人反馈：定缺不像游戏界面、响牌时不知道该吃哪张、左右名牌不该躺在牌下面、
   中央「余牌」和「缺门未清」字太小。整段继续追加在文件末尾，只覆盖不重写，
   和上一轮的素材层改动互不回退。
   ========================================================================= */

/* ---------------------------------------------------------------- 定缺界面 */
#overlay-que {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(46, 62, 52, 0.55), rgba(6, 11, 9, 0.94) 68%),
    rgba(4, 9, 7, 0.9);
  backdrop-filter: blur(2px);
}
.que-card {
  width: min(760px, 94vw);
  padding: 26px 30px 22px;
  border-radius: 10px;
  background-color: #141E19;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.12), rgba(0, 0, 0, 0) 62%),
    var(--art-paper);
  background-size: auto, cover;
  background-blend-mode: normal, multiply;
  border: 1px solid rgba(201, 162, 39, 0.34);
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.66),
    inset 0 0 0 1px rgba(255, 244, 214, 0.07),
    inset 0 1px 0 rgba(255, 246, 220, 0.14);
  color: #F2E8CE;
  text-align: left;
}
.que-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.q-seal {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background-color: var(--cinnabar);
  background-image: var(--art-seal);
  background-size: cover; background-blend-mode: multiply;
  border-radius: 6px;
  font-family: var(--brush);
  font-size: 27px;
  color: #FFF6E4;
  box-shadow: 0 4px 16px rgba(140, 34, 22, 0.5), inset 0 0 0 1px rgba(255, 240, 214, 0.35);
}
.q-head-txt { display: flex; flex-direction: column; gap: 4px; }
.q-head-txt b {
  font-family: var(--brush);
  font-size: 30px; font-weight: 500;
  letter-spacing: 0.2em;
  color: #FFF3DA;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.q-head-txt i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 0.08em;
  color: rgba(236, 222, 190, 0.66);
}
.que-options { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.que-opt {
  position: relative;
  /* height:auto 必须写：上面旧版 .que-opt 是 96×96 的圆钮，同特异度只覆盖属性不覆盖高度，
     内容会直接溢出到卡片外面（截图验收时发现的）。 */
  height: auto;
  width: 200px; min-width: 148px; flex: 1 1 180px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 12px;
  cursor: pointer;
  color: #F2E8CE;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(46, 60, 51, 0.95), rgba(18, 27, 22, 0.96));
  border: 1px solid rgba(232, 222, 198, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 246, 220, 0.1);
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s, border-color 0.2s;
  font-family: var(--serif);
}
.que-opt:hover, .que-opt:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(226, 194, 92, 0.7);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(226, 194, 92, 0.35),
    inset 0 1px 0 rgba(255, 246, 220, 0.18);
  outline: none;
}
.que-opt:active { transform: translateY(-2px) scale(0.99); }
.que-opt.best { border-color: rgba(226, 194, 92, 0.55); }
.que-opt::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 12px 12px 0 0;
  background: var(--q-accent, #6B7F72);
}
.q-w { --q-accent: #C24636; --q-ink: #F0C9BE; }
.q-t { --q-accent: #3E8F62; --q-ink: #C6E7D2; }
.q-p { --q-accent: #3D6BA8; --q-ink: #C4D8F2; }
.qo-top { display: flex; align-items: center; justify-content: space-between; }
.qo-seal {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-family: var(--brush); font-size: 25px; font-weight: 500;
  color: #FFF6E4;
  background: var(--q-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.34), 0 3px 10px rgba(0, 0, 0, 0.4);
}
.qo-count { display: flex; align-items: baseline; gap: 3px; color: var(--q-ink); font-family: var(--sans); }
.qo-count b { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1; }
.qo-count i { font-style: normal; font-size: 12px; opacity: 0.75; }
/* 真牌摆出来：这一门手上是哪几张，一眼看得见 */
.qo-fan {
  display: flex; align-items: center; justify-content: center;
  min-height: 74px;
  padding: 2px 0;
}
.qo-fan .qt {
  position: relative;
  width: 40px; height: 55px;
  flex: 0 0 auto;
  font-style: normal;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1);
}
.qo-fan .qt + .qt { margin-left: -26%; }
.qo-fan .qt:nth-child(1) { z-index: 10; }
.qo-fan .qt:nth-child(2) { z-index: 11; }
.qo-fan .qt:nth-child(3) { z-index: 12; }
.qo-fan .qt:nth-child(4) { z-index: 13; }
.qo-fan .qt:nth-child(5) { z-index: 14; }
.qo-fan .qt img { width: 100%; height: 100%; display: block; object-fit: contain; }
.qo-fan .qt-none {
  width: 40px; height: 55px;
  display: grid; place-items: center;
  border: 1.5px dashed rgba(232, 222, 198, 0.3);
  border-radius: 5px;
  color: rgba(232, 222, 198, 0.45);
  font-size: 13px; font-family: var(--sans);
}
.que-opt:hover .qo-fan .qt { transform: translateY(-3px) rotate(-2deg); }
.que-opt:hover .qo-fan .qt:nth-child(2n) { transform: translateY(-6px) rotate(1.5deg); }
.qo-foot {
  font-family: var(--sans);
  font-size: 12.5px; letter-spacing: 0.06em;
  color: rgba(236, 222, 190, 0.62);
  text-align: center;
}
.que-opt.best .qo-foot { color: #E2C25C; font-weight: 500; }
.qo-stamp {
  position: absolute; right: 10px; top: 10px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--cinnabar);
  color: #FFF3DF;
  font-family: var(--brush); font-size: 21px;
  opacity: 0; transform: rotate(-14deg) scale(1.7);
  transition: opacity 0.16s, transform 0.22s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(120, 30, 20, 0.5);
}
.que-opt:hover .qo-stamp { opacity: 0.96; transform: rotate(-8deg) scale(1); }
.que-foot {
  margin-top: 18px;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.08em;
  color: rgba(236, 222, 190, 0.45);
}

/* ------------------------------------------------- 目标牌卡（挂在操作列顶上）
 * 高度写死成 --act 的 1.9 倍（main.js 的 TGT_H 用同一个数）：
 * 让内容自己撑高的话，字号下限会让这张卡在窄屏上比预估更高，反过来压到手牌。 */
.act-target {
  pointer-events: none;
  width: calc(var(--act, 66px) * 1.04);
  height: calc(var(--act, 66px) * 1.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 3px;
  animation: tgtIn 0.34s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes tgtIn { from { opacity: 0; transform: translateY(10px) scale(0.86); } to { opacity: 1; transform: none; } }
.act-target img {
  width: auto;
  height: calc(var(--act, 66px) * 1.44);
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 9px rgba(226, 194, 92, 0.5));
  animation: tgtPulse 1.5s ease-in-out infinite;
}
@keyframes tgtPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.04); }
}
.act-target span {
  font-family: var(--serif);
  font-size: max(11px, calc(var(--act, 66px) * 0.19));
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFE9B7;
  background: rgba(20, 28, 23, 0.86);
  border: 1px solid rgba(226, 194, 92, 0.45);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
#actions[data-dock="row"] .act-target {
  align-self: flex-end;
  margin-bottom: 2px;
}

/* --------------------------------------------------------- 操作按钮：上色、加厚度 */
#actions .act {
  font-family: var(--brush);
  letter-spacing: 0;
  border-width: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
#actions .act.hu {
  background: linear-gradient(180deg, #E2624C, #A62F22) !important;
  color: #FFF4E2 !important;
  border-color: rgba(70, 16, 10, 0.6) !important;
  box-shadow: 0 8px 22px rgba(150, 40, 26, 0.55), inset 0 2px 0 rgba(255, 236, 206, 0.4),
    inset 0 -3px 8px rgba(90, 18, 10, 0.5) !important;
  /* 入场 + 呼吸两段都要：只写 huBeat 会把 actIn 顶掉，按钮就不弹进来了 */
  animation: actIn 0.3s cubic-bezier(.34, 1.56, .64, 1) backwards,
    huBeat 1.35s ease-in-out 0.34s infinite;
}
@keyframes huBeat {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}
#actions .act.kong {
  background: linear-gradient(180deg, #58A37A, #22614A) !important;
  color: #F1FBF2 !important;
  border-color: rgba(10, 44, 30, 0.6) !important;
  box-shadow: 0 8px 22px rgba(30, 90, 62, 0.5), inset 0 2px 0 rgba(226, 255, 232, 0.34),
    inset 0 -3px 8px rgba(8, 44, 28, 0.5) !important;
}
#actions .act.pong {
  background: linear-gradient(180deg, #C9A227, #8A6A0C) !important;
  color: #FFF8E4 !important;
  border-color: rgba(64, 46, 4, 0.6) !important;
  box-shadow: 0 8px 22px rgba(120, 92, 12, 0.5), inset 0 2px 0 rgba(255, 246, 214, 0.4),
    inset 0 -3px 8px rgba(70, 52, 4, 0.5) !important;
}
#actions .act.pass {
  background: linear-gradient(180deg, rgba(48, 60, 53, 0.9), rgba(24, 33, 28, 0.92)) !important;
  color: rgba(240, 231, 209, 0.86) !important;
  border: 1px solid rgba(232, 222, 198, 0.3) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* ------------------------------------------------------- 中央提示字：看得清才算界面 */
#tenpai {
  padding: 7px 22px 7px 8px;
  gap: 12px;
  max-width: min(820px, 86vw);
}
#tenpai .tp-seal { width: 34px; height: 34px; font-size: 21px; }
#tenpai .tp-main {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
#tenpai .tp-sub { font-size: 14.5px; letter-spacing: 0.08em; color: rgba(242, 233, 214, 0.82); }
#tenpai.quiet .tp-main { font-size: 18px; font-weight: 500; color: rgba(242, 233, 214, 0.9); }
#tenpai.warn {
  border-color: rgba(214, 91, 69, 0.72);
  background: linear-gradient(180deg, rgba(66, 24, 18, 0.9), rgba(34, 14, 11, 0.92));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(178, 58, 46, 0.35);
  animation: warnBeat 1.6s ease-in-out infinite;
}
@keyframes warnBeat {
  0%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(178, 58, 46, 0.3); }
  50% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 34px rgba(214, 91, 69, 0.6); }
}
#tenpai.warn .tp-main { font-size: 24px; color: #FFE2CE; letter-spacing: 0.16em; }
#tenpai.warn .tp-sub { font-size: 15px; color: rgba(255, 226, 206, 0.86); }
#tenpai.warn .tp-seal { background: var(--vermilion-l); font-size: 22px; }

#hint {
  font-size: 15px;
  letter-spacing: 0.12em;
  padding: 8px 20px;
}

/* ------------------------------------------------------------- 顶栏计数放大 */
.stat { font-size: 14px; padding: 7px 17px; letter-spacing: 0.12em; }
.brand-text b { font-size: 18px; }
.brand-text i { font-size: 12.5px; }

/* ------------------------------------------------- 窄屏：余牌数必须还有地方读
 * 牌桌是 1600×900 等比缩放的，手机上中央那圈字会缩到看不清；
 * 顶栏的「剩余 N」是 DOM 字号，不跟着牌桌缩 —— 所以窄屏只留这一颗，别的全收掉。 */
@media (max-width: 900px) {
  .topstats { display: flex; gap: 6px; }
  .topstats .hide-narrow { display: none; }
  #wallStat {
    font-size: 13.5px; padding: 6px 13px;
    border-color: rgba(201, 162, 39, 0.5);
    color: #FFE9B7;
  }
  #topbar { height: 58px; padding: 0 14px; }
}

/* 矮屏（横屏手机只有 ~292 CSS px 高）：目标牌卡让位。
   留着它，四个按钮 + 卡片就塞不进顶栏以下的安全区，只能压到别的东西上；
   牌河里那圈的描金 + 底部提示条里的牌名仍然说清「吃哪张」，信息不丢。 */
@media (max-height: 430px) {
  .act-target { display: none; }
}
/* 矮屏上的定缺卡：整体压扁，保证完整在屏幕内 */
@media (max-height: 560px) {
  .que-card { padding: 14px 18px 12px; }
  .que-head { margin-bottom: 12px; gap: 10px; }
  .q-seal { width: 36px; height: 36px; font-size: 21px; }
  .q-head-txt b { font-size: 22px; }
  .q-head-txt i { font-size: 11.5px; }
  .que-options { gap: 10px; }
  .que-opt { padding: 9px 10px 8px; gap: 7px; border-radius: 10px; }
  .qo-seal { width: 30px; height: 30px; font-size: 19px; }
  .qo-count b { font-size: 20px; }
  .qo-fan { min-height: 44px; }
  .qo-fan .qt, .qo-fan .qt-none { width: 30px; height: 41px; }
  .qo-foot { font-size: 11px; }
  .que-foot { margin-top: 10px; font-size: 11px; }
}

/* --------------------------------------------------------------- 竖屏手机 */
@media (max-width: 640px) {
  .que-card { padding: 18px 14px 16px; }
  .q-head-txt b { font-size: 24px; }
  .q-head-txt i { font-size: 11.5px; }
  .que-options { gap: 10px; }
  .que-opt { min-width: 92px; flex: 1 1 92px; padding: 10px 8px 9px; gap: 8px; border-radius: 10px; }
  .qo-seal { width: 30px; height: 30px; font-size: 19px; }
  .qo-count b { font-size: 20px; }
  .qo-fan { min-height: 46px; }
  .qo-fan .qt { width: 28px; height: 38px; }
  .qo-foot { font-size: 10.5px; }
  .qo-stamp { width: 26px; height: 26px; font-size: 16px; }
  .que-foot { font-size: 10.5px; margin-top: 12px; }
  #tenpai .tp-main { font-size: 17px; }
  #tenpai.warn .tp-main { font-size: 20px; }
  #tenpai .tp-sub { font-size: 12.5px; }
  #hint { font-size: 14px; max-width: 92vw; white-space: normal; }
  /* 顶栏在 390 宽里挤不下「品牌 + 说明 + 三颗按钮」：说明文字让位、按钮缩小，
     否则番数/牌谱两颗会被推出屏幕外（截图验收时发现的）。 */
  .brand-text i { display: none; }
  .seal-mini { width: 28px; height: 28px; font-size: 16px; }
  .brand-text b { font-size: 15px; letter-spacing: 0.1em; }
  .topright button.ghost { padding: 5px 11px; font-size: 12px; letter-spacing: 0.06em; }
  .topright { gap: 5px; }
  #wallStat { font-size: 12.5px; padding: 5px 11px; }
}

/* =========================================================================
   站点接入层 · 排行榜 / 暂停 / 提示条 / 手柄光标
   整段追加在文件末尾（沿用本文件的分层习惯）。字号一律按 DOM 像素定：
   这四张卡片不跟 1600×900 牌桌缩放，手机上照样要读得清。
   ========================================================================= */

/* ---- 纸面卡片要有定位上下文（::after 那圈内框靠它）---- */
.board-card,
.pause-card {
  position: relative;
  width: min(560px, 94vw);
  border-radius: 6px;
  overflow: hidden;
  animation: cardIn .38s cubic-bezier(.22, 1, .36, 1);
}
.pause-card { width: min(430px, 92vw); padding: 22px 26px 20px; }

/* ---- 卡片抬头：与番数表同款（朱印 + 毛笔标题 + 白话副标）---- */
.board-head,
.pause-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.board-head { padding: 16px 20px 12px; border-bottom: 1px solid rgba(43, 39, 36, 0.10); }
.b-seal, .p-seal {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: var(--brush); font-size: 21px; font-weight: 500;
}
.board-head-txt, .pause-head { flex: 1; min-width: 0; }
.board-head-txt { display: flex; flex-direction: column; gap: 3px; }
.board-head-txt b {
  font-family: var(--brush); font-weight: 500;
  font-size: 21px; letter-spacing: 0.14em; color: var(--ink);
}
.board-head-txt i, .pause-head b { font-style: normal; }
.board-head-txt i {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint);
}
.pause-head b {
  font-family: var(--brush); font-weight: 500;
  font-size: 24px; letter-spacing: 0.22em; color: var(--ink);
}
.board-close {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1; padding: 0;
}

/* ---- 榜单本体 ---- */
.board-list {
  list-style: none; margin: 0; padding: 8px 14px 4px;
  max-height: min(46vh, 420px); overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.board-list li {
  display: grid;
  grid-template-columns: 26px minmax(64px, 1fr) auto;
  grid-template-areas: "rank name score" ". extra extra";
  align-items: baseline; gap: 2px 10px;
  padding: 9px 8px;
  border-bottom: 1px dashed rgba(43, 39, 36, 0.14);
}
.board-list li:last-child { border-bottom: 0; }
.board-list li:nth-child(-n+3) .board-rank { color: var(--cinnabar); }
.board-rank {
  grid-area: rank;
  font-family: var(--serif); font-weight: 700; font-size: 16px;
  color: var(--ink-faint); text-align: center;
}
.board-name {
  grid-area: name;
  font-family: var(--serif); font-weight: 700; font-size: 16.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-score {
  grid-area: score;
  font-family: var(--serif); font-weight: 900; font-size: 20px;
  color: var(--cinnabar); font-variant-numeric: tabular-nums;
}
.board-extra {
  grid-area: extra;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.board-msg {
  margin: 2px 20px 0; min-height: 20px;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em; color: var(--jade);
}
.board-form {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 16px 4px; padding: 12px 14px;
  background: rgba(43, 39, 36, 0.05);
  border: 1px solid rgba(43, 39, 36, 0.12);
  border-radius: 8px;
}
.board-label {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft);
  flex: 0 0 auto;
}
#board-name {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px;
  font-family: var(--sans); font-size: 16px;   /* 16px：低于它 iOS Safari 聚焦输入框会放大页面 */
  color: var(--ink);
  background: rgba(252, 248, 238, 0.94);
  border: 1px solid rgba(43, 39, 36, 0.28);
  border-radius: 6px;
}
#board-name:focus { outline: 2px solid rgba(201, 162, 39, 0.75); outline-offset: 1px; }
#board-submit {
  flex: 0 0 auto;
  padding: 10px 16px; min-height: 40px;
  font-family: var(--serif); font-weight: 700; font-size: 15.5px; letter-spacing: 0.08em;
  color: #FCF8EE; background: var(--cinnabar);
  border: 1px solid rgba(90, 24, 16, 0.5); border-radius: 6px;
  box-shadow: 0 3px 12px rgba(120, 30, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
#board-submit:hover { background: #C24A38; }
#board-submit:disabled {
  color: var(--ink-faint); background: rgba(43, 39, 36, 0.07);
  border-color: rgba(43, 39, 36, 0.16); box-shadow: none; cursor: not-allowed;
}
.board-foot {
  padding: 8px 20px 16px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint);
}
/* 面板里没有可提交的成绩时，整块表单仍然在（读榜要用），只是提交按钮灰着 —— 收掉会让键盘聚焦跳位。 */

/* ---- 暂停卡 ---- */
.pause-note {
  margin: 8px 0 18px;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}
.pause-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pause-actions button { min-height: 44px; padding: 10px 22px; font-size: 16px; }

/* ---- 结算屏多了一颗「排行榜」：与「下一局」并排，主按钮仍在最右 ---- */
.result-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.result-actions button { min-height: 44px; }

/* ---- 提交结果的轻提示：贴屏幕底部，不挡牌桌也不抢焦点 ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 14px);
  z-index: 70;
  max-width: 86vw; padding: 11px 20px;
  border-radius: 999px;
  background: rgba(20, 29, 24, 0.94);
  border: 1px solid rgba(201, 162, 39, 0.42);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: #F3EAD6;
  font-family: var(--sans); font-size: 14.5px; letter-spacing: 0.05em;
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- 手柄 / 键盘落在 DOM 按钮上的光标 ---- */
.mj-cursor {
  outline: 3px solid rgba(201, 162, 39, 0.92) !important;
  outline-offset: 3px;
  border-radius: 8px;
}
#actions button.mj-cursor { transform: translateY(-4px) scale(1.06); border-color: rgba(178, 58, 46, 0.65); color: var(--cinnabar); }
.que-opt.mj-cursor { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.5), 0 10px 26px rgba(0, 0, 0, 0.34); }
/* 壳子给手柄菜单用的黄框：这四张卡片是宣纸底，默认的青色返回链在纸面上太淡 */
.game-room-return { color: var(--cinnabar); font-weight: 600; }
.game-room-return:hover { color: #7E2419; background: rgba(178, 58, 46, 0.08); }

/* ---- 对局 HUD 被壳子置 inert 时（老浏览器不认 inert 属性），点击也一并收掉 ---- */
#hud[inert] { pointer-events: none; }

/* ---- 窄屏：顶栏多了一颗「暂停」，四颗按钮 + 品牌 + 余牌要还塞得下 ---- */
@media (max-width: 640px) {
  .topright { gap: 4px; }
  .topright button.ghost { padding: 5px 8px; font-size: 11.5px; letter-spacing: 0.04em; }
  .board-list { max-height: 40vh; }
  .board-form { flex-wrap: wrap; }
  #board-submit { flex: 1 1 100%; }
  .result-actions { width: 100%; justify-content: flex-end; }
}
@media (max-height: 430px) {
  .board-list { max-height: 34vh; }
  .board-head { padding: 10px 16px 8px; }
  .board-foot { padding-bottom: 10px; }
  .pause-card { padding: 14px 18px 12px; }
  .pause-note { margin: 6px 0 12px; font-size: 13.5px; }
}