/* 账房 · 老账房质感：暗木、旧纸、朱砂印、线香 */
:root {
  --ink: #1d1611;
  --paper: #e6d8bb;
  --paper2: #d9c8a5;
  --paper-dark: #b8a583;
  --wood: #1a120c;
  --wood2: #2a1c12;
  --brass: #8a6a3a;
  --brass2: #c9a35f;
  --seal: #a8322a;
  --seal2: #7d221c;
  --lamp: rgba(255, 190, 110, 0.18);
  --kai: "KaiTi", "STKaiti", "楷体", "Kaiti SC", "BiauKai", serif;
  --song: "SimSun", "宋体", "Songti SC", "Noto Serif CJK SC", serif;
  --copper: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--wood);
  color: var(--paper);
  font-family: var(--song);
  font-size: 14px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
/* 灯光与纸纹 */
#lamp {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 25%, var(--lamp), rgba(0,0,0,0) 65%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  transition: opacity 2.4s ease;
}
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.5 0 0 0 0 0.35 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
svg.defs { position: absolute; width: 0; height: 0; }

/* 标题页 */
#title {
  position: fixed; inset: 0; z-index: 50; background: #0b0806;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 1.8s ease;
}
#title.out { opacity: 0; pointer-events: none; }
#title h1 {
  font-family: var(--kai); font-weight: normal; font-size: 96px; letter-spacing: 0.3em; margin: 0 0 0 0.3em;
  color: var(--paper); filter: url(#ink);
}
#title p { color: #8d7d63; letter-spacing: 0.25em; margin: 18px 0 48px; font-size: 14px; }
#light {
  font-family: var(--kai); font-size: 26px; letter-spacing: 0.2em; padding: 0.35em 1.1em 0.3em 1.3em;
  color: var(--seal); background: none; border: 2px solid var(--seal); border-radius: 6px; cursor: pointer;
  transition: background 0.4s, color 0.4s, box-shadow 0.6s;
}
#light:hover { background: var(--seal); color: var(--paper); box-shadow: 0 0 40px rgba(255,170,90,0.35); }
/* 续上局：点灯下面一枚小一号的铜边钮 */
#resume {
  font-family: var(--kai); font-size: 16px; letter-spacing: 0.15em; padding: 0.4em 1.2em; margin-top: 14px;
  color: var(--brass2); background: none; border: 1px solid rgba(201,163,95,0.55); border-radius: 5px; cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
#resume:hover { background: rgba(201,163,95,0.15); color: var(--paper); }
#title small { position: absolute; bottom: 24px; color: #4f4536; letter-spacing: 0.1em; }
/* 语言：先选再点灯。中文 / English 各是一整套：动词、板子、声音 */
#langs { position: absolute; top: 26px; right: 30px; display: flex; gap: 8px; }
#langs .lang {
  font-family: var(--copper); font-size: 13px; letter-spacing: 0.12em; padding: 5px 14px; cursor: pointer; border-radius: 3px;
  background: none; color: #6e6250; border: 1px solid rgba(201,163,95,0.3); transition: color 0.3s, border-color 0.3s;
}
#langs .lang:hover { color: var(--paper); }
#langs .lang.on { color: var(--paper); border-color: var(--brass2); box-shadow: 0 0 12px rgba(201,163,95,0.25); }
body.now #title { display: none; }
body.now #app { opacity: 1; transition: none; }

/* 整体版式 */
#app {
  position: relative; z-index: 3; height: 100%;
  display: grid; grid-template-rows: 54px 1fr 160px; grid-template-columns: 1fr 300px;
  grid-template-areas: "head head" "board side" "table side";
  opacity: 0; transition: opacity 2s ease 0.6s;
}
#app.on { opacity: 1; }

/* 抬头 */
#head {
  grid-area: head; display: flex; align-items: center; gap: 28px; padding: 0 22px;
  border-bottom: 1px solid rgba(201,163,95,0.25); background: linear-gradient(#1f150d, #1a120c);
}
#head .day { font-family: var(--kai); font-size: 24px; letter-spacing: 0.1em; min-width: 90px; }
/* 年号：抬头上的钟。桌上一日是一日，铺里一日是一周，行里一日是一月 */
#head .year { font-family: var(--kai); font-size: 13px; letter-spacing: 0.2em; color: #8a7355; margin-left: -12px; white-space: nowrap; }
#dayIncense { position: relative; width: 220px; height: 6px; background: rgba(0,0,0,0.5); border-radius: 3px; }
#dayIncense i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6b5237, #a8825a); border-radius: 3px; }
#dayIncense b { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #ff9a3c; box-shadow: 0 0 12px 3px rgba(255,140,50,0.7); }
#head .stat { font-family: var(--kai); font-size: 18px; letter-spacing: 0.06em; }
#head .stat em { font-style: normal; }
#head .stat span { font-family: var(--song); font-size: 16px; color: var(--brass2); margin-left: 6px; }
#body { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
#body i { width: 9px; height: 14px; background: var(--brass2); opacity: 0.9; border-radius: 1px; }
#body i.off { background: #3a2c1e; opacity: 1; }
/* 招牌：记出字号那天挂到抬头上——朱漆金字 */
#sign {
  font-family: var(--kai); font-size: 18px; letter-spacing: 0.35em; padding: 3px 10px 3px 14px; color: #f0d9a0;
  background: linear-gradient(#7d2a20, #5e1c15); border: 1px solid #f0d9a0; box-shadow: inset 0 0 0 3px #5e1c15, 0 3px 8px rgba(0,0,0,0.6);
  border-radius: 2px; transform: rotate(-1.5deg); filter: url(#ink);
}
#head .sp { flex: 1; }
#head button {
  font-family: var(--kai); font-size: 16px; background: none; color: var(--paper-dark); border: 1px solid rgba(201,163,95,0.35);
  border-radius: 4px; padding: 3px 10px; cursor: pointer;
}
#head button:hover { color: var(--paper); border-color: var(--brass2); }

/* 棋盘 */
#board { grid-area: board; padding: 14px 20px 6px; overflow: auto; }
/* stretch：同一行的盒子自动等高——大小不齐是要命的 */
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; align-items: stretch; }
.rowlabel { width: 100%; font-family: var(--kai); color: #6d5b42; letter-spacing: 0.3em; font-size: 13px; margin: 0 0 -4px; }

/* 动词盒子 */
.box {
  position: relative; width: 150px; min-height: 156px; padding: 8px 8px 12px;
  background: linear-gradient(160deg, #33231a, #211610 60%, #1b110c);
  border: 1px solid rgba(201,163,95,0.35); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.55);
  cursor: pointer; transition: transform 0.6s, box-shadow 0.4s;
}
.box.wide { width: 150px; } /* 一律同宽：200 宽下三格照样折两行，只多出一圈空 */
.box.sel { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 1px var(--brass2), 0 8px 24px rgba(0,0,0,0.55); }
.box .glyph {
  font-family: var(--kai); font-size: 42px; line-height: 1; color: var(--paper); filter: url(#ink);
  text-align: center; margin: 2px 0 2px;
}
.box .vname { position: absolute; top: 8px; right: 10px; font-size: 11px; color: #7f6b4f; letter-spacing: 0.15em; writing-mode: vertical-rl; }
.box.locked { opacity: 0.6; }
.box.running { border-color: rgba(255,160,80,0.45); }
/* 产业：自己转的盒子。铜边、深一点的漆，和手动词分得开，又不是墙 */
.box.asset { background: linear-gradient(160deg, #3b2a1b, #271a11 60%, #1f140d); border-color: rgba(201,163,95,0.6); box-shadow: inset 0 0 0 1px rgba(201,163,95,0.18), inset 0 0 0 2px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.55); }
.box.asset .glyph { color: #efd9a8; transition: color 0.6s, opacity 0.6s; }
/* 产业的脸：忠 / 样 两排点。忠诚 ≤ 3 整张脸转朱砂；走样 ≥ 5 字迹褪掉一半 */
.box .mood { margin: 0 0 6px; padding: 0 4px; }
.box .pips { display: flex; align-items: center; gap: 2px; height: 13px; }
.box .pips em { font-style: normal; font-size: 11px; line-height: 1; color: #8a7355; width: 14px; margin-right: 3px; letter-spacing: 0; }
.box .pips i { width: 7px; height: 5px; border-radius: 1px; background: rgba(201,163,95,0.16); }
.box .pips.loyal i.on { background: var(--brass2); }
.box .pips.drift i { width: 14px; }
.box .pips.drift i.on { background: #9a7e6a; }
.box.sour { border-color: rgba(168,50,42,0.75); box-shadow: inset 0 0 0 1px rgba(168,50,42,0.3), inset 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px rgba(168,50,42,0.3), 0 8px 24px rgba(0,0,0,0.55); }
.box.sour .glyph { color: var(--seal); }
.box.sour .pips.loyal i.on { background: var(--seal); }
.box.sour .pips.loyal em { color: var(--seal); }
.box.drifted .glyph { opacity: 0.45; }
.box.drifted .pips.drift i.on { background: var(--seal); }
.box.drifted .pips.drift em { color: var(--seal); }
/* 拖卡时的提示：金边 = 能放；红边 = 想要但还没开；暗金 = 格已满 */
.box.can { opacity: 1; border-color: var(--brass2); box-shadow: 0 0 0 1px var(--brass2), 0 0 22px rgba(201,163,95,0.45), 0 8px 24px rgba(0,0,0,0.55); animation: breathe 1.4s infinite alternate; }
.box.wants { opacity: 0.85; border-color: var(--seal); box-shadow: 0 0 0 1px var(--seal), 0 0 18px rgba(168,50,42,0.4), 0 8px 24px rgba(0,0,0,0.55); }
.box.full { border-color: rgba(201,163,95,0.6); }
@keyframes breathe { from { box-shadow: 0 0 0 1px var(--brass2), 0 0 14px rgba(201,163,95,0.3), 0 8px 24px rgba(0,0,0,0.55); } to { box-shadow: 0 0 0 1px var(--brass2), 0 0 28px rgba(201,163,95,0.6), 0 8px 24px rgba(0,0,0,0.55); } }
.slot.dim { border-color: rgba(201,163,95,0.18); color: #5a4b38; }
.need { font-size: 11px; line-height: 1.4; color: #b08a5a; margin: 6px 44px 0 2px; }
.box.locked .need { color: #8f7a5c; margin-right: 2px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 54px; }
.slot {
  width: 58px; height: 52px; border: 1px dashed rgba(201,163,95,0.4); border-radius: 3px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 11px; color: #7f6b4f; padding: 2px; position: relative; line-height: 1.25;
}
.slot.hot { border-color: var(--brass2); background: rgba(201,163,95,0.12); border-style: solid; }
.slot.bad { border-color: var(--seal); }
.slot .card { transform: scale(0.58); transform-origin: center; position: absolute; }
.slot .cnt { position: absolute; right: -4px; top: -6px; }
.go {
  position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--seal); color: var(--seal); background: none; font-family: var(--kai); font-size: 18px; cursor: pointer;
  transition: all 0.25s; line-height: 1;
}
.go:hover { background: var(--seal); color: var(--paper); box-shadow: 0 0 16px rgba(168,50,42,0.6); }
.go:disabled { border-color: #4a3a2c; color: #4a3a2c; cursor: default; background: none; box-shadow: none; }
.incense { position: absolute; left: 10px; right: 52px; bottom: 16px; height: 5px; background: rgba(0,0,0,0.6); border-radius: 3px; }
.incense i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4e3a26, #8d6d47); border-radius: 3px; }
.incense b { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #ff9a3c; box-shadow: 0 0 10px 3px rgba(255,140,50,0.7); animation: ember 1.1s infinite alternate; }
@keyframes ember { from { opacity: 0.75; } to { opacity: 1; } }
.smoke { position: absolute; width: 4px; height: 16px; left: 3px; top: -18px; border-radius: 50%; filter: blur(1.5px);
  background: linear-gradient(rgba(220,210,190,0), rgba(220,210,190,0.45)); animation: smoke 2.4s infinite ease-out; pointer-events: none; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(1); opacity: 0.7; } 100% { transform: translate(6px, -26px) scale(2.2, 1.6); opacity: 0; } }

/* 墙：朱砂印。到了行墙有八面，窄一点才排得下一行 */
.box.wall { background: linear-gradient(160deg, #2b1512, #1c0f0c 60%, #160b09); border-color: rgba(168,50,42,0.55); min-height: 128px; width: 150px; }
.box.wall .glyph {
  width: 50px; height: 50px; margin: 0 auto 6px; background: var(--seal); color: #f1e3c8; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 34px; filter: none;
  box-shadow: inset 0 0 0 2px #f1e3c8, inset 0 0 0 4px var(--seal), 0 0 18px rgba(168,50,42,0.35);
  transform: rotate(-3deg);
}
.box.wall.stamp .glyph { animation: stamp 0.5s ease-out; }
@keyframes stamp { 0% { transform: rotate(-3deg) scale(1.5); opacity: 0.2; } 60% { transform: rotate(-3deg) scale(0.95); opacity: 1; } 100% { transform: rotate(-3deg) scale(1); } }
.box.wall .wallnote { font-size: 11px; color: #9a7e6a; text-align: center; margin-top: 6px; letter-spacing: 0.05em; }
.box.wall.flipped { background: linear-gradient(160deg, #33231a, #211610 60%, #1b110c); border-color: rgba(201,163,95,0.35); }
.box.wall.flipping { animation: flip 1.4s ease-in-out; }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.box.wall.flipped .glyph { background: none; color: var(--paper); box-shadow: none; transform: none; filter: url(#ink); font-size: 46px; width: auto; height: auto; }

/* 桌子（卡） */
#table {
  grid-area: table; position: relative; border-top: 1px solid rgba(201,163,95,0.25); padding: 12px 20px; display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(#1a120c, #120c08); overflow-x: auto; overflow-y: hidden;
  scrollbar-color: #8a6a3a #140d08; /* Firefox */
}
/* 手牌带：明晃晃的横向滚动条（苏丹的游戏那种）——卡多了就往右滚，别猜 */
#table::-webkit-scrollbar { height: 12px; }
#table::-webkit-scrollbar-track { background: #140d08; border-top: 1px solid rgba(201,163,95,0.12); }
#table::-webkit-scrollbar-thumb { background: linear-gradient(#9a7845, #6b5130); border-radius: 6px; border: 2px solid #140d08; }
#table::-webkit-scrollbar-thumb:hover { background: var(--brass2); }
/* 两缘渐隐：那边还有牌 */
#tableFadeL, #tableFadeR {
  position: absolute; bottom: 0; height: 204px; width: 64px; pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity 0.3s;
}
#tableFadeL { left: 0; background: linear-gradient(90deg, rgba(10,6,4,0.85), transparent); }
#tableFadeR { right: 300px; background: linear-gradient(270deg, rgba(10,6,4,0.85), transparent); }
#tableFadeL.on, #tableFadeR.on { opacity: 1; }
.stack { position: relative; width: 84px; height: 118px; flex: none; }
.stack .card + .card { position: absolute; left: 3px; top: -3px; }
.card {
  position: relative; width: 84px; height: 118px; border-radius: 3px; padding: 10px 6px 6px;
  background: linear-gradient(170deg, #efe3c7, #dcc9a3 70%, #cbb58c);
  color: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,0.55), inset 0 0 18px rgba(120,90,50,0.18);
  cursor: grab; transition: transform 0.15s;
}
.card:hover { transform: translateY(-4px) rotate(0deg) !important; }
.card.sel { box-shadow: 0 0 0 2px var(--brass2), 0 3px 8px rgba(0,0,0,0.55); }
.card .nm { font-family: var(--kai); font-size: 20px; line-height: 1.1; writing-mode: vertical-rl; letter-spacing: 0.05em; position: absolute; right: 8px; top: 8px; height: 96px; white-space: nowrap; }
.card .nm.long { font-size: 16px; }
.card .asp { position: absolute; left: 6px; bottom: 8px; font-size: 10px; color: #6b5b3e; letter-spacing: 0.05em; }
.card .life { position: absolute; left: 7px; top: 12px; display: flex; flex-direction: column; gap: 3px; }
.card .life i { width: 6px; height: 6px; border-radius: 50%; background: #7e5a3c; }
.card .life i.off { background: rgba(0,0,0,0.12); }
.card.rongyu { background: linear-gradient(170deg, #f5eee0, #e8dcc3 70%, #d7c8a8); }
.card.rongyu .nm { color: #5a3a2a; }
.card.diliao, .card.huoguo { background: linear-gradient(170deg, #e8d9b3, #cdb88a 70%, #b9a274); }
.card.huoji, .card.tudi, .card.laoban, .card.laozhang { background: linear-gradient(170deg, #ece2cb, #d4c3a0 70%, #c1ac82); }
.card.xiehui { background: linear-gradient(170deg, #d9b9a8, #c99a86 70%, #b07f6c); }
.card.manyi { background: linear-gradient(170deg, #f3e8cd, #e3d3ad 70%, #d2bf95); }
/* 铺的卡：账是划了格的纸；字号是朱漆金字的牌；掌柜、房东跟人一样，房东深一点 */
.card.zhang { background: repeating-linear-gradient(0deg, rgba(120,60,40,0.14) 0 1px, transparent 1px 9px), linear-gradient(170deg, #f4ecd8, #e6d9b8 70%, #d6c69e); }
.card.zihao { background: linear-gradient(170deg, #7d2a20, #5e1c15 70%, #48140f); color: #f0d9a0; box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(240,217,160,0.55), inset 0 0 0 4px #5e1c15; }
.card.zihao .nm { color: #f0d9a0; }
.card.zihao .asp { color: #d9b784; }
.card.zihao .seal { border-color: #f0d9a0; color: #f0d9a0; }
.card.zhanggui { background: linear-gradient(170deg, #ece2cb, #d4c3a0 70%, #c1ac82); }
.card.fangdong { background: linear-gradient(170deg, #ddd0b6, #c3b08c 70%, #a89370); }
/* 行的卡：茶是木箱；船是水色；货单是蓝格的纸；茶标是墨绿金字的印；行帖是红框的官纸；关差是靛青号衣；破产行商褪了色 */
.card.cha { background: linear-gradient(170deg, #c69a68, #a67a4c 70%, #8a6238); box-shadow: 0 3px 8px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(60,38,18,0.35), inset 0 0 18px rgba(60,38,18,0.25); }
.card.cha .asp { color: #4a3018; }
.card.chashang, .card.hangshang { background: linear-gradient(170deg, #e3d5bd, #cbb692 70%, #b39c74); }
.card.maiban { background: linear-gradient(170deg, #ece2cb, #d4c3a0 70%, #c1ac82); }
.card.tongshi { background: linear-gradient(170deg, #dfd9c8, #c5bda6 70%, #ada37f); }
.card.yangchuan { background: linear-gradient(170deg, #cdd6d4, #a9bbbd 70%, #8ca0a5); }
.card.yangchuan .asp { color: #3f5156; }
.card.huodan { background: repeating-linear-gradient(0deg, rgba(40,70,120,0.16) 0 1px, transparent 1px 9px), linear-gradient(170deg, #f4efe0, #e6dfc6 70%, #d6cdb0); }
.card.chabiao { background: linear-gradient(170deg, #2f4a3a, #223629 70%, #1a2a20); color: #e6d3a0; box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(230,211,160,0.5), inset 0 0 0 4px #223629; }
.card.chabiao .nm { color: #e6d3a0; }
.card.chabiao .asp { color: #b9a97e; }
.card.chabiao .seal { border-color: #e6d3a0; color: #e6d3a0; }
.card.hangtie { background: linear-gradient(170deg, #f1e6c8, #e2d3ac 70%, #d0be93); box-shadow: 0 3px 8px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(168,50,42,0.55), inset 0 0 0 5px rgba(241,230,200,0.9); }
.card.guanchai { background: linear-gradient(170deg, #4a5566, #37404d 70%, #2b323d); color: #e6d8bb; }
.card.guanchai .nm { color: #e6d8bb; }
.card.guanchai .asp { color: #a9b0bd; }
.card.guanchai .seal { border-color: #e6d8bb; color: #e6d8bb; }
.card.pochan { background: linear-gradient(170deg, #cfc7b8, #b5ad9c 70%, #9c9483); color: #4a4238; }
.card.pochan .nm { color: #5a5248; text-decoration: line-through; text-decoration-color: rgba(168,50,42,0.6); }
/* 洋船的舱：三只箱子，装一箱暗一格 */
.card .cargo { position: absolute; left: 7px; bottom: 44px; display: flex; gap: 3px; }
.card .cargo i { width: 9px; height: 8px; border-radius: 1px; background: rgba(40,40,40,0.16); }
.card .cargo i.on { background: #8a6238; box-shadow: inset 0 0 0 1px rgba(60,38,18,0.5); }
.card .seal { position: absolute; left: 8px; bottom: 22px; width: 18px; height: 18px; border: 1.5px solid var(--seal); color: var(--seal); font-size: 11px; font-family: var(--kai); display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); opacity: 0.85; }
.cnt {
  position: absolute; right: -8px; top: -8px; min-width: 22px; height: 22px; border-radius: 50%; background: var(--seal); color: #f1e3c8;
  font-family: var(--kai); font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5); z-index: 2; white-space: nowrap;
}
.ghost { position: fixed; z-index: 40; pointer-events: none; transform: rotate(-4deg) scale(1.04); opacity: 0.95; }
.card.spawn { animation: spawn 0.5s ease-out; }
@keyframes spawn { 0% { transform: translateY(18px) rotate(6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* 钱：桌上那叠铜钱。它也是卡——房东伸手，就是从这里拿 */
.card.qian { background: linear-gradient(170deg, #dcc59c, #c0a373 70%, #a98a5a); cursor: default; }
.card.qian .coinface {
  position: absolute; left: 9px; top: 38px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ecc97c, #b07f33 62%, #7a5320);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(110,72,26,0.55), inset 0 0 6px rgba(0,0,0,0.25);
}
.card.qian .coinface::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #3a2a1a; box-shadow: inset 0 0 0 1.5px #d9b46a; }
.stack.money .cnt { background: #7a5320; }
.stack.money.empty .card { opacity: 0.45; filter: grayscale(0.4); }
.stack.money.empty .coinface { opacity: 0.25; }

/* 被墙抽走的卡：从桌上原位出发，缩着旋进墙里 */
.pull { position: fixed; z-index: 46; margin: 0; pointer-events: none; will-change: transform, opacity; transition: transform 0.75s cubic-bezier(0.55, 0, 0.85, 0.35), opacity 0.3s ease-in 0.45s; }
/* 正在伸手的墙：红光一下一下地搏动 */
.box.wall.grab { border-color: rgba(220,72,52,0.9); animation: grab 0.55s ease-in-out infinite alternate; }
@keyframes grab { from { box-shadow: 0 0 0 1px rgba(168,50,42,0.6), 0 0 14px rgba(168,50,42,0.35), 0 8px 24px rgba(0,0,0,0.55); } to { box-shadow: 0 0 0 1px rgba(220,72,52,0.95), 0 0 38px rgba(210,60,40,0.8), 0 8px 24px rgba(0,0,0,0.55); } }

/* 洋船的帆影：来的时候从桌沿右边驶进来，装满开走时从船卡的位置驶出去。纸色剪影，两种语言同一个 */
.ship { position: fixed; z-index: 43; width: 120px; height: 70px; pointer-events: none; opacity: 0; }
.ship svg { width: 100%; height: 100%; fill: rgba(230,216,187,0.55); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.ship svg .mast { fill: none; stroke: rgba(230,216,187,0.7); stroke-width: 2; }
.ship.in { animation: sailIn 3.4s ease-in-out forwards; }
.ship.out { animation: sailOut 3.2s ease-in forwards; }
@keyframes sailIn { 0% { opacity: 0; transform: translateX(220px) rotate(2deg); } 25% { opacity: 1; } 55% { transform: translateX(80px) rotate(-1.5deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-40px) rotate(1deg); } }
@keyframes sailOut { 0% { opacity: 0; transform: translateX(0) scale(0.7); } 20% { opacity: 1; transform: translateX(50px) scale(1); } 100% { opacity: 0; transform: translateX(70vw) translateY(-10px) rotate(-2deg) scale(0.6); } }

/* 侧栏：细看 + 账本 */
#side { grid-area: side; display: flex; flex-direction: column; border-left: 1px solid rgba(201,163,95,0.25); background: #140d09; }
#detail {
  flex: none; height: 46%; padding: 18px 20px; overflow: auto;
  background: linear-gradient(170deg, #e9dcbf, #d9c8a5); color: var(--ink); position: relative;
  box-shadow: inset 0 -20px 30px rgba(90,60,30,0.12);
}
#detail h3 { font-family: var(--kai); font-weight: normal; font-size: 26px; margin: 0 0 8px; letter-spacing: 0.1em; }
#detail s { color: #8a7a60; text-decoration-color: rgba(168,50,42,0.7); }
#detail p { margin: 0 0 10px; line-height: 1.7; font-size: 14px; }
#detail .last { border-top: 1px dashed rgba(60,40,20,0.35); padding-top: 8px; color: #4b3623; }
#detail .muted { color: #7a6748; font-size: 12px; }
#detail button { font-family: var(--kai); font-size: 15px; background: var(--seal); color: #f1e3c8; border: 0; border-radius: 3px; padding: 4px 12px; cursor: pointer; margin-top: 6px; }
#detail button:disabled { background: #a89a80; cursor: default; }
#ledger { flex: 1; overflow: auto; padding: 12px 18px; font-size: 13px; line-height: 1.75; color: #cbb99a; }
#ledger .l { padding-left: 2.6em; text-indent: -2.6em; margin-bottom: 2px; }
#ledger .l .d { color: #6d5b42; font-family: var(--kai); margin-right: 0.6em; }
#ledger .l.red { color: #d7574c; }
#ledger .l.new { animation: fadein 0.6s; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* 纸条提示与飞币 */
.toast {
  position: fixed; z-index: 45; padding: 6px 12px; background: var(--paper); color: var(--ink); font-size: 13px;
  border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); transform: rotate(-1.5deg); pointer-events: none;
  animation: toast 2.4s forwards;
}
@keyframes toast { 0% { opacity: 0; transform: translateY(6px) rotate(-1.5deg); } 10% { opacity: 1; transform: translateY(0) rotate(-1.5deg); } 80% { opacity: 1; } 100% { opacity: 0; } }
.coin { position: fixed; z-index: 44; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7a3, #b8862e); box-shadow: 0 0 8px rgba(255,200,100,0.6); pointer-events: none; transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.5, 1), opacity 0.9s; }

/* 大幕：弧与结局 */
#overlay { position: fixed; inset: 0; z-index: 48; background: rgba(5,3,2,0.86); display: none; align-items: center; justify-content: center; }
#overlay.show { display: flex; }
#overlay .sheet {
  width: 560px; max-width: 90vw; padding: 44px 48px 36px; background: linear-gradient(170deg, #eadcbf, #d8c6a1); color: var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,0.7); transform: rotate(-0.6deg); position: relative;
}
#overlay h2 { font-family: var(--kai); font-weight: normal; font-size: 40px; margin: 0 0 18px; letter-spacing: 0.15em; }
#overlay .sheet.arc h2::after { content: "印"; position: absolute; right: 40px; top: 34px; font-family: var(--kai); font-size: 30px; color: #f1e3c8; background: var(--seal); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 5px; box-shadow: inset 0 0 0 2px #f1e3c8, inset 0 0 0 4px var(--seal); transform: rotate(8deg); }
#overlay p { line-height: 1.85; font-size: 15px; white-space: pre-line; margin: 0 0 22px; }
#overlay button { font-family: var(--kai); font-size: 18px; letter-spacing: 0.15em; background: none; border: 2px solid var(--seal); color: var(--seal); border-radius: 4px; padding: 6px 22px; cursor: pointer; }
#overlay button:hover { background: var(--seal); color: #f1e3c8; }
#paused { position: fixed; inset: 0; z-index: 47; display: none; align-items: center; justify-content: center; font-family: var(--kai); font-size: 64px; letter-spacing: 0.4em; color: rgba(230,216,187,0.75); background: rgba(0,0,0,0.45); pointer-events: none; }
#paused.show { display: flex; }

/* 恶行横幅：账本红字在画面中央放大停一停——挨打朱砂框，接住（口实到手）铜框；中英同色 */
.evilbanner {
  position: fixed; z-index: 46; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-0.6deg);
  max-width: 720px; padding: 18px 34px; text-align: center;
  background: var(--paper); color: var(--ink);
  font-family: var(--song); font-size: 21px; line-height: 1.7; letter-spacing: 1px; white-space: pre-wrap;
  border: 3px solid var(--seal); box-shadow: 0 14px 50px rgba(0,0,0,0.65), inset 0 0 40px rgba(125,34,28,0.08);
  pointer-events: none; animation: evilin 0.45s ease-out;
}
/* 恶人小像：木刻竖像立在横幅左侧，文字让位 */
.evilbanner.faced { display: grid; grid-template-columns: 96px 1fr; gap: 0 22px; align-items: center; text-align: left; }
.evilbanner .bface {
  grid-row: 1 / 3; width: 96px; height: 132px; object-fit: cover; border-radius: 2px;
  border: 1px solid rgba(40,28,16,0.6); box-shadow: 0 4px 14px rgba(0,0,0,0.45); transform: rotate(-1.2deg);
}
.evilbanner.faced .btext { text-align: left; }
.evilbanner.faced .bok { grid-column: 2; margin: 12px 0 0; justify-self: start; }
.evilbanner .bok {
  display: block; margin: 16px auto 0; padding: 7px 34px;
  background: none; border: 2px solid var(--seal); color: var(--seal); pointer-events: auto;
  font-family: var(--kai); font-size: 17px; letter-spacing: 4px; text-indent: 4px; cursor: pointer; border-radius: 3px;
  transition: all 0.2s;
}
.evilbanner .bok:hover { background: var(--seal); color: var(--paper); box-shadow: 0 0 16px rgba(168,50,42,0.5); }
/* 仪式（翻历等）：铜金框 */
.evilbanner.caught { border-color: var(--brass2); box-shadow: 0 14px 50px rgba(0,0,0,0.65), inset 0 0 40px rgba(201,163,95,0.10); }
.evilbanner.caught .bok { border-color: var(--brass2); color: var(--brass2); }
.evilbanner.caught .bok:hover { background: var(--brass2); color: var(--ink); box-shadow: 0 0 16px rgba(201,163,95,0.5); }
/* 病倒：墨框，不用朱砂 */
.evilbanner.sick { border-color: #57503f; box-shadow: 0 14px 50px rgba(0,0,0,0.65), inset 0 0 40px rgba(60,52,40,0.12); }
.evilbanner.sick .bok { border-color: #6b6350; color: #57503f; letter-spacing: 2px; text-indent: 2px; }
.evilbanner.sick .bok:hover { background: #57503f; color: var(--paper); box-shadow: none; }
.evilbanner.fade { opacity: 0; transition: opacity 0.7s; }
@keyframes evilin { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-0.6deg) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-0.6deg) scale(1); } }

/* 欺账刻痕：墙上每挨一道多一划 */
.tallymarks { display: flex; gap: 3px; margin-top: 5px; justify-content: center; pointer-events: auto; }
.tallymarks i { display: block; width: 3px; height: 13px; background: var(--seal); transform: rotate(7deg); border-radius: 1px; box-shadow: 0 0 3px rgba(168,50,42,0.5); }
.tallymarks i:nth-child(2n) { transform: rotate(-5deg); height: 11px; margin-top: 2px; }

/* ======================================================================
   English：同一间账房、同一套颜色，只换字。
   单字→词、竖排→横排、印章里的字→首字母；木头、纸、朱砂、线香、金边红边一律不动。
   ====================================================================== */
body.en {
  --kai: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --song: Georgia, "Palatino Linotype", "Book Antiqua", serif;
}
body.en #title h1 { font-size: 66px; font-variant: small-caps; letter-spacing: 0.22em; margin-left: 0.22em; }
body.en #title p { font-style: italic; letter-spacing: 0.12em; }
body.en #light { font-size: 22px; font-variant: small-caps; letter-spacing: 0.12em; padding: 0.35em 1.2em; }
body.en #head .day { font-size: 22px; font-variant: small-caps; letter-spacing: 0.08em; min-width: 96px; }
body.en #head .year { font-size: 12px; font-variant: small-caps; letter-spacing: 0.1em; margin-left: -8px; }
body.en #head .stat { font-size: 17px; font-variant: small-caps; }
body.en #head button { font-size: 14px; font-variant: small-caps; letter-spacing: 0.06em; }
body.en .rowlabel { font-variant: small-caps; letter-spacing: 0.2em; }

/* 盒子：词代替单字，同样的墨迹滤镜 */
body.en .box .glyph { font-size: 26px; font-variant: small-caps; letter-spacing: 0.1em; line-height: 1.2; margin: 6px 0 8px; }
body.en .box .vname { display: none; }
body.en .box .pips em { width: 30px; font-variant: small-caps; letter-spacing: 0.05em; }
body.en .slot { font-size: 10.5px; }
body.en .go { font-size: 12px; font-variant: small-caps; }

/* 墙：同一枚朱砂印，印里是首字母，词写在印下面 */
body.en .box.wall .glyph {
  width: auto; height: auto; background: none; box-shadow: none; transform: none; border-radius: 0;
  display: block; font-size: 18px; letter-spacing: 0.1em; color: var(--paper); margin: 0 0 4px;
}
body.en .box.wall .glyph::before {
  content: attr(data-i); display: flex; align-items: center; justify-content: center; margin: 0 auto 7px;
  width: 46px; height: 46px; border-radius: 6px; background: var(--seal); color: #f1e3c8;
  font-size: 28px; font-variant: normal; letter-spacing: 0;
  box-shadow: inset 0 0 0 2px #f1e3c8, inset 0 0 0 4px var(--seal), 0 0 18px rgba(168,50,42,0.35);
  transform: rotate(-3deg);
}
body.en .box.wall.stamp .glyph { animation: none; }
body.en .box.wall.stamp .glyph::before { animation: stamp 0.5s ease-out; }
body.en .box.wall.flipped .glyph { font-size: 26px; filter: url(#ink); }
body.en .box.wall.flipped .glyph::before { display: none; }

/* 卡：名字横排在上，小印挪到右下 */
body.en .card .nm {
  writing-mode: horizontal-tb; position: absolute; left: 8px; right: 6px; top: 7px; height: auto; white-space: normal;
  font-variant: small-caps; font-size: 14px; line-height: 1.12; letter-spacing: 0.03em;
}
body.en .card .nm.long { font-size: 12.5px; }
body.en .card .life { top: 44px; left: 8px; }
body.en .card .asp { left: 7px; right: 28px; bottom: 7px; font-size: 9.5px; }
body.en .card .seal { left: auto; right: 7px; bottom: 9px; font-size: 9.5px; }
body.en .card .cargo { bottom: 24px; left: 8px; }

/* 侧栏、大幕、暂停 */
body.en #detail h3 { font-size: 24px; font-variant: small-caps; letter-spacing: 0.05em; }
body.en #detail p { font-size: 13.5px; line-height: 1.75; }
body.en #detail button { font-variant: small-caps; }
body.en #ledger { font-size: 12.5px; }
body.en #ledger .l { padding-left: 3.4em; text-indent: -3.4em; }
body.en #ledger .l .d { font-variant: small-caps; }
body.en #overlay h2 { font-size: 36px; font-variant: small-caps; letter-spacing: 0.08em; }
body.en #overlay .sheet.arc h2::after { content: "L"; font-size: 26px; }
body.en #overlay button { font-variant: small-caps; letter-spacing: 0.1em; }
body.en #paused { font-variant: small-caps; letter-spacing: 0.3em; font-size: 56px; }
body.en .card.qian .coinface { left: 22px; top: 42px; }
body.en #sign { font-size: 15px; font-variant: small-caps; letter-spacing: 0.18em; padding: 3px 12px; }

/* ---------- 场景：铺 ----------
   桌子成了柜台：纸更亮，灯更暖，抬头和桌沿多一道朱漆。两种语言同一套颜色。 */
body.scene-shop { --paper: #eee2c6; --paper2: #e0d0ae; --wood: #22160c; --wood2: #35241a; --lamp: rgba(255, 200, 130, 0.26); }
body.scene-shop #head { background: linear-gradient(#2c1911, #21140d); border-bottom: 1px solid rgba(168,50,42,0.6); box-shadow: 0 1px 0 rgba(201,163,95,0.25); }
body.scene-shop #table { background: linear-gradient(#22160d, #17100a); border-top: 1px solid rgba(168,50,42,0.6); box-shadow: inset 0 1px 0 rgba(201,163,95,0.25); }
body.scene-shop .box, body.scene-shop .box.wall.flipped { background: linear-gradient(160deg, #3a2819, #261911 60%, #1f140d); }
body.scene-shop .box.asset { background: linear-gradient(160deg, #45301d, #2c1d12 60%, #22160e); }
body.scene-shop .box.wall { background: linear-gradient(160deg, #2b1512, #1c0f0c 60%, #160b09); }
body.scene-shop .rowlabel { color: #8a7355; }
body.scene-shop #side { background: #1a110b; }
body.scene-shop #detail { background: linear-gradient(170deg, #efe3c8, #e0d0ae); }

/* ---------- 场景：行 ----------
   柜台成了货栈：木头褪成江边的灰蓝，灯是清晨的水光，产业的盒子是茶箱的柚木色。两种语言同一套颜色。 */
body.scene-hong { --paper: #e9e2d0; --paper2: #d9d0b8; --wood: #151b21; --wood2: #24303a; --lamp: rgba(190, 215, 235, 0.2); }
body.scene-hong #head { background: linear-gradient(#222c35, #182028); border-bottom: 1px solid rgba(140,160,175,0.45); box-shadow: 0 1px 0 rgba(201,163,95,0.2); }
body.scene-hong #table { background: linear-gradient(#1a222a, #10161b); border-top: 1px solid rgba(140,160,175,0.45); box-shadow: inset 0 1px 0 rgba(201,163,95,0.2); }
body.scene-hong .box, body.scene-hong .box.wall.flipped { background: linear-gradient(160deg, #303b43, #202a30 60%, #181f24); }
body.scene-hong .box.asset { background: linear-gradient(160deg, #4a3524, #30211a 60%, #251913); }
body.scene-hong .box.wall { background: linear-gradient(160deg, #2b1a1a, #1c1012 60%, #150c0c); }
body.scene-hong .rowlabel { color: #7d8a90; }
body.scene-hong #side { background: #10161b; }
body.scene-hong #detail { background: linear-gradient(170deg, #ebe5d3, #dad2ba); }
body.scene-hong #head .year { color: #a9b6bf; }

/* ======================================================================
   质感层（密教模拟器 / 苏丹的游戏那个方向）：
   纸有纤维、木有纹理、卡有画框和小画、盒有铜钉、幕布有裱边。
   全部叠在原有配色之上，不新增任何 body.en 规则——两种语言颜色完全一致。
   ====================================================================== */

/* ---- 卡：旧纸 + 双线画框 + 角上的磨损 ---- */
.card { box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 0 24px rgba(96,66,34,0.25); }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0 0.1 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  opacity: 0.28; mix-blend-mode: multiply;
}
.card::after {
  content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 2px;
  opacity: 0.3; pointer-events: none;
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 2.5px rgba(0,0,0,0);
}
.card .frame2 { display: none; }
/* 深色卡的噪点用叠白，不然会糊成黑 */
.card.zihao::before, .card.chabiao::before, .card.guanchai::before { mix-blend-mode: overlay; opacity: 0.2; }
/* 卡面小画：垫在字底下，笔画颜色跟着卡的字色走 */
.card .emblem { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.4; }
.card .emblem svg { width: 46px; height: 46px; transform: translate(-6px, 8px); filter: url(#ink); }
.card.qian .emblem { display: none; }
/* 有画之后，性相小字垫一条纸色，别跟画搅在一起 */
.card .asp { z-index: 1; }
.card .nm { z-index: 1; }

/* ---- 盒子：木匣 + 四角铜钉 + 刻出来的字 ---- */
.box::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background-image:
    radial-gradient(circle 2.5px at 7px 7px, rgba(201,163,95,0.8) 60%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 7px) 7px, rgba(201,163,95,0.8) 60%, transparent 65%),
    radial-gradient(circle 2.5px at 7px calc(100% - 7px), rgba(201,163,95,0.8) 60%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 7px) calc(100% - 7px), rgba(201,163,95,0.8) 60%, transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
  opacity: 0.55;
}
.box { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 0 rgba(240,220,180,0.07), 0 10px 26px rgba(0,0,0,0.6); }
.box .glyph { text-shadow: 0 -1px 1px rgba(0,0,0,0.85), 0 1px 1px rgba(240,220,180,0.14); }
/* 墙：铁钉、暗一层的木 */
.box.wall::before {
  background-image:
    radial-gradient(circle 2.5px at 7px 7px, rgba(120,60,50,0.9) 60%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 7px) 7px, rgba(120,60,50,0.9) 60%, transparent 65%),
    radial-gradient(circle 2.5px at 7px calc(100% - 7px), rgba(120,60,50,0.9) 60%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 7px) calc(100% - 7px), rgba(120,60,50,0.9) 60%, transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}

/* ---- 桌面：木板缝 + 木纹 ---- */
#table::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3000px; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 187px, rgba(0,0,0,0.35) 187px 189px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
  opacity: 0.5;
}

/* ---- 棋盘后面的布景：桌是墙上的一圈灯晕；铺是直棂窗；行是江岸与帆影 ---- */
#app::before {
  content: ""; position: absolute; top: 54px; left: 0; right: 300px; bottom: 204px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 8%, rgba(255,190,110,0.07), transparent 60%);
}
body.scene-shop #app::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 6%, rgba(255,200,130,0.09), transparent 60%),
    repeating-linear-gradient(90deg, rgba(201,163,95,0.05) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(201,163,95,0.05) 0 2px, transparent 2px 40px);
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.35) 45%, transparent 78%);
  mask-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.35) 45%, transparent 78%);
}
body.scene-hong #app::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 6%, rgba(190,215,235,0.08), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='260' viewBox='0 0 900 260'><g fill='none' stroke='%2393a7b4' stroke-linecap='round'><path d='M0 168 Q90 128 190 158 Q290 118 400 152 Q520 108 640 150 Q760 122 900 156' stroke-width='3' opacity='0.35'/><path d='M40 196 H190 M240 202 H420 M470 196 H610 M680 204 H860' stroke-width='2' opacity='0.3'/><path d='M120 236 H320 M420 240 H600 M660 232 H900' stroke-width='2' opacity='0.2'/></g><g fill='%2393a7b4' opacity='0.4'><path d='M700 130 l3 -44 l2 44 Z'/><path d='M706 96 q16 8 0 26 Z'/><path d='M760 140 l3 -34 l2 34 Z'/><path d='M765 114 q13 7 0 20 Z'/><path d='M690 140 q40 14 84 0 l-10 12 h-64 Z'/></g></svg>") 50% 100% / 1200px auto no-repeat;
}

/* ---- 侧栏细看页与大幕：纸的纤维 + 裱边 ---- */
#detail::before, #overlay .sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0 0.1 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  opacity: 0.22; mix-blend-mode: multiply;
}
#overlay .sheet::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(90,50,30,0.5); box-shadow: 0 0 0 3px rgba(90,50,30,0.12), inset 0 0 0 2px rgba(232,216,180,0.6);
}
#detail > * { position: relative; }
#overlay .sheet > * { position: relative; }
/* 细看页右上的大图：跟卡面同一张，墨色淡一层 */
#detail .demblem { position: absolute; right: 12px; top: 10px; width: 84px; height: 84px; opacity: 0.3; pointer-events: none; }
#detail .demblem svg { width: 100%; height: 100%; color: #3a2a18; filter: url(#ink); }
#detail h3 { padding-right: 80px; }
/* 木刻整图版的细看大图：不透明、带一点画框；用浮动让正文绕开它 */
#detail .demblem.img { opacity: 1; width: 88px; height: auto; position: relative; float: right; right: 0; top: 0; margin: 2px 0 8px 10px; }
#detail .demblem.img img { width: 100%; display: block; border: 1px solid rgba(60,40,20,0.5); box-shadow: 0 3px 10px rgba(0,0,0,0.35); transform: rotate(1.2deg); }

/* ======================================================================
   正式画风：朱墨双色木刻（推背图那种发凉的静）。
   卡是整幅木刻印张，游戏只负责把字排在纸边上——图里永远没有字，
   所以中英文共用同一批图、同一套颜色。
   ====================================================================== */
.card { width: 116px; height: 160px; }
.stack { width: 116px; height: 160px; }
.card .nm { height: 136px; }
#app { grid-template-rows: 54px 1fr 204px; }
.slot .card { transform: scale(0.42); }
/* 木刻卡：整图打底。图自带纸与刀痕，去掉噪点层；字压在纸边上，加一圈纸色的托 */
.card.painted { background-size: cover; background-position: center; color: var(--ink); }
.card.painted::before { display: none; }
.card.painted::after { border-color: rgba(40,28,16,0.55); opacity: 0.5; }
.card.painted .nm,
.card.painted .asp { text-shadow: 0 0 4px rgba(236,224,196,0.95), 0 0 8px rgba(236,224,196,0.9), 0 0 14px rgba(236,224,196,0.8); }
.card.painted .seal { background: rgba(236,224,196,0.55); }
.card.painted .life i { box-shadow: 0 0 0 2px rgba(236,224,196,0.55); }
.card.painted .cargo i { box-shadow: 0 0 0 2px rgba(236,224,196,0.55); }
/* 深色特种卡（字号、茶标、关差）原来的浅字色不再适用：木刻纸底一律墨字 */
.card.zihao.painted .nm, .card.chabiao.painted .nm, .card.guanchai.painted .nm { color: var(--ink); }
.card.zihao.painted .asp, .card.chabiao.painted .asp, .card.guanchai.painted .asp { color: #6b5b3e; }
.card.zihao.painted .seal, .card.chabiao.painted .seal, .card.guanchai.painted .seal { border-color: var(--seal); color: var(--seal); }
.card.pochan.painted .nm { color: var(--ink); }
.card.qian.painted { cursor: default; }

/* 动词盒的无字图标：一张小印张贴在木匣上。两种语言同图同位，名字只在悬停与细看页 */
.box .glyph.picto {
  width: 78px; height: 78px; margin: 2px auto 4px; filter: none;
  background-color: #e2d3ae; background-size: cover; background-position: center;
  border: 1px solid rgba(20,12,8,0.7); border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(236,224,196,0.35);
  transform: rotate(-1.2deg);
}
.box.asset .glyph.picto { transform: rotate(1deg); }
body.en .box .glyph.picto { margin: 2px auto 4px; width: 78px; height: 78px; }

/* 棋盘远景：一条木刻印张的横带贴着桌沿，若隐若现。三个场景各一张，两种语言同图 */
#app::after {
  content: ""; position: absolute; top: 54px; left: 0; right: 300px; bottom: 204px; z-index: -1; pointer-events: none;
  background: url("art/scene_table.jpg") bottom center / 100% auto no-repeat;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(transparent 15%, rgba(0,0,0,0.85) 70%, black 100%);
  mask-image: linear-gradient(transparent 15%, rgba(0,0,0,0.85) 70%, black 100%);
}
body.scene-shop #app::after { background-image: url("art/scene_shop.jpg"); }
body.scene-hong #app::after { background-image: url("art/scene_hong.jpg"); opacity: 0.15; }

/* 标题页主视觉：Codex 那张三桅木刻船，垫在题字底下 */
#title { background: #0b0806 url("art/title.jpg") center 38% / min(72vw, 900px) auto no-repeat; }
#title::before { display: none; }
#title h1 { text-shadow: 0 0 18px rgba(11,8,6,0.95), 0 0 36px rgba(11,8,6,0.9); }
#title p { text-shadow: 0 0 12px rgba(11,8,6,0.95); color: #a08d6f; }
#title button, #title small { text-shadow: 0 0 10px rgba(11,8,6,0.9); }

/* ---- 标题页：一枚方孔钱的影子压在题字后面 ---- */
#title::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  border: 30px solid rgba(201,163,95,0.07); box-shadow: inset 0 0 60px rgba(201,163,95,0.05);
  pointer-events: none;
}
#title::after {
  content: ""; position: absolute; width: 110px; height: 110px;
  border: 3px solid rgba(201,163,95,0.08); transform: rotate(0deg);
  pointer-events: none;
}
#title h1, #title p, #title button { position: relative; z-index: 1; }
#langs, #title small { z-index: 1; }   /* 这两个本来就是绝对定位，别动它们的位置 */

/* ======================================================================
   商店页冲击力第一轮（2026-09-08）：场景从「背景」变「舞台」，压迫挂进画面。
   参照：苏丹的游戏（材质与处刑日）、密教模拟器（密度即深度）。
   ====================================================================== */

/* 场景印张亮一档、露出更多——缩略图里也要认得出灶房/柜台/江岸 */
#app::after {
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.72) 42%, black 82%);
  mask-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.72) 42%, black 82%);
}
body.scene-shop #app::after { opacity: 0.34; }
body.scene-hong #app::after { opacity: 0.36; }

/* 灯的光池：桌是灶口的暖光，铺是两盏柜灯，码头是低处的落日 */
#app::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(255,190,110,0.13), transparent 62%),
    radial-gradient(ellipse 34% 32% at 14% 92%, rgba(255,150,70,0.12), transparent 72%);
}
body.scene-shop #app::before {
  background:
    radial-gradient(ellipse 55% 48% at 28% 6%, rgba(255,200,130,0.16), transparent 60%),
    radial-gradient(ellipse 45% 42% at 76% 10%, rgba(255,190,120,0.13), transparent 64%),
    repeating-linear-gradient(90deg, rgba(201,163,95,0.05) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(201,163,95,0.05) 0 2px, transparent 2px 40px);
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.4) 45%, transparent 80%);
  mask-image: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.4) 45%, transparent 80%);
}
body.scene-hong #app::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 6%, rgba(190,215,235,0.10), transparent 60%),
    radial-gradient(ellipse 30% 26% at 30% 66%, rgba(255,120,60,0.16), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='260' viewBox='0 0 900 260'><g fill='none' stroke='%2393a7b4' stroke-linecap='round'><path d='M0 168 Q90 128 190 158 Q290 118 400 152 Q520 108 640 150 Q760 122 900 156' stroke-width='3' opacity='0.35'/><path d='M40 196 H190 M240 202 H420 M470 196 H610 M680 204 H860' stroke-width='2' opacity='0.3'/><path d='M120 236 H320 M420 240 H600 M660 232 H900' stroke-width='2' opacity='0.2'/></g><g fill='%2393a7b4' opacity='0.4'><path d='M700 130 l3 -44 l2 44 Z'/><path d='M706 96 q16 8 0 26 Z'/><path d='M760 140 l3 -34 l2 34 Z'/><path d='M765 114 q13 7 0 20 Z'/><path d='M690 140 q40 14 84 0 l-10 12 h-64 Z'/></g></svg>") 50% 100% / 1200px auto no-repeat;
}

/* 头顶的悬事牌：收租倒数/欠债。红的时候整块朱砂 */
#doom {
  font-family: var(--kai); font-size: 13px; letter-spacing: 0.14em; white-space: nowrap;
  color: #d8c39a; border: 1px solid rgba(201,163,95,0.55); border-radius: 3px; padding: 3px 11px;
  background: rgba(58,38,20,0.55); box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}
#doom.hot {
  color: #f4e6cb; border-color: #c9a35f;
  background: linear-gradient(150deg, rgba(158,43,37,0.92), rgba(104,24,20,0.92));
  box-shadow: 0 0 14px rgba(158,43,37,0.55), inset 0 0 0 1px rgba(244,230,203,0.25);
}
body.en #doom { font-family: "Palatino Linotype", Palatino, serif; font-variant: small-caps; letter-spacing: 0.08em; }

/* 封条：还压着你的墙，斜贴一张黄纸——「封」 */
.fengtiao {
  position: absolute; right: 7px; top: -7px; z-index: 3; pointer-events: none;
  writing-mode: vertical-rl; font-family: var(--kai); font-size: 15px; letter-spacing: 0.4em;
  color: #241708; background: linear-gradient(100deg, #e6d29b, #d2ba7c 70%, #c4ab6d);
  padding: 12px 3px 16px; transform: rotate(7deg);
  border: 1px solid rgba(84,58,26,0.65); box-shadow: 0 3px 9px rgba(0,0,0,0.55);
}
.fengtiao::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--seal); box-shadow: inset 0 0 0 1px rgba(244,230,203,0.5);
}
body.en .fengtiao { font-family: "Palatino Linotype", Palatino, serif; font-size: 8px; letter-spacing: 0.3em; padding: 10px 4px 15px; }

/* 怨到五道：整面墙从里面透出朱砂，刻痕发亮 */
.box.wall.grudge { box-shadow: inset 0 0 30px rgba(158,43,37,0.5), 0 0 16px rgba(158,43,37,0.26); }
.box.wall.grudge .tallymarks i { filter: drop-shadow(0 0 4px rgba(224,72,58,0.9)); }
.box.wall.grudge .tallymarks { transform: scale(1.18); transform-origin: left center; }

/* 欺数章：怒气直读——账房把恨记成数，一枚朱砂小章就盖在刻痕旁边 */
.tallymarks { position: relative; }
.box.wall.grudge { z-index: 2; }   /* 怨气墙压过邻座，章不被隔壁盖住 */
.qibadge {
  position: absolute; right: 0; top: 50%; z-index: 3; pointer-events: none;
  font-family: var(--kai); font-size: 17px; letter-spacing: 0.08em; white-space: nowrap;
  color: #f4e6cb; background: var(--seal); padding: 3px 7px 2px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px #f4e6cb, inset 0 0 0 3px var(--seal), 0 0 12px rgba(158,43,37,0.6);
  transform: translate(0, -50%) rotate(-7deg);
}
body.en .qibadge { font-family: "Palatino Linotype", Palatino, serif; font-size: 14px; }

/* 清算巨印：判词纸上一枚半透的大印压着全文——这本账，今日一并清了 */
.bigslam {
  position: absolute; right: 26px; bottom: 10px; z-index: 1; pointer-events: none;
  font-family: var(--kai); font-size: 210px; line-height: 1; color: rgba(155,41,34,0.16);
  border: 10px solid rgba(155,41,34,0.13); border-radius: 10px; padding: 10px 18px;
  transform: rotate(-13deg);
}
body.en .bigslam { font-size: 88px; padding: 26px 20px; letter-spacing: 0.04em; }
#overlay .sheet button { position: relative; z-index: 2; }

/* 在烧的盒子：暖光从匣缝里漏出来——缩略图里也看得出「活着」 */
.box.running { box-shadow: inset 0 0 24px rgba(255,150,60,0.13), 0 0 12px rgba(255,150,60,0.11); }
.incense b { width: 12px; height: 12px; box-shadow: 0 0 14px 5px rgba(255,140,50,0.8); }

/* 被打矮的身格：三天里够不着的顶——他的印子盖在你的血槽上 */
#body i.capped { background: #3d1210; box-shadow: inset 0 0 0 1px rgba(158,43,37,0.75); opacity: 1; }

/* 雕花边：回纹刻在匣沿上，四角铜钉之间走一圈——材质密度的一小格（墙不刻：墙是铁与官印的脸） */
.box::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none; border-radius: 3px; opacity: 0.42;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8'><path d='M1 7 V1 H13 M5 1 V5 H9 V3' fill='none' stroke='%23c9a35f' stroke-width='1'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8'><g transform='scale(1,-1) translate(0,-8)'><path d='M1 7 V1 H13 M5 1 V5 H9 V3' fill='none' stroke='%23c9a35f' stroke-width='1'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='14'><g transform='rotate(90 4 4)'><path d='M1 7 V1 H13 M5 1 V5 H9 V3' fill='none' stroke='%23c9a35f' stroke-width='1'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='14'><g transform='rotate(-90 4 10)'><path d='M1 7 V1 H13 M5 1 V5 H9 V3' fill='none' stroke='%23c9a35f' stroke-width='1'/></g></svg>");
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 8px 0, 8px 100%, 0 8px, 100% 8px;
  background-size: 14px 8px, 14px 8px, 8px 14px, 8px 14px;
}
.box.wall::after { display: none; }

/* 燃香：香上有刻度（香钟的呼应），烧过的一段是灰 */
.incense { height: 6px; background: repeating-linear-gradient(90deg, rgba(8,5,3,0.7) 0 9px, rgba(90,62,34,0.7) 9px 10px); border-radius: 3px; }
.incense i { background: linear-gradient(90deg, #6b5e4d, #93816a); border-radius: 3px 0 0 3px; }

/* 大幕 v2：暗漆外框 + 铜线 + 判词题字加重 + 朱砂双线 */
#overlay { background: radial-gradient(ellipse 120% 120% at 50% 50%, rgba(4,2,1,0.9) 52%, rgba(58,12,9,0.95)); }
#overlay .sheet {
  width: 620px; padding: 50px 54px 40px;
  border: 1px solid rgba(64,40,20,0.85);
  box-shadow: 0 0 0 7px #26160d, 0 0 0 8px rgba(201,163,95,0.5), 0 46px 100px rgba(0,0,0,0.9);
}
#overlay h2 { font-size: 46px; letter-spacing: 0.2em; border-bottom: 3px double rgba(158,43,37,0.5); padding-bottom: 16px; margin-bottom: 22px; }
#overlay .sheet.arc h2::after { width: 62px; height: 62px; font-size: 38px; right: 32px; top: 28px; }
#overlay p { font-size: 16px; line-height: 2.0; }
body.en #overlay h2 { font-size: 40px; }