/* ============================================================
   Out of Print · 电子版
   深色书房 + 米色纸卡。没有外部资源：纹理、图标、骰子全是 CSS / 内联 SVG。
   ============================================================ */

:root {
  --ink: #12100e;
  --ink-2: #1a1613;
  --ink-3: #221c18;
  --paper: #f2e8d5;
  --paper-2: #e8dbc2;
  --paper-3: #d9c9ab;
  --wine: #8c2233;
  --wine-soft: #b4586a;
  --navy: #1b3a57;
  --navy-soft: #3f6f96;
  --gold: #b08d4f;
  --green: #2f6047;
  --text: #ece5d8;
  --muted: #a2947f;
  --line: rgba(236, 229, 216, 0.14);
  --serif: "OOP Garamond", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Songti SC", "SimSun", serif;
  --serif-cjk: "OOP Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", "Noto Serif CJK SC", serif;

  --sans: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* 自带字体：按界面实际用到的 821 个字符向 Google Fonts 取的子集（woff2，
   合计约 290KB），运行时不再连外网。缺字会回落到系统宋体。 */
@font-face {
  font-family: "OOP Serif SC";
  src: url("assets/fonts/noto-serif-sc.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OOP Garamond";
  src: url("assets/fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background:
    radial-gradient(1200px 700px at 22% -10%, #2a211a 0%, rgba(26, 22, 19, 0) 62%),
    radial-gradient(900px 600px at 88% 8%, #241a1c 0%, rgba(26, 22, 19, 0) 60%),
    linear-gradient(180deg, #14110f 0%, #0d0b0a 100%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
}

/* ---------- 内联 SVG 的统一笔触 ---------- */

svg .ln {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg .ln.thin {
  stroke-width: 1.35;
}

svg .ln.dashed {
  stroke-dasharray: 6 6;
}

svg .die-body {
  fill: #fbf4e4;
  stroke: rgba(40, 28, 18, 0.34);
  stroke-width: 2;
}

svg .die-pips circle {
  fill: #2a1f16;
}

.icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ---------- 骨架 ---------- */

#app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  max-width: 1720px;
  margin: 0 auto;
}

#app.is-landing {
  grid-template-rows: 1fr;
}

#app.is-landing #topbar,
#app.is-landing .table,
#app.is-landing .dock {
  display: none;
}

.table {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 330px;
  gap: 20px;
  padding: 18px 26px 6px;
  min-height: 0;
}

/* ---------- 顶栏 ---------- */

.topbar {
  position: relative;
  /* 只求压住桌面上的静态内容：弹层（.overlay，z 70）必须能盖住它，
     所以这里不能比弹层更高 */
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.brand-title {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.02em;
}

.brand-sub {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meters {
  display: flex;
  align-items: center;
  gap: 22px;
}

.meter {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}

.meter b {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--text);
}

.meter-of {
  color: var(--muted);
  font-size: 12px;
}

.meter-book {
  align-items: center;
}

.pips {
  display: inline-flex;
  gap: 4px;
}

/* 书封 = 盖在角色卡上的那块深色布：用方角的小块，和「归位」的蜡封圆点区分开 */
.pip {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(236, 229, 216, 0.22);
  background: transparent;
}

.pip.on {
  background: linear-gradient(180deg, var(--cloth-a, #2a1d17), var(--cloth-b, #120c09));
  border-color: rgba(236, 229, 216, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

/* ---------- 按钮 ---------- */

.btn {
  padding: 8px 16px;
  border-radius: 3px;
  border: 1px solid rgba(236, 229, 216, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(236, 229, 216, 0.4);
}

.btn:active {
  transform: translateY(1px);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn.ghost:hover {
  color: var(--text);
  border-color: var(--line);
}

.btn[disabled],
.btn[disabled]:hover {
  opacity: 0.35;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  cursor: default;
  transform: none;
}

.btn.primary {
  background: var(--paper);
  color: #201a15;
  border-color: var(--paper);
  font-weight: 600;
}

.btn.primary:hover {
  background: #fff7e8;
}

/* 米色面板里的按钮需要反色 */
.start-panel .btn.ghost,
.rules-panel .btn.ghost {
  color: rgba(43, 32, 24, 0.62);
  border-color: rgba(60, 40, 25, 0.22);
}

.start-panel .btn.ghost:hover,
.rules-panel .btn.ghost:hover {
  color: #241a12;
  border-color: rgba(60, 40, 25, 0.45);
}

.start-panel .btn.primary {
  background: var(--wine);
  border-color: var(--wine);
  color: #f7efdd;
}

.start-panel .btn.primary:hover {
  background: #7d2434;
  border-color: #7d2434;
}

.btn i {
  display: block;
  font-style: normal;
  font-size: 11px;
  opacity: 0.62;
  margin-top: 1px;
}

/* ---------- 左栏：角色卡与书封 ---------- */

.book-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.rail-title {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 500;
}

/* 角色卡舞台：占满左栏剩余高度，卡片在里面按「栏宽 / 剩余高度」中更小的那个定宽 */
.char-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

.char-card {
  position: relative;
  /* cqw/cqh 指舞台的宽高，取小的那个，保证卡片比例不被压扁也不溢出 */
  width: min(100cqw, calc(100cqh * 5 / 7));
  aspect-ratio: 2.5 / 3.5;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f7efdd;
  background-image: url("assets/paper.png");
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* 原卡角色卡上那幅铜版肖像：压在竖格底下，靠中间 */
.char-portrait {
  position: absolute;
  inset: 6% 12%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.95;
  pointer-events: none;
}

.char-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.14;
  pointer-events: none;
}

.char-bands {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.band {
  border-right: 1px solid rgba(60, 40, 25, 0.45);
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.band:last-child {
  border-right: 0;
}

.band span {
  font-family: var(--serif);
  font-size: 15px;
  color: rgba(48, 32, 20, 0.72);
}

.band.covered span {
  color: rgba(48, 32, 20, 0.16);
}

.book-cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--cloth-b);
  transition: width 420ms cubic-bezier(0.3, 0.9, 0.2, 1);
  z-index: 3;
  box-shadow: 6px 0 18px rgba(0, 0, 0, 0.45);
}

/* 书封是「一块板从左推进来」：封面的**右缘**始终贴住推进的前沿——
   前沿就是书的真边缘（书口），所以不会被读成「图被裁了一刀」；
   左边被角色卡的左边界自然截住，反而看不出是裁切。 */
.book-cover img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  user-select: none;
}

.cover-cloth {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: #f4ecd9;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--cloth-a), var(--cloth-b));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.cover-cloth::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(244, 236, 217, 0.32);
  border-radius: 2px;
  pointer-events: none;
}

/* 真封面：图里已经有书名与作者，就别再叠一层文字 */
.cover-cloth.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cover-cloth.has-photo::before,
.cover-cloth.has-photo .cover-emblem,
.cover-cloth.has-photo .cover-title,
.cover-cloth.has-photo .cover-author {
  display: none;
}

.cover-emblem svg {
  width: 64px;
  height: 48px;
  color: rgba(244, 236, 217, 0.9);
}

.cover-title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.cover-author {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.theme-navy {
  --cloth-a: #22445f;
  --cloth-b: #122a3f;
}

.theme-wine {
  --cloth-a: #6d1f2c;
  --cloth-b: #3c1119;
}

.rail-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

.rail-note b {
  color: var(--text);
}

/* ---------- 中间：三幕 ---------- */

.acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 8px 16px;
  align-content: stretch;
  min-height: 0;
  /* 给底栏上沿冒出来的手牌留一条空带：宽度就是手牌露出的那一截 ——
     这一条必须 ≥ --peek，否则冒出来的牌头会盖住每一幕下面「已计分」那条。 */
  padding-bottom: calc(var(--peek, 76px) + 18px);
}

/* 三幕共享行高（subgrid）：三张能力铭牌因此严格等高，谁的字多也不会把底边顶歪 */
.act {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  align-content: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
}

.act > .act-card {
  grid-row: 1;
}

.act > .slot {
  grid-row: 2;
}

.act > .preview {
  grid-row: 3;
}

.act > .ability-plaque {
  grid-row: 4;
}

.act > .scored-strip {
  grid-row: 5;
}

.act-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px;
  min-height: 92px;
  border-radius: 4px;
  background: linear-gradient(160deg, #f7efdd, #e6d7ba);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  color: #2a1f16;
}

.act-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.14;
  border-radius: 4px;
  pointer-events: none;
}

.act-num {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(42, 31, 22, 0.5);
}

.act-word {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 27px);
  letter-spacing: 0.04em;
  color: var(--wine);
  line-height: 1;
}

.act-die {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  flex: none;
}

.die {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 60px;
  height: 60px;
  border-radius: 7px;
  background: linear-gradient(150deg, #fdf8ec, #e3d6bd);
  border: 1px solid rgba(40, 28, 18, 0.28);
  box-shadow: inset 0 -3px 6px rgba(80, 60, 40, 0.22), 0 4px 10px rgba(0, 0, 0, 0.35);
  color: #2a1f16;
  transition: transform 120ms, box-shadow 120ms, outline-color 120ms;
  outline: 2px solid transparent;
  outline-offset: 3px;
}

.die svg {
  width: 34px;
  height: 34px;
}

.die-num {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: rgba(42, 31, 22, 0.75);
}

.die.is-selectable {
  cursor: pointer;
  outline-color: rgba(176, 141, 79, 0.85);
  transition: outline-color 140ms, transform 140ms;
}

.die.is-selectable:hover {
  transform: translateY(-2px);
  outline-color: rgba(176, 141, 79, 1);
}

.die.is-picked {
  outline-color: var(--wine-soft);
  transform: translateY(-2px) scale(1.04);
}

.die.is-removed {
  background: transparent;
  border-style: dashed;
  border-color: rgba(236, 229, 216, 0.3);
  box-shadow: none;
  color: var(--muted);
}

@keyframes settle {
  from {
    outline-color: rgba(176, 141, 79, 0.35);
  }
  to {
    outline-color: rgba(176, 141, 79, 0.85);
  }
}

/* 放牌的位置 */

.slot {
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(236, 229, 216, 0.055);
  /* 空位做成「台面上挖出来的一格」，不再用虚线框 */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 12px 24px rgba(0, 0, 0, 0.26);
  justify-self: stretch;
  align-self: center;
  /* 宽度跟着列宽走（大屏封顶 320），高度由 2.5:3.5 推出来：
     牌桌变高时牌不会被拉成长条，变矮时 max-height 兜住 */
  width: auto;
  max-width: 320px;
  height: auto;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 2.5 / 3.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: border-color 140ms, background 140ms;
}

.slot .card {
  width: 100%;
  height: 100%;
}

.slot .card .quote {
  font-size: 11.5px;
}

.act.is-target .slot {
  border-color: rgba(176, 141, 79, 0.5);
  background: linear-gradient(180deg, rgba(176, 141, 79, 0.11), rgba(0, 0, 0, 0.26));
  cursor: pointer;
}

.act.is-target .slot-empty {
  color: rgba(236, 229, 216, 0.42);
}

.act.is-score .slot {
  border-color: rgba(143, 196, 155, 0.85);
  background: rgba(60, 120, 80, 0.14);
  box-shadow: inset 0 0 46px rgba(80, 200, 130, 0.16);
}

.slot-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(236, 229, 216, 0.15);
  font-size: 11px;
  letter-spacing: 0.3em;
}

.act.is-target .slot-empty {
  color: rgba(236, 229, 216, 0.8);
}

.preview {
  font-size: 11.5px;
  color: var(--muted);
  min-height: 16px;
  letter-spacing: 0.02em;
}

.preview.ok {
  color: #8fc49b;
}

/* 能力牌 */

.ability-plaque {
  position: relative;
  padding: 8px 10px 8px 12px;
  border-radius: 0;
  background: linear-gradient(180deg, #f7eedc, #ebe0c6);
  color: #2a1f16;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(176, 141, 79, 0.66);
  border-left: 4px solid var(--navy-soft);
  overflow: hidden;
}

/* 内一层金线 + 四角角标：把原卡 cartouche 的语言搬到铭牌上 */
.ability-plaque::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(176, 141, 79, 0.26);
  pointer-events: none;
}

.ability-plaque::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  background-image:
    linear-gradient(#b08d4f, #b08d4f), linear-gradient(#b08d4f, #b08d4f),
    linear-gradient(#b08d4f, #b08d4f), linear-gradient(#b08d4f, #b08d4f),
    linear-gradient(#b08d4f, #b08d4f), linear-gradient(#b08d4f, #b08d4f),
    linear-gradient(#b08d4f, #b08d4f), linear-gradient(#b08d4f, #b08d4f);
  background-size:
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
  opacity: 0.75;
}

/* 左侧色条 = 这张牌能碰到什么，不是装饰：
   黄铜 = 任意一颗骰子；绯红 = 只能碰别幕的骰子；灰蓝 = 不碰骰子，只碰牌。 */
.ability-plaque.tgt-any {
  border-left-color: #b08d4f;
}

.ability-plaque.tgt-other {
  border-left-color: #a8422f;
}

.ability-plaque.tgt-cards {
  border-left-color: #4f6b73;
}

.ability-plaque b {
  display: block;
  padding-right: 62px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* 能力牌的中文说明：全文铺开，不截断 */
.plaque-desc {
  margin: 2px 0 0;
  font-size: 9.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(42, 31, 22, 0.68);
}

.ability-plaque .scope {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 1px 5px;
  border: 1px solid rgba(176, 141, 79, 0.5);
  background: rgba(255, 252, 244, 0.35);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: rgba(118, 84, 38, 0.92);
  text-transform: uppercase;
}

.ability-plaque.facedown {
  background: repeating-linear-gradient(135deg, #2b2420 0 5px, #241f1b 5px 10px);
  color: var(--muted);
  border-left-color: rgba(236, 229, 216, 0.2);
  box-shadow: none;
}

.ability-plaque.facedown .plaque-desc,
.ability-plaque.facedown .scope {
  color: rgba(236, 229, 216, 0.4);
}

.ability-plaque.facedown b {
  color: rgba(236, 229, 216, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(236, 229, 216, 0.28);
}

.ability-plaque .plaque-note {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: #d8a06a;
}

.ability-plaque.empty {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  border: 1px dashed var(--line);
  box-shadow: none;
  font-size: 12px;
}

.scored-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}

.scored-chip {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(176, 141, 79, 0.16);
  border: 1px solid rgba(176, 141, 79, 0.4);
  color: #e8cfa2;
}

.scored-empty {
  font-size: 11px;
  color: rgba(236, 229, 216, 0.28);
  letter-spacing: 0.1em;
}

/* ---------- 章节牌 ---------- */

.card {
  position: relative;
  display: flex;
  aspect-ratio: 2.5 / 3.5;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  contain: paint;
  background-image: var(--noise), linear-gradient(160deg, #f8f0df 0%, #efe3cc 58%, #e2d3b7 100%);
  background-blend-mode: multiply;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3);
  color: #241a12;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.card.is-interactive {
  cursor: pointer;
}

.card.is-interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(176, 141, 79, 0.5);
}

.card.is-selected {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.65), 0 0 0 2px var(--gold);
}

.card.is-dim {
  filter: saturate(0.62) brightness(0.93);
}

.card-face {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px 10px;
  width: 100%;
  background-color: #f7efdd;
  background-image: url("assets/paper.png");
  background-size: cover;
  background-position: center;
}

/* 原卡那圈细红双框 */
.card-face::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(166, 44, 38, 0.34);
  box-shadow: inset 0 0 0 2px rgba(247, 239, 221, 0.85), inset 0 0 0 3px rgba(166, 44, 38, 0.18);
  pointer-events: none;
}

.chapter-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.act-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #2f2216;
}

.act-line b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #b3261e;
}

.chapter-frame {
  padding: 4px 8px 3px;
  border: 1px solid rgba(166, 44, 38, 0.45);
  outline: 1px solid rgba(166, 44, 38, 0.2);
  outline-offset: 2px;
}

.chapter-name {
  font-family: var(--serif-cjk);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1.15;
  color: #1d140d;
}

.series-line {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
}

.series-line i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(166, 44, 38, 0), rgba(166, 44, 38, 0.5));
}

.series-line i:last-child {
  background: linear-gradient(270deg, rgba(166, 44, 38, 0), rgba(166, 44, 38, 0.5));
}

.series {
  font-family: var(--serif-cjk);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: #a5302a;
}

.quote {
  margin: 0;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  font-family: var(--serif-cjk);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: #2b2018;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.quote .drop {
  float: left;
  font-size: 2.1em;
  line-height: 0.9;
  padding: 2px 4px 0 0;
  color: var(--wine);
  font-weight: 600;
}

.quote .lead {
  margin-right: -0.05em;
}

/* 原卡的分隔线：细红线 + 中央花饰 */
.orn-rule {
  color: rgba(178, 44, 38, 0.7);
  line-height: 0;
}

.orn-rule svg {
  display: block;
  width: 100%;
  height: 11px;
}

.face-ability {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 9px;
  align-items: center;
}

.abil-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.ability-text b {
  display: block;
  font-family: var(--serif-cjk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1d140d;
  padding-bottom: 2px;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(29, 20, 13, 0.4);
}

.ability-text i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  line-height: 1.42;
  color: rgba(43, 32, 24, 0.72);
}

.ability-none {
  font-size: 10px;
  color: rgba(43, 32, 24, 0.3);
}

.card-spacer {
  flex: 1 1 auto;
  min-height: 6px;
}

.back-hint {
  font-family: var(--serif-cjk);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(43, 32, 24, 0.55);
  padding: 0 2px 1px;
}

/* ---------- 右栏：反派与战报 ---------- */

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.antagonist {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 72%;
  overflow-y: auto;
  scrollbar-width: thin;
  border-radius: 4px;
  padding: 16px 16px 14px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.ant-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin-bottom: 10px;
  user-select: none;
}

.antagonist h3 {
  font-size: 19px;
  text-align: center;
}

.ant-sub {
  margin: 2px 0 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.ant-block {
  margin-top: 10px;
}

.ant-block h4 {
  font-size: 12.5px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.ant-block p {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.62;
  color: rgba(236, 229, 216, 0.78);
}

.ant-foot {
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 11.5px;
  color: var(--muted);
}

.log {
  flex: 1 1 auto;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.log h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}

.log ol {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(236, 229, 216, 0.62);
  scrollbar-width: thin;
}

.log li {
  padding: 3px 0 3px 10px;
  border-left: 1px solid rgba(236, 229, 216, 0.12);
  position: relative;
}

.log li::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(236, 229, 216, 0.3);
}

.log li[data-fx="score"] {
  color: #a9d8b4;
  border-left-color: rgba(143, 196, 155, 0.6);
}

.log li[data-fx="danger"],
.log li[data-fx="gameOver"] {
  color: #e89aa5;
  border-left-color: rgba(232, 154, 165, 0.55);
}

.log li[data-fx="bonus"] {
  color: #e8cfa2;
  border-left-color: rgba(176, 141, 79, 0.6);
}

.log li[data-fx="roundEnd"] {
  color: var(--text);
  font-weight: 600;
  margin-top: 4px;
}

/* ---------- 底栏：手牌 ---------- */

.dock {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.25));
  padding: 6px 26px 8px;
}

.removed-note {
  font-size: 11.5px;
  color: #e8cfa2;
  margin-bottom: 6px;
}

.removed-note b {
  font-family: var(--serif);
  font-size: 14px;
}

.dock-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.deck-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding-right: 14px;
  border-right: 1px solid rgba(236, 229, 216, 0.1);
}

.counter {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  border-radius: 3px;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.counter.is-static {
  cursor: default;
}

.counter b {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px dotted transparent;
  transition: color 140ms, border-color 140ms;
}

.counter:not(.is-static):hover b {
  color: var(--gold);
  border-bottom-color: rgba(176, 141, 79, 0.6);
}

.counter:not(.is-static):hover span {
  color: var(--text);
}

.counter[disabled] {
  opacity: 0.45;
  cursor: default;
}

.counter[disabled] b {
  border-bottom-color: transparent;
}

.hand {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.hand .card {
  width: auto;
  height: clamp(232px, 33vh, 330px);
  flex: none;
}

/* 手牌上的引文只露三行：原文太长，用渐隐收尾，免得看着像被裁坏 */
.hand .card .quote {
  font-size: 11px;
  line-height: 1.62;
  max-height: 5.1em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.06));
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.06));
}

.hand .card .face-ability {
  grid-template-columns: 34% 1fr;
  gap: 6px;
}

.hand .card .ability-text b {
  font-size: 11px;
}

.hand .card .ability-text i {
  font-size: 9.5px;
  line-height: 1.5;
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
}

.hand.is-empty {
  color: var(--muted);
  font-size: 12px;
}

/* ---------- 手牌层：贴在底栏上沿，静止半藏，悬停整张跃出 ---------- */
/* 露出的高度写在 :root 上：.acts 要按它留出同宽的空带，两边必须同一个值 */
:root {
  --peek: clamp(64px, calc(12vh - 30px), 76px);
}

.hand-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dock-h, 64px);
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 0;
  padding: 0 24px;
  pointer-events: none;
}

.hand-layer[hidden] {
  display: none;
}

.hand-layer .hand {
  pointer-events: none;
}

.hand-layer .hand .card {
  pointer-events: auto;
  flex: none;
  width: auto;
  /* 尺寸比底栏里的手牌大一圈：反正不占布局，可以铺开看 */
  height: clamp(280px, 44vh, 420px);
  /* 静止时只露出牌头那一截：露多少跟铭牌下方那条空带同步，不会盖住计分条 */
  transform: translateY(calc(100% - var(--peek))) scale(1);
  /* 贴着桌面的牌：影子浅而散，纸面略暗一点 */
  transition:
    transform 280ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 280ms ease,
    filter 280ms ease;
  box-shadow:
    0 -2px 10px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.03);
  filter: brightness(0.97);
  will-change: transform;
}

.hand-layer .hand .card:hover,
.hand-layer .hand .card:focus-visible {
  /* 抬起来：放大一点点、影子拉长、纸面变亮——三件事一起做才有「离开桌面」的感觉 */
  transform: translateY(0) scale(1.02);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.62),
    0 8px 18px rgba(0, 0, 0, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.05);
  filter: brightness(1.02);
  z-index: 2;
}

/* 选中后只抬起一截：牌要留在原处不能去挡中间那一幕的放牌位 */
.hand-layer .hand .card.is-selected {
  transform: translateY(calc(100% - 236px)) scale(1.012);
  box-shadow:
    0 -2px 34px rgba(0, 0, 0, 0.6),
    0 14px 30px rgba(0, 0, 0, 0.45);
  filter: brightness(1.015);
  z-index: 2;
}

/* 底栏盖在手牌层上面，牌的下半截"缩进"栏里 */
.dock {
  position: relative;
  z-index: 35;
  background-color: #14100e;
}

/* 开局设置：横排 6 张，点一下就翻面 */
.dock:has(.setup-mode) {
  padding-top: 6px;
  padding-bottom: 10px;
}

.hand.is-setup {
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
}

/* 六张牌平分中间这一列，宽度收在 120px 以内，高度跟着宽度走 */
.hand.is-setup .setup-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 124px;
}

.hand.is-setup .card {
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 3.5;
}

.setup-card {
  position: relative;
  cursor: pointer;
  flex: none;
  transition: transform 0.16s ease;
}

.setup-card:hover {
  transform: translateY(-4px);
}

.setup-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.setup-flip {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(42, 31, 22, 0.82);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.setup-card:hover .setup-flip,
.setup-card:focus-visible .setup-flip {
  opacity: 1;
}

/* 紧凑卡面：开局设置用，只留 Act / 章节 / 能力 / 背面提示 */
.card.is-compact .card-face {
  gap: 3px;
  padding: 7px 8px 6px;
}

.card.is-compact .card-face::before {
  inset: 4px;
}

.card.is-compact .chapter-head {
  gap: 2px;
}

.card.is-compact .act-line {
  font-size: 8px;
  letter-spacing: 0.18em;
}

.card.is-compact .act-line b {
  font-size: 10px;
}

.card.is-compact .chapter-frame {
  padding: 2px 4px 1px;
  outline-offset: 1px;
}

.card.is-compact .chapter-name {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.card.is-compact .series-line {
  display: none;
}

.card.is-compact .orn-rule {
  display: none;
}

.card.is-compact .face-ability {
  grid-template-columns: 32% 1fr;
  gap: 4px;
  margin-bottom: auto;
}

.card.is-compact .ability-text b {
  font-size: 9.5px;
}

.card.is-compact .ability-text i {
  display: none;
}

.card.is-compact .back-hint {
  font-size: 7.5px;
}

.hand-empty {
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 22px 26px;
  color: rgba(236, 229, 216, 0.3);
  letter-spacing: 0.16em;
  font-size: 11px;
}

.dock-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding-bottom: 2px;
}

.hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.hint-strong {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
}

.dock-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- 弹层 ---------- */

/* #overlay 是 #app 的兄弟节点：要自己撑起一层，否则它的子元素拿不到 z-index，
   顶栏（z 20）会从弹层上面透出来 */
#overlay {
  position: relative;
  z-index: 70;
}

.overlay {
  position: fixed;
  inset: 0;
  /* 必须高于顶栏（20）：弹层打开时要把「归位 / 书封」一起盖掉，否则会透出来 */
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* 不透光：半透明会让顶栏的字在背后留下残影，反而显脏 */
  background: radial-gradient(120% 130% at 50% -10%, #16110d 0%, #080605 58%, #050403 100%);
  overflow-y: auto;
}

.overlay.is-open {
  display: flex;
}

/* 内容比窗口高时从顶部开始排，不要被居中裁掉上半截 */
.start-panel,
.rules-panel {
  margin: auto;
}

.start-panel {
  width: min(880px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 32px 44px 20px;
  border-radius: 6px;
  background: linear-gradient(165deg, #f7efdd, #e7d9bd);
  color: #241a12;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  position: relative;
}

.start-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.14;
  pointer-events: none;
  border-radius: 6px;
}

.start-panel h1 {
  font-size: 42px;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--wine);
}

.start-lead {
  max-width: 620px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(43, 32, 24, 0.78);
}

.start-rules {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: rgba(43, 32, 24, 0.72);
  text-align: center;
}

.start-rules b {
  color: var(--wine);
}

.start-modules {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 22px 0 16px;
}

.start-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  cursor: pointer;
  transition: transform 160ms;
}

.start-book:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 6px;
  border-radius: 4px;
}

.start-book .cover-cloth {
  width: clamp(168px, 20vh, 198px);
  height: clamp(236px, 28vh, 277px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}

.start-book:hover {
  transform: translateY(-6px);
}

.start-book:hover .cover-cloth {
  box-shadow: 0 26px 44px rgba(0, 0, 0, 0.55);
}

.start-book-note {
  font-size: 12px;
  color: rgba(43, 32, 24, 0.6);
  letter-spacing: 0.04em;
}

.start-book-cta {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--wine);
  border-bottom: 1px solid rgba(140, 34, 51, 0.35);
  padding-bottom: 1px;
}

.start-book:hover .start-book-cta {
  border-bottom-color: var(--wine);
}

.start-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(60, 40, 25, 0.14);
}

.start-foot-note {
  font-size: 11px;
  color: rgba(43, 32, 24, 0.5);
}

/* 房规开关：选书页上一并选定 */
.houserule {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(43, 32, 24, 0.72);
  cursor: pointer;
  text-align: left;
}

.houserule input {
  margin: 3px 0 0;
  accent-color: var(--wine);
  width: 14px;
  height: 14px;
  flex: none;
  cursor: pointer;
}

.houserule span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.houserule b {
  font-weight: 600;
}

.houserule i {
  font-style: normal;
  font-size: 11px;
  color: rgba(43, 32, 24, 0.48);
}

.houserule input:checked + span b {
  color: var(--wine);
}

.rule-tag {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid rgba(176, 141, 79, 0.45);
  border-radius: 999px;
  color: #e0c48c;
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

/* 继续上一局：选书页上的一条存档提示 */
.resume-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px auto 2px;
  padding: 9px 16px;
  max-width: 560px;
  border: 1px solid rgba(60, 40, 25, 0.16);
  border-left: 3px solid var(--wine);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.42);
}

.resume-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.resume-meta b {
  font-family: var(--serif-cjk);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.resume-meta i {
  font-style: normal;
  font-size: 11.5px;
  color: rgba(43, 32, 24, 0.55);
}

.resume-bar .btn {
  flex: none;
  font-size: 12.5px;
  padding: 7px 14px;
}

.seed-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(43, 32, 24, 0.6);
}

.seed-field input {
  width: 150px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid rgba(60, 40, 25, 0.28);
  background: rgba(255, 255, 255, 0.5);
  font: inherit;
  font-size: 13px;
  color: #241a12;
  letter-spacing: 0.14em;
}

.rules-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 34px 38px;
  border-radius: 6px;
  background: linear-gradient(165deg, #f7efdd, #e7d9bd);
  color: #241a12;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  font-size: 13px;
  line-height: 1.8;
}

.rules-panel h2 {
  font-size: 30px;
  color: var(--wine);
  margin-bottom: 6px;
}

.rules-panel h3 {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wine);
  margin: 22px 0 6px;
  font-family: var(--sans);
  font-weight: 600;
}

.rules-panel p,
.rules-panel ul,
.rules-panel ol {
  margin: 0 0 8px;
  color: rgba(43, 32, 24, 0.85);
}

.rules-panel ul,
.rules-panel ol {
  padding-left: 20px;
}

.rules-panel li {
  margin-bottom: 4px;
}

.rules-panel b {
  color: #4a2018;
}

.rules-foot {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(60, 40, 25, 0.18);
  font-size: 12px;
  color: rgba(43, 32, 24, 0.6) !important;
}

/* ---------- 弃牌堆 / 能力牌堆 ---------- */

.pile-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px 34px 26px;
  border-radius: 6px;
  background: linear-gradient(165deg, #f7efdd, #e7d9bd);
  color: #241a12;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.pile-panel h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 26px;
  color: var(--wine);
}

.pile-count {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(43, 32, 24, 0.6);
}

.pile-note {
  margin: 6px 0 18px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(43, 32, 24, 0.72);
}

.pile-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.pile-card {
  width: 186px;
  margin: 0;
}

.pile-card .card {
  width: 100%;
}

.pile-card .ability-plaque {
  width: 100%;
  padding: 8px 10px 9px 11px;
  border: 1px solid rgba(60, 40, 25, 0.22);
  border-left-width: 3px;
  border-radius: 3px;
  background: #fdf7e8;
  color: #2a1f16;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pile-card .ability-plaque b {
  padding-right: 0;
  font-size: 13px;
  line-height: 1.35;
}

.pile-card .ability-plaque .plaque-desc {
  font-size: 10px;
  line-height: 1.5;
}

.pile-card .ability-plaque .scope {
  position: static;
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: rgba(42, 31, 22, 0.5);
}

.pile-empty {
  margin: 0;
  font-size: 13px;
  color: rgba(43, 32, 24, 0.6);
}

.close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: rgba(43, 32, 24, 0.55);
}

.close:hover {
  background: rgba(60, 40, 25, 0.1);
  color: #241a12;
}

.over-panel {
  width: min(560px, 100%);
  padding: 38px 40px 32px;
  border-radius: 6px;
  background: linear-gradient(165deg, #f7efdd, #e7d9bd);
  color: #241a12;
  text-align: center;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.over-kicker {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(43, 32, 24, 0.55);
}

.over-panel h2 {
  font-size: 36px;
  margin: 8px 0 4px;
  color: var(--wine);
}

.over-panel.outcome-loss h2 {
  color: #4a2a2a;
}

.over-panel.outcome-perfect h2 {
  color: #2f6047;
}

.over-score {
  font-family: var(--serif);
  font-size: 15px;
  color: rgba(43, 32, 24, 0.7);
  margin: 6px 0 14px;
}

.over-score b {
  font-size: 28px;
  color: #241a12;
}

.over-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
  color: rgba(43, 32, 24, 0.8);
  margin: 0 auto 22px;
  max-width: 420px;
}

.over-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.over-panel .btn {
  border-color: rgba(60, 40, 25, 0.28);
  color: #241a12;
  background: rgba(255, 255, 255, 0.4);
}

.over-panel .btn.primary {
  background: var(--wine);
  color: #f7efdd;
  border-color: var(--wine);
}

.over-seed {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(43, 32, 24, 0.45);
}

/* ---------- toast ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
}

.toast {
  padding: 9px 18px;
  border-radius: 3px;
  background: rgba(20, 16, 14, 0.94);
  border: 1px solid rgba(236, 229, 216, 0.2);
  color: var(--text);
  font-size: 12.5px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

/* ---------- 悬停预览：两面一起看 ---------- */

#preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: max-content;
  max-width: 300px;
  padding: 13px 16px 11px;
  border-radius: 5px;
  background: rgba(16, 12, 9, 0.95);
  border: 1px solid rgba(176, 141, 79, 0.4);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

#preview[hidden] {
  display: none;
}

.preview-pair {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.preview-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  width: 238px;
}

.preview-item figcaption {
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(226, 212, 186, 0.7);
}

/* 预览里的卡不留白、不省略：能力说明和引文都完整铺开 */
#preview .card {
  width: 238px;
  /* 保持真卡比例：卡面的百分比定位全靠 cqh，比例一歪就会挤成一团 */
  aspect-ratio: 2.5 / 3.5;
  min-height: 0;
}

#preview .card-face {
  height: auto;
}

#preview .quote {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  font-size: 12.5px;
  line-height: 1.7;
}

#preview .ability-text i {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  font-size: 10.5px;
  line-height: 1.55;
}

#preview .card-spacer {
  flex: 0 1 auto;
  min-height: 0;
}

.preview-item.is-back .card {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--gold);
}

.preview-note {
  margin: 0;
  width: 238px; /* 与卡面同宽：面板正好裹住牌，牌不会探出框 */
  text-align: center;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(226, 212, 186, 0.78);
}

/* ---------- 窄一点的桌面 ---------- */

@media (max-width: 1440px) {
  .table {
    grid-template-columns: 258px minmax(0, 1fr) 300px;
    gap: 16px;
    padding: 14px 18px 4px;
  }

  .hand .card {
    width: 188px;
  }
}

@media (max-width: 1240px) {
  .table {
    grid-template-columns: 226px minmax(0, 1fr) 268px;
  }

  .hand .card {
    width: 168px;
  }

  .act-card {
    min-height: 80px;
  }

  .die {
    width: 52px;
    height: 52px;
  }

  .die svg {
    width: 28px;
    height: 28px;
  }
}

/* ---------- 矮一点的桌面：竖向空间不够时整体收紧 ---------- */

@media (max-height: 860px) {
  .table {
    padding: 10px 18px 2px;
    gap: 14px;
  }

  .rail-title {
    font-size: 12px;
  }

  .rail-note {
    font-size: 10.5px;
    line-height: 1.5;
  }

  .act-card {
    min-height: 66px;
    padding: 8px 12px;
  }

  .act-word {
    font-size: clamp(18px, 1.6vw, 22px);
  }

  .act {
    gap: 5px;
  }

  /* 矮屏上牌面整体收紧，保证「背面：…」那一行不会被裁掉 */
  .card-face {
    gap: 3px;
    padding: 10px 12px 6px;
  }

  .chapter-name {
    font-size: 18px;
  }

  .face-ability {
    grid-template-columns: 30% 1fr;
    gap: 7px;
  }

  .ability-text b {
    font-size: 11px;
  }

  .ability-text i {
    font-size: 9px;
    line-height: 1.5;
  }

  /* 矮屏上放下的大牌只留必要的几行：书名小字让位给引文和能力说明 */
  .slot .card .series-line {
    display: none;
  }

  .chapter-head {
    gap: 2px;
  }

  .act-line {
    font-size: 11px;
  }

  .act-line b {
    font-size: 14px;
  }

  .chapter-frame {
    padding: 3px 0;
  }

  /* 引文按整行收尾，宁可少一行也不要在字中间切断 */
  .slot .card .quote {
    flex: 0 0 auto;
    max-height: none;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .slot .card .face-ability {
    grid-template-columns: 26% 1fr;
  }

  .slot .card .back-hint {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .orn-rule svg {
    height: 7px;
  }

  .ability-plaque {
    padding: 5px 9px 6px;
  }

  .ability-plaque b {
    font-size: 12px;
    padding-right: 56px;
  }

  .plaque-desc {
    font-size: 9px;
    line-height: 1.4;
  }

  .ability-plaque .scope {
    font-size: 8.5px;
    top: 6px;
    right: 7px;
  }

  .antagonist {
    padding: 10px 12px;
  }

  /* 整块牌子（花边框 + 鲸鱼 + 书名）按原比例显示，任何情况下都不裁 */
  .ant-art {
    width: 100%;
    height: auto;
    margin: 0 0 6px;
  }

  .antagonist h3 {
    font-size: 16px;
  }

  /* 矮屏上「THE NARRATOR」这行拉丁副标题省掉，把高度留给规则正文 */
  .ant-sub {
    display: none;
  }

  .ant-block {
    margin-top: 6px;
  }

  .ant-block h4 {
    font-size: 11.5px;
  }

  .ant-block p {
    font-size: 11px;
    line-height: 1.5;
  }

  .ant-foot {
    display: none;
  }

  .log {
    min-height: 110px;
  }

  .log ol {
    font-size: 11px;
    line-height: 1.45;
  }

  .dock {
    padding: 8px 18px 10px;
  }

  .hand .card {
    height: clamp(196px, 30vh, 250px);
  }

  .dock-hint h3 {
    font-size: 14px;
  }

  /* 选书页：矮窗口里把封面和标题一起收一收，别让「先看看规则」掉到折线以下 */
  .start-panel {
    width: min(960px, 100%);
    padding: 20px 38px 14px;
  }

  .start-panel h1 {
    font-size: 34px;
  }

  .start-lead {
    max-width: 720px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.65;
  }

  .start-rules {
    margin-top: 8px;
    gap: 3px;
    font-size: 12px;
  }

  .start-modules {
    margin: 12px 0 10px;
    gap: 22px;
  }

  .start-rules {
    max-width: 720px;
  }

  .start-book .cover-cloth {
    width: clamp(124px, 17vh, 176px);
    height: clamp(174px, 24vh, 246px);
  }

  .start-book {
    gap: 6px;
  }

  .houserule {
    margin-top: 9px;
  }

  .start-foot {
    margin-top: 8px;
    padding-top: 8px;
  }
}

@media (max-height: 720px) {
  .hand .card {
    height: 178px;
  }

  .hand .card .quote {
    max-height: 3.4em;
  }

  .log {
    min-height: 96px;
  }

  .ant-art {
    width: min(100%, 214px);
  }
}

/* 特别矮的窗口（比如 1366×768 的笔记本去掉浏览器边框）：不再硬挤，整页改为可滚动 */
@media (max-height: 640px) {
  #app {
    height: auto;
    min-height: 100dvh;
  }

  .table {
    min-height: 440px;
  }
}

/* ============================================================
   原卡版式（美术阶段一）
   坐标来自对 300dpi 原卡的实测（docs/art-plan.md §3）：
   卡面 750×1050 成品，下列百分比都以卡面为基准。
   花饰是原卡抠出来的透明 PNG，按同一比例缩放，不做拉伸。
   ============================================================ */

.card .card-face {
  container-type: size;
  display: block;
  padding: 0;
}

/* 原卡没有内框，只有章节那一块带花边 */
.card .card-face::before {
  content: none;
}

/* ACT 行：9.3%–13.9% */
.card .act-line {
  position: absolute;
  top: 8.5cqh;
  left: 0;
  right: 0;
  justify-content: center;
  gap: 0.9cqh;
  font-size: 3.1cqh;
  letter-spacing: 0.24em;
}

.card .act-line b {
  font-size: 4.6cqh;
  letter-spacing: 0;
}

/* 章节框：顶部花边 14.3%，章节名 18.2%–25.6%，系列名带 25.7%–30.7% */
.card .chapter-head {
  position: absolute;
  top: 14.1cqh;
  left: 8.1%;
  right: 8.1%;
  height: 16.6cqh;
  display: block;
  gap: 0;
  text-align: center;
  border-left: 1px solid rgba(166, 44, 38, 0.42);
  border-right: 1px solid rgba(166, 44, 38, 0.42);
}

.card .orn-head {
  position: absolute;
  top: 0;
  left: -1px;
  display: block;
  width: calc(100% + 2px);
  height: auto;
  margin: 0;
}

.card .chapter-frame {
  position: absolute;
  top: 2.4cqh;
  left: 0;
  right: 0;
  padding: 0;
  border: 0;
  outline: 0;
  margin: 0;
}

.card .chapter-name {
  font-size: 7.2cqh;
  line-height: 1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.card .series-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 0 0.3cqh;
}

.card .series-line i {
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: 0.75cqh;
  background: rgba(166, 44, 38, 0.5);
}

.card .series-line i:first-of-type {
  background: linear-gradient(90deg, rgba(166, 44, 38, 0.25), rgba(166, 44, 38, 0.55));
}

.card .series-line i:nth-of-type(2) {
  background: linear-gradient(270deg, rgba(166, 44, 38, 0.25), rgba(166, 44, 38, 0.55));
}

.card .orn-corner {
  width: 9.9cqw;
  height: auto;
  flex: none;
}

.card .orn-corner.is-right {
  transform: scaleX(-1);
}

.card .series {
  flex: 0 0 auto;
  padding: 0 1.2cqw;
  font-size: 3.1cqh;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

/* 引文：32.1%–51.4%，左右 11.2% / 11.8% */
.card .quote {
  position: absolute;
  top: 31.9cqh;
  left: 11.2%;
  right: 11.8%;
  max-height: 20.4cqh;
  margin: 0;
  flex: none;
  font-size: 3.55cqh;
  line-height: 1.44;
  letter-spacing: 0.01em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0));
}

.card .quote .drop {
  font-size: 2.1em;
  line-height: 0.86;
  padding: 0.06em 0.12em 0 0;
}

.card .card-spacer {
  display: none;
}

/* 两条分隔线：56.8% 与 87.9% */
.card .orn-rule-img {
  position: absolute;
  left: 10.3%;
  width: 79.4%;
  height: auto;
}

.card .orn-rule-img.is-mid {
  top: 55.4cqh;
}

.card .orn-rule-img.is-bottom {
  top: 86.6cqh;
}

/* 能力带：56.8%–87.9%，插画列 11.5%–42% */
.card .face-ability {
  position: absolute;
  top: 60.2cqh;
  left: 11.4%;
  right: 7.5%;
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 2.2cqw;
  align-items: start;
}

/* 底图里已经有插画，能力说明占满右栏 */
.card.has-card-bg .face-ability {
  left: 43.7%;
  right: 6.6%;
  top: 62.1cqh;
  grid-template-columns: 1fr;
  gap: 0;
}

.card .face-ability .abil-art {
  margin-top: 0.4cqh;
}

.card .ability-text b {
  font-size: 3.7cqh;
  letter-spacing: 0.02em;
}

.card .ability-text i {
  margin-top: 0.9cqh;
  font-size: 2.9cqh;
  line-height: 1.52;
}

/* 页脚：90.9%–94.1%，从左 6.8% 起 */
.card .back-hint {
  position: absolute;
  top: 89.8cqh;
  left: 6.8%;
  right: 8%;
  font-size: 2.85cqh;
  padding: 0;
}

/* ============================================================
   原卡底图模式
   卡面 = 原卡扫描件（英文正文已抹平）+ 中文覆盖层。
   底图里已经有 ACT / CHAPTER / 书名 / 分隔线 / 插画，所以把这些
   HTML 花饰关掉，只留三段中文：引文、能力说明、页脚。
   ============================================================ */

.card.has-card-bg .card-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.card.has-card-bg .act-line,
.card.has-card-bg .chapter-head,
.card.has-card-bg .orn-rule-img,
.card.has-card-bg .abil-art {
  display: none;
}

/* 能力说明落在原卡英文块的位置：标题 62.6%，说明 67.9% */
.card.has-card-bg .face-ability {
  position: absolute;
  top: 61.4cqh;
  left: 43.7%;
  right: 6.6%;
  display: block;
}

.card.has-card-bg .ability-text b {
  font-size: 3.75cqh;
}

.card.has-card-bg .ability-text i {
  display: block;
  margin-top: 1cqh;
  font-size: 2.95cqh;
  line-height: 1.5;
}

.card.has-card-bg .back-hint {
  top: 90cqh;
}

/* 引文往下让一点：原卡的正文从 32.1% 起，但中文首字下沉比英文沉得更低 */
.card.has-card-bg .quote {
  top: 33.4cqh;
  max-height: 19.4cqh;
}

.card.has-card-bg .quote .drop {
  font-size: 1.95em;
}

/* 开局摆牌用的紧凑卡：只剩能力名和背面提示，说明文字在这个尺寸下读不出来 */
.card.is-compact.has-card-bg .face-ability {
  top: 57cqh;
}

.card.is-compact.has-card-bg .ability-text b {
  font-size: 4.4cqh;
  line-height: 1.2;
}

.card.is-compact.has-card-bg .ability-text i {
  display: none;
}

.card.is-compact.has-card-bg .back-hint {
  font-size: 3.4cqh;
}

/* ============================================================
   阶段二：台面皮肤
   每个模组一套：底色 + 纹理 + 强调色 + 分隔线花样。
   纹理是 512×512 可无缝平铺的 PNG，只铺在 body 上；
   面板本身不透明，所以纹理只从台面与栏间隙透出来。
   ============================================================ */

:root {
  --table-tint: #14110f;
  --accent: #b08d4f;
  --accent-dim: rgba(176, 141, 79, 0.32);
  --rule-tex: none;
}

body[data-theme="navy"] {
  --table-tint: #0b1319;
  --accent: #5b93b8;
  --accent-dim: rgba(91, 147, 184, 0.34);
  --rule-tex: url("assets/orn/rule-wave.png");
  background-color: var(--table-tint);
  background-image:
    radial-gradient(1200px 720px at 50% -14%, rgba(74, 116, 148, 0.2), rgba(0, 0, 0, 0) 66%),
    radial-gradient(900px 600px at 88% 108%, rgba(24, 52, 72, 0.5), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.18));
  background-repeat: no-repeat;
}

body[data-theme="wine"] {
  --table-tint: #150a0d;
  --accent: #b2566a;
  --accent-dim: rgba(178, 86, 106, 0.34);
  --rule-tex: url("assets/orn/rule-stitch.png");
  background-color: var(--table-tint);
  background-image:
    radial-gradient(1200px 720px at 50% -14%, rgba(126, 44, 56, 0.22), rgba(0, 0, 0, 0) 66%),
    radial-gradient(900px 600px at 88% 108%, rgba(70, 20, 28, 0.52), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.2));
  background-repeat: no-repeat;
}

/* 顶栏与底栏：用模组的强调色描一条细边 */
body[data-theme] .topbar {
  border-bottom-color: var(--accent-dim);
}

body[data-theme] .dock {
  border-top-color: var(--accent-dim);
  background-color: color-mix(in srgb, var(--table-tint) 72%, #0b0806);
}

body[data-theme] .topbar {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

/* 战报标题下面压一条模组花样的分隔线 */
body[data-theme] .log h4::after {
  content: "";
  display: block;
  flex: 1;
  height: 9px;
  margin: 0 0 0 4px;
  background-image: var(--rule-tex);
  background-repeat: repeat-x;
  background-size: auto 9px;
  opacity: 0.55;
}

/* 反派铭牌：边框跟着模组走 */
body[data-theme] .antagonist {
  border-color: var(--accent-dim);
}

/* 选书页：悬停某本书时整页透出该模组的台面 */
body[data-preview="navy"] {
  background-color: #0b1319;
  background-image:
    radial-gradient(1200px 720px at 50% -14%, rgba(74, 116, 148, 0.26), rgba(0, 0, 0, 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  background-repeat: no-repeat;
}

body[data-preview="wine"] {
  background-color: #150a0d;
  background-image:
    radial-gradient(1200px 720px at 50% -14%, rgba(126, 44, 56, 0.3), rgba(0, 0, 0, 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.22));
  background-repeat: no-repeat;
}

body {
  transition: background-color 320ms ease;
}

/* ============================================================
   统一：把界面元素收进同一套材质语言
   纸（卡、面板、ACT 卡）/ 布（台面）/ 墨（字）/ 黄铜（可点）/ 封蜡（主操作）
   规则：凡是「能读的东西」都是纸；凡是「能点的地方」都带黄铜；
        主操作与危险用封蜡红；其余一律不加装饰。
   ============================================================ */

/* ACT 卡：与章节卡同一张纸、同一道细框 */
.act-card {
  background-color: #efe3c9;
  background-image: url("assets/paper.png");
  background-size: 320px auto;
  background-repeat: repeat;
  border: 0;
  border-radius: 3px;
  padding: 10px 14px 11px;
  box-shadow:
    0 0 0 1px rgba(122, 86, 46, 0.26),
    inset 0 0 0 4px rgba(122, 86, 46, 0.07),
    0 6px 16px rgba(0, 0, 0, 0.34);
}

.act-card .act-num {
  font-size: 8.5px;
  letter-spacing: 0.32em;
  color: rgba(122, 32, 34, 0.7);
}

.act-card .act-word {
  font-size: clamp(19px, 1.72vw, 25px);
  letter-spacing: 0.05em;
  color: #8c2233;
}

/* 小节标题：衬线 + 宽字距，两侧各一道短线 */
.log h4,
.ant-block h4,
.pile-panel h2 {
  font-family: var(--serif-cjk);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: none;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 9px;
}

.log h4::before,
.ant-block h4::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.log h4::after {
  content: "";
  flex: 1;
  height: 9px;
  margin: 0 0 0 4px;
  background-image: var(--rule-tex);
  background-repeat: repeat-x;
  background-size: auto 9px;
  opacity: 0.55;
}

/* 按钮：两种，别再多 */
.btn {
  border-radius: 2px;
  border-color: rgba(236, 229, 216, 0.16);
  background: rgba(255, 255, 255, 0.028);
  letter-spacing: 0.04em;
}

.btn.primary {
  background: #8c2233;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f7eddd;
  font-weight: 500;
}

.btn.primary:hover {
  background: #a12a3e;
}

/* 底栏计数：数字用衬线等宽，标签走宽字距 */
.counter {
  letter-spacing: 0.1em;
  color: var(--muted);
}

.counter b {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* ============================================================
   纸面（sheet）：规则页、弃牌堆、结算 —— 「能读的都是纸」
   ============================================================ */

.sheet {
  position: relative;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 16%),
    linear-gradient(0deg, rgba(120, 92, 60, 0.1), rgba(120, 92, 60, 0) 26%),
    url("assets/paper.png");
  background-size: auto, auto, 320px;
  border: 1px solid rgba(58, 40, 26, 0.3);
  border-radius: 2px;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.sheet-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(140, 34, 51, 0.32);
}

.sheet-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(140, 34, 51, 0.78);
}

.sheet-head h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.sheet-foot {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(58, 40, 26, 0.16);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(42, 31, 22, 0.46);
  text-align: center;
}

/* 规则页：双栏书页 */
.rules-panel.sheet {
  width: min(960px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 26px 32px 18px;
}

.rules-panel.sheet h3 {
  break-after: avoid;
  margin: 16px 0 6px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--wine);
}

.rules-panel.sheet h3:first-child {
  margin-top: 0;
}

.rules-panel.sheet p,
.rules-panel.sheet li {
  font-size: 12.6px;
  line-height: 1.78;
  color: rgba(34, 25, 18, 0.92);
}

.rules-panel.sheet .sheet-body {
  column-count: 2;
  column-gap: 36px;
  column-rule: 1px solid rgba(58, 40, 26, 0.12);
}

.rules-panel.sheet ul,
.rules-panel.sheet ol {
  margin: 4px 0 8px;
  padding-left: 17px;
}

.rules-panel.sheet .note {
  color: rgba(42, 31, 22, 0.6);
}

.rules-panel.sheet .close,
.pile-panel.sheet .close {
  color: rgba(42, 31, 22, 0.55);
}

.rules-panel.sheet .close:hover,
.pile-panel.sheet .close:hover {
  color: var(--wine);
}

/* 弃牌堆：同一张纸 */
.pile-panel.sheet {
  width: min(880px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px 16px;
}

.pile-panel.sheet .pile-note {
  color: rgba(42, 31, 22, 0.66);
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.pile-panel.sheet .pile-count {
  color: var(--wine);
}

.pile-panel.sheet .pile-empty {
  color: rgba(42, 31, 22, 0.5);
}

.pile-panel.sheet .pile-grid {
  justify-content: center;
}

/* 顶栏的「归位」用封蜡点，不再用数字 */
.meter .seals {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.meter .seal {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(236, 229, 216, 0.16);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

.meter .seal.on {
  border-color: rgba(196, 74, 92, 0.9);
  background: radial-gradient(circle at 34% 30%, #b4344a, #7d1a2a 68%, #5a121e);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(255, 200, 190, 0.4);
}

/* 规则页里的色条说明 */
.legend {
  list-style: none;
  padding-left: 0;
}

.legend li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.legend .chip {
  flex: none;
  width: 3px;
  height: 13px;
  border-radius: 1px;
  transform: translateY(1px);
}

.legend .chip.tgt-any {
  background: #b08d4f;
}

.legend .chip.tgt-other {
  background: #a8422f;
}

.legend .chip.tgt-cards {
  background: #4f6b73;
}

/* ============================================================
   结算：合上这本书
   ============================================================ */

.over-cinema {
  /* 中间要留一点台面的纵深，但不能让顶栏的字透上来（0.78 时看得一清二楚） */
  background:
    radial-gradient(130% 95% at 50% 26%, rgba(26, 20, 15, 0.94), rgba(5, 4, 3, 0.99));
}

.over-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(780px, 94vw);
  perspective: 1400px;
}

.book-shut {
  position: relative;
  width: clamp(180px, 20vw, 240px);
  aspect-ratio: 2.5 / 3.5;
  flex: none;
  transform: rotate(-1.6deg);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}

.book-page {
  position: absolute;
  inset: 0;
  background-image: url("assets/paper.png");
  background-size: 300px;
  box-shadow: inset 0 0 26px rgba(90, 66, 42, 0.28);
}

.book-cover-shut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: left center;
  backface-visibility: hidden;
  animation: book-shut 820ms cubic-bezier(0.2, 0.86, 0.24, 1) both;
}

@keyframes book-shut {
  from {
    transform: rotateY(-74deg);
    filter: brightness(0.55);
  }
  to {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
}

.verdict {
  position: relative;
  z-index: 2;
  margin-left: -30px;
  width: min(430px, 62vw);
  padding: 24px 28px 14px;
  transform: rotate(0.5deg);
  animation: verdict-rise 560ms 380ms cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

@keyframes verdict-rise {
  from {
    opacity: 0;
    transform: translateY(16px) rotate(0.5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0.5deg);
  }
}

.verdict h2 {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 0.16em;
  color: var(--wine);
  margin: 2px 0 10px;
}

.verdict-score {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(42, 31, 22, 0.6);
  margin: 0 0 12px;
}

.verdict-score b {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-right: 2px;
}

.verdict-text {
  font-size: 12.8px;
  line-height: 1.85;
  color: rgba(34, 25, 18, 0.9);
  margin: 0 0 16px;
}

.verdict-actions {
  display: flex;
  gap: 10px;
}

/* 纸面上的按钮：深色底上的黄铜细边在这里看不见，改成墨线 */
.verdict .btn,
.rules-panel.sheet .btn,
.pile-panel.sheet .btn {
  padding: 8px 16px;
  border: 1px solid rgba(90, 60, 40, 0.42);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--ink);
  cursor: pointer;
}

.verdict .btn:hover,
.rules-panel.sheet .btn:hover,
.pile-panel.sheet .btn:hover {
  border-color: var(--wine);
  color: var(--wine);
}

.verdict .btn.primary {
  border-color: #8c2233;
  background: #8c2233;
  color: #f7ece0;
}

.verdict .btn.primary:hover {
  background: #a02740;
  border-color: #a02740;
  color: #fff6ec;
}

.verdict .sheet-foot {
  margin-top: 12px;
}

/* 封蜡印：最后盖下来 */
.verdict-seal {
  position: absolute;
  top: -18px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 21px;
  color: rgba(255, 232, 224, 0.94);
  background:
    radial-gradient(circle at 34% 30%, #b4344a, #7d1a2a 62%, #5a121e);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(255, 200, 190, 0.35),
    inset 0 -6px 12px rgba(0, 0, 0, 0.35);
  transform: rotate(-8deg);
  animation: seal-drop 460ms 900ms cubic-bezier(0.3, 1.5, 0.4, 1) both;
}

@keyframes seal-drop {
  from {
    opacity: 0;
    transform: scale(1.7) rotate(-16deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

.outcome-lost .verdict-seal {
  filter: grayscale(0.55) brightness(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .book-cover-shut,
  .verdict,
  .verdict-seal {
    animation: none;
  }
}

/* ============================================================
   落地页：书桌 + 摊开的纸 + 立着的书（制版语言）
   ============================================================ */

.start-overlay {
  padding: 0;
  background: none;
}

.start-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  /* 桌面：顶光 + 桌前压暗，模拟一盏灯从左上前方打下来 */
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(255, 238, 208, 0.09), transparent 62%),
    radial-gradient(80% 60% at 50% 118%, rgba(0, 0, 0, 0.5), transparent 64%),
    linear-gradient(180deg, #16120f, #0a0807 58%, #100c0a);
}

.scene-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(52% 40% at 50% 4%, rgba(255, 240, 208, 0.1), transparent 72%);
}

.start-sheet {
  position: relative;
  width: min(840px, 94vw);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 28px 52px 20px;
  color: #2a1f16;
  background: url("assets/paper.png") repeat, #f2e8d5;
  transform: rotate(-0.3deg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 46px 90px rgba(0, 0, 0, 0.35);
}

/* 纸上一圈细墨线：像印刷版心的边 */
.start-sheet::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(120, 84, 52, 0.26);
  pointer-events: none;
}

.start-head {
  text-align: center;
}

.start-kicker {
  display: inline-block;
  font: 500 9.5px/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.55);
}

.start-title {
  margin: 10px 0 4px;
  font: 400 clamp(34px, 3.6vw, 46px) / 1 var(--serif);
  letter-spacing: 0.02em;
  color: #1d1512;
}

.rule-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 0 10px;
}

.rule-orn i {
  flex: 0 1 130px;
  height: 1px;
  background: rgba(42, 31, 22, 0.3);
}

.rule-orn img {
  height: 26px;
  width: auto;
  opacity: 0.92;
}

.start-lead {
  max-width: 58ch;
  margin: 0 auto;
  font: 400 13px/1.9 var(--serif);
  color: rgba(42, 31, 22, 0.72);
}

/* 两本书：书脊 + 封面 + 书口 */

.start-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(44px, 8vw, 96px);
  margin: 24px 0 20px;
  padding-bottom: 10px;
}

/* 书下面那道极细的「桌面/书架」线：让两本书有立足处 */
.start-shelf::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 31, 22, 0.26) 18%, rgba(42, 31, 22, 0.26) 82%, transparent);
}

.start-book {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: inherit;
}

.book-shape {
  position: relative;
  display: flex;
  width: clamp(158px, 17vw, 196px);
  height: clamp(216px, 23.2vw, 268px);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1), filter 220ms ease;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

/* 书压在纸上的接触阴影：贴得越近，影子越实越小 */
.book-shape::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  bottom: -9px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(28, 18, 10, 0.5), transparent 72%);
}

.book-spine {
  width: 11px;
  background: linear-gradient(90deg, #0a0806, #241a14 62%, #13100c);
  box-shadow:
    inset -1px 0 0 rgba(176, 141, 79, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

.book-board {
  flex: 1;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.book-board img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-pages {
  width: 6px;
  background: repeating-linear-gradient(90deg, #efe4cd 0 1px, #cbb894 1px 2px);
}

.start-book:hover .book-shape,
.start-book:focus-visible .book-shape {
  transform: translateY(-6px);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55));
}

/* 书下面的铜牌：书名 + 起始骰 */
.book-plate {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 128px;
  padding-top: 7px;
  border-top: 1px solid rgba(42, 31, 22, 0.32);
}

.book-plate b {
  font: 400 15px/1.2 var(--serif);
  letter-spacing: 0.1em;
}

.book-plate i {
  font: 400 9.5px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.55);
}

/* 借阅卡 + 房规 */

.start-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
  max-width: 640px;
  margin: 0 auto 14px;
}

.borrow-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 9px 12px 8px;
  border: 1px dashed rgba(42, 31, 22, 0.38);
  background: rgba(255, 255, 255, 0.26);
}

.borrow-kicker {
  font: 500 9px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.58);
}

.borrow-card input {
  width: 100%;
  border: 0;
  border-bottom: 1px dashed rgba(42, 31, 22, 0.38);
  background: none;
  padding: 2px 42px 4px 0;
  font: 400 13px/1.4 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.14em;
  color: #1d1512;
  outline: none;
}

.borrow-card input::placeholder {
  color: rgba(42, 31, 22, 0.34);
  letter-spacing: 0.02em;
}

.borrow-stamp {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 34, 51, 0.5);
  border-radius: 50%;
  color: rgba(140, 34, 51, 0.62);
  font: 500 8.5px/1 var(--sans);
  letter-spacing: 0.12em;
  transform: rotate(-9deg);
}

.start-sheet .houserule {
  margin: 0;
  padding: 7px 2px;
  align-items: flex-start;
  text-align: left;
}

.start-sheet .houserule b {
  font-size: 12px;
}

.start-sheet .houserule i {
  font-size: 10.5px;
  line-height: 1.5;
}

.start-sheet .start-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  font: 400 10.5px/1.7 var(--sans);
  letter-spacing: 0.05em;
  color: rgba(42, 31, 22, 0.58);
}

.start-sheet .start-rules li::before {
  content: "◆";
  margin-right: 7px;
  font-size: 7px;
  color: rgba(179, 38, 30, 0.55);
}

.start-sheet .start-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(42, 31, 22, 0.16);
}

.start-sheet .start-foot-note {
  font: 400 10px/1.5 var(--sans);
  letter-spacing: 0.06em;
  color: rgba(42, 31, 22, 0.5);
}

.start-sheet .resume-bar {
  margin: 14px auto 0;
  background: rgba(255, 255, 255, 0.3);
  border-left-color: #8c2233;
}

/* 凸版按钮：双细框 + 朱红字，按下整块沉 1px */
.btn.letterpress {
  border: 0;
  border-radius: 0;
  padding: 9px 20px;
  background: transparent;
  color: #8c2233;
  font: 400 11.5px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(140, 34, 51, 0.55),
    inset 0 0 0 3px rgba(242, 232, 213, 1),
    inset 0 0 0 4px rgba(140, 34, 51, 0.28);
  transition: transform 110ms ease, color 110ms ease;
}

.btn.letterpress:hover {
  color: #b3261e;
}

.btn.letterpress:active {
  transform: translateY(1px);
}

.btn.letterpress[disabled] {
  opacity: 0.4;
}

@media (max-height: 860px) {
  .start-sheet {
    padding: 24px 40px 16px;
  }

  .start-title {
    font-size: clamp(28px, 3vw, 36px);
  }

  .start-shelf {
    margin: 16px 0 12px;
  }

  .book-shape {
    width: clamp(118px, 12vw, 144px);
    height: clamp(162px, 16.4vw, 198px);
  }

  .start-lead {
    font-size: 12px;
    line-height: 1.8;
  }
}

@media (max-height: 820px) {
  .start-sheet {
    padding: 20px 36px 12px;
  }

  .start-title {
    font-size: 32px;
  }

  .start-lead {
    font-size: 11.5px;
  }

  .start-shelf {
    margin: 14px 0 12px;
  }

  .book-shape {
    width: 124px;
    height: 170px;
  }

  .start-sheet .start-rules {
    display: none;
  }

  .start-sheet .start-foot {
    margin-top: 10px;
    padding-top: 9px;
  }
}

@media (max-height: 720px) {
  .book-shape {
    width: 108px;
    height: 148px;
  }
}

/* ============================================================
   ACT 卡：原卡那张红色花边 cartouche 的语言
   ============================================================ */

.act-card {
  border-radius: 0;
  background:
    url("assets/paper.png") repeat,
    linear-gradient(180deg, #f8f0dd, #efe3c9);
  background-size: 320px auto, auto;
  border: 1px solid rgba(179, 38, 30, 0.5);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px rgba(242, 232, 213, 0.9);
}

.act-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(179, 38, 30, 0.2);
  pointer-events: none;
}

.act-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75)),
    linear-gradient(rgba(179, 38, 30, 0.75), rgba(179, 38, 30, 0.75));
  background-size:
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
}

.act-num {
  letter-spacing: 0.3em;
  font-size: 9px;
  text-transform: uppercase;
  color: rgba(179, 38, 30, 0.85);
}

/* ============================================================
   第 ③ 段：角色卡刻度、书封纸口、桌沿
   ============================================================ */

/* 原卡的角色卡是「5 栏双线刻度」：主分隔线 + 内收 3px 一道淡线，
   数字各自占一条横带，横带底下压一道细线。 */
.band {
  border-right: 1px solid rgba(60, 40, 25, 0.5);
}

.band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  width: 1px;
  background: rgba(60, 40, 25, 0.16);
}

.band {
  position: relative;
}

.band span {
  display: block;
  margin: 6px 5px 0;
  padding-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* 数字下面那条横线要横贯整张卡，而不是一栏一断 */
.char-bands::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 31px;
  height: 1px;
  background: rgba(60, 40, 25, 0.24);
}

/* 书口：前沿露出一叠纸边的侧视厚度 + 一道板的厚度线。
   这是「物件的边」，不是「图片的边」——有没有这条，观感差别极大。 */
.book-cover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background:
    linear-gradient(90deg, rgba(28, 18, 10, 0.45), rgba(28, 18, 10, 0) 55%),
    repeating-linear-gradient(
      90deg,
      #f2e8d2 0 1px,
      #c9b794 1px 2px,
      #f6efdc 2px 3px
    );
  box-shadow: inset -2px 0 0 rgba(40, 26, 14, 0.55);
}

.book-cover {
  box-shadow: 10px 0 24px rgba(0, 0, 0, 0.55), inset 6px 0 10px rgba(0, 0, 0, 0.28);
}

/* 桌沿：底栏上沿压一道阴影，手牌是真的缩到桌子下面去了 */
.dock {
  border-top: 1px solid rgba(236, 229, 216, 0.09);
}

.dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.42));
}

/* 阴影只留三级：贴桌（1）、离桌 2mm（2）、漂浮（3）。
   全站只允许这三个值，不允许就地写新的 offset。 */
:root {
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-2: 0 4px 10px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.22);
  --sh-3: 0 14px 28px rgba(0, 0, 0, 0.46), 0 3px 6px rgba(0, 0, 0, 0.28);
}

.act-card {
  box-shadow: var(--sh-2), inset 0 0 0 3px rgba(242, 232, 213, 0.9);
}

.ability-plaque {
  box-shadow: var(--sh-1);
}

.sheet,
.start-sheet {
  box-shadow: var(--sh-3);
}

/* ============================================================
   第 ④ 段：把还没换语言的地方收掉
   ============================================================ */

/* 预览浮层：从「深色板托着牌」改成「一张纸签」——能读的都是纸 */
#preview {
  border-radius: 0;
  padding: 12px 14px 10px;
  background:
    url("assets/paper.png") repeat,
    linear-gradient(180deg, #f8f0de, #ece0c7);
  background-size: 300px auto, auto;
  border: 1px solid rgba(120, 86, 46, 0.42);
  box-shadow:
    var(--sh-3),
    inset 0 0 0 3px rgba(255, 253, 246, 0.42);
}

#preview .preview-note {
  color: rgba(42, 31, 22, 0.72);
  font-family: var(--serif);
  letter-spacing: 0.04em;
}

#preview .preview-item figcaption {
  color: rgba(42, 31, 22, 0.5);
}

#preview .preview-item.is-back .card {
  box-shadow: var(--sh-2), 0 0 0 1px rgba(176, 141, 79, 0.85);
}

/* 底栏三组计数之间补一道竖细线；顶栏两组也一样 */
.deck-info .counter + .counter {
  padding-left: 14px;
  border-left: 1px solid rgba(236, 229, 216, 0.1);
}

.meters .meter + .meter {
  padding-left: 22px;
  border-left: 1px solid rgba(236, 229, 216, 0.1);
}

/* 空槽与「本幕尚无计分」：从无衬线灰字换成斜体衬线 */
.slot-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: rgba(236, 229, 216, 0.22);
}

.act.is-target .slot-empty {
  color: rgba(236, 229, 216, 0.82);
}

/* 纸页的页码：页脚右端一枚「一」字，像书的下书口 */
.sheet-foot {
  position: relative;
  padding-bottom: 2px;
}

.sheet-foot::after {
  content: "· 一 ·";
  position: absolute;
  right: 0;
  top: 8px;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(42, 31, 22, 0.32);
}

/* 骰子：象牙质感——顶光、侧面厚度、底部投影 */
.die {
  border-radius: 5px;
  background:
    radial-gradient(120% 90% at 32% 22%, #fffdf5 0%, #f7eeda 42%, #e6d8bc 100%);
  border: 1px solid rgba(58, 40, 25, 0.34);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -4px 6px rgba(96, 70, 42, 0.3),
    0 3px 0 rgba(120, 92, 58, 0.55),
    0 6px 12px rgba(0, 0, 0, 0.38);
}

.die .pips circle {
  fill: rgba(38, 26, 16, 0.86);
}

/* 桌面上的牌在被指到时要「抬 1px」：ACT 卡与能力铭牌此前只换描边色 */
.act-card,
.ability-plaque {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.act-card:hover,
.ability-plaque:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-3);
}

/* 开局摆牌：6 张牌摊在桌面上，下面是计数与按钮的一条「桌沿说明」 */
.dock-main.setup-mode {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  align-items: stretch;
}

.setup-table {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 1.2vw, 16px);
}

.setup-card {
  position: relative;
  width: clamp(108px, 9.4vw, 148px);
  flex: 0 0 auto;
  transform: translateY(0);
  transition: transform 180ms ease, filter 180ms ease;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
}

.setup-card:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.55));
}

.setup-card .card {
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 3.5;
}

.setup-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid rgba(236, 229, 216, 0.08);
}

.setup-bar .hint {
  min-width: 0;
}

.setup-bar .dock-buttons {
  display: flex;
  gap: 8px;
}

/* ============================================================
   落地页 · 扉页版式（第二轮美术）
   一张摊开的扉页：左边书名与藏书票，右边引子；下排左边两本书，
   右边借阅卡与房规；页脚一行版本信息。全部用 grid 分区，不改 DOM。
   ============================================================ */

.start-sheet {
  width: min(940px, 95vw);
  padding: 30px 48px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-areas:
    "ribbon ribbon"
    "head head"
    "shelf form"
    "shelf rules"
    "foot foot";
  column-gap: 46px;
  row-gap: 10px;
  align-content: start;
  transform: rotate(-0.22deg);
  /* 四层：斜射来的光（左亮右暗）→ 右缘一叠纸口的侧视 → 纸纹 → 底色。
     不用新的贴图：光是渐变，纸口是 repeating-gradient，只有纸纹是原素材。 */
  background-color: #f4ebd8;
  background-image:
    linear-gradient(100deg, rgba(255, 250, 232, 0.18), rgba(255, 250, 232, 0) 16%),
    repeating-linear-gradient(
      90deg,
      rgba(250, 244, 230, 0.6) 0 1px,
      rgba(190, 172, 140, 0.34) 1px 2px
    ),
    url("assets/paper.png");
  background-size: 100% 100%, 6px 96%, cover;
  background-position: center, right center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* 纸堆感：两张错位的纸边 + 内部一点点暖色沉积，别让扉页像一张白卡纸 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 120px rgba(120, 90, 55, 0.1),
    7px 9px 0 -1px #e7dbc0,
    13px 17px 0 -2px #d9c9a8,
    0 28px 56px rgba(0, 0, 0, 0.55);
}

/* 继续上一局：做成夹在书里的书签，从扉页上沿垂下来。
   选择器要带 .start-sheet，否则会被上面那条 .start-sheet .resume-bar 压住 */
.start-sheet .resume-bar {
  grid-area: ribbon;
  justify-self: end;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: none;
  /* 不要用负外边距：它会让 .start-sheet（overflow-y:auto）横向溢出，
     底部就冒出一条丑陋的横向滚动条 */
  margin: 0 0 0 auto;
  padding: 8px 24px 10px 18px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #8c2233, #6d1a27);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 93% 84%, 0 100%);
}

.start-sheet .resume-bar .resume-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.start-sheet .resume-bar .resume-meta b {
  font-family: var(--serif-cjk);
  font-size: 13px;
  color: #f6ecd6;
  letter-spacing: 0.04em;
}

.start-sheet .resume-bar .resume-meta i {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(246, 236, 214, 0.72);
}

.start-sheet .resume-bar .btn {
  border: 1px solid rgba(246, 236, 214, 0.5);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #f6ecd6;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  padding: 4px 11px;
}

.start-head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-areas:
    "kick lead"
    "title lead"
    "rule lead";
  column-gap: 46px;
  align-items: start;
  padding: 4px 0 2px;
  text-align: left;
}

.start-kicker {
  grid-area: kick;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.52);
}

.start-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(42, 31, 22, 0.42);
}

.start-title {
  grid-area: title;
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: clamp(38px, 4.3vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.014em;
  color: #1d1512;
  /* 压印：上沿吃光、下沿吃影，字像是压进纸里而不是印在纸上 */
  text-shadow:
    0 1px 0 rgba(255, 253, 246, 0.62),
    0 -1px 0 rgba(60, 40, 25, 0.14);
}

.rule-orn {
  grid-area: rule;
  justify-content: flex-start;
  gap: 12px;
  margin: 13px 0 0;
}

.rule-orn i {
  flex: 0 1 62px;
  height: 1px;
  background: linear-gradient(90deg, rgba(42, 31, 22, 0.34), rgba(42, 31, 22, 0.06));
}

.rule-orn i:last-child {
  background: linear-gradient(90deg, rgba(42, 31, 22, 0.06), rgba(42, 31, 22, 0.34));
}

.rule-orn img {
  height: 22px;
}

.start-lead {
  grid-area: lead;
  align-self: end;
  margin: 0;
  max-width: 40ch;
  font-family: var(--serif-cjk);
  font-size: 12.8px;
  line-height: 1.95;
  text-align: left;
  color: rgba(42, 31, 22, 0.66);
}

/* 书架：两本书立在左页上，身后一束暖光 */
.start-shelf {
  grid-area: shelf;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(22px, 3vw, 44px);
  margin: 16px 0 4px;
  padding: 0 6px 22px;
}

.start-shelf::before {
  content: "Select a Volume";
  position: absolute;
  left: 8px;
  top: -16px;
  font-family: var(--serif);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.4);
  pointer-events: none;
}

/* 每本书身后一小片暖光，像台灯打在书脊上 */
.start-book::before {
  content: "";
  position: absolute;
  inset: -18% -14% -6%;
  background: radial-gradient(56% 58% at 50% 50%, rgba(255, 214, 148, 0.18), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.start-shelf::after {
  left: 2%;
  right: 6%;
  bottom: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(42, 31, 22, 0.22) 14%,
    rgba(42, 31, 22, 0.22) 86%,
    transparent
  );
}

.start-book {
  position: relative;
  z-index: 1;
}

.book-shape {
  width: clamp(140px, 15.2vw, 184px);
  height: clamp(190px, 20.7vw, 250px);
}

.book-plate {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(42, 31, 22, 0.24);
  text-align: left;
}

.book-plate b {
  display: block;
  font-family: var(--serif-cjk);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #241a12;
}

.book-plate i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.46);
}

.start-book:hover .book-plate b {
  color: #8c2233;
}

/* 右页：借阅卡 + 房规 */
.start-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  align-self: start;
  justify-content: flex-start;
  gap: 12px;
  max-width: none;
  margin: 16px 0 4px;
  align-items: stretch;
}

.borrow-card {
  padding: 13px 16px 12px;
  border: 1px dashed rgba(42, 31, 22, 0.42);
  background: rgba(255, 252, 244, 0.42);
}

.borrow-kicker {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(42, 31, 22, 0.5);
}

.borrow-card input {
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-bottom: 1px dotted rgba(42, 31, 22, 0.38);
  background: transparent;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #241a12;
}

.borrow-card input::placeholder {
  color: rgba(42, 31, 22, 0.34);
  letter-spacing: 0.02em;
}

.houserule {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(42, 31, 22, 0.16);
  background: rgba(255, 252, 244, 0.28);
}

.houserule input {
  margin-top: 3px;
  accent-color: #8c2233;
}

.houserule b {
  display: block;
  font-family: var(--serif-cjk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2a1f16;
}

.houserule i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.6;
  color: rgba(42, 31, 22, 0.52);
}

/* 左页脚注：三条规则说明，细字 */
.start-rules {
  grid-area: rules;
  margin: 14px 0 0;
  padding: 14px 0 0;
  list-style: none;
  display: block;
  border-top: 1px solid rgba(42, 31, 22, 0.14);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(42, 31, 22, 0.52);
  text-align: left;
}

.start-rules li {
  position: relative;
  padding-left: 12px;
  line-height: 1.9;
}

.start-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 4px;
  height: 1px;
  background: rgba(140, 34, 51, 0.55);
}

/* 书压在纸上的接触阴影：只留贴地那一小片 */
.book-shape::after {
  left: 10%;
  right: 10%;
  bottom: -6px;
  height: 8px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(28, 18, 10, 0.34), transparent 74%);
}

.start-foot {
  grid-area: foot;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(42, 31, 22, 0.18);
}

.start-foot .btn.letterpress {
  order: 2;
}

.start-foot-note {
  order: 1;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(42, 31, 22, 0.46);
}

/* 藏书票：右上角一枚淡红小印 */
.start-sheet::after {
  content: "EX LIBRIS · OUT OF PRINT";
  position: absolute;
  top: 16px;
  right: 18px;
  padding: 5px 8px 4px;
  border: 1px solid rgba(140, 34, 51, 0.34);
  font-family: var(--serif);
  font-size: 7.5px;
  letter-spacing: 0.24em;
  color: rgba(140, 34, 51, 0.5);
  transform: rotate(-3deg);
  pointer-events: none;
}

/* 有书签时藏书票让位，两枚印叠在一起太挤 */
.start-sheet:has(.resume-bar)::after {
  display: none;
}

@media (max-height: 820px) {
  .start-sheet {
    padding: 22px 38px 14px;
    row-gap: 8px;
  }

  .start-title {
    font-size: clamp(32px, 3.6vw, 44px);
  }

  .book-shape {
    width: clamp(108px, 11.4vw, 132px);
    height: clamp(147px, 15.5vw, 180px);
  }

  .start-lead {
    font-size: 11.5px;
    line-height: 1.8;
  }

  /* 矮屏不砍信息，只压字号：宁可小一号，也别让右栏空一块 */
  .start-sheet .start-rules {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 9.5px;
  }

  .start-sheet .start-rules li {
    line-height: 1.75;
  }
}

@media (max-width: 820px) {
  .start-sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ribbon"
      "head"
      "shelf"
      "form"
      "rules"
      "foot";
  }

  .start-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kick"
      "title"
      "rule"
      "lead";
  }

  .start-lead {
    margin-top: 8px;
  }
}

/* ============================================================
   弱机降级：纸纹、纸边、多层投影全撤，退回「纯色 + 一级阴影」。
   由 app.js 的 applyQualityTier() 打在 body.perf-lite 上，
   判据是 deviceMemory ≤ 4 或 hardwareConcurrency ≤ 4，也可以 ?lite 强制。
   ============================================================ */

body.perf-lite .card-face,
body.perf-lite .sheet,
body.perf-lite .start-sheet,
body.perf-lite #preview,
body.perf-lite .act-card,
body.perf-lite .ability-plaque {
  background-image: none;
  background-color: #f2e8d5;
}

body.perf-lite .card.has-card-bg .card-bg {
  image-rendering: auto;
}

body.perf-lite .book-cover::after,
body.perf-lite .dock::before,
body.perf-lite .start-sheet::before,
body.perf-lite .card-face::before,
body.perf-lite .act-card::after,
body.perf-lite .ability-plaque::after {
  display: none;
}

body.perf-lite .card,
body.perf-lite .sheet,
body.perf-lite .start-sheet,
body.perf-lite #preview,
body.perf-lite .act-card,
body.perf-lite .ability-plaque {
  box-shadow: var(--sh-1);
}

body.perf-lite .start-scene {
  background: #14100e;
}

body.perf-lite .die {
  box-shadow: inset 0 -2px 4px rgba(96, 70, 42, 0.28), 0 2px 4px rgba(0, 0, 0, 0.35);
}

.act-word {
  letter-spacing: 0.09em;
}

/* ============================================================
   落地页 · 贵族书架（第三版美术方向）
   一间暗色图书室：木格书墙、两支烛的暖光、架上两本皮面书，
   右手边一张别在木板上的羊皮纸，写着怎么开始。
   仍然只改样式，不动 DOM。
   ============================================================ */

.start-overlay {
  background: #0a0604;
}

.start-scene {
  padding: 26px;
  background:
    radial-gradient(30% 26% at 16% 22%, rgba(255, 186, 104, 0.2), transparent 72%),
    radial-gradient(30% 26% at 84% 18%, rgba(255, 186, 104, 0.16), transparent 72%),
    radial-gradient(120% 70% at 50% -8%, rgba(255, 214, 158, 0.14), transparent 66%),
    radial-gradient(120% 110% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.72) 100%),
    repeating-linear-gradient(
      90deg,
      #241509 0 5px,
      #2a1a0d 5px 9px,
      #1f1208 9px 14px,
      #2b1b0e 14px 21px
    ),
    #1a0f07;
}

/* 书架竖板：每隔 210px 一道阴影，前面再压一层上下暗角 */
.start-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 14%, transparent 84%, rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(
      90deg,
      transparent 0 206px,
      rgba(0, 0, 0, 0.55) 206px 212px,
      rgba(255, 196, 120, 0.05) 212px 214px
    );
}

.scene-glow {
  background: radial-gradient(46% 34% at 50% 2%, rgba(255, 206, 140, 0.12), transparent 70%);
}

/* 版面本身透明：左页落在木上，右页是一张羊皮纸 */
.start-sheet {
  width: min(1010px, 96vw);
  padding: 26px 30px 18px;
  transform: none;
  background: none;
  box-shadow: none;
  row-gap: 0;
  column-gap: 40px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}

/* 羊皮纸：一张钉在木板右侧的纸 */
.start-sheet::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 54px;
  left: auto;
  right: -6px;
  bottom: -6px;
  width: 48.5%;
  background-color: #efe3c6;
  background-image:
    linear-gradient(180deg, rgba(120, 82, 40, 0.1), transparent 12%),
    radial-gradient(90% 70% at 50% 0%, rgba(255, 246, 220, 0.5), transparent 60%),
    url("assets/paper.png");
  background-size: 100% 100%, 100% 100%, cover;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(92, 62, 32, 0.28),
    inset 0 0 90px rgba(120, 82, 40, 0.14);
}

.start-sheet > * {
  position: relative;
  z-index: 1;
}

/* 藏书票改成纸面上的一枚椭圆藏印（左下角），比空着好看 */
.start-sheet::after {
  content: "EX LIBRIS · OUT OF PRINT";
  top: auto;
  right: auto;
  left: 54%;
  bottom: 46px;
  width: 132px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 1.5px solid rgba(96, 56, 38, 0.5);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(96, 56, 38, 0.62);
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 2;
}

/* 烛光：两团失焦的光斑，慢慢呼吸 */
.scene-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 34% at 50% 2%, rgba(255, 206, 140, 0.12), transparent 70%);
}

.scene-glow::before,
.scene-glow::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 45%, rgba(255, 244, 214, 0.95), rgba(255, 176, 92, 0.6) 42%, rgba(255, 130, 50, 0.18) 70%, transparent 100%);
  filter: blur(3px);
  box-shadow:
    0 0 30px 12px rgba(255, 158, 66, 0.22),
    0 0 90px 34px rgba(255, 130, 50, 0.1);
  animation: oop-flicker 5.2s ease-in-out infinite;
}

.scene-glow::before {
  left: 14.5%;
  top: 19%;
}

.scene-glow::after {
  left: 84%;
  top: 15%;
  width: 20px;
  height: 20px;
  animation-delay: -2.6s;
}

@keyframes oop-flicker {
  0%,
  100% {
    opacity: 0.86;
    transform: scale(1);
  }

  42% {
    opacity: 1;
    transform: scale(1.08);
  }

  68% {
    opacity: 0.8;
    transform: scale(0.96);
  }
}

.start-sheet:has(.resume-bar)::after {
  display: none;
}

.start-head {
  padding: 6px 0 0;
}

.start-kicker {
  color: rgba(233, 200, 119, 0.66);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.start-kicker::before {
  width: 26px;
  background: linear-gradient(90deg, transparent, rgba(233, 200, 119, 0.6));
}

.start-kicker::after {
  content: "❖";
  margin-left: 2px;
  font-size: 7px;
  color: rgba(233, 200, 119, 0.75);
  letter-spacing: 0;
}

.start-title {
  color: #f2d795;
  font-size: clamp(40px, 4.5vw, 60px);
  letter-spacing: 0.004em;
  text-shadow:
    0 1px 0 #2a1708,
    0 2px 1px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(255, 190, 110, 0.16);
}

.rule-orn {
  margin-top: 14px;
}

.rule-orn i {
  background: linear-gradient(90deg, rgba(233, 200, 119, 0.5), rgba(233, 200, 119, 0.02));
}

.rule-orn i:last-child {
  background: linear-gradient(90deg, rgba(233, 200, 119, 0.02), rgba(233, 200, 119, 0.5));
}

/* 花饰原本是黑墨，烫金一下 */
.rule-orn img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(680%)
    hue-rotate(348deg) brightness(96%) contrast(92%);
  opacity: 0.9;
}

.start-lead {
  margin: 12px 22px 0;
  padding-top: 6px;
  color: rgba(48, 34, 20, 0.78);
  font-size: 12.6px;
  line-height: 1.95;
}

.start-form {
  margin: 18px 22px 0;
}

.borrow-card {
  border: 1px dashed rgba(92, 62, 32, 0.42);
  background: rgba(255, 251, 238, 0.42);
}

.houserule {
  border: 1px solid rgba(92, 62, 32, 0.22);
  background: rgba(255, 251, 238, 0.3);
}

.start-rules {
  margin: 16px 22px 0;
  color: rgba(48, 34, 20, 0.6);
  border-top: 1px solid rgba(92, 62, 32, 0.2);
}

/* 书架：两本皮面书立在木搁板上 */
.start-shelf {
  --book-h: clamp(214px, 23.6vw, 286px);
  margin: 10px 0 0;
  padding: 0 4px 70px;
  gap: clamp(26px, 3vw, 52px);
}

.book-shape {
  height: var(--book-h);
  width: clamp(156px, 17.2vw, 208px);
}

.start-shelf::before {
  content: "Select a Volume";
  top: 0;
  left: 6px;
  color: rgba(233, 200, 119, 0.6);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* 木质搁板：顶面在书脚处，正面是钉铜牌的那一面 */
.start-shelf::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: calc(var(--book-h) + 4px);
  bottom: auto;
  height: 66px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 22%),
    linear-gradient(180deg, #8a5c2e 0%, #6b4522 12%, #4a2d15 48%, #33200f 82%, #241408 100%);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 208, 140, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}

.start-book {
  transform-origin: bottom center;
}

.start-book:nth-of-type(1) {
  transform: perspective(1200px) rotateY(3deg);
}

.start-book:nth-of-type(2) {
  transform: perspective(1200px) rotateY(-3deg);
}

/* 书脚落在搁板上的接触阴影 */
.start-book::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 96px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%);
  pointer-events: none;
}

/* 书口：压在暗处，不然一圈白边太跳 */
.book-pages {
  filter: brightness(0.72) saturate(0.9);
  opacity: 0.9;
}

.book-plate {
  margin-top: 16px;
  padding: 4px 8px 5px;
  border: 1px solid rgba(233, 200, 119, 0.26);
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(72, 44, 20, 0.6), rgba(28, 16, 8, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 216, 150, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

.book-plate b {
  color: #f0dcaa;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}

.book-plate i {
  color: rgba(233, 200, 119, 0.5);
  font-size: 9px;
}

.start-book:hover .book-plate b {
  color: #ffd98e;
}

/* 页脚整条落在羊皮纸右下角（带 .start-sheet 前缀才压得住上面那条 0,2,0 的规则） */
.start-sheet .start-foot {
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin: 26px 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(92, 62, 32, 0.22);
}

.start-sheet .start-foot-note {
  color: rgba(48, 34, 20, 0.62);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.start-foot .btn.letterpress {
  border: 1px solid rgba(120, 82, 40, 0.55);
  background: linear-gradient(180deg, #f5e9cd, #e2d1ac);
  color: #4a2d15;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.start-foot .btn.letterpress:hover {
  background: linear-gradient(180deg, #fdf4de, #ecdcba);
  color: #2f1c0c;
}

/* 书签：深色皮革 + 烫金边 */
.start-sheet .resume-bar {
  background: linear-gradient(180deg, #5d1a24, #3d1119);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(233, 200, 119, 0.28);
}

@media (max-height: 820px) {
  .start-sheet {
    padding: 20px 26px 12px;
  }

  .start-sheet::before {
    top: 46px;
    bottom: 20px;
  }

  .start-title {
    font-size: clamp(32px, 3.7vw, 46px);
  }

  .book-shape {
    width: clamp(104px, 11vw, 128px);
    height: clamp(141px, 15vw, 174px);
  }

  .start-shelf {
    --book-h: clamp(141px, 15vw, 174px);
  }

  .start-lead {
    font-size: 11.6px;
    margin-top: 8px;
  }

  .start-rules {
    margin-top: 12px;
    font-size: 9.6px;
  }
}

@media (max-width: 860px) {
  .start-sheet::before {
    top: 210px;
    right: 0;
    width: 100%;
    bottom: 12px;
  }
}

/* 弱机：木纹与羊皮纸纹理都撤掉 */
body.perf-lite .start-scene {
  background: radial-gradient(120% 80% at 50% 0%, #2a1a0d, #120a05);
}

body.perf-lite .start-sheet::before {
  background-image: none;
  background-color: #efe3c6;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

body.perf-lite .start-sheet::after,
body.perf-lite .start-scene::before {
  display: none;
}

/* ============================================================
   落地页 · 版画式标题页（第四版：全平面，只靠排版与装饰）
   没有木头、没有书架、没有羊皮纸贴图、没有拟物阴影。
   气氛来自：版框、烫金细线、小型大写字母、罗马数字、
   花饰分隔、以及一枚很小的印刷者记号。
   ============================================================ */

.start-overlay {
  background: #0b0907;
}

.start-overlay .start-scene {
  padding: 30px 24px;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(201, 168, 106, 0.13), transparent 62%),
    radial-gradient(130% 110% at 50% 52%, transparent 34%, rgba(0, 0, 0, 0.62) 100%),
    #0b0907;
}

/* 去掉上一版的木墙与烛光 */
.start-overlay .start-scene::before,
.start-overlay .scene-glow {
  display: none;
}

.start-overlay .start-sheet {
  width: min(1160px, 94vw);
  max-height: calc(100vh - 28px);
  padding: 34px 58px 24px;
  transform: none;
  background: none;
  box-shadow: none;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "ribbon"
    "head"
    "shelf"
    "rules"
    "form"
    "foot";
  row-gap: 0;
  column-gap: 0;
}

/* 版框：一粗一细两道金线，就是印刷版面的边 */
.start-overlay .start-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  z-index: 0;
  border: 1px solid rgba(201, 168, 106, 0.34);
  outline: 1px solid rgba(201, 168, 106, 0.16);
  outline-offset: -9px;
  background: none;
  box-shadow: none;
}

/* 四角的小角标：印刷版的裁切标记，纯线条，不带任何质感 */
.start-overlay .start-sheet::before {
  background-image:
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55)),
    linear-gradient(rgba(201, 168, 106, 0.55), rgba(201, 168, 106, 0.55));
  background-size:
    22px 1px, 1px 22px,
    22px 1px, 1px 22px,
    22px 1px, 1px 22px,
    22px 1px, 1px 22px;
  background-position:
    9px 9px, 9px 9px,
    calc(100% - 9px) 9px, calc(100% - 9px) 9px,
    9px calc(100% - 9px), 9px calc(100% - 9px),
    calc(100% - 9px) calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
  background-repeat: no-repeat;
}

/* 版框顶部原来压了一枚花饰，被滚动容器裁掉一半，干脆不要 */
.start-overlay .start-sheet::after {
  display: none;
}

.start-overlay .start-head {
  grid-area: head;
  display: block;
  padding: 0;
  text-align: center;
}

.start-overlay .start-head > * {
  grid-area: auto;
}

.start-overlay .start-kicker {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(201, 168, 106, 0.82);
  text-shadow: none;
}

.start-overlay .start-kicker::before,
.start-overlay .start-kicker::after {
  display: none;
}

.start-overlay .start-title {
  margin: 16px 0 0;
  font-size: clamp(60px, 6.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: #f3e8d0;
  text-shadow: none;
}

.start-overlay .rule-orn {
  justify-content: center;
  gap: 16px;
  margin: 20px auto 0;
}

.start-overlay .rule-orn i {
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.6));
}

.start-overlay .rule-orn i:last-child {
  background: linear-gradient(90deg, rgba(201, 168, 106, 0.6), transparent);
}

.start-overlay .rule-orn img {
  height: 16px;
  filter: sepia(1) saturate(3.2) hue-rotate(-6deg) brightness(1.25);
  opacity: 0.62;
}

.start-overlay .start-lead {
  max-width: 56ch;
  margin: 22px auto 0;
  padding: 0;
  text-align: center;
  font-size: 14px;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: rgba(243, 232, 208, 0.58);
}

/* 两块书封：只当版面上的两幅插图，方框一描，别的都不要 */
.start-overlay .start-shelf {
  grid-area: shelf;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(56px, 8vw, 128px);
  margin: 14px 0 0;
  padding: 0;
}

.start-overlay .start-shelf::before,
.start-overlay .start-shelf::after {
  display: none;
}

.start-overlay .start-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  transform: none;
}

.start-overlay .start-book::before,
.start-overlay .start-book::after {
  display: none;
}

.start-overlay .start-book:nth-of-type(1)::before {
  content: "I";
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 2px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(201, 168, 106, 0.75);
}

.start-overlay .start-book:nth-of-type(2)::before {
  content: "II";
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 2px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(201, 168, 106, 0.75);
}

.start-overlay .book-shape {
  width: clamp(176px, 17.4vw, 232px);
  height: auto;
  aspect-ratio: 2.5 / 3.5;
  display: block;
  filter: none;
}

.start-overlay .book-shape::after {
  display: none;
}

.start-overlay .book-spine,
.start-overlay .book-pages {
  display: none;
}

.start-overlay .book-board {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(243, 232, 208, 0.34);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.start-overlay .book-board img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.start-overlay .start-book:hover .book-board,
.start-overlay .start-book:focus-visible .book-board {
  box-shadow:
    0 0 0 1px rgba(201, 168, 106, 0.85),
    0 0 0 5px rgba(201, 168, 106, 0.14);
  transform: translateY(-3px);
}

.start-overlay .book-plate {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.start-overlay .book-plate b {
  display: block;
  font-family: var(--serif-cjk);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: #f3e8d0;
  text-shadow: none;
}

.start-overlay .book-plate i {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201, 168, 106, 0.7);
}

/* 表单：压到版面下部，两个条目并排，不再占视觉中心 */
.start-overlay .start-form {
  grid-area: form;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  width: min(820px, 100%);
  margin: 34px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(201, 168, 106, 0.2);
}

.start-overlay .borrow-card {
  display: block;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(201, 168, 106, 0.34);
  background: none;
}

.start-overlay .borrow-kicker {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(201, 168, 106, 0.66);
}

.start-overlay .borrow-card input {
  width: 100%;
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.22em;
  color: #f3e8d0;
  outline: none;
}

.start-overlay .borrow-card input::placeholder {
  color: rgba(243, 232, 208, 0.3);
  letter-spacing: 0.1em;
}

.start-overlay .borrow-stamp {
  display: none;
}

.start-overlay .houserule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(243, 232, 208, 0.7);
}

.start-overlay .houserule input {
  margin-top: 4px;
  accent-color: #8c2233;
}

.start-overlay .houserule b {
  color: rgba(243, 232, 208, 0.86);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.start-overlay .houserule i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(243, 232, 208, 0.4);
}

/* 三行小字：排成一行，居中，把版面下半部撑满 */
.start-overlay .start-rules {
  grid-area: rules;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  max-width: none;
  gap: 4px 30px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  text-align: center;
}

.start-overlay .start-rules li {
  position: relative;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  line-height: 1.8;
  color: rgba(243, 232, 208, 0.5);
}

.start-overlay .start-rules li::before {
  display: none;
}

.start-overlay .start-rules li + li::before {
  display: inline;
  content: "❖";
  position: static;
  width: auto;
  height: auto;
  margin-right: 30px;
  font-size: 6px;
  color: rgba(201, 168, 106, 0.55);
  vertical-align: middle;
}

/* 页脚：一行说明 + 一枚文字按钮，全部居中 */
.start-overlay .start-sheet .start-foot {
  grid-area: foot;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(201, 168, 106, 0.2);
}

.start-overlay .start-sheet .start-foot-note {
  order: 2;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(243, 232, 208, 0.34);
  text-shadow: none;
}

.start-overlay .start-sheet .btn.letterpress {
  order: 1;
  border: 0;
  padding: 0 0 4px;
  background: none;
  box-shadow: none;
  color: #e8cf98;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(201, 168, 106, 0.45);
}

.start-overlay .start-sheet .btn.letterpress:hover {
  color: #ffe9bd;
  border-bottom-color: rgba(255, 233, 189, 0.8);
  background: none;
}

.start-overlay .start-sheet .btn.letterpress:active {
  transform: translateY(1px);
}

/* 继续上一局：右上角一行细字，绝对定位，不占版面高度 */
.start-overlay .start-sheet .resume-bar {
  position: absolute;
  top: 20px;
  right: 54px;
  left: auto;
  grid-area: auto;
  justify-self: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  clip-path: none;
  border: 0;
  background: none;
  box-shadow: none;
}

.start-overlay .start-sheet .resume-bar .resume-meta b {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(243, 232, 208, 0.82);
}

.start-overlay .start-sheet .resume-bar .resume-meta i {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(201, 168, 106, 0.6);
}

.start-overlay .start-sheet .resume-bar .btn {
  border: 0;
  border-bottom: 1px solid rgba(201, 168, 106, 0.4);
  border-radius: 0;
  background: none;
  padding: 0 0 3px;
  color: #e8cf98;
  font-size: 9.5px;
  letter-spacing: 0.24em;
}

@media (max-height: 820px) {
  .start-overlay .start-sheet {
    padding: 20px 38px 14px;
  }

  .start-overlay .start-kicker {
    font-size: 8px;
  }

  .start-overlay .start-title {
    margin-top: 8px;
    font-size: clamp(34px, 4vw, 48px);
  }

  .start-overlay .rule-orn {
    margin-top: 12px;
  }

  .start-overlay .start-lead {
    margin-top: 10px;
    font-size: 10.8px;
    line-height: 1.8;
  }

  .start-overlay .start-shelf {
    margin-top: 14px;
  }

  .start-overlay .book-shape {
    width: clamp(92px, 10vw, 118px);
  }

  .start-overlay .book-plate b {
    font-size: 13px;
  }

  .start-overlay .start-form {
    margin-top: 16px;
    padding-top: 12px;
  }

  .start-overlay .start-rules {
    margin-top: 10px;
  }

  .start-overlay .start-rules li {
    font-size: 9px;
  }

  .start-overlay .start-sheet .start-foot {
    margin-top: 8px;
    padding-top: 10px;
  }
}

@media (max-width: 760px) {
  .start-overlay .start-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ============================================================
   对局界面 · 平面版（与落地页同一套语言）
   规则：方角、无纸纹、无投影；只用 1px 金线分层，
   米白写字，酒红只做唯一强调（ACT 与封蜡）。
   #app 前缀用来压过前面那些拟物规则。
   ============================================================ */

/* 以下整块已停用：这版「对局界面平面化」被否掉了，规则包在 @media not all 里不生效。
   恢复拟物外观即可，等确认后可以连这块一起删掉。 */
@media not all {
#app {
  background: #0b0907;
  color: #f3e8d0;
}

/* ---- 顶栏：一条金线，不要底板 ---- */
#app .topbar {
  background: none;
  border-bottom: 1px solid rgba(201, 168, 106, 0.22);
  box-shadow: none;
}

#app .brand-title {
  color: #f3e8d0;
  font-size: 19px;
  letter-spacing: 0.01em;
  text-shadow: none;
}

#app .brand-mod {
  color: rgba(201, 168, 106, 0.72);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

#app .meters .meter {
  color: rgba(243, 232, 208, 0.52);
  font-size: 8.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  gap: 7px;
}

#app .meters .meter + .meter {
  border-left: 1px solid rgba(201, 168, 106, 0.2);
}

#app .seal {
  width: 9px;
  height: 9px;
  border-radius: 0;
  border: 1px solid rgba(201, 168, 106, 0.45);
  background: none;
  box-shadow: none;
}

#app .seal.on {
  background: #b3261e;
  border-color: #b3261e;
}

#app .pip {
  width: 10px;
  height: 7px;
  border-radius: 0;
  border: 1px solid rgba(201, 168, 106, 0.45);
  background: none;
  box-shadow: none;
}

#app .pip.on {
  background: rgba(201, 168, 106, 0.85);
  border-color: rgba(201, 168, 106, 0.85);
}

#app .turn {
  color: rgba(243, 232, 208, 0.6);
  font-size: 10px;
  letter-spacing: 0.24em;
}

#app .rule-tag {
  border: 1px solid rgba(201, 168, 106, 0.4);
  border-radius: 0;
  background: none;
  color: rgba(201, 168, 106, 0.85);
}

#app .btn.ghost {
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(243, 232, 208, 0.55);
  font-size: 10px;
  letter-spacing: 0.26em;
}

#app .btn.ghost:hover {
  color: #e8cf98;
}

/* ---- 左栏：角色卡当一张印刷表格，刻度用细线 ---- */
#app .rail-title {
  color: rgba(243, 232, 208, 0.42);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

#app .char-card {
  background: #f2e7cf;
  border: 1px solid rgba(60, 40, 25, 0.4);
  box-shadow: none;
}

#app .char-bands::after {
  background: rgba(60, 40, 25, 0.22);
}

#app .band span {
  color: rgba(60, 40, 25, 0.62);
  font-size: 12.5px;
  letter-spacing: 0.14em;
}

#app .char-name,
#app .char-sub {
  color: rgba(243, 232, 208, 0.55);
  letter-spacing: 0.2em;
}

#app .book-cover {
  background: #0b0907;
  box-shadow: none;
  border: 1px solid rgba(201, 168, 106, 0.3);
}

#app .book-cover img {
  filter: none;
}

/* ---- 中栏：ACT 卡 = 金框 + 大字；放牌位 = 一格细线 ---- */
#app .act-card {
  background: none;
  border: 1px solid rgba(201, 168, 106, 0.34);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 14px;
}

#app .act-card::before {
  content: none;
}

#app .act-card::after {
  background-image:
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5)),
    linear-gradient(rgba(201, 168, 106, 0.5), rgba(201, 168, 106, 0.5));
  background-size:
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px;
  background-position:
    5px 5px, 5px 5px,
    calc(100% - 5px) 5px, calc(100% - 5px) 5px,
    5px calc(100% - 5px), 5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
}

#app .act-num {
  color: rgba(201, 168, 106, 0.85);
  font-size: 8.5px;
  letter-spacing: 0.42em;
}

#app .act-word {
  color: #b3261e;
  font-size: 26px;
  letter-spacing: 0.16em;
}

#app .slot {
  background: none;
  border: 1px dashed rgba(201, 168, 106, 0.18);
  box-shadow: none;
}

#app .slot-empty {
  color: rgba(243, 232, 208, 0.24);
  font-size: 9px;
  letter-spacing: 0.34em;
  font-style: normal;
  text-transform: uppercase;
}

#app .preview {
  background: none;
  border: 0;
  color: rgba(201, 168, 106, 0.7);
  font-size: 9px;
  letter-spacing: 0.26em;
}

#app .ability-plaque {
  background: none;
  border: 0;
  border-left: 2px solid #b08d4f;
  border-top: 1px solid rgba(201, 168, 106, 0.18);
  border-radius: 0;
  box-shadow: none;
  padding: 7px 10px 8px 11px;
}

/* ---- 骰子：一颗印在卡面上的记号，不是立体筹码 ---- */
#app .die {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: none;
  border: 1px solid rgba(201, 168, 106, 0.55);
  border-radius: 0;
  box-shadow: none;
}

/* 骰子不做点阵：一颗骰值直接以数字印在方框里，缩到 46px 也读得清 */
#app .die svg {
  display: none;
}

#app .die .die-num {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0;
  color: #f6ecd6;
}

#app .die.is-removed {
  border-style: dashed;
  border-color: rgba(201, 168, 106, 0.32);
}

#app .die.is-removed .die-num {
  color: rgba(201, 168, 106, 0.4);
}

#app .die .die-value,
#app .die small,
#app .die em {
  color: rgba(201, 168, 106, 0.8);
  font-size: 9.5px;
  letter-spacing: 0.2em;
}

#app .die.is-selectable {
  outline: 1px dashed rgba(201, 168, 106, 0.7);
  outline-offset: 3px;
}

#app .die.is-picked {
  outline: 1px solid rgba(201, 168, 106, 0.95);
  outline-offset: 3px;
}

#app .ability-plaque::before,
#app .ability-plaque::after {
  content: none;
}

#app .ability-plaque b {
  color: #f3e8d0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

#app .plaque-desc {
  color: rgba(243, 232, 208, 0.55);
  font-size: 9.5px;
}

#app .ability-plaque .scope {
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: 0;
  background: none;
  color: rgba(201, 168, 106, 0.75);
  font-size: 7.5px;
  letter-spacing: 0.24em;
}

#app .ability-plaque.facedown b {
  color: rgba(243, 232, 208, 0.4);
}

#app .plaque-note {
  color: rgba(201, 168, 106, 0.7);
}

#app .scored-strip {
  color: rgba(243, 232, 208, 0.35);
  letter-spacing: 0.24em;
}

/* ---- 三栏之间用一道极细的金线分栏，替掉原来靠阴影分界 ---- */
#app .book-panel {
  border-right: 1px solid rgba(201, 168, 106, 0.14);
  padding-right: 22px;
}

#app .side-panel {
  border-left: 1px solid rgba(201, 168, 106, 0.14);
  padding-left: 22px;
}

#app .log ol li {
  color: rgba(243, 232, 208, 0.58);
}

#app .meters .meter {
  color: rgba(243, 232, 208, 0.6);
}

/* ---- 右栏：反派牌子与战报都拆到只剩线与字 ---- */
#app .antagonist {
  background: none;
  border: 1px solid rgba(201, 168, 106, 0.22);
  border-radius: 0;
  box-shadow: none;
}

#app .ant-art {
  border-bottom: 1px solid rgba(201, 168, 106, 0.2);
}

#app .ant-block h4,
#app .log h4 {
  color: rgba(201, 168, 106, 0.78);
  font-size: 8.5px;
  letter-spacing: 0.34em;
  border: 0;
}

#app .ant-block h4::before,
#app .log h4::before {
  background: rgba(201, 168, 106, 0.5);
}

#app .ant-block p,
#app .ant-block li {
  color: rgba(243, 232, 208, 0.55);
}

#app .log ol li {
  color: rgba(243, 232, 208, 0.52);
  font-size: 10.5px;
  line-height: 1.75;
}

/* ---- 底栏：同样只是一条金线 + 小字 ---- */
#app .dock {
  background: #0b0907;
  border-top: 1px solid rgba(201, 168, 106, 0.22);
  box-shadow: none;
}

#app .dock::before {
  content: none;
}

#app .counter {
  color: rgba(243, 232, 208, 0.38);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

#app .counter b {
  color: #f3e8d0;
  font-size: 13px;
  letter-spacing: 0.04em;
}

#app .deck-info .counter + .counter {
  border-left: 1px solid rgba(201, 168, 106, 0.18);
}

#app .hint b {
  color: #f3e8d0;
  font-size: 11px;
  letter-spacing: 0.16em;
}

#app .hint span {
  color: rgba(243, 232, 208, 0.48);
  font-size: 10.5px;
}

/* ---- 卡牌：内容保留扫描件，但外壳只剩 1px 线 ---- */
#app .card {
  border-radius: 0;
  box-shadow: none;
}

#app .card-face {
  border: 1px solid rgba(201, 168, 106, 0.3);
  box-shadow: none;
}

#app .hand-layer .hand .card {
  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.42);
}

#app .hand-layer .hand .card:hover,
#app .hand-layer .hand .card:focus-visible {
  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.75);
}

#app .hand-layer .hand .card.is-selected {
  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.55);
}

#app .card.is-target {
  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.6) !important;
}

#app .card.is-dim {
  filter: brightness(0.62) saturate(0.7);
  opacity: 1;
}

#app .card-face::before {
  content: none;
}

} /* end @media not all */