:root {
  --paper: #f4ecd8;
  --paper2: #efe5cc;
  --ink: #2b2620;
  --ink-soft: #6b6253;
  --line: #d8cbab;
  --seal: #b03a2e;
  --seal-d: #8f2f25;
  --jade: #2e7d5b;
  --indigo: #2c5aa0;
  --gold: #b8860b;
  --ok: #2e7d5b;
  --shadow: 0 2px 0 rgba(0,0,0,.10), 0 6px 16px rgba(60,40,10,.10);
  --cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* 视口 = letterbox 容器；#stage 是固定虚拟画布、整体等比 scale 居中。 */
html, body { height: 100%; margin: 0; overflow: hidden; font-family: var(--cjk); }
body {
  display: flex; align-items: center; justify-content: center;
  background: #ccbe9a;   /* 画布外的留边色（暖纸暗一档） */
  color: var(--ink);
  font-family: var(--cjk);
  font-size: 15px;
  line-height: 1.5;
}
/* 表单控件默认不继承字体（button/input/select/textarea 各带 UA 字体）→ 强制继承，杜绝 Arial 漏字 */
input, button, select, textarea { font-family: inherit; }

/* 固定设计画布：所有内容在这 1280×824 里布局，JS 设 transform:scale() 适配视口。 */
#stage {
  width: 1280px; height: 824px;
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  transform-origin: center center;
  background: radial-gradient(1200px 500px at 50% -10%, #fbf6e6 0%, var(--paper) 60%);
  border: 1px solid #c4b48a;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(60,40,10,.30);
  overflow: hidden;
  position: relative;
}

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 20px;
  border-bottom: 2px solid var(--line);
  background: linear-gradient(#fbf6e6, var(--paper));
}
.brand { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.brand .sub { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-left: 8px; }
.seedbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.seedbox input {
  width: 110px; padding: 7px 8px; min-height: 34px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px; background: #fffdf6; color: var(--ink);
}

main { flex: 1 1 auto; min-height: 0; padding: 14px 22px; overflow: hidden; }
.foot { flex: 0 0 auto; text-align: center; color: var(--ink-soft); font-size: 12px; padding: 10px; border-top: 1px solid var(--line); }

.boot { text-align: center; padding: 80px 0; color: var(--ink-soft); font-size: 16px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color: var(--seal); border-radius:50%; animation: sp .8s linear infinite; vertical-align: middle; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---- Balatro 式两栏：左账台侧栏 + 右牌桌（只搬布局，配色全留宣纸） ---- */
/* 右栏整体包一层 flex 列：上半（账台+预览）可滚、手牌托盘钉底 → 动作键永不被固定画布裁掉。 */
.screen { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }

/* 右下牌山堆（剩余/整副）+ 发牌动画从这里飞出（GSAP 读它的位置）。 */
.deck-pile { position: absolute; right: 22px; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 4; }
/* 牌山 = 一摞麻将牌（奶白牌身 + 厚底 + 绿色牌背镶嵌，留奶白边框；麻将牌的双色质感）。叠张有景深。 */
.deck-stack { position: relative; width: 52px; height: 68px; filter: drop-shadow(0 5px 7px rgba(40,30,10,.32)); }
.deck-stack span { position: absolute; inset: 0; border-radius: 8px; background: #fdf7e7; border: 1px solid #cdbf9e; border-bottom: 5px solid #c2b083; }
.deck-stack span:nth-child(1) { transform: translate(8px, 8px); filter: brightness(.94); }
.deck-stack span:nth-child(2) { transform: translate(4px, 4px); filter: brightness(.98); }
/* 每张牌的绿色牌背镶嵌（留一圈奶白牌边 → 像真麻将牌背）。 */
.deck-stack span::before { content: ''; position: absolute; inset: 4px 4px 7px; border-radius: 5px; background: linear-gradient(158deg, #5aa67f, var(--jade) 60%, #246149); border: 1px solid #1f5740; box-shadow: inset 0 1px 3px rgba(0,0,0,.22); }
/* 顶张牌背中央的奶白菱形纹。 */
.deck-stack span:nth-child(3)::after { content: ''; position: absolute; left: 50%; top: calc(50% - 1px); width: 15px; height: 15px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 3px; background: #fdf7e7; box-shadow: 0 0 0 2px rgba(34,92,67,.5), 0 1px 2px rgba(0,0,0,.25); }
.deck-count { font-size: 13px; font-weight: 800; color: #365b48; background: #edf3ec; border: 1px solid #cfe0d5; border-radius: 8px; padding: 1px 9px; box-shadow: var(--shadow); }
/* 发牌入场：从牌山方向飞入（--dx/--dy 由 JS 按牌山位置算、--i 错峰）。CSS 合成器驱动，结束回自然位。 */
.tile.dealing { animation: deal-in .44s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: calc(var(--i, 0) * 0.04s); }
@keyframes deal-in { from { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.78) rotate(16deg); opacity: 0; } }
/* play-grid 吃掉上半剩余高、内容超高就自身滚动（手牌托盘在它外面、不受影响）。 */
.play-grid { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.playfield { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; }
/* 牌桌列定高：库存/上一手不缩；预览段吃掉剩余高、内容过高则面板内滚（结果 sticky 不裁）→ 外层永不出滚动条，与伙计数量无关。 */
.playfield > .inventory { flex: 0 0 auto; }
.playfield > .section:has(.preview-slot) { flex: 0 1 auto; min-height: 160px; margin: 0; display: flex; flex-direction: column; }
.playfield > .section:has(.preview-slot) > .preview-slot { flex: 1 1 auto; min-height: 0; }

/* 关卡目标牌（blind chip）：本关 + 目标分 */
.blind-chip { background: linear-gradient(#fff7e2, #f7eccf); border: 1px solid var(--gold); border-bottom-width: 3px; border-radius: 12px; padding: 9px 12px; box-shadow: var(--shadow); text-align: center; }
.blind-chip .lv { font-size: 15px; color: var(--ink); font-weight: 800; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.blind-chip .lv-prog { font-size: 11px; color: var(--ink-soft); font-weight: 700; opacity: .8; }
.blind-chip .aura { font-size: 10px; font-weight: 800; color: #fff; background: var(--seal); border-radius: 6px; padding: 1px 6px; letter-spacing: .5px; box-shadow: 0 1px 2px rgba(0,0,0,.22); }
.blind-chip .goal { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.blind-chip .goal b { font-size: 20px; color: var(--seal); }
/* 招牌客关：账台牌位染红 + 招牌客条（名字 + 目标×倍 + 效果散文） */
.blind-chip.boss-chip { background: linear-gradient(#fdeee7, #f8ddd2); border-color: var(--seal); }
.blind-chip .boss { margin-top: 7px; padding-top: 7px; border-top: 1px dashed #d9a99c; }
.blind-chip .boss-name { font-size: 13px; font-weight: 800; color: var(--seal); display: flex; align-items: center; justify-content: center; gap: 5px; }
.blind-chip .boss-mult { font-size: 10px; font-weight: 800; color: #fff; background: var(--seal); border-radius: 5px; padding: 1px 5px; }
.blind-chip .boss-eff { font-size: 11px; line-height: 1.35; color: var(--ink); margin-top: 3px; text-align: center; }

/* 本关分大读数 */
.score-big { background: var(--paper2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; box-shadow: var(--shadow); text-align: center; }
.score-big .k { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.score-big .v { font-size: 40px; font-weight: 900; line-height: 1; color: var(--ink); letter-spacing: 1px; }

/* 进度条（沿用旧样式，挪进侧栏、居中） */
.quota-wrap { margin: 0; }
.quota-bar { height: 10px; background: var(--paper2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.quota-fill { height: 100%; background: linear-gradient(90deg, var(--jade), var(--ok)); transition: width .25s ease; }
.quota-fill.met { background: linear-gradient(90deg, var(--gold), #d8a629); }
.quota-text { font-size: 11px; color: var(--ink-soft); margin-top: 4px; text-align: center; }

/* ⭐ 签名读数：总分 ⊗ 总倍（小丑牌灵魂；配色用茶馆靛蓝/印章红） */
.scorebox { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); border-bottom-width: 3px; }
.scorebox .half { flex: 1; padding: 10px 6px; text-align: center; color: #fff; transition: filter .15s ease; }
.scorebox .chips { background: linear-gradient(#3a6db5, var(--indigo)); }
.scorebox .mult { background: linear-gradient(#c4493b, var(--seal)); }
.scorebox .half .k { font-size: 10px; font-weight: 700; opacity: .85; }
.scorebox .half .v { font-size: 30px; font-weight: 900; line-height: 1; }
.scorebox .x { display: flex; align-items: center; justify-content: center; padding: 0 10px; background: #2b2620; color: #fff7e2; font-size: 22px; font-weight: 900; }
.scorebox.idle .half { filter: saturate(.45) brightness(.97); opacity: .8; }

/* 计数器三联：出牌 / 换牌 / 银两 */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.counter { background: var(--paper2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 6px; text-align: center; box-shadow: var(--shadow); }
.counter .k { font-size: 10px; color: var(--ink-soft); font-weight: 700; }
.counter .v { font-size: 20px; font-weight: 800; }
.counter.silver .v { color: var(--gold); }
.counter.plays .v { color: var(--jade); }
.counter.discards .v { color: var(--indigo); }

/* ---- section ---- */
.section { margin: 16px 0; }
.section > h3 { margin: 0 0 4px; font-size: 14px; color: var(--ink-soft); font-weight: 700; letter-spacing: .5px; }

/* ---- 手牌托盘（满宽、单行居中，多了横向滚动兜底；小丑牌式底部牌桌） ---- */
.hand-dock { flex: 0 0 auto; margin-top: 12px; background: var(--paper2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 10px; box-shadow: var(--shadow); }
.hand-dock > h3 { margin: 0 0 4px; font-size: 14px; color: var(--ink-soft); font-weight: 700; letter-spacing: .5px; }
/* 上内边距 18：给选中牌 translateY(-12) + hover 抖动留竖向空间（overflow-x:auto 会隐式裁竖向溢出 → 不留空间会截断牌顶）。 */
.hand { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; overflow-x: auto; overflow-y: visible; padding: 14px 2px 6px; }
.tile {
  flex: 0 0 auto;
  width: 48px; height: 62px; padding: 4px 2px;
  border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 8px;
  background: #fffdf6; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: var(--shadow); transition: transform .08s ease, box-shadow .08s ease;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", var(--cjk);
}
.tile .g { font-size: 36px; line-height: .82; color: var(--ink); }
.tile .lab { font-size: 10px; font-weight: 700; color: var(--ink-soft); font-family: var(--cjk); }
/* 小丑牌式手感：悬停弹起 + 轻抖（已选的不抖，保持抬起态） */
.tile:not(.sel):hover { transform: translateY(-4px); animation: tile-wobble .45s ease; }
@keyframes tile-wobble {
  0%   { transform: translateY(-4px) rotate(0); }
  30%  { transform: translateY(-6px) rotate(-2.5deg); }
  65%  { transform: translateY(-6px) rotate(2.5deg); }
  100% { transform: translateY(-4px) rotate(0); }
}
.tile.sel { transform: translateY(-12px); border-color: var(--seal); box-shadow: 0 10px 18px rgba(176,58,46,.25); outline: 2px solid var(--seal); }
.tile.wan  .g { color: var(--seal); }
.tile.tiao .g { color: var(--jade); }
.tile.tong .g { color: var(--indigo); }
.tile.zi   .g { color: var(--ink); }
.tile.zi   { background: #f6efdc; }
.tile.chip { width: 26px; height: 34px; border-bottom-width: 1px; cursor: default; box-shadow: none; gap: 0; }
.tile.chip .g { font-size: 18px; }
.tile.chip .lab { font-size: 7px; }
.tile.chip:hover { transform: none; }
/* 招牌客封掉的牌（忌门客封门 / 厌字客字牌 等）：灰化 + 红叉，像 Balatro debuff —— 这张本关不计分 */
.tile.debuffed { position: relative; filter: grayscale(.75) brightness(.92); }
.tile.debuffed .g, .tile.debuffed .lab { opacity: .5; }
.tile.debuffed::after {
  content: '✕'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 900; line-height: 1;
  color: var(--seal); opacity: .85;
  text-shadow: 0 1px 3px rgba(255,253,246,.95), 0 0 2px rgba(255,253,246,.95);
  pointer-events: none;
}

/* ---- buttons ---- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hand-dock .actions { justify-content: center; margin-top: 8px; }
.btn {
  padding: 9px 18px; font-size: 15px; font-weight: 700; font-family: inherit;
  border: 1px solid var(--seal-d); border-bottom-width: 3px; border-radius: 9px;
  background: var(--seal); color: #fff; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.btn.ghost { background: #fffdf6; color: var(--ink); border-color: var(--line); }
.btn.jade { background: var(--jade); border-color: #246448; }
.btn.gold { background: var(--gold); border-color: #946c08; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-bottom-width: 2px; }

/* ---- preview / breakdown ---- */
.panel { background: var(--paper2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.panel.muted { color: var(--ink-soft); text-align: center; padding: 22px; display: flex; align-items: center; justify-content: center; }
/* 空态预览：列布局，提示 + 淡化的「总分 ⊗ 总倍 = 分」输出骨架（镜出形状、不假装有数）。 */
.panel.muted.preview-empty { flex-direction: column; gap: 14px; }
.preview-empty .pe-hint { max-width: 300px; font-size: 13px; line-height: 1.6; }
.preview-empty .pe-skel { opacity: .45; font-size: 15px; font-weight: 600; letter-spacing: .5px; }
.preview-empty .pe-skel b { font-size: 18px; }
.preview-empty .pe-skel .x { margin: 0 3px; }
/* 预览槽：最小高（空态不塌、不跳），内容多则自然长高、不再内部裁切「预计」行；外层 .play-grid 兜整体滚动。 */
.preview-slot { min-height: 0; }
/* 面板填满预览段、内容超高则内滚；预计/总账 sticky → 结果行永不被裁。 */
.preview-slot > .panel { height: 100%; overflow-y: auto; box-sizing: border-box; }
.bd-score { position: sticky; top: 0; background: var(--paper2); font-size: 15px; margin-bottom: 4px; padding-bottom: 2px; }
.bd-score b { font-size: 22px; color: var(--seal); }
.bd-melds { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; }
.bd-meld { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bd-meld .mn { font-weight: 700; min-width: 42px; }
.bd-meld .calc { color: var(--ink-soft); font-size: 13px; }
.bd-loose { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 2px 0 0; opacity: .5; }
.bd-loose .ll { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.bd-schools { display: flex; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.badge { background: #fff7e2; border: 1px solid var(--gold); color: #8a6608; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.badge.hc { background: #f1ece0; border-color: var(--line); color: var(--ink-soft); }
/* v0.6 池总账：总分 × 总倍 = 分 */
.bd-pool { position: sticky; bottom: 0; background: var(--paper2); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 15px; font-weight: 600; }
.bd-pool b { font-size: 18px; color: var(--seal); }

/* ---- jokers / shop ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.card { background: #fffdf6; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.card .name { font-weight: 800; font-size: 15px; }
.card .name .rar { font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-left: 6px; }
.card .eff { font-size: 12px; color: var(--ink-soft); min-height: 20px; }
.card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .price { font-weight: 800; color: var(--gold); }
.empty { color: var(--ink-soft); font-size: 13px; padding: 6px 2px; }

/* ---- 库存行：伙计组 + 消耗品组并排（固定最小高，空态不塌） ---- */
.inventory { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; min-height: 88px; }
.inv-group { flex: 1 1 320px; min-width: 0; }
.inv-group > h3 { margin: 0 0 5px; font-size: 14px; color: var(--ink-soft); font-weight: 700; letter-spacing: .5px; }
.inv-group.consumables { flex: 0 1 300px; }

/* 消耗品槽（右上）：持有卡 + 空槽 */
.con-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.con-card { width: 132px; background: #fffdf6; border: 1px solid var(--gold); border-bottom-width: 3px; border-radius: 10px; padding: 8px 9px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; }
.con-card .cn { font-weight: 800; font-size: 14px; }
.con-card .ce { font-size: 11px; color: var(--ink-soft); min-height: 28px; line-height: 1.3; }
.con-card.dim { opacity: .55; filter: grayscale(.3); }
.con-slot.empty { width: 132px; min-height: 80px; border: 1px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #cdbf9e; font-size: 26px; padding: 0; }

/* 商店四类货：角标 + 类色边 */
.kind-tag { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--ink-soft); color: #fff; margin-bottom: 2px; }
.card.shop-joker .kind-tag { background: var(--seal); }
.card.shop-consumable .kind-tag { background: var(--gold); }
.card.shop-planet .kind-tag { background: var(--indigo); }
.card.shop-voucher .kind-tag { background: var(--jade); }
.card.shop-planet { border-color: #b9c7e0; }
.card.shop-voucher { border-color: #b3d6c4; }
.card.shop-consumable { border-color: #e6d39a; }

/* 用消耗品流程横幅（手牌托盘内） */
.hand-dock.flow { outline: 2px solid var(--gold); outline-offset: 2px; }
.useflow { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 10px; }
.uf-info { font-size: 13px; color: var(--ink); text-align: center; }
.uf-info b { color: var(--seal); }
.uf-hint { color: var(--ink-soft); margin-left: 6px; }
.uf-args { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.btn.sm.on { background: var(--gold); color: #fff; border-color: #946c08; }
.uf-err { font-size: 12px; color: var(--seal); font-weight: 700; }
.uf-btns { display: flex; gap: 8px; }

/* 牌谱 HUD 浮层 */
.pat-btn { width: 100%; margin-top: 2px; }
.overlay { position: fixed; inset: 0; background: rgba(40,30,15,.45); display: flex; align-items: center; justify-content: center; z-index: 70; padding: 20px; }
.overlay-card { background: linear-gradient(#fbf6e6, var(--paper)); border: 2px solid var(--gold); border-radius: 16px; padding: 18px 22px; box-shadow: 0 18px 50px rgba(80,50,10,.35); max-width: 540px; width: 100%; max-height: 88vh; overflow-y: auto; }
.overlay-card > h3 { margin: 0 0 12px; font-size: 18px; text-align: center; }
.pat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pat { display: flex; flex-direction: column; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf6; }
.pat.school { background: #f1ece0; }
.pat-head { display: flex; align-items: center; justify-content: space-between; }
.pat .pn { font-weight: 700; font-size: 13px; }
.pat .pl { font-size: 12px; font-weight: 800; color: var(--seal); }
.pat-ex { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; min-height: 32px; }
.pat-meld { display: flex; gap: 2px; }
.tile.face.mini { width: 24px; height: 32px; padding: 2px 1px; border-bottom-width: 1px; box-shadow: none; gap: 0; cursor: default; }
.tile.face.mini .g { font-size: 17px; }
.tile.face.mini .lab { font-size: 6px; }
.tile.face.mini:hover { transform: none; animation: none; }
.oc-foot { text-align: center; margin-top: 12px; }

/* ---- end states ---- */
.endcard { text-align: center; padding: 36px 20px; }
.endcard .big { font-size: 40px; font-weight: 900; letter-spacing: 2px; }
.endcard.win .big { color: var(--gold); }
.endcard.lose .big { color: var(--seal); }
.endcard p { color: var(--ink-soft); }

/* ---- 转场动画（纯表现，不碰算分）---- */
@keyframes screen-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.screen.phase-enter { animation: screen-in .28s cubic-bezier(.2,.7,.3,1) both; }

/* 过关结算金条幅：Playing→Shopping 瞬间居中弹出后自退 */
.settle-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 60; animation: settle-scrim 1.6s ease both; }
/* 居中弹「过关」时，背后淡进淡出一层暗罩 → 读成「过关！」的仪式一刻，而非浮在商店卡上的便签。 */
@keyframes settle-scrim { 0%, 100% { background: rgba(40,30,15,0); } 16%, 76% { background: rgba(40,30,15,.24); } }
.settle-card {
  background: linear-gradient(#fffaf0, #fdf1d6); border: 2px solid var(--gold); border-radius: 16px;
  padding: 20px 46px; text-align: center; box-shadow: 0 14px 44px rgba(120,80,10,.30);
  animation: settle-pop 1.6s ease both;
}
.settle-card .t { font-size: 30px; font-weight: 900; color: var(--gold); letter-spacing: 6px; }
.settle-card .m { font-size: 22px; font-weight: 800; color: var(--gold); margin-top: 4px; }
.settle-card .d { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
@keyframes settle-pop {
  0%   { opacity: 0; transform: scale(.72) translateY(8px); }
  14%  { opacity: 1; transform: scale(1.05); }
  24%  { transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02) translateY(-10px); }
}

/* 读数滚动 + 弹一下（银两 / 本关分；通用 .bump，挂在 .score-big/.counter 上） */
.bump { animation: stat-bump .5s ease; }
@keyframes stat-bump { 0%,100% { transform: none; } 35% { transform: scale(1.14); } }

/* ===== 出牌结算演出（GSAP 驱动 transform；中央=结算区只放牌，总分/总倍 复用左侧账台盒）===== */
/* 结算态是整屏板（非暗幕浮层）：左账台 + 库存 + 中央结算区。位移/缩放由 GSAP 内联设置。 */
/* 中央结算区（占「结算预览」位）：居中放打出的牌；飞入时不被裁。 */
.preview-slot.settle-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow: visible; cursor: pointer; }
.s2-type { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--ink); min-height: 22px; }
.s2-cards { display: flex; gap: 8px; position: relative; }
.s2-slot { position: relative; display: inline-flex; }
.s2-slot.loose { opacity: .5; }
.s2-slot .tile.face { box-shadow: 0 6px 16px rgba(60,40,10,.28); }
.s2-slot .tile.face.dim { filter: grayscale(.55) brightness(.92); }
.s2-delta { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); font-size: 24px; font-weight: 900; pointer-events: none; text-shadow: 0 2px 6px rgba(255,247,226,.9); animation: s2-float .72s ease-out both; white-space: nowrap; z-index: 3; }
.s2-delta.chips { color: var(--indigo); }
.s2-delta.mult, .s2-delta.xmult { color: var(--seal); }
@keyframes s2-float {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.8); }
  20%  { opacity: 1; transform: translate(-50%, -8px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(1); }
}
.inventory .jokers .card.s2-glow { outline: 2px solid var(--gold); box-shadow: 0 0 22px 5px rgba(255,205,70,.85); border-radius: 10px; z-index: 5; }
/* 砸分红字：盖在左侧账台 总分⊗总倍 盒上。 */
.scorebox { position: relative; }
.score-slam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--paper2); border-radius: 12px; color: var(--seal); font-size: 38px; font-weight: 900; line-height: 1; text-shadow: 0 2px 10px rgba(176,58,46,.3); }
/* 结算态底部托盘：剩余手牌、非交互，淡一点提示「这些没打出」。 */
.settle-dock .hand .tile.face { cursor: default; }

/* 通关/倒闭大字入场 */
.endcard .big { animation: big-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes big-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .screen.phase-enter, .settle-overlay, .settle-card, .settle-stage, .settle-stage *, .bump, .endcard .big, .tile:hover { animation: none !important; }
}

/* 窄屏：两栏堆叠，账台回到顶部（不再 sticky） */
@media (max-width: 760px) {
  .play-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}