:root {
  /* ── 颜色：午夜墨黑 + 香槟金 + 祖母绿牌毡 ───────────── */
  --felt: #0e5c40;
  --felt-light: #1b7d5b;
  --felt-dark: #04291d;
  --rail: #2a170d;
  --rail-light: #6b4a2a;
  --rail-dark: #150b06;
  --ink: #06080b;
  --panel: #0f151d;
  --panel-soft: #151d27;
  --panel-raise: #1a2430;
  --line: rgba(214, 181, 118, 0.18);
  --line-soft: rgba(255, 255, 255, 0.06);
  --text: #f0eadc;
  --muted: #93a0ae;
  --gold: #d9b877;
  --gold-bright: #f5e3b3;
  --gold-deep: #8c6d36;
  --gold-line: rgba(217, 184, 119, 0.32);
  --red: #d06a61;
  --green: #59c08d;
  /* 动作语义色：牌桌、徽标、按钮共用一套，保证"同一个动作到处都是同一个颜色" */
  --act-fold: #d06a61;
  --act-fold-bg: #3a1e20;
  --act-check: #8ba3be;
  --act-check-bg: #202c39;
  --act-call: #6cb6ef;
  --act-call-bg: #16324a;
  --act-raise: #f0c974;
  --act-raise-bg: #42331a;
  --act-allin: #ff6b62;
  --act-allin-bg: #4a1a1e;

  /* ── 插画头像色板（人物 201..208 / 动物 301..308） ── */
  --av-skin-1: #f2d2b6; --av-skin-2: #e3b391; --av-skin-3: #c98d63; --av-skin-4: #a06844; --av-skin-5: #6f4527;
  --av-hair-1: #2b2521; --av-hair-2: #4a3226; --av-hair-3: #8a5a2b; --av-hair-4: #b9854a; --av-hair-5: #cfc6b8;
  --av-shirt-1: #3b4a5c; --av-shirt-2: #4d4038; --av-shirt-3: #4a5550; --av-shirt-4: #57414d;
  --av-fur-1: #d9a86a; --av-fur-2: #b9b3a8; --av-fur-3: #8f8c86; --av-fur-4: #ece6dc;
  --av-feature: #2a2622; --av-cheek: rgba(226, 138, 120, 0.35);

  /* ── 形状与阴影 ───────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* ── 间距（统一 8px 栅格，杜绝 6/10/14 混用） ─────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── 字号 ─────────────────────────────────────────── */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;

  --font-body: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-display: "Palatino Linotype", "Book Antiqua", Georgia, "Songti SC", "SimSun", serif;
  --font-num: "Bahnschrift", "DIN Alternate", "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(217, 184, 119, 0.28);
  color: #fff8e8;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 720px at 50% -12%, rgba(23, 86, 63, 0.42), transparent 62%),
    radial-gradient(900px 620px at 12% 24%, rgba(217, 184, 119, 0.07), transparent 58%),
    radial-gradient(900px 620px at 88% 12%, rgba(126, 62, 44, 0.1), transparent 56%),
    linear-gradient(180deg, #080b0f 0%, #06080b 46%, #04060a 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 一层很轻的暗角：让内容像被一束顶光罩在中间 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(0, 0, 0, 0.28) 78%, rgba(0, 0, 0, 0.52) 100%);
}

#app {
  position: relative;
  z-index: 1;
  width: min(1760px, 96vw);
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 28px);
  padding-bottom: clamp(20px, 2.4vw, 40px);
}

/* 细金色滚动条：默认的灰白滚动条会立刻把"高级感"拉回浏览器默认样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 184, 119, 0.32) transparent;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(217, 184, 119, 0.28);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 184, 119, 0.5);
  background-clip: padding-box;
}


.screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.title {
  margin: 8px 0 0;
  font-size: clamp(30px, 3vw, 46px);
  letter-spacing: 4px;
  font-weight: 700;
  line-height: 1.2;
}

.subtitle {
  color: var(--muted);
  margin: 0;
  line-height: 1.85;
  letter-spacing: 0.4px;
}

.card-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%),
    linear-gradient(165deg, rgba(22, 31, 42, 0.92), rgba(9, 13, 18, 0.96));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 面板顶部的金色发丝线：高级感主要来自这种 1px 的细节 */
.card-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 227, 179, 0.55), transparent);
  pointer-events: none;
}

.card-panel h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: 3px;
}

.button-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

button {
  position: relative;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(38, 50, 64, 0.92), rgba(13, 19, 26, 0.98));
  color: var(--text);
  padding: 9px 16px;
  letter-spacing: 0.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 6px rgba(0, 0, 0, 0.35);
  transition:
    filter 0.16s ease,
    transform 0.12s var(--ease-out),
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

button:hover {
  filter: brightness(1.12);
  border-color: var(--gold-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.42);
}

button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* 键盘 Tab 也要看得见焦点，否则快捷键与纯键盘操作没法用 */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

button.primary {
  background:
    linear-gradient(180deg, #f7e7be 0%, #dfc187 42%, #c39c58 78%, #a67f3f 100%);
  border-color: #f0dcae;
  color: #241a0a;
  font-weight: 800;
  padding: 14px 28px;
  font-size: clamp(15px, 1.05vw, 17px);
  letter-spacing: 1.5px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 6px rgba(88, 60, 16, 0.35),
    0 12px 26px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(80, 55, 16, 0.45);
}

button.primary:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 6px rgba(88, 60, 16, 0.3),
    0 16px 34px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(217, 184, 119, 0.18);
}

button.primary.secondary {
  background:
    linear-gradient(180deg, rgba(28, 39, 52, 0.96), rgba(9, 14, 19, 0.98));
  border-color: rgba(217, 184, 119, 0.5);
  color: var(--gold-bright);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.45);
}

.hint {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
  line-height: 1.7;
}

.footer {
  text-align: center;
}

.stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) clamp(16px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
}

/* ── 牌桌 ───────────────────────────────────────────── */

.table-screen {
  gap: var(--space-3);
  /* 一屏之内：头部 + 牌桌 + 动作条，动作条永远在视口底部（dvh 应对移动端地址栏） */
  min-height: calc(100dvh - 2 * clamp(12px, 1.6vw, 28px) - 46px);
}

.table-header {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(43, 57, 73, 0.9), rgba(27, 37, 48, 0.9));
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-md);
  color: var(--muted);
  box-shadow: var(--shadow-2);
}

.table-header .stage {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
}

.header-chip {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.header-chip.place {
  color: var(--gold);
  border-color: rgba(233, 196, 106, 0.35);
}

.table-header .spacer {
  flex: 1;
}

/* 牌毡：中心打光 + 内阴影，竖向随视口长高（横向铺满整行） */
.felt {
  --seat-w: 168px;
  position: relative;
  height: clamp(440px, 64vh, 920px);
  /* 椭圆形桌沿：用百分比而不是固定 px，否则宽屏上会被拉成一条直边 */
  border-radius: 50% / 46%;
  background:
    radial-gradient(ellipse at 50% 42%, var(--felt-light) 0%, var(--felt) 34%, var(--felt-dark) 78%),
    var(--felt-dark);
  border: 10px solid var(--rail);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    0 0 0 3px var(--rail-light),
    0 0 0 5px var(--rail-dark),
    0 22px 50px rgba(0, 0, 0, 0.55);
  container-type: size;
  transition: box-shadow 0.3s ease;
}

/* 轮到自己：整张桌子亮一圈，余光就能看出来 */
.felt.my-turn {
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    0 0 0 3px var(--rail-light),
    0 0 0 5px var(--rail-dark),
    0 0 0 8px rgba(233, 196, 106, 0.28),
    0 22px 50px rgba(0, 0, 0, 0.55);
}

.table-center {
  position: absolute;
  inset: 22% 34% 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.felt-logo {
  font-size: clamp(20px, 3.4cqw, 46px);
  font-weight: 800;
  letter-spacing: 10px;
  color: rgba(255, 255, 255, 0.06);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.pot {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(233, 196, 106, 0.35);
  border-radius: var(--radius-pill);
  padding: 5px 18px;
  font-size: clamp(14px, 1.1cqw, 19px);
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.board {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(6px, 0.6cqw, 12px);
}

/* 最近一个动作：让玩家看清"刚才谁做了什么" */
.last-action {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 18px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(233, 196, 106, 0.4);
  color: var(--gold);
  font-size: clamp(12.5px, 0.95cqw, 16px);
  white-space: nowrap;
  animation: fade-in 0.2s ease;
  box-shadow: var(--shadow-2);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -62%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ── 牌 ─────────────────────────────────────────────── */

.card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 3.9cqw, 78px);
  height: calc(clamp(48px, 3.9cqw, 78px) * 1.4);
  border-radius: calc(clamp(48px, 3.9cqw, 78px) * 0.14);
  background: linear-gradient(160deg, #ffffff, #eef2f7 70%, #dfe6ee);
  color: #16181c;
  font-weight: 700;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.card.red {
  color: #cc2b2b;
}

.card-corner {
  position: absolute;
  top: 6%;
  left: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.card-rank {
  font-size: clamp(13px, 1.15cqw, 22px);
  font-weight: 800;
}

.card-suit-sm {
  font-size: clamp(9px, 0.8cqw, 15px);
}

.card-suit {
  font-size: clamp(20px, 2cqw, 38px);
  opacity: 0.9;
}

.card.back {
  background:
    repeating-linear-gradient(45deg, #2b4a78, #2b4a78 6px, #22395d 6px, #22395d 12px),
    linear-gradient(160deg, #34517d, #1d3050);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.card-back-mark {
  font-size: clamp(14px, 1.4cqw, 26px);
  color: rgba(255, 255, 255, 0.28);
}

/* ── 座位 ───────────────────────────────────────────── */

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--seat-w);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(20, 30, 40, 0.94), rgba(9, 16, 22, 0.94));
  border: 1px solid var(--line);
  text-align: center;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-2);
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.seat.you {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.3), var(--shadow-2);
}

.seat.acting {
  border-color: var(--green);
  box-shadow: 0 0 18px rgba(72, 185, 120, 0.6), var(--shadow-2);
  transform: translate(-50%, -50%) scale(1.04);
}

.seat.folded {
  /* 不能太淡：弃牌了也要看得清是谁弃的、他手里是什么牌面 */
  opacity: 0.72;
  filter: grayscale(0.7);
  transform: translate(-50%, -50%) scale(0.95);
}

.seat.folded .seat-cards .card {
  filter: grayscale(0.9) brightness(0.72);
}

.seat.folded .seat-name {
  text-decoration: line-through;
  text-decoration-color: var(--act-fold);
  text-decoration-thickness: 2px;
}

.seat.allin .seat-stack {
  color: var(--act-allin);
}
.seat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: 2px;
}

.seat-name {
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-tags {
  flex: none;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 10px;
  letter-spacing: 0.5px;
}

.seat-status {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  /* 背景色由 .folded / .allin 决定 */
}

.folded .seat-status {
  background: var(--act-fold-bg);
  color: var(--act-fold);
  border: 1px solid var(--act-fold);
}

.allin .seat-status {
  background: var(--act-allin-bg);
  color: var(--act-allin);
  border: 1px solid var(--act-allin);
}

.seat-stack {
  font-weight: 800;
  font-size: clamp(15px, 1.1cqw, 20px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.seat-cards {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 6px 0 4px;
}

/* 座位上的牌要够大：小牌面根本看不清花色与点数 */
.seat-cards .card {
  width: clamp(46px, 3.4cqw, 70px);
  height: calc(clamp(46px, 3.4cqw, 70px) * 1.38);
}

/* 自己的牌永远比别人的大一点：一眼知道"这是我的" */
.seat.you .seat-cards .card {
  width: clamp(56px, 4.1cqw, 84px);
  height: calc(clamp(56px, 4.1cqw, 84px) * 1.38);
}

/* 最下方（正对自己）的座位是"我"，给它更多一点存在感 */
.seat.zone-bottom {
  z-index: 3;
}

.seat.zone-bottom .seat-stack {
  font-size: clamp(17px, 1.25cqw, 23px);
}

.seat-bet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* 座位上的动作徽标：整条横贯座位——AI 出手快，小角标根本来不及看清 */
.seat-action {
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: clamp(12px, 0.92cqw, 15px);
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid currentColor;
  box-shadow: var(--shadow-2);
  animation: badge-pop 0.28s cubic-bezier(0.2, 1.5, 0.5, 1);
}

@keyframes badge-pop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.seat-action.act-fold {
  color: var(--act-fold);
  background: var(--act-fold-bg);
}
.seat-action.act-check {
  color: var(--act-check);
  background: var(--act-check-bg);
}
.seat-action.act-call {
  color: var(--act-call);
  background: var(--act-call-bg);
}
.seat-action.act-raise,
.seat-action.act-bet {
  color: var(--act-raise);
  background: var(--act-raise-bg);
  box-shadow: 0 0 16px rgba(233, 180, 76, 0.5), var(--shadow-2);
}
.seat-action.act-allin {
  color: var(--act-allin);
  background: var(--act-allin-bg);
  animation: badge-pop 0.28s ease, allin-pulse 1.1s ease-in-out infinite 0.28s;
}

@keyframes allin-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 92, 92, 0.4), var(--shadow-2);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 92, 92, 0.9), var(--shadow-2);
  }
}

/* 弃牌章：直接把「弃牌」压在牌上——只把牌变灰太容易被忽略 */
.seat-cards-wrap {
  position: relative;
}

.fold-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
  padding: 1px 14px;
  border: 3px solid var(--act-fold);
  border-radius: var(--radius-sm);
  background: rgba(22, 6, 8, 0.74);
  color: #ffc0ba;
  font-size: clamp(15px, 1.15cqw, 21px);
  font-weight: 900;
  letter-spacing: 5px;
  text-indent: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: stamp-in 0.32s cubic-bezier(0.2, 1.6, 0.4, 1);
  pointer-events: none;
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-13deg) scale(1.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-13deg) scale(1);
  }
}

/* 刚做过动作的座位：闪一下边，把"刚刚是他"落到具体的座位上 */
.seat.has-action {
  animation: seat-flash 0.5s ease;
}

@keyframes seat-flash {
  from {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), var(--shadow-2);
  }
}

/* 行动中的座位呼吸，一眼看出"现在是他"（配合倒计时环一起用） */
.seat.thinking {
  animation: breathe 2.2s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(72, 185, 120, 0.35), var(--shadow-2);
  }
  50% {
    box-shadow: 0 0 24px rgba(72, 185, 120, 0.75), var(--shadow-2);
  }
}

/* 倒计时环：绕座位转一圈的进度指示，--turn-ms 由视图给出
   （用"旋转的缺口"而不是动画自定义属性：后者需要 @property 注册，
   未注册的浏览器会直接播不动，宁可退化成"匀速转一圈"也不要不动） */
.turn-ring {
  position: absolute;
  inset: -9px;
  border-radius: calc(var(--radius-md) + 7px);
  padding: 3px;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.05) 6deg,
    rgba(72, 185, 120, 0.9) 24deg,
    rgba(72, 185, 120, 0.9) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: turn-drain var(--turn-ms, 3s) linear forwards;
}

.turn-ring.static {
  --turn-ms: 0.1ms;
  opacity: 0.45;
  animation: none;
}

@keyframes turn-drain {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

/* ── 全下特效 ───────────────────────────────────────── */

/* 牌桌震一下：全下是牌局里最重的动作，应该"有分量" */
.felt.allin-shake {
  animation: felt-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes felt-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(-6px, 2px);
  }
  30% {
    transform: translate(5px, -2px);
  }
  45% {
    transform: translate(-4px, 1px);
  }
  60% {
    transform: translate(3px, -1px);
  }
  80% {
    transform: translate(-2px, 0);
  }
}

/* 座位：金红描边炸开一下 */
.seat.allin-flash {
  animation: allin-seat 0.7s ease-out both;
}

@keyframes allin-seat {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.95), var(--shadow-2);
    transform: translate(-50%, calc(-50% + var(--seat-shift, 0px))) scale(1.16);
  }
  60% {
    box-shadow: 0 0 0 18px rgba(255, 92, 92, 0), 0 0 32px rgba(255, 92, 92, 0.7);
    transform: translate(-50%, calc(-50% + var(--seat-shift, 0px))) scale(1.04);
  }
  100% {
    box-shadow: 0 0 24px rgba(255, 92, 92, 0.55), var(--shadow-2);
    transform: translate(-50%, calc(-50% + var(--seat-shift, 0px))) scale(1);
  }
}

/* 牌桌中央的 ALL IN 字样 */
.allin-burst {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: allin-burst 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.allin-burst-text {
  font-size: clamp(30px, 5.2cqw, 78px);
  font-weight: 900;
  letter-spacing: 6px;
  color: #ffe1a8;
  text-shadow:
    0 0 10px rgba(255, 92, 92, 0.9),
    0 0 28px rgba(255, 92, 92, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.85);
}

.allin-burst-who {
  font-size: clamp(13px, 1.2cqw, 20px);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

@keyframes allin-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
    filter: blur(6px);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(1);
  }
}

/* ── 一手结束的结算板 ───────────────────────────────── */

/* 公共牌池：复盘这一手最重要的一行 */
.summary-board {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-soft);
}

.summary-board-label {
  flex: none;
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 1px;
}

.summary-board-cards {
  display: flex;
  gap: 6px;
}

.summary-board-cards .card {
  width: clamp(38px, 3cqw, 54px);
  height: calc(clamp(38px, 3cqw, 54px) * 1.38);
}

/* 空位（翻牌前全场弃牌时没有公共牌）：尺寸跟着牌走，但不是一张牌 */
.card-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3cqw, 54px);
  height: calc(clamp(38px, 3cqw, 54px) * 1.38);
  border-radius: calc(clamp(38px, 3cqw, 54px) * 0.14);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* 牌型：大类单独上色，细节放小一号 */
.hand-cat {
  display: inline-block;
  padding: 0 7px;
  margin-right: 5px;
  border-radius: var(--radius-pill);
  background: rgba(233, 196, 106, 0.16);
  border: 1px solid rgba(233, 196, 106, 0.45);
  color: var(--gold);
  font-weight: 700;
  font-size: var(--text-sm);
}

.hand-detail {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* 结算板盖住公共牌时，底下的牌面/座位退到后面去，避免两套内容互相干扰 */
.felt.show-summary .board,
.felt.show-summary .pot,
.felt.show-summary .seat {
  opacity: 0.3;
  transition: opacity 0.25s ease;
}

.hand-summary {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(720px, 86cqw);
  max-height: 88cqh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(233, 196, 106, 0.45);
  background: linear-gradient(180deg, rgba(11, 18, 26, 0.98), rgba(6, 11, 16, 0.98));
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(0, 0, 0, 0.5);
  animation: summary-in 0.3s cubic-bezier(0.2, 1.3, 0.5, 1);
}

@keyframes summary-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.summary-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-lg);
}

.summary-head strong {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: var(--text-xl);
}

.summary-pot {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-row {
  display: grid;
  /* 玩家 / 亮牌 / 牌型 / 本手 / 剩余 */
  grid-template-columns: minmax(64px, 1fr) auto minmax(64px, auto) 74px 88px;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}

.summary-columns {
  padding: 0 10px;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 1px;
}

.summary-columns .summary-cards,
.summary-columns .summary-hand,
.summary-columns .summary-delta,
.summary-columns .summary-stack {
  text-align: right;
}

.summary-row.you {
  background: rgba(233, 196, 106, 0.08);
}

.summary-row.you .summary-name {
  color: var(--gold);
  font-weight: 700;
}

.summary-row.win .summary-delta {
  color: var(--green);
  font-weight: 800;
}

.summary-row.lose .summary-delta {
  color: var(--act-fold);
  font-weight: 700;
}

.summary-row.even .summary-delta {
  color: var(--muted);
}

.summary-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-cards {
  display: flex;
  gap: 3px;
  align-items: center;
}

.summary-cards .card {
  width: clamp(26px, 2cqw, 38px);
  height: calc(clamp(26px, 2cqw, 38px) * 1.38);
}

.summary-cards .card-rank {
  font-size: clamp(9px, 0.7cqw, 13px);
}

.summary-cards .card-suit-sm {
  font-size: clamp(7px, 0.55cqw, 10px);
}

.summary-cards .card-suit {
  font-size: clamp(12px, 1cqw, 18px);
}

.folded-tag {
  color: var(--muted);
  font-size: var(--text-xs);
  opacity: 0.8;
}

.summary-hand {
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-align: right;
}

.summary-delta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
}

/* 剩余筹码：加扣分之后的总额，玩家最关心的那一列 */
.summary-stack {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

.summary-row.win .summary-stack {
  color: var(--green);
}

.summary-row.lose .summary-stack {
  color: #d9a6a2;
}

/* 结算板底部：牌局停在这里，必须玩家亲手点"确定"才发下一手 */
.summary-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
}

.summary-foot button {
  padding: 9px 20px;
  font-size: var(--text-md);
  animation: confirm-pulse 1.6s ease-in-out infinite;
}

@keyframes confirm-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(233, 196, 106, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(233, 196, 106, 0);
  }
}

/* 一手结束翻牌：从背面"翻"到正面，让玩家看清别人拿了什么 */
.seat-cards.flipped .card {
  animation: card-flip 0.42s cubic-bezier(0.3, 1.2, 0.5, 1) both;
  transform-origin: center;
}

.seat-cards.flipped .card:nth-child(2) {
  animation-delay: 0.09s;
}

@keyframes card-flip {
  from {
    transform: rotateY(-90deg) scale(0.9);
    opacity: 0.4;
  }
  to {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

/* 十点位的 10 比较宽，字号收一点才放得进左上角 */
.card.rank-ten .card-rank {
  font-size: clamp(10px, 0.92cqw, 17px);
  letter-spacing: -0.5px;
}

/* 盲注被加压时给个醒目提示 */
.header-chip.pressure {
  color: var(--act-raise);
  border-color: rgba(233, 180, 76, 0.5);
  font-weight: 700;
  animation: pressure-blink 2s ease-in-out infinite;
}

@keyframes pressure-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ── 筹码小图标 ─────────────────────────────────────── */
.chip-mini {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd97a, #c99b2e 70%, #8a6a1c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  flex: none;
}

/* ── 动作播报条 ─────────────────────────────────────── */

.action-log {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  min-height: 40px;
}

.action-log-title {
  color: var(--muted);
  letter-spacing: 2px;
  flex: none;
}

.log-item {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  animation: fade-in 0.2s ease;
}

.log-item.act-fold {
  color: var(--act-fold);
  opacity: 0.75;
}
.log-item.act-check {
  color: var(--act-check);
}
.log-item.act-call {
  color: var(--act-call);
}
.log-item.act-bet,
.log-item.act-raise {
  color: var(--act-raise);
}
.log-item.act-allin {
  color: var(--act-allin);
}

/* 最早的那条最淡：视线自然落在最新动作上 */
.action-log .log-item:nth-child(2) {
  opacity: 0.55;
}
.action-log .log-item:nth-child(3) {
  opacity: 0.4;
}
.action-log .log-item:nth-child(n + 4) {
  opacity: 0.28;
}

.action-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: linear-gradient(180deg, var(--panel-raise), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-2);
}

.actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.act {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 118px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: clamp(14px, 1vw, 17px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.act-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.act:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.act.fold {
  background: linear-gradient(180deg, #57302f, var(--act-fold-bg));
  border-color: #804545;
  color: #f0c6c2;
}

.act.check,
.act.call {
  background: linear-gradient(180deg, #2c4a68, var(--act-call-bg));
  border-color: #3f6f9c;
  color: #d6ecff;
}

.act.raise {
  background: linear-gradient(180deg, #6a5423, var(--act-raise-bg));
  border-color: #a8842f;
  color: #ffe9b5;
}

.act.allin {
  background: linear-gradient(180deg, #6d2a2e, var(--act-allin-bg));
  border-color: #a8444a;
  color: #ffd6d6;
}

.act.auto {
  margin-left: auto;
  background: transparent;
  color: var(--muted);
  border-style: dashed;
  box-shadow: none;
}

.raise-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 440px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.22);
}

/* 加注信息条：当前注额 / 我还剩多少 / 这一手加多少 */
.raise-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.raise-by {
  margin-left: auto;
  color: var(--act-raise);
  font-weight: 800;
  font-size: var(--text-md);
}

.raise-by.allin {
  color: var(--act-allin);
  animation: pressure-blink 1s ease-in-out infinite;
}

.raise-quick {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

button.allin-quick {
  color: var(--act-allin);
  border-color: rgba(255, 92, 92, 0.55);
  font-weight: 700;
}

.raise-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.raise-slider {
  width: clamp(160px, 22vw, 340px);
  accent-color: var(--gold);
}

.raise-amount {
  min-width: 84px;
  text-align: right;
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

button.tiny {
  padding: 4px 10px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

button.toggle {
  padding: 5px 12px;
}

.hand-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-md);
}

.hand-info-label {
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* 当前牌型：新手看的第一眼 */
.my-hand {
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: rgba(72, 185, 120, 0.14);
  border: 1px solid rgba(72, 185, 120, 0.45);
  color: var(--green);
  font-size: var(--text-md);
}

.my-hand strong {
  color: #7ee2a8;
  letter-spacing: 1px;
}

/* ── 牌型速查面板 ───────────────────────────────────── */

.rankings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: min(620px, 92vw);
  max-height: 84vh;
  overflow: auto;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(233, 196, 106, 0.45);
  background: linear-gradient(180deg, rgba(15, 23, 32, 0.99), rgba(6, 11, 16, 0.99));
  box-shadow: var(--shadow-3);
  animation: summary-in 0.22s cubic-bezier(0.2, 1.3, 0.5, 1);
}

.rankings-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}

.rankings-head strong {
  color: var(--gold);
  font-size: var(--text-lg);
  letter-spacing: 1px;
}

.rankings-head button {
  margin-left: auto;
}

.rankings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  counter-reset: rank;
}

.rankings-row {
  display: grid;
  grid-template-columns: 30px 92px 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.rankings-row::before {
  counter-increment: rank;
  content: counter(rank);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rankings-row:nth-child(1) {
  background: rgba(233, 196, 106, 0.12);
}

.rankings-row:nth-child(1) .rankings-name {
  color: var(--gold);
}

.rankings-name {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 1px;
}

.rankings-explain {
  color: var(--muted);
}

.rankings-example {
  grid-column: 3;
  color: #b8c6d6;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

button.rankings-toggle {
  border-color: rgba(233, 196, 106, 0.35);
  color: var(--gold);
}

button.rankings-toggle.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  font-weight: 700;
}

/* ── 本场局外积分规则面板 ───────────────────────────── */

.meta-panel-note {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;
  width: min(720px, 94vw);
  max-height: 84vh;
  overflow: auto;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(217, 184, 119, 0.45);
  background: linear-gradient(180deg, rgba(15, 23, 32, 0.99), rgba(6, 11, 16, 0.99));
  box-shadow: var(--shadow-3);
  animation: summary-in 0.22s cubic-bezier(0.2, 1.3, 0.5, 1);
}

.meta-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}

.meta-panel-title {
  color: var(--gold);
  font-size: var(--text-lg);
  letter-spacing: 1px;
}

.meta-steepness {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(217, 184, 119, 0.35);
  color: var(--gold);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.meta-panel-head button {
  margin-left: auto;
}

.meta-panel-lead {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}

.meta-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
}

.meta-cell.champion {
  border-color: rgba(217, 184, 119, 0.5);
  background: rgba(217, 184, 119, 0.12);
}

.meta-place {
  color: var(--muted);
  font-size: var(--text-xs);
}

.meta-cell.champion .meta-place {
  color: var(--gold);
}

.meta-points {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.meta-grid-title {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
}

/* 赛后总结里的积分小结 */
.meta-summary-earned {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: var(--text-lg);
  font-weight: 700;
}

.meta-summary-breakdown {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.meta-summary-total {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.waiting,
.loading {
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
}

/* 等待时给个转圈，让人知道程序没卡死 */
.loading::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: var(--space-3) auto 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.footer-bar {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  min-height: 18px;
}

/* ── 成就弹窗 ───────────────────────────────────────── */

.toast-stack {
  position: fixed;
  right: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.toast {
  background: var(--panel);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  animation: slide-in 0.25s ease;
}

.toast span {
  color: var(--muted);
  font-size: 12px;
}

/* 场中成就弹窗：比普通提示更醒目一点点（左边框色由 .rarity-* 提供） */
.toast.achievement {
  border-left-width: 4px;
  animation: achievement-pop 0.28s ease;
}

.toast-kind {
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: 0.12em;
}

@keyframes achievement-pop {
  from {
    transform: translateY(-8px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.rarity-common {
  border-left-color: #8fa3b8;
}
.rarity-rare {
  border-left-color: #4f9de0;
}
.rarity-epic {
  border-left-color: #a86fe0;
}
.rarity-legendary {
  border-left-color: var(--gold);
}

/* 赛后「下一步目标」：把"再来一场"变成"再来一场解锁 X" */
.goal-panel .hint {
  margin-top: -4px;
}

.goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 3px; /* 颜色由 .rarity-* 提供，与成就卡一致 */
}

.goal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.goal-head strong {
  font-size: 14px;
}

.goal-detail {
  color: var(--gold);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.goal-desc {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.goal-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.goal-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ranking,
.achievement-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.9;
}

.ranking .you {
  color: var(--gold);
  font-weight: 600;
}

/* ── 导航 ───────────────────────────────────────────── */

.app-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 6px 14px;
}

.nav-item.active {
  color: var(--gold);
  border-color: var(--line);
  background: var(--panel);
}

.panel-screen {
  gap: 12px;
}

.panel-title {
  margin: 0;
  font-size: 20px;
  color: var(--gold);
}

.panel-screen h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--gold);
  font-weight: 600;
}

.panel-screen h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ── 名录 ───────────────────────────────────────────── */

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 10px;
}

.roster-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
}

.roster-card.human {
  border-color: var(--gold);
}

.roster-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.roster-arch {
  color: var(--gold);
  font-size: 11px;
}

.roster-line {
  color: var(--muted);
}

.roster-line.muted {
  opacity: 0.6;
}

.roster-notes {
  color: var(--green);
  font-size: 11px;
}

/* ── 档案 ───────────────────────────────────────────── */

.profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 12px;
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

.badge {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 12px;
  color: var(--gold);
}

.badge.soft {
  color: var(--muted);
}

.radar {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.radar-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
}

.radar-spoke {
  stroke: rgba(255, 255, 255, 0.08);
}

.radar-innate {
  fill: rgba(147, 164, 184, 0.22);
  stroke: #8fa3b8;
  stroke-width: 1.5;
}

.radar-current {
  fill: rgba(226, 184, 87, 0.22);
  stroke: var(--gold);
  stroke-width: 2;
}

.radar-label {
  fill: var(--muted);
  font-size: 9px;
}

.drift-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drift-row {
  display: grid;
  grid-template-columns: 92px 1fr 34px 52px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.drift-label {
  color: var(--muted);
}

.drift-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}

.drift-innate {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(143, 163, 184, 0.5);
}

.drift-current {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(226, 184, 87, 0.75);
  mix-blend-mode: screen;
}

.drift-value {
  text-align: right;
  color: var(--text);
}

.drift-up {
  color: var(--green);
}

.drift-down {
  color: var(--red);
}

.drift-flat {
  color: var(--muted);
}

.change-log {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* ── 表格 ───────────────────────────────────────────── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.data-table th,
.data-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.data-table th:first-child,
.data-table td:first-child,
.data-table th:nth-child(2),
.data-table td:nth-child(2) {
  text-align: left;
}

.data-table thead th {
  color: var(--muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--panel);
}

.data-table tbody tr {
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.data-table tr.you td {
  color: var(--gold);
}

.data-table td.champion {
  color: var(--gold);
  font-weight: 700;
}

.data-table.compact {
  font-size: 11.5px;
}

/* ── 成就 ───────────────────────────────────────────── */

.achievement-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.achievement-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 4px;
  opacity: 0.55;
}

.achievement-card.unlocked {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(226, 184, 87, 0.18);
}

.achievement-card strong {
  font-size: 14px;
}

.achievement-card span {
  color: var(--muted);
  font-size: 12px;
}

.achievement-card em {
  font-style: normal;
  font-size: 11px;
  color: var(--gold);
}

/* ── 备注 ───────────────────────────────────────────── */

.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-list li {
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}

.note-list.wide li {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.note-who {
  color: var(--gold);
  font-weight: 600;
  min-width: 64px;
}

.note-tags {
  color: var(--green);
  font-size: 12px;
}

.note-snapshot {
  color: var(--muted);
  font-size: 11px;
}

.export-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}

.export-box summary {
  cursor: pointer;
  color: var(--muted);
}

.export-box pre {
  white-space: pre-wrap;
  font-size: 12px;
  color: var(--muted);
  max-height: 320px;
  overflow: auto;
}

button.small {
  padding: 6px 12px;
  font-size: 13px;
}

/* ── 复盘 ───────────────────────────────────────────── */

.replay-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}

.replay-felt {
  height: clamp(380px, 52vh, 720px);
}

.step-text {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--text);
}

.trace-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: var(--panel-soft);
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}

.hand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 380px;
  overflow: auto;
}

.hand-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 6px;
}

.hand-list li:hover {
  background: rgba(255, 255, 255, 0.04);
}

button.link {
  background: none;
  border: none;
  color: var(--gold);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
}

.muted {
  color: var(--muted);
}

/* ── 窄屏与降级 ─────────────────────────────────────── */

@media (max-width: 1100px) {
  /* 窄屏上牌桌改扁、座位变小，避免座位互相压住 */
  .felt {
    --seat-w: 140px;
    height: clamp(400px, 58vh, 620px);
  }

  .felt-logo {
    display: none;
  }

  .table-header {
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
}

@media (max-width: 760px) {
  .felt {
    --seat-w: 118px;
    height: clamp(360px, 54vh, 520px);
    border-width: 6px;
  }

  .seat {
    font-size: var(--text-xs);
    padding: 5px;
  }

  .act {
    min-width: 92px;
    padding: 10px 12px;
  }

  .raise-panel {
    flex-basis: 100%;
  }
}

/* 尊重系统的"减少动态效果"：所有装饰性动画一律关掉 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .turn-ring {
    animation: none;
  }
}

/* ── 存档 ───────────────────────────────────────────── */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.slot-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slot-card.empty {
  opacity: 0.6;
}

.slot-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.slot-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
  font-size: 12.5px;
}

.slot-info dt {
  color: var(--muted);
}

.slot-info dd {
  margin: 0;
  text-align: right;
  color: var(--text);
}

.save-message {
  color: var(--green);
  font-size: 13px;
  margin: 0;
}

/* ── 节奏控制 ───────────────────────────────────────── */

.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.speed-buttons {
  display: inline-flex;
  gap: 3px;
}

button.speed {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}

button.speed.active {
  color: var(--gold);
  border-color: var(--line);
  background: var(--panel-soft);
}

/* ── 备注编辑器 ─────────────────────────────────────── */

.note-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.note-input {
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.note-input:focus {
  outline: none;
  border-color: var(--gold);
}

.preset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

button.tag {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

button.tag.active {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

/* ── 键盘快捷键提示 ─────────────────────────────────── */

.key {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  font-size: 10px;
  line-height: 15px;
  color: var(--muted);
  vertical-align: 1px;
}

.act.allin {
  background: #5a2b2b;
  border-color: #8c4444;
}

/* ── 教练模式：四步算牌 ─────────────────────────────── */

button.coach-toggle {
  color: var(--muted);
}

button.coach-toggle.active {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

.coach {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(72, 185, 120, 0.35);
  border-left: 4px solid var(--green);
  background: linear-gradient(180deg, rgba(72, 185, 120, 0.12), rgba(72, 185, 120, 0.04));
  border-radius: var(--radius-md);
  font-size: var(--text-md);
}

.coach-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
}

.coach-kicker {
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 2px;
}

.coach-action {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 1px;
}

.coach-action.act-fold {
  color: var(--act-fold);
}
.coach-action.act-check,
.coach-action.act-call {
  color: var(--act-call);
}
.coach-action.act-bet,
.coach-action.act-raise {
  color: var(--act-raise);
}

.coach-metric {
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.coach-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.coach-step-title {
  margin: 0;
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 1px;
}

.coach-step-lines {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.coach-step-lines li::marker {
  color: rgba(72, 185, 120, 0.75);
}

.coach-verdict {
  margin: auto 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line-soft);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.coach-recipe {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.coach-reason {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.coach-tip {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(233, 196, 106, 0.1);
  border: 1px solid rgba(233, 196, 106, 0.35);
  color: #f2dfae;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.coach-tip-label {
  margin-right: var(--space-2);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
}

/* ════════════════════════════════════════════════════════════
   高级视觉主题 · Midnight Emerald
   目标不是"换几个颜色"，而是把界面做成一张有灯光、有材质、
   有层次的牌桌：金属发丝线、玻璃面板、深色木沿、暖白纸牌。
   所有装饰都在 CSS 里完成，不引入任何图片或字体文件。
   ════════════════════════════════════════════════════════════ */

/* ── 顶栏：品牌 + 导航 + 赛季信息 ───────────────────── */

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 18px;
  background:
    linear-gradient(180deg, rgba(21, 29, 39, 0.9), rgba(7, 11, 15, 0.94));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 227, 179, 0.5), transparent);
  pointer-events: none;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: clamp(12px, 1.6vw, 26px);
  border-right: 1px solid var(--line-soft);
  flex: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
  font-size: 21px;
  line-height: 1;
  background:
    radial-gradient(circle at 50% 32%, rgba(245, 227, 179, 0.16), rgba(6, 10, 14, 0.5) 68%);
  box-shadow:
    0 0 0 4px rgba(217, 184, 119, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 24px rgba(217, 184, 119, 0.1);
  text-shadow: 0 0 12px rgba(217, 184, 119, 0.5);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3.5px;
  color: var(--gold-bright);
}

.brand-text small {
  font-size: 9px;
  letter-spacing: 5px;
  color: var(--muted);
  opacity: 0.8;
}

.nav-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  flex: 1;
}

.nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  letter-spacing: 1px;
  box-shadow: none;
  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s var(--ease-out);
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-soft);
  box-shadow: none;
  transform: translateY(-1px);
}

.nav-item.active {
  color: #211807;
  background: linear-gradient(180deg, #f5e4b8, #caa565);
  border-color: #f0dcae;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 6px 16px rgba(0, 0, 0, 0.38);
}

.nav-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-left: clamp(12px, 1.6vw, 22px);
  border-left: 1px solid var(--line-soft);
  flex: none;
}

.nav-season {
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  opacity: 0.75;
}

.nav-career {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}

/* ── 大厅：一束顶光下的邀请函 ───────────────────────── */

.lobby {
  gap: clamp(18px, 2.2vw, 30px);
}

.lobby-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(30px, 4.2vw, 62px) clamp(20px, 4vw, 64px) clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(820px 430px at 50% -6%, rgba(26, 106, 78, 0.38), transparent 66%),
    radial-gradient(520px 300px at 50% 108%, rgba(217, 184, 119, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(20, 28, 38, 0.9), rgba(6, 10, 14, 0.95));
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.lobby-hero::before,
.lobby-hero::after {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  line-height: 1;
  pointer-events: none;
}

.lobby-hero::before {
  content: "♠";
  top: -22%;
  left: -3%;
  font-size: clamp(200px, 24vw, 380px);
  color: rgba(217, 184, 119, 0.04);
  transform: rotate(-14deg);
}

.lobby-hero::after {
  content: "♦";
  right: -2%;
  bottom: -30%;
  font-size: clamp(180px, 20vw, 320px);
  color: rgba(255, 255, 255, 0.025);
  transform: rotate(10deg);
}

.lobby-hero > * {
  position: relative;
  z-index: 1;
}

.hero-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(circle at 50% 30%, rgba(245, 227, 179, 0.15), rgba(5, 9, 13, 0.55) 70%);
  box-shadow:
    0 0 0 6px rgba(217, 184, 119, 0.035),
    0 0 46px rgba(217, 184, 119, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-ring {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(217, 184, 119, 0.22);
}

.hero-suit {
  color: var(--gold-bright);
  font-size: 31px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(217, 184, 119, 0.55);
}

.eyebrow {
  margin: 0 0 10px;
  padding-left: 6px;
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--gold);
  opacity: 0.82;
}

.lobby-hero .title {
  margin: 0;
  font-size: clamp(30px, 3.3vw, 50px);
  letter-spacing: clamp(2px, 0.45vw, 8px);
  font-weight: 700;
  background: linear-gradient(180deg, #fffaf0 0%, #f5e5bd 46%, #ceac70 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(440px, 78%);
  margin: 14px 0 12px;
  color: var(--gold);
  opacity: 0.72;
}

.hero-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}

.hero-rule span:last-child {
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

.hero-rule i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0;
}

.lobby-hero .subtitle {
  max-width: 780px;
  font-size: clamp(12.5px, 0.95vw, 15px);
  letter-spacing: 0.6px;
}

.hero-actions {
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin-top: 12px;
}

.hero-actions .cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: min(286px, 82vw);
  padding: 16px 26px;
  text-align: left;
}

/* 赛制选择：常规淘汰赛 / 淘汰悬赏赛（只改局外积分口径，不改牌局结构） */
.format-picker {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.format-label {
  align-self: center;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
}

.format-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 208px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.format-option:hover {
  border-color: rgba(217, 184, 119, 0.45);
}

.format-option.selected {
  border-color: var(--gold);
  background: rgba(217, 184, 119, 0.12);
}

.format-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.format-option.selected .format-name {
  color: var(--gold);
}

.format-blurb {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.6px;
}

.cta-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
}

.cta-meta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
}

button.primary .cta-meta {
  color: rgba(46, 32, 11, 0.72);
}

button.primary.secondary .cta-meta {
  color: var(--muted);
}

.resume {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 190px;
  padding: 12px 20px;
  border-color: var(--line);
  text-align: left;
}

.resume-label {
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold-bright);
}

.resume-meta {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.hero-note {
  max-width: 840px;
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.4px;
}

.note-key {
  margin-right: 4px;
  color: var(--gold);
  font-weight: 700;
}

.lobby-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.9fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

.panel-kicker {
  margin: 0 0 4px;
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--gold);
  opacity: 0.62;
}

.career-panel .stat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
}

.stat {
  display: flex !important;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 16px;
  border-left: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

.stat:nth-child(3n + 1) {
  border-left: none;
}

.stat:nth-child(-n + 3) {
  border-top: none;
}

.stat-value {
  font-family: var(--font-num);
  font-size: clamp(20px, 1.65vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
}

.stat-label {
  font-size: 10.5px;
  letter-spacing: 3px;
  color: var(--muted);
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 「赛制速览」面板：标题下的当前赛制名 + 列表后的计分说明（随首页选择变化） */
.rules-format {
  margin: 0 0 12px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
}

.rules-note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  letter-spacing: 0.4px;
}

.rule-step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.rule-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 10.5px;
}

.rule-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule-copy strong {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text);
}

.rule-copy span {
  font-size: 11.5px;
  color: var(--muted);
}

.lobby-footer {
  margin-top: 2px;
  letter-spacing: 1px;
}

.footer-mark {
  margin-right: 8px;
  color: var(--gold);
}

/* ── 牌桌顶栏：赛事 HUD ─────────────────────────────── */

/* 牌桌页优先保证"一屏之内"：两侧留白收一点，把高度让给牌桌与操作台 */
#app:has(.table-screen) {
  padding-top: 10px;
  padding-bottom: 14px;
}

.app-shell:has(.table-screen) {
  gap: 10px;
}

.table-screen {
  gap: 10px;
}

.table-header {
  gap: 12px;
  padding: 10px 16px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 28, 38, 0.92), rgba(6, 10, 14, 0.95));
  border-color: var(--line);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.header-main,
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-main {
  flex: 1;
  min-width: 320px;
}

.header-tools {
  justify-content: flex-end;
  margin-left: auto;
}

.header-sep {
  flex: none;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, var(--gold-line), transparent);
}

.table-header .stage {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--gold-bright);
}

.header-chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.8px;
}

.header-chip.street {
  color: var(--text);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.header-chip.players {
  color: var(--gold);
  border-color: var(--gold-line);
}

.header-chip.place {
  color: #211807;
  border-color: #f0dcae;
  background: linear-gradient(180deg, #f4e2b4, #c8a464);
  font-weight: 700;
}

.header-chip.pressure {
  color: var(--act-raise);
  border-color: rgba(240, 201, 116, 0.5);
}

.tool-label {
  font-size: 9.5px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
}

.speed-control {
  gap: 8px;
}

.speed-buttons {
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.26);
}

button.speed {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-num);
  font-size: 10.5px;
  box-shadow: none;
}

button.speed:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

button.speed.active {
  color: #211807;
  background: linear-gradient(180deg, #f4e2b4, #c8a464);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

button.toggle {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}

button.toggle:hover {
  color: var(--text);
  border-color: var(--line);
}

button.toggle.active,
button.coach-toggle.active,
button.rankings-toggle.active {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(217, 184, 119, 0.22), rgba(217, 184, 119, 0.07));
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── 牌毡：祖母绿 + 深色木沿 + 顶光 ─────────────────── */

.felt {
  --seat-w: clamp(176px, 11.4vw, 204px);
  height: clamp(420px, 57vh, 860px);
  border: 12px solid var(--rail);
  border-radius: 50% / 47%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.11), transparent 36%),
    radial-gradient(ellipse at 50% 46%, var(--felt-light) 0%, var(--felt) 38%, var(--felt-dark) 80%, #031b13 100%);
  box-shadow:
    inset 0 0 130px rgba(0, 0, 0, 0.62),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0 0 0 18px rgba(0, 0, 0, 0.16),
    0 0 0 2px var(--rail-light),
    0 0 0 3px rgba(217, 184, 119, 0.22),
    0 34px 90px rgba(0, 0, 0, 0.7),
    0 0 150px rgba(18, 96, 70, 0.16);
}

.felt::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: inherit;
  border: 1px solid rgba(245, 227, 179, 0.14);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.felt::after {
  content: "";
  position: absolute;
  inset: 9% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.05), transparent 68%);
  pointer-events: none;
}

.felt.my-turn {
  box-shadow:
    inset 0 0 130px rgba(0, 0, 0, 0.62),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 0 0 0 18px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--rail-light),
    0 0 0 4px rgba(245, 227, 179, 0.5),
    0 0 0 10px rgba(217, 184, 119, 0.09),
    0 34px 90px rgba(0, 0, 0, 0.7),
    0 0 170px rgba(217, 184, 119, 0.14);
}

.table-center {
  inset: 23% 33% 35%;
  border: 1px solid rgba(217, 184, 119, 0.14);
  box-shadow:
    0 0 0 22px rgba(0, 0, 0, 0.035),
    inset 0 0 80px rgba(0, 0, 0, 0.18);
}

.table-center::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(217, 184, 119, 0.07);
  pointer-events: none;
}

.felt-logo {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2cqw, 32px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(245, 227, 179, 0.085);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.felt-sub {
  margin-top: 5px;
  font-family: var(--font-num);
  font-size: clamp(6px, 0.56cqw, 9px);
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  color: rgba(245, 227, 179, 0.055);
  white-space: nowrap;
}

/* ── 底池：一小堆筹码 + 金色数字 ────────────────────── */

.pot {
  top: 35%;
  gap: 8px;
  padding: 7px 22px 7px 11px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217, 184, 119, 0.24), transparent 72%),
    linear-gradient(180deg, rgba(26, 20, 10, 0.94), rgba(8, 6, 2, 0.92));
  border: 1px solid rgba(245, 227, 179, 0.68);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 34px rgba(217, 184, 119, 0.32),
    0 0 74px rgba(217, 184, 119, 0.14);
  font-family: var(--font-num);
  font-size: clamp(15px, 1.2cqw, 21px);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gold-bright);
  text-shadow:
    0 0 12px rgba(245, 227, 179, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.6);
}

.pot::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(245, 227, 179, 0.22);
  pointer-events: none;
}

.pot-chips {
  display: inline-flex;
  align-items: center;
  padding-right: 4px;
}

.pot-chips i {
  display: block;
  width: 18px;
  height: 18px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 250, 238, 0.9);
  background: conic-gradient(#f3e3bb 0 25%, #a83a35 0 50%, #f3e3bb 0 75%, #a83a35 0);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}

.pot-chips i:first-child {
  margin-left: 0;
}

/* ── 公共牌区 ───────────────────────────────────────── */

.board {
  gap: clamp(6px, 0.55cqw, 11px);
}

.board-slot {
  display: inline-block;
  width: clamp(48px, 3.9cqw, 78px);
  height: calc(clamp(48px, 3.9cqw, 78px) * 1.4);
  border-radius: calc(clamp(48px, 3.9cqw, 78px) * 0.13);
  border: 1px dashed rgba(245, 227, 179, 0.09);
  background: rgba(0, 0, 0, 0.06);
}

.last-action {
  top: 43%;
  padding: 6px 18px;
  border: 1px solid rgba(217, 184, 119, 0.34);
  background: rgba(3, 8, 11, 0.66);
  color: var(--gold-bright);
  font-size: clamp(12px, 0.9cqw, 15px);
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ── 牌面：暖白纸 + 深影 + 中央花色水印 ─────────────── */

.card {
  border-radius: calc(clamp(48px, 3.9cqw, 78px) * 0.13);
  background:
    linear-gradient(158deg, #fffefb 0%, #f7f4ec 58%, #e7e2d5 100%);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.48),
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(22, 20, 16, 0.14);
}

.card.red {
  color: #c1121f;
}

.card-corner {
  top: 7%;
  left: 9%;
}

.card-rank {
  font-family: var(--font-num);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.card-suit-sm {
  margin-top: 1px;
  opacity: 1;
  font-weight: 700;
}

/* 中央大花色：以前是 10% 的水印，几乎看不见（玩家反馈"花色太淡"）。
   现在做成真正的主视觉：满不透明、略微加深、带一点墨感阴影，
   红黑对比一眼可辨。 */
.card-suit {
  position: absolute;
  right: 50%;
  bottom: 50%;
  font-size: clamp(30px, 3cqw, 56px);
  opacity: 0.92;
  transform: translate(50%, 50%) rotate(-8deg);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  filter: saturate(1.15);
}

/* 黑桃/梅花再压深一档，和红桃/方块拉开距离 */
.card:not(.red) .card-suit,
.card:not(.red) .card-rank,
.card:not(.red) .card-suit-sm {
  color: #0b0d10;
}

/* 结算板上的牌只有 26~38px，中央花色要按比例缩回去（但仍然看得清） */
.summary-cards .card-suit,
.summary-board-cards .card-suit {
  right: 50%;
  bottom: 50%;
  font-size: clamp(13px, 1.05cqw, 20px);
  opacity: 0.9;
  transform: translate(50%, 50%) rotate(-8deg);
}

.card.back {
  background:
    radial-gradient(circle at 50% 35%, rgba(245, 227, 179, 0.16), transparent 58%),
    repeating-linear-gradient(45deg, #1f3355 0 6px, #182844 6px 12px),
    linear-gradient(160deg, #2c4670, #101c31);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(217, 184, 119, 0.24),
    inset 0 0 0 4px rgba(6, 12, 20, 0.55);
}

.card.back::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: calc(clamp(48px, 3.9cqw, 78px) * 0.1);
  border: 1px solid rgba(217, 184, 119, 0.22);
  pointer-events: none;
}

.card-back-mark {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid rgba(245, 227, 179, 0.3);
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 0 3px rgba(245, 227, 179, 0.06),
    0 0 12px rgba(0, 0, 0, 0.25);
}

.card-back-mark::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px solid rgba(245, 227, 179, 0.24);
  border-radius: 50%;
}

/* ── 座位：一块有厚度的筹码铭牌 ─────────────────────── */

.seat {
  width: var(--seat-w);
  padding: 8px 10px 9px;
  border-radius: 14px;
  border: 1px solid rgba(217, 184, 119, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 36%),
    linear-gradient(180deg, rgba(17, 25, 34, 0.94), rgba(5, 9, 13, 0.97));
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  /* 底部的自己会被牌撑高：用 --seat-shift 把它往桌内提一点，避免压到操作台 */
  transform: translate(-50%, calc(-50% + var(--seat-shift, 0px)));
}

/* 正下方（真人）的座位向上收；正上方的座位向下让，别顶到顶栏 */
.seat.zone-bottom {
  --seat-shift: -7.5cqh;
}

.seat.zone-top {
  --seat-shift: 5cqh;
}

.seat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 227, 179, 0.5), transparent);
  pointer-events: none;
}

.seat.you {
  border-color: rgba(245, 227, 179, 0.62);
  background:
    linear-gradient(180deg, rgba(245, 227, 179, 0.09), transparent 40%),
    linear-gradient(180deg, rgba(20, 29, 39, 0.96), rgba(6, 10, 14, 0.98));
  box-shadow:
    0 0 0 1px rgba(245, 227, 179, 0.28),
    0 0 34px rgba(217, 184, 119, 0.18),
    0 18px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.seat.acting {
  border-color: rgba(89, 192, 141, 0.72);
  box-shadow:
    0 0 0 1px rgba(89, 192, 141, 0.24),
    0 0 32px rgba(89, 192, 141, 0.38),
    0 18px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translate(-50%, calc(-50% + var(--seat-shift, 0px))) scale(1.035);
}

.seat.folded {
  opacity: 0.62;
  filter: grayscale(0.65);
  transform: translate(-50%, calc(-50% + var(--seat-shift, 0px))) scale(0.945);
}

.seat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  text-align: left;
}

:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar) {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid hsl(var(--avatar-h, 210) 55% 58% / 0.55);
  /* 底色由编号的色相决定：同一张桌的 32 个人因此颜色互不相同 */
  background:
    radial-gradient(circle at 34% 24%, hsl(var(--avatar-h, 210) 65% 68% / 0.5), transparent 62%),
    linear-gradient(160deg, hsl(var(--avatar-h, 210) 42% 34%), hsl(var(--avatar-h, 210) 52% 15%));
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* 几何图案层：由 data-motif 决定，画在底色之上 */
:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--avatar-motif, none);
  background-size: var(--avatar-motif-size, auto);
  opacity: 0.5;
  pointer-events: none;
}

/* 六种中性几何图案（斜纹 / 圆点 / 横线 / 竖线 / 四等分 / 放射），不暗示性格 */
:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)[data-motif="0"] {
  --avatar-motif: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.6) 0 1.5px,
    transparent 1.5px 8px
  );
}

:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)[data-motif="1"] {
  --avatar-motif: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.5px, transparent 1.7px);
  --avatar-motif-size: 8px 8px;
}

:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)[data-motif="2"] {
  --avatar-motif: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.55) 0 1.5px,
    transparent 1.5px 8px
  );
}

:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)[data-motif="3"] {
  --avatar-motif: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55) 0 1.5px,
    transparent 1.5px 8px
  );
}

:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)[data-motif="4"] {
  --avatar-motif: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.55) 0 25%,
    transparent 25% 50%,
    rgba(255, 255, 255, 0.55) 50% 75%,
    transparent 75% 100%
  );
}

:is(.seat-avatar, .roster-avatar, .avatar-option, .hov-avatar)[data-motif="5"] {
  --avatar-motif: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.5) 0 12deg,
    transparent 12deg 24deg
  );
}

/* 插画头像（人物/动物）：容器铺一层纯色底，内联 SVG 铺满整块圆形。
   圆形裁剪仍由上面那条 border-radius/overflow 规则负责，插画自己不画裁剪。 */
.av-illu {
  background: var(--panel);
}

.av-illu > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 你的座位：只加一圈高光描边，不夺走所选头像本身的颜色 */
.seat.you .seat-avatar {
  border-color: rgba(245, 227, 179, 0.9);
  box-shadow:
    0 0 0 2px rgba(245, 227, 179, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.seat-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.seat-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.seat-name {
  min-width: 0;
  color: #dfe7ee;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat.you .seat-name {
  color: var(--gold-bright);
}

.seat-tags {
  flex: none;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid var(--gold-line);
  background: rgba(217, 184, 119, 0.12);
  color: var(--gold-bright);
  font-family: var(--font-num);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  line-height: 13px;
}

.seat-status {
  flex: none;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 0.5px;
}

.folded .seat-status {
  background: rgba(74, 26, 30, 0.7);
  color: #ffb8b2;
  border: 1px solid rgba(208, 106, 97, 0.55);
}

.allin .seat-status {
  background: rgba(74, 26, 30, 0.85);
  color: #ffd0cb;
  border: 1px solid rgba(255, 107, 98, 0.65);
}

.seat-stack {
  font-family: var(--font-num);
  font-size: clamp(16px, 1.05cqw, 19px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.6px;
  color: #f8f2e4;
  font-variant-numeric: tabular-nums;
}

.seat.you .seat-stack {
  color: var(--gold-bright);
}

.seat.folded .seat-stack {
  color: #b9b3a8;
}

.seat-cards {
  gap: 4px;
  margin: 4px 0 3px;
}

.seat-cards .card {
  width: clamp(52px, 4.4cqw, 78px);
  height: calc(clamp(52px, 4.4cqw, 78px) * 1.38);
}

.seat.you .seat-cards .card {
  width: clamp(58px, 4.9cqw, 86px);
  height: calc(clamp(58px, 4.9cqw, 86px) * 1.38);
}

/* 自己的底牌要等到决策帧才由引擎交出：在那之前画两张"待发"占位，
   否则自己的座位会空一块，像牌漏发了。 */
.card-ghost {
  display: grid;
  place-items: center;
  width: clamp(52px, 4.4cqw, 78px);
  height: calc(clamp(52px, 4.4cqw, 78px) * 1.38);
  border: 1px dashed rgba(245, 227, 179, 0.2);
  border-radius: calc(clamp(52px, 4.4cqw, 78px) * 0.13);
  background: rgba(0, 0, 0, 0.14);
}

.card-ghost::before {
  content: "♠";
  color: rgba(245, 227, 179, 0.12);
  font-size: clamp(18px, 1.7cqw, 30px);
}

.seat.you .seat-cards .card-ghost {
  width: clamp(58px, 4.9cqw, 86px);
  height: calc(clamp(58px, 4.9cqw, 86px) * 1.38);
  border-radius: calc(clamp(58px, 4.9cqw, 86px) * 0.13);
}

/* 自己的牌往外探一点，像真的摊在桌沿上 */
.seat.you .seat-cards {
  margin-top: 7px;
  margin-bottom: 6px;
}

.seat.zone-bottom .seat-stack {
  font-size: clamp(17px, 1.15cqw, 21px);
}

.seat-bet {
  gap: 5px;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(217, 184, 119, 0.22);
  background: rgba(0, 0, 0, 0.3);
  color: var(--gold-bright);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.chip-mini {
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(255, 250, 238, 0.85);
  background: conic-gradient(#f3e3bb 0 25%, #a83a35 0 50%, #f3e3bb 0 75%, #a83a35 0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* 行动计时：不再让整个方框旋转（转起来会像一个斜着的菱形），
   改成"呼吸的绿边 + 底边一条走完的细线"——安静、清楚、不抢牌面。 */
.turn-ring {
  inset: -5px;
  padding: 0;
  border-radius: 17px;
  border: 1px solid rgba(143, 224, 180, 0.62);
  background: none;
  -webkit-mask: none;
  mask: none;
  box-shadow:
    0 0 0 1px rgba(89, 192, 141, 0.12),
    0 0 20px rgba(89, 192, 141, 0.28),
    inset 0 0 14px rgba(89, 192, 141, 0.1);
  animation: turn-breathe 2.4s ease-in-out infinite;
  overflow: hidden;
}

.turn-ring::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #9cebbd, transparent);
  transform-origin: left center;
  animation: turn-progress var(--turn-ms, 3s) linear forwards;
}

.turn-ring.static {
  animation: none;
  opacity: 0.5;
}

.turn-ring.static::after {
  animation: none;
  opacity: 0.4;
}

@keyframes turn-breathe {
  0%,
  100% {
    border-color: rgba(143, 224, 180, 0.42);
    box-shadow:
      0 0 0 1px rgba(89, 192, 141, 0.08),
      0 0 14px rgba(89, 192, 141, 0.18),
      inset 0 0 12px rgba(89, 192, 141, 0.08);
  }
  50% {
    border-color: rgba(178, 244, 208, 0.88);
    box-shadow:
      0 0 0 1px rgba(89, 192, 141, 0.2),
      0 0 26px rgba(89, 192, 141, 0.42),
      inset 0 0 18px rgba(89, 192, 141, 0.16);
  }
}

@keyframes turn-progress {
  from {
    transform: scaleX(0);
    opacity: 1;
  }
  to {
    transform: scaleX(1);
    opacity: 0.35;
  }
}

.seat-action {
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: clamp(11px, 0.86cqw, 14px);
  font-weight: 800;
  letter-spacing: 0.6px;
  background: rgba(0, 0, 0, 0.22);
}

.seat-action.act-raise,
.seat-action.act-bet {
  box-shadow:
    0 0 18px rgba(240, 201, 116, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.45);
}

/* 牌桌发言气泡：渲染在牌毡层上，按座位方位贴在旁边。
   不放进座位里的原因见 views.ts 的 speechBubbleView：座位自带 transform 与
   backdrop-filter，会形成层叠上下文，气泡再高的 z-index 也压不过左上角聊天框。 */
.seat-speech {
  position: absolute;
  z-index: 8;
  width: max-content;
  max-width: min(240px, 30vw);
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid rgba(245, 227, 179, 0.48);
  background: linear-gradient(180deg, rgba(48, 41, 26, 0.98), rgba(24, 20, 13, 0.98));
  color: rgba(246, 232, 197, 0.98);
  font-size: clamp(12px, 0.9cqw, 14px);
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  animation: speech-pop 0.22s cubic-bezier(0.2, 1.4, 0.5, 1);
}

@keyframes speech-pop {
  from {
    opacity: 0;
    margin-top: 4px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

/* 上方 / 下方：水平居中，按座位宽度把气泡推出座位边缘 */
.seat-speech.place-above,
.seat-speech.place-below {
  left: var(--speech-x);
  transform: translateX(-50%);
}

.seat-speech.place-above {
  top: calc(var(--speech-y) - var(--seat-w) * 0.48 - 10px);
  /* 以气泡底边贴住座位顶部：只写 top 会把整块气泡往下压进座位 */
  transform: translate(-50%, -100%);
}

.seat-speech.place-below {
  top: calc(var(--speech-y) + var(--seat-w) * 0.48 + 10px);
}

/* 左侧座位把气泡放在右手边，右侧座位放到左手边：
   这样既不会压住聊天框，也不会飘到牌桌外。 */
.seat-speech.place-right {
  left: calc(var(--speech-x) + var(--seat-w) / 2 + 12px);
  top: var(--speech-y);
  transform: translateY(-50%);
}

.seat-speech.place-left {
  left: calc(var(--speech-x) - var(--seat-w) / 2 - 12px);
  top: var(--speech-y);
  transform: translate(-100%, -50%);
}

/* 小尾巴：指向座位，像一个真的对话框 */
.seat-speech::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

.seat-speech.place-above::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: rgba(24, 20, 13, 0.98);
}

.seat-speech.place-below::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(48, 41, 26, 0.98);
}

.seat-speech.place-right::after {
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  border-right-color: rgba(48, 41, 26, 0.98);
}

.seat-speech.place-left::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-left-color: rgba(48, 41, 26, 0.98);
}

/* 说话的人：座位描边亮一圈，视线能立刻落回是谁在说 */
.seat.speaking {
  border-color: rgba(245, 227, 179, 0.78);
  box-shadow:
    0 0 0 1px rgba(245, 227, 179, 0.28),
    0 0 34px rgba(217, 184, 119, 0.34),
    0 18px 36px rgba(0, 0, 0, 0.55);
}

.fold-stamp {
  border-width: 2px;
  border-radius: 6px;
  background: rgba(16, 5, 7, 0.82);
  color: #ffd2cd;
  letter-spacing: 4px;
  text-indent: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.6);
}

/* ── 动作播报条 ─────────────────────────────────────── */

.action-log {
  gap: 8px;
  padding: 8px 12px;
  border-color: var(--line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(17, 25, 34, 0.9), rgba(6, 10, 14, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.action-log-title {
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--gold);
  opacity: 0.8;
}

.log-item {
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 11.5px;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── 操作台 ─────────────────────────────────────────── */

.action-bar {
  position: relative;
  gap: 10px;
  padding: 14px 16px 12px;
  border-color: var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(21, 29, 39, 0.97), rgba(5, 9, 13, 0.99));
  box-shadow:
    0 -14px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.action-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 227, 179, 0.42), transparent);
  pointer-events: none;
}

.action-bar.is-turn {
  border-color: rgba(217, 184, 119, 0.36);
  box-shadow:
    0 -14px 40px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(217, 184, 119, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.action-rail {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.actions {
  gap: 10px;
}

.act {
  min-width: 124px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: clamp(13.5px, 0.95vw, 16px);
  letter-spacing: 1.5px;
  border-width: 1px;
}

.act.fold {
  background: linear-gradient(180deg, #4a2528, #271216);
  border-color: rgba(208, 106, 97, 0.42);
  color: #f2c9c4;
}

.act.check,
.act.call {
  background: linear-gradient(180deg, #233a51, #102232);
  border-color: rgba(108, 182, 239, 0.34);
  color: #dceeff;
}

.act.raise {
  background: linear-gradient(180deg, #5a4622, #30250f);
  border-color: rgba(240, 201, 116, 0.52);
  color: #ffefc7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(240, 201, 116, 0.08);
}

.act.allin {
  background: linear-gradient(180deg, #5d2226, #320f13);
  border-color: rgba(255, 107, 98, 0.55);
  color: #ffd9d5;
}

.act.auto {
  background: transparent;
  border-color: var(--line-soft);
  border-style: dashed;
  color: var(--muted);
  box-shadow: none;
}

.act:disabled {
  opacity: 0.4;
}

.act-amount {
  font-family: var(--font-num);
  font-size: 15px;
  letter-spacing: 0.5px;
}

.key {
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid rgba(217, 184, 119, 0.34);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 9.5px;
  line-height: 15px;
}

.raise-panel {
  gap: 8px;
  padding: 10px 14px;
  border-color: var(--line-soft);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.raise-meta {
  font-size: 11.5px;
  letter-spacing: 0.4px;
}

.raise-by {
  font-family: var(--font-num);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
}

.raise-amount {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-bright);
}

.raise-quick button {
  border-radius: var(--radius-pill);
}

button.allin-quick {
  color: #ffc3be;
  border-color: rgba(255, 107, 98, 0.42);
  background: rgba(74, 26, 30, 0.3);
}

.raise-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(217, 184, 119, 0.72), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  accent-color: var(--gold);
}

.raise-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #fff2cf;
  background: radial-gradient(circle at 35% 30%, #fff8e4, #e3c485 55%, #a4813f);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 0 4px rgba(217, 184, 119, 0.12);
  cursor: pointer;
}

.raise-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #fff2cf;
  background: radial-gradient(circle at 35% 30%, #fff8e4, #e3c485 55%, #a4813f);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 0 4px rgba(217, 184, 119, 0.12);
  cursor: pointer;
}

.hand-info {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.hand-info-label {
  color: #cfd8e2;
  font-family: var(--font-num);
  letter-spacing: 0.8px;
}

.my-hand {
  padding: 3px 12px;
  background: rgba(89, 192, 141, 0.1);
  border-color: rgba(89, 192, 141, 0.34);
  color: #8fe0b4;
  letter-spacing: 0.5px;
}

.my-hand strong {
  color: #b6f0ce;
  letter-spacing: 1px;
}

.waiting {
  padding: 14px;
  color: var(--muted);
  letter-spacing: 1px;
}

.footer-bar {
  min-height: 14px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.loading::after {
  border-color: rgba(255, 255, 255, 0.08);
  border-top-color: var(--gold);
}

/* ── 一手结算板：像一张压在桌面的账本 ───────────────── */

.hand-summary {
  border: 1px solid rgba(217, 184, 119, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(180deg, rgba(15, 22, 30, 0.985), rgba(4, 8, 12, 0.99));
  box-shadow:
    0 44px 110px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(217, 184, 119, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(26px);
}

.hand-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 227, 179, 0.7), transparent);
  pointer-events: none;
}

.summary-head strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--gold-bright);
}

.summary-pot {
  font-family: var(--font-num);
  letter-spacing: 0.5px;
}

.summary-board {
  background: rgba(0, 0, 0, 0.24);
  border-color: var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.summary-board-label {
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  opacity: 0.8;
}

.summary-row {
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.you {
  background: linear-gradient(90deg, rgba(217, 184, 119, 0.13), transparent 80%);
  box-shadow: inset 2px 0 0 var(--gold);
}

.summary-columns {
  color: var(--muted);
  font-family: var(--font-num);
  letter-spacing: 2px;
}

.summary-delta,
.summary-stack {
  font-family: var(--font-num);
  letter-spacing: 0.5px;
}

.summary-foot {
  border-top-color: var(--line-soft);
  color: var(--muted);
}

.summary-foot button {
  animation: confirm-pulse 2s ease-in-out infinite;
}

/* ── 侧栏页面：名录 / 档案 / 统计 / 成就 / 笔记 / 存档 ─ */

.roster-grid {
  gap: 12px;
}

/* 侧栏页面的标题统一成"深色底上的一行金字"，和牌桌 HUD 同一套语气 */
.panel-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold-bright);
}

.panel-screen h3 {
  color: var(--gold);
  letter-spacing: 1.5px;
}

.panel-screen h4 {
  letter-spacing: 1px;
}

/* 空状态：不要只剩一行灰字，给一个像样的"还没开局"提示 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(44px, 9vh, 100px) 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(217, 184, 119, 0.05), transparent 70%),
    rgba(0, 0, 0, 0.16);
  text-align: center;
}

.empty-suit {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 26px;
  opacity: 0.8;
  background: radial-gradient(circle at 50% 32%, rgba(245, 227, 179, 0.14), rgba(6, 10, 14, 0.6) 70%);
  box-shadow: 0 0 30px rgba(217, 184, 119, 0.1);
}

.empty-text {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md);
  letter-spacing: 1px;
  line-height: 1.8;
}

.roster-card {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(24, 33, 44, 0.88), rgba(7, 11, 16, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.18s var(--ease-out),
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.roster-card::after {
  content: "♠";
  position: absolute;
  right: 8px;
  bottom: -14px;
  font-size: 46px;
  line-height: 1;
  color: rgba(245, 227, 179, 0.032);
  pointer-events: none;
}

.roster-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-line);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(217, 184, 119, 0.1);
}

.roster-card.human {
  border-color: rgba(245, 227, 179, 0.55);
}

.roster-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text);
}

.roster-arch {
  color: var(--gold);
  letter-spacing: 1px;
}

.roster-line {
  color: var(--muted);
  letter-spacing: 0.3px;
}

.roster-notes {
  color: #8fe0b4;
}

.profile-head {
  gap: 14px;
}

.badge {
  padding: 3px 12px;
  border: 1px solid var(--gold-line);
  background: rgba(217, 184, 119, 0.1);
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}

.badge.soft {
  color: var(--muted);
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
}

.data-table {
  font-size: 12.5px;
}

.data-table th,
.data-table td {
  padding: 8px;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.data-table thead th {
  background: rgba(8, 12, 17, 0.94);
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.data-table tbody tr:hover {
  background: rgba(217, 184, 119, 0.06);
}

.data-table tr.you td {
  color: var(--gold-bright);
}

.achievement-grid {
  gap: 12px;
}

.achievement-card {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(24, 33, 44, 0.86), rgba(7, 11, 16, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0.64;
  transition:
    transform 0.18s var(--ease-out),
    opacity 0.18s ease,
    box-shadow 0.18s ease;
}

/* 稀有度：只在左侧留一道 3px 的色条，不用整张卡片染色 */
.achievement-card.rarity-common {
  border-left-color: #8da0b4;
}

.achievement-card.rarity-rare {
  border-left-color: #5b9bd5;
}

.achievement-card.rarity-epic {
  border-left-color: #a877d6;
}

.achievement-card.rarity-legendary {
  border-left-color: var(--gold);
}

.achievement-card.unlocked.rarity-legendary {
  box-shadow:
    0 0 0 1px rgba(217, 184, 119, 0.28),
    0 0 30px rgba(217, 184, 119, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.38);
}

.achievement-card:hover {
  transform: translateY(-2px);
}

.achievement-card.unlocked {
  box-shadow:
    0 0 0 1px rgba(217, 184, 119, 0.2),
    0 16px 32px rgba(0, 0, 0, 0.38);
}

.achievement-card strong {
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: 1px;
  color: var(--gold-bright);
}

.note-editor,
.note-list li,
.slot-card,
.export-box,
.trace-box,
.replay-controls {
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, rgba(20, 28, 38, 0.82), rgba(7, 11, 16, 0.92));
}

.note-list li {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.slot-card {
  border-radius: 12px;
}

.slot-card header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.slot-card header strong {
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 1px;
}

.slot-card.empty {
  opacity: 0.5;
}

.export-box {
  border-radius: 12px;
}

.trace-box {
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}

.replay-controls {
  border-radius: 12px;
}

.hand-list li:hover {
  background: rgba(217, 184, 119, 0.06);
}

.rankings-panel {
  border: 1px solid rgba(217, 184, 119, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(180deg, rgba(15, 22, 30, 0.99), rgba(4, 8, 12, 0.99));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(22px);
}

.rankings-head strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 2px;
}

.rankings-row:nth-child(1) {
  background: rgba(217, 184, 119, 0.1);
}

.toast {
  background:
    linear-gradient(180deg, rgba(26, 35, 46, 0.97), rgba(8, 12, 17, 0.99));
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
}

.toast strong {
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}

/* ── 窄屏：保留层次，只收尺寸 ───────────────────────── */

@media (max-width: 1080px) {
  .lobby-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-meta {
    display: none;
  }

  .brand-text small {
    display: none;
  }

  /* 平板宽度下把品牌与导航一起收窄，避免最后一个标签被挤到第二行 */
  .nav {
    gap: 10px;
    padding: 9px 14px;
  }

  .nav-brand {
    gap: 9px;
    padding-right: 12px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .brand-text strong {
    font-size: 13px;
    letter-spacing: 2.5px;
  }

  .nav-tabs {
    gap: 2px;
    flex-wrap: nowrap;
  }

  .nav-item {
    padding: 7px 10px;
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  .header-tools {
    margin-left: 0;
    justify-content: flex-start;
  }

  .felt {
    --seat-w: 158px;
  }

  .seat-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .nav {
    padding: 9px 12px;
    gap: 10px;
  }

  .nav-brand {
    padding-right: 10px;
  }

  .brand-text {
    display: none;
  }

  .nav-item {
    padding: 7px 11px;
    font-size: 12px;
  }

  .lobby-hero {
    border-radius: 18px;
    padding: 26px 16px 22px;
  }

  .lobby-hero .title {
    letter-spacing: 2px;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .cta {
    width: 100%;
    min-width: 0;
  }

  .resume {
    width: 100%;
    min-width: 0;
  }

  .career-panel .stat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(3n + 1) {
    border-left: 1px solid var(--line-soft);
  }

  .stat:nth-child(2n + 1) {
    border-left: none;
  }

  .stat:nth-child(-n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  .stat:nth-child(-n + 2) {
    border-top: none;
  }

  .card-panel {
    padding: 18px;
  }

  .felt {
    --seat-w: 126px;
    border-width: 7px;
  }

  .seat {
    padding: 6px;
  }

  .seat-avatar {
    display: none;
  }

  .seat-stack {
    font-size: 14px;
  }

  .act {
    min-width: 96px;
    padding: 11px 13px;
  }

  .action-bar {
    padding: 12px;
  }
}






/* ════════════════════════════════════════════════════════════
   主题层（放在最后：同等特异度下后写者胜，主题必须能覆盖上面的默认外观）
   ════════════════════════════════════════════════════════════ */

/* ── 牌面主题：纸张底色 + 红黑两色 ─────────────────────── */

/* 经典白：当前默认外观，显式写一遍，让"换回来"有明确落点 */
.app-shell[data-card='classic'] .card {
  background: linear-gradient(158deg, #fffefb 0%, #f7f4ec 58%, #e7e2d5 100%);
}
.app-shell[data-card='classic'] .card.red {
  color: #c1121f;
}
.app-shell[data-card='classic'] .card:not(.red) .card-suit,
.app-shell[data-card='classic'] .card:not(.red) .card-rank,
.app-shell[data-card='classic'] .card:not(.red) .card-suit-sm {
  color: #0b0d10;
}

/* 皇家紫：象牙纸 + 酒红 + 墨黑，纸面带一点暖色纹理 */
.app-shell[data-card='royal'] .card {
  background:
    repeating-linear-gradient(115deg, rgba(120, 90, 50, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(158deg, #fdf8ec 0%, #f6ecd6 58%, #e6d7ba 100%);
}
.app-shell[data-card='royal'] .card.red {
  color: #8e1230;
}
.app-shell[data-card='royal'] .card:not(.red) .card-suit,
.app-shell[data-card='royal'] .card:not(.red) .card-rank,
.app-shell[data-card='royal'] .card:not(.red) .card-suit-sm {
  color: #191118;
}

/* 午夜蓝：冷白纸 + 深蓝代替红色，夜里对比更稳 */
.app-shell[data-card='midnight'] .card {
  background: linear-gradient(158deg, #f7fbff 0%, #e8f0fa 58%, #d3e0ef 100%);
}
.app-shell[data-card='midnight'] .card.red {
  color: #1d4ed8;
}
.app-shell[data-card='midnight'] .card:not(.red) .card-suit,
.app-shell[data-card='midnight'] .card:not(.red) .card-rank,
.app-shell[data-card='midnight'] .card:not(.red) .card-suit-sm {
  color: #0f172a;
}

/* ── 牌毡主题：桌面主色 + 桌沿木色 ─────────────────────── */

.app-shell[data-felt='emerald'] .felt {
  --felt: #1c7350;
  --felt-light: #2a9268;
  --felt-dark: #0d3a26;
  --rail: #4a2f1c;
  --rail-light: #7a4f2e;
}

.app-shell[data-felt='ocean'] .felt {
  --felt: #1b4f78;
  --felt-light: #2a6d9e;
  --felt-dark: #0b2b46;
  --rail: #23303f;
  --rail-light: #3d5166;
}

.app-shell[data-felt='crimson'] .felt {
  --felt: #6d1f2c;
  --felt-light: #8c2a3a;
  --felt-dark: #3d0d16;
  --rail: #2b1a14;
  --rail-light: #55392c;
}

.app-shell[data-felt='charcoal'] .felt {
  --felt: #2b3138;
  --felt-light: #3b434d;
  --felt-dark: #15191e;
  --rail: #11151a;
  --rail-light: #2f3841;
}

/* ── 手动输入加注金额 ───────────────────────────────────── */

.raise-input-wrap {
  position: relative;
  display: inline-flex;
}

.raise-input {
  width: 96px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--text-md);
  text-align: right;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(217, 184, 119, 0.35);
  border-radius: var(--radius-sm);
}

.raise-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(217, 184, 119, 0.22);
}

/* 去掉数字输入框的上下箭头：牌桌上更需要横向空间 */
.raise-input::-webkit-outer-spin-button,
.raise-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.raise-input[type='number'] {
  appearance: textfield;
}

/* ── 教练：一键采纳 ─────────────────────────────────────── */

.coach-adopt {
  margin-left: auto;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, #7be3a8, #46b87c);
  border-color: #7be3a8;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(72, 185, 120, 0.35);
}

.coach-adopt:hover {
  filter: brightness(1.08);
}

/* ── 主题设置页 ─────────────────────────────────────────── */

.theme-group + .theme-group {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

.theme-group h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  color: var(--gold);
  letter-spacing: 1px;
}

.theme-group .hint {
  margin: 0 0 var(--space-3);
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}

.theme-option {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px var(--space-3);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.theme-option.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(217, 184, 119, 0.28);
}

.theme-swatch {
  grid-row: 1 / 3;
  width: 44px;
  height: 52px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* 牌面主题的小样：和真牌一样带上烫金内线 */
.swatch-card-classic {
  background: linear-gradient(158deg, #fffefb, #e7e2d5);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 0 3px rgba(176, 141, 78, 0.5);
  position: relative;
}
.swatch-card-classic::after,
.swatch-card-royal::after,
.swatch-card-midnight::after {
  content: "A";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 22px;
}
.swatch-card-classic::after {
  color: #c1121f;
}
.swatch-card-royal {
  background: linear-gradient(158deg, #fdf8ec, #e6d7ba);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 0 3px rgba(198, 156, 74, 0.66);
  position: relative;
}
.swatch-card-royal::after {
  color: #8e1230;
}
.swatch-card-midnight {
  background: linear-gradient(158deg, #f7fbff, #d3e0ef);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 0 3px rgba(122, 156, 196, 0.55);
  position: relative;
}
.swatch-card-midnight::after {
  color: #1d4ed8;
}

/* 牌面风格的小样：同为一张 K，一眼看出"人像"与"极简"的差别 */
.swatch-face-court,
.swatch-face-minimal {
  background: linear-gradient(158deg, #fffefb, #e7e2d5);
  position: relative;
}

.swatch-face-court {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 0 3px rgba(176, 141, 78, 0.5);
}

.swatch-face-minimal {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.swatch-face-court::after,
.swatch-face-minimal::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 800;
  color: #0b0d10;
}

.swatch-face-court::after {
  content: "♛";
  font-size: 24px;
  color: #b08d4e;
}

.swatch-face-minimal::after {
  content: "K";
  font-size: 24px;
}

/* 牌毡主题的小样 */
.swatch-felt-emerald {
  background: radial-gradient(ellipse at 50% 40%, #2a9268, #0d3a26);
}
.swatch-felt-ocean {
  background: radial-gradient(ellipse at 50% 40%, #2a6d9e, #0b2b46);
}
.swatch-felt-crimson {
  background: radial-gradient(ellipse at 50% 40%, #8c2a3a, #3d0d16);
}
.swatch-felt-charcoal {
  background: radial-gradient(ellipse at 50% 40%, #3b434d, #15191e);
}

/* 音乐 / 语音的小样：用图标区分，不加载图片 */
.swatch-music-off,
.swatch-music-ambient,
.swatch-music-jazz,
.swatch-voice-standard,
.swatch-voice-deep,
.swatch-voice-bright {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
  color: var(--muted);
}
.swatch-music-off::after {
  content: "静";
}
.swatch-music-ambient::after {
  content: "♫";
  color: #7ec8e3;
}
.swatch-music-jazz::after {
  content: "♪";
  color: var(--gold);
}
.swatch-voice-standard::after {
  content: "话";
  color: var(--muted);
}
.swatch-voice-deep::after {
  content: "低";
  color: #b39ddb;
}
.swatch-voice-bright::after {
  content: "亮";
  color: var(--gold);
}

.theme-label {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.theme-option.active .theme-label {
  color: var(--gold);
}

.theme-hint {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   真·牌面美术：内联 SVG
   ────────────────────────────────────────────────────────────
   纸面、内描边、角标、点数排布、人头牌花框全部由 SVG 绘制（见 src/cardArt.ts）。
   颜色走 CSS 变量，所以主题切换对牌面同样生效：
     --card-paper : 纸面底色
     --card-ink   : 黑桃/梅花（以及角标文字）
     --card-red   : 红桃/方块
   ════════════════════════════════════════════════════════════ */

/* 纸面交给 SVG：容器只负责尺寸、圆角与投影 */
.card {
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.48),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.card-art {
  display: block;
  width: 100%;
  height: 100%;
}

.card-paper {
  fill: var(--card-paper, #fffefb);
}

/* ── 纸面材质：左上受光 + 右下暗角 ───────────────────────
   两层渐变的色值写死成白色/黑色的透明度，不吃主题变量：
   所以纸面底色仍旧只由 --card-paper 决定，换主题不会串色。 */
.paper-gloss-a {
  stop-color: rgba(255, 255, 255, 0.62);
}

.paper-gloss-b {
  stop-color: rgba(255, 255, 255, 0);
}

.paper-shade-a {
  stop-color: rgba(0, 0, 0, 0);
}

.paper-shade-b {
  stop-color: rgba(0, 0, 0, 0.075);
}

.card-gloss,
.card-shade {
  pointer-events: none;
}

.card-edge {
  fill: none;
  stroke: rgba(0, 0, 0, 0.14);
  stroke-width: 0.8;
}

/* 烫金内线：和外描边凑成双线框，颜色随主题（--card-trim） */
.card-trim {
  fill: none;
  stroke: var(--card-trim, rgba(178, 143, 76, 0.5));
  stroke-width: 0.7;
}

/* 结算板 / 公共牌只有 26~38px：双线框在这个尺寸下会糊成灰边，直接不画 */
.summary-cards .card-trim,
.summary-board-cards .card-trim {
  display: none;
}

/* 花色与角标一律吃 currentColor，红黑由 .card.red 决定 */
.card-pip path,
.card-center-pip path,
.card-court path,
.card-index-suit,
.card-index-rank {
  fill: currentColor;
}

.card-index-rank {
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 800;
}

.card-index-suit {
  font-size: 12px;
}

/* 人头牌：烫金外框 + 淡墨内框 + 斜纹底 + 上下两个镜像的宫廷半身像。
   注意 `.card-court path { fill: currentColor }` 特异度更高（0,1,1），
   所以下面这几类笔法都得写成 `.card-court .xxx`（0,2,0）才压得住它。 */
.card-court .court-frame {
  fill: none;
  stroke: var(--card-trim, rgba(178, 143, 76, 0.55));
  stroke-width: 1.5;
  opacity: 1;
}

/* 内框：fill-opacity 只压底色，不连累那道金线 */
.card-court .court-inner {
  fill: currentColor;
  fill-opacity: 0.05;
  stroke: var(--card-trim, rgba(178, 143, 76, 0.45));
  stroke-width: 0.6;
  opacity: 1;
}

.court-hatch-line {
  stroke: var(--card-trim, rgba(178, 143, 76, 0.6));
  stroke-width: 0.7;
  opacity: 0.45;
}

/* 花牌人像的三种笔法：
   ─ court-line  描边不填色（脸廓、五官、袍线、手）
   ─ court-solid 填实色（发、须、帽、刃、眼）
   ─ court-gold  走烫金（冠、旌节与纹饰，冠同时挂 court-crown 供结构断言） */
.card-court .court-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.card-court .court-solid {
  fill: currentColor;
}

/* 手臂：用一笔粗圆头描边当"袖子"，比画整条轮廓省事得多 */
.card-court .court-arm {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.4;
  stroke-linecap: round;
}

/* 脸与手填纸色：把后层头发挡住，只留一圈发丝剪影 */
.card-court .court-face {
  fill: var(--card-paper, #fffefb);
  stroke: currentColor;
  stroke-width: 1;
}

.card-court .court-gold,
.card-court .court-crown {
  fill: var(--card-trim, #b08d4e);
}

/* 中带：隔开上下两个半身的装饰带 */
.card-court .court-band rect {
  fill: var(--card-trim, #b08d4e);
  fill-opacity: 0.1;
}

.card-court .court-band-line {
  fill: none;
  stroke: var(--card-trim, #b08d4e);
  stroke-width: 0.9;
  opacity: 0.6;
}

.card-court .court-band-gem {
  fill: var(--card-trim, #b08d4e);
  opacity: 0.85;
}

/* ── 极简牌面（在「牌面风格」里切换）───────────────────────
   同一棵 SVG 里备了两套画法：默认显示宫廷人像，选中极简时换成"大字 + 花色"，
   同时抽掉纸面材质与烫金线。这样切换只是换显示，不用把主题参数穿透到 cardView。 */
.card-court .court-variant-minimal {
  display: none;
}

.app-shell[data-face='minimal'] .card-court .court-variant-classic {
  display: none;
}

.app-shell[data-face='minimal'] .card-court .court-variant-minimal {
  display: inline;
}

/* 极简：不要受光/暗角，也不要烫金内线，只留一道最细的外描边 */
.app-shell[data-face='minimal'] .card-gloss,
.app-shell[data-face='minimal'] .card-shade,
.app-shell[data-face='minimal'] .card-trim {
  display: none;
}

/* 极简：花色改成线描。描边宽度写在花色自己的 0~100 坐标系里，
   缩放后粗细才一致（写成 `.xxx path` 是为了压过 `.card-pip path`）。 */
.app-shell[data-face='minimal'] .card-pip path,
.app-shell[data-face='minimal'] .card-center-pip path,
.app-shell[data-face='minimal'] .card-court .court-min-pip path {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* 极简花牌：细线框 + 大字 + 两枚镜像花色 */
.card-court .court-min-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.45;
}

.card-court .court-min-letter {
  fill: currentColor;
  font-family: var(--font-num);
  font-size: 42px;
  font-weight: 800;
}

.card-court .court-min-pip path {
  fill: currentColor;
}

/* 小尺寸（结算板、公共牌）里角标字号按比例缩，避免糊成一团 */
.summary-cards .card-index-rank,
.summary-board-cards .card-index-rank {
  font-size: 24px;
}

.summary-cards .card-index-suit,
.summary-board-cards .card-index-suit {
  font-size: 13px;
}

/* 牌背保持 CSS 绘制（有独立花纹，不需要 SVG） */
.card.back {
  background:
    radial-gradient(circle at 50% 35%, rgba(245, 227, 179, 0.16), transparent 58%),
    repeating-linear-gradient(45deg, #1f3355 0 6px, #182844 6px 12px),
    linear-gradient(160deg, #2c4670, #101c31);
}

/* ── 音乐音量条 ─────────────────────────────────────────── */

.volume-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.22);
}

.volume-label {
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 1px;
}

.volume-slider {
  flex: 1;
  max-width: 320px;
  accent-color: var(--gold);
}

.volume-value {
  min-width: 46px;
  text-align: right;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--gold);
}

/* ── 牌面主题（SVG 版）：纸面 / 黑墨 / 红墨 ─────────────── */

.app-shell[data-card='classic'] {
  --card-paper: #fffefb;
  --card-ink: #0b0d10;
  --card-red: #c1121f;
  /* 烫金：老派金，压在纯白纸上不抢墨色 */
  --card-trim: rgba(176, 141, 78, 0.5);
}

.app-shell[data-card='royal'] {
  --card-paper: #fbf3e0;
  --card-ink: #191118;
  --card-red: #8e1230;
  /* 象牙纸配更浓的金 */
  --card-trim: rgba(198, 156, 74, 0.66);
}

.app-shell[data-card='midnight'] {
  --card-paper: #f2f7ff;
  --card-ink: #0f172a;
  --card-red: #1d4ed8;
  /* 冷白纸配银蓝，不配金色 */
  --card-trim: rgba(122, 156, 196, 0.55);
}

/* 红黑两色由 .card.red 决定，这里把主题色接上 */
.app-shell[data-card='classic'] .card.red,
.app-shell[data-card='royal'] .card.red,
.app-shell[data-card='midnight'] .card.red {
  color: var(--card-red);
}

.app-shell[data-card='classic'] .card:not(.red),
.app-shell[data-card='royal'] .card:not(.red),
.app-shell[data-card='midnight'] .card:not(.red) {
  color: var(--card-ink);
}

/* 视觉隐藏但保留给读屏与文本断言的节点 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════
   实体筹码 · 结算动画
   下注是"一叠筹码从座位飞进底池"，结算是"底池与输家的筹码
   飞向赢家"。筹码仍然全部由 CSS 绘制，不引入任何图片。
   ════════════════════════════════════════════════════════════ */

/* ── 座位下注：一叠实体筹码 + 金额 ─────────────────── */

.seat-bet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  margin-top: 3px;
  padding: 2px 9px 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(217, 184, 119, 0.28);
  background:
    linear-gradient(180deg, rgba(32, 24, 12, 0.72), rgba(0, 0, 0, 0.48));
  color: var(--gold-bright);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: bet-stack-in 0.32s var(--ease-out) both;
}

.bet-stack {
  position: relative;
  flex: none;
  width: 20px;
  height: 30px;
}

/* 座位上的筹码按"侧视"画：每一枚是压扁的椭圆，叠起来能看见层数；
   底池里的筹码则是俯视的圆片——同一个物件在两种视角下的样子。 */
.bet-chip {
  position: absolute;
  left: 1px;
  bottom: calc(var(--i) * 3px);
  width: 18px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 250, 238, 0.82);
  background: repeating-linear-gradient(90deg, #f3e3bb 0 3px, #a83a35 3px 6px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bet-chip.tone-1 {
  background: repeating-linear-gradient(90deg, #f7e8c4 0 3px, #2c5d86 3px 6px);
}

.bet-chip.tone-2 {
  background: repeating-linear-gradient(90deg, #f7e8c4 0 3px, #2f6b4c 3px 6px);
}

.bet-chip.tone-3 {
  background: repeating-linear-gradient(90deg, #f7e8c4 0 3px, #6b4a8c 3px 6px);
}

.bet-amount {
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
}

@keyframes bet-stack-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.82);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── 底池：按金额叠 3–6 枚，增加时脉冲 + 飘出 +N ───── */

.pot {
  overflow: visible;
}

.pot-chips i.tone-1 {
  background: conic-gradient(#f7e8c4 0 25%, #2c5d86 0 50%, #f7e8c4 0 75%, #2c5d86 0);
}

.pot-chips i.tone-2 {
  background: conic-gradient(#f7e8c4 0 25%, #2f6b4c 0 50%, #f7e8c4 0 75%, #2f6b4c 0);
}

.pot-chips i.tone-3 {
  background: conic-gradient(#f7e8c4 0 25%, #6b4a8c 0 50%, #f7e8c4 0 75%, #6b4a8c 0);
}

.pot.pot-gain {
  animation: pot-gain-pop 0.62s var(--ease-out);
}

.pot-gain-amount {
  position: absolute;
  right: -6px;
  top: -18px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 227, 179, 0.6);
  background: linear-gradient(180deg, #f5e4b8, #c49d58);
  color: #241a0a;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  animation: pot-gain-float 0.85s ease-out both;
  pointer-events: none;
}

@keyframes pot-gain-pop {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  32% {
    transform: translate(-50%, -50%) scale(1.12);
  }
  64% {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes pot-gain-float {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(1);
  }
}

/* ── 飞筹码：逐枚抛出，带一点旋转与投影 ─────────────── */

.chip-flight-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.chip-flight {
  position: absolute;
  left: var(--from-x);
  top: var(--from-y);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 250, 238, 0.94);
  background: conic-gradient(#f3e3bb 0 25%, #a83a35 0 50%, #f3e3bb 0 75%, #a83a35 0);
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(245, 227, 179, 0.5),
    inset 0 0 0 2px rgba(0, 0, 0, 0.1);
  animation: chip-fly var(--duration) cubic-bezier(0.22, 0.8, 0.3, 1)
    calc(var(--delay, 0ms) - var(--elapsed, 0ms)) both;
}

.chip-flight.tone-1 {
  background: conic-gradient(#f7e8c4 0 25%, #2c5d86 0 50%, #f7e8c4 0 75%, #2c5d86 0);
}

.chip-flight.tone-2 {
  background: conic-gradient(#f7e8c4 0 25%, #2f6b4c 0 50%, #f7e8c4 0 75%, #2f6b4c 0);
}

.chip-flight.tone-3 {
  background: conic-gradient(#f7e8c4 0 25%, #6b4a8c 0 50%, #f7e8c4 0 75%, #6b4a8c 0);
}

.chip-flight.flight-win {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(245, 227, 179, 0.7);
}

.chip-flight.flight-lose {
  opacity: 0.82;
  filter: saturate(0.7);
}

@keyframes chip-fly {
  0% {
    left: var(--from-x);
    top: var(--from-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  52% {
    top: var(--mid-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14) rotate(110deg);
  }
  100% {
    left: var(--to-x);
    top: var(--to-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(260deg);
  }
}

/* ── 赢家：金色呼吸光 + 小菱形冠饰 ─────────────────── */

.seat.winner-flash {
  z-index: 4;
  animation: winner-glow 2.6s var(--ease-out) both;
}

.seat.winner-flash::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid #ffe6a8;
  background: linear-gradient(135deg, #fff3cf, #c9a45e);
  transform: translateX(-50%) rotate(45deg);
  box-shadow:
    0 0 10px rgba(245, 227, 179, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.45);
  animation: winner-crown 2.6s var(--ease-out) both;
  pointer-events: none;
}

.felt.show-summary .seat.winner-flash {
  opacity: 1;
  filter: none;
}

/* 结算飞筹码期间不要把桌面压得太黑：不然"筹码飞过去"根本看不见 */
.felt.payout-anim.show-summary .seat:not(.winner-flash),
.felt.payout-anim.show-summary .board,
.felt.payout-anim.show-summary .pot {
  opacity: 0.42;
}

@keyframes winner-glow {
  0% {
    box-shadow:
      0 0 0 0 rgba(245, 227, 179, 0.9),
      0 0 20px rgba(245, 227, 179, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  18% {
    box-shadow:
      0 0 0 3px rgba(245, 227, 179, 0.65),
      0 0 42px rgba(245, 227, 179, 0.75),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  55% {
    box-shadow:
      0 0 0 1px rgba(245, 227, 179, 0.28),
      0 0 30px rgba(245, 227, 179, 0.4);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(217, 184, 119, 0.18),
      0 0 18px rgba(217, 184, 119, 0.12);
  }
}

@keyframes winner-crown {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) rotate(45deg) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -2px) rotate(45deg) scale(1.15);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -2px) rotate(45deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -6px) rotate(45deg) scale(0.8);
  }
}

/* ── 结算前的 WINNER 字幕 ───────────────────────────── */

.payout-callout {
  position: absolute;
  top: 37.5%;
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: payout-callout 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.payout-callout-kicker {
  padding-left: 4px;
  font-family: var(--font-num);
  font-size: 8px;
  letter-spacing: 5px;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.payout-callout-name {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.7cqw, 27px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff7e6;
  text-shadow:
    0 0 20px rgba(245, 227, 179, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.9);
}

.payout-callout-amount {
  font-family: var(--font-num);
  font-size: clamp(14px, 1.2cqw, 20px);
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffd98a;
  text-shadow:
    0 0 14px rgba(245, 227, 179, 0.65),
    0 3px 10px rgba(0, 0, 0, 0.85);
}

@keyframes payout-callout {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(1.35);
    filter: blur(6px);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -56%) scale(1.02);
  }
}

/* ── 公共牌逐张翻开 ─────────────────────────────────── */

.board {
  perspective: 900px;
}

.board-deal {
  display: inline-block;
  transform-origin: 50% 80%;
  animation: board-deal 0.52s cubic-bezier(0.2, 1.1, 0.35, 1)
    calc(var(--i) * 72ms - var(--elapsed, 0ms)) both;
}

@keyframes board-deal {
  from {
    opacity: 0;
    transform: translateY(-20px) rotateY(78deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

/* ── 结算板延迟淡入：先看筹码落袋，再看数字 ─────────── */

.hand-summary.payout-delayed {
  animation-delay: 1.08s;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .hand-summary.payout-delayed {
    animation-delay: 0s !important;
  }

  .chip-flight-layer,
  .payout-callout {
    display: none;
  }
}

/* ── 牌背：主题只改正面纸色，背面保持独立花纹 ───────────
   否则 `.app-shell[data-card='classic'] .card` 的纸面渐变会把
   `.card.back` 一起刷白（真实出现过：桌上的扣牌全变成白牌）。

   图层从下到上：主题底色 → 45° 斜纹 → 位图（可选）→ 暗角 → 顶部受光。
   位图层单独拎出 `--card-back-image`：默认 none 就是纯 CSS 花纹，
   要换成美术牌背时把 url(...) 填进去即可（见 assets/card-back.jpg）。 */
.app-shell[data-card] .card.back {
  /* 美术牌背（绿绒 + 金菱格）：79KB，贴图只此一张，不随主题换 */
  --card-back-image: url('./assets/card-back.jpg');
  background-image:
    radial-gradient(circle at 50% 32%, rgba(245, 227, 179, 0.2), rgba(245, 227, 179, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.46) 100%),
    var(--card-back-image),
    repeating-linear-gradient(45deg, #1f3355 0 6px, #182844 6px 12px),
    linear-gradient(160deg, #2c4670, #101c31);
  background-position: center;
  background-size: auto, auto, cover, auto, auto;
}

.app-shell[data-card='royal'] .card.back {
  background-image:
    radial-gradient(circle at 50% 32%, rgba(245, 227, 179, 0.22), rgba(245, 227, 179, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.46) 100%),
    var(--card-back-image),
    repeating-linear-gradient(45deg, #4a1c2a 0 6px, #35131e 6px 12px),
    linear-gradient(160deg, #64283a, #2a0d18);
  background-position: center;
  background-size: auto, auto, cover, auto, auto;
}

.app-shell[data-card='midnight'] .card.back {
  background-image:
    radial-gradient(circle at 50% 32%, rgba(180, 220, 255, 0.2), rgba(180, 220, 255, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.5) 100%),
    var(--card-back-image),
    repeating-linear-gradient(45deg, #142a44 0 6px, #0d1c2e 6px 12px),
    linear-gradient(160deg, #1d3d60, #081422);
  background-position: center;
  background-size: auto, auto, cover, auto, auto;
}

/* ════════════════════════════════════════════════════════════
   对手座位的悬浮名片
   鼠标停在对手座位上时弹出的"基础数据 + 你的备注"。
   显示完全交给 :hover（见 views.ts 里 playerHoverCard 的说明），
   所以每次重渲染都不会把它弄丢；只有备注草稿打开时才用
   .draft-open 把它钉住，免得编辑到一半鼠标一晃就没了。
   ════════════════════════════════════════════════════════════ */

.seat-hovercard {
  position: absolute;
  z-index: 4;
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 238px;
  padding: 10px 11px 11px;
  border: 1px solid rgba(217, 184, 119, 0.4);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(15, 22, 30, 0.98), rgba(4, 8, 12, 0.99));
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.66),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  text-align: left;
  /* 默认（上半桌的座位）：名片落在座位下方，靠近桌心一侧 */
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
}

.seat:hover > .seat-hovercard,
.seat > .seat-hovercard.draft-open {
  display: flex;
}

/* 下半桌的座位：翻到座位上方，别压住自己的操作台 */
.seat.zone-bottom > .seat-hovercard,
.seat.zone-bottom-left > .seat-hovercard,
.seat.zone-bottom-right > .seat-hovercard {
  top: auto;
  bottom: calc(100% + 10px);
}

/* 左右两侧：贴向桌心那一侧，不往屏幕外伸 */
.seat.zone-left > .seat-hovercard {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.seat.zone-right > .seat-hovercard {
  left: auto;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.hov-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hov-avatar {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.hov-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.hov-name {
  color: var(--gold-bright);
  font-size: 13px;
  letter-spacing: 0.4px;
}

.hov-stack {
  color: #cdd6df;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.hov-status {
  flex: none;
  padding: 1px 6px;
  border: 1px solid rgba(208, 106, 97, 0.5);
  border-radius: 5px;
  background: rgba(74, 26, 30, 0.6);
  color: #ffd2cd;
  font-size: 9px;
  letter-spacing: 0.5px;
}

.hov-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(217, 184, 119, 0.16);
}

.hov-label {
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.85;
}

.hov-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.hov-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
}

.hov-stat em {
  color: #9aa6b2;
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.5px;
}

.hov-stat b {
  color: #f3ecdd;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
}

.hov-empty,
.hov-line {
  margin: 0;
  color: #9aa6b2;
  font-size: 10.5px;
  line-height: 1.5;
}

.hov-notes .note-editor {
  gap: 6px;
  margin: 0;
  padding: 8px;
}

.hov-notes .note-input {
  font-size: 11.5px;
}

.hov-note-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hov-note-list li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
}

.hov-note-text {
  color: #e6ecf2;
  font-size: 10.5px;
  line-height: 1.4;
}

.hov-note-tags {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.4px;
}

/* ════════════════════════════════════════════════════════════
   头像在名录 / 档案 / 注册页里的尺寸变体
   几何徽章的底色与图案由 avatars.ts 的编号算得出；人物/动物插画由
   avatarArt.ts 画成内联 SVG，这里只管大小与排布。
   ════════════════════════════════════════════════════════════ */

.roster-avatar {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  font-size: 17px;
}

/* 注册页的可选头像：只是把同一枚徽章放大、加上选中态 */
.avatar-option {
  width: 44px;
  height: 44px;
  font-size: 17px;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease-out),
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.avatar-option:hover {
  transform: translateY(-2px);
}

/* 头像选项本身是按钮，真正的头像节点在按钮内部；让它铺满按钮，
   外观与旧版"按钮即头像"保持一致。 */
.avatar-option > .seat-avatar {
  width: 100%;
  height: 100%;
}

.avatar-option.selected {
  border-color: rgba(245, 227, 179, 0.9);
  box-shadow:
    0 0 0 2px rgba(245, 227, 179, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── 开局注册页 ─────────────────────────────────────────── */

.setup {
  display: grid;
  place-items: center;
  padding: 40px 20px 64px;
}

.setup-card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 30px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(24, 33, 44, 0.92), rgba(7, 11, 16, 0.96));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.setup-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
}

.setup-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

/* 预览头像：注册页里放大展示，窄屏也不隐藏 */
.setup-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.setup-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.setup-preview-name {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 1px;
}

.setup-preview-meta {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.4px;
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-label {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 1px;
}

.name-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(6, 10, 14, 0.7);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
}

.name-input:focus {
  outline: none;
  border-color: var(--gold-line);
  box-shadow: 0 0 0 2px rgba(217, 184, 119, 0.18);
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
}

.setup-actions {
  justify-content: flex-end;
}

.setup-note {
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   右上角"用户情况"入口：头像 + 名字，点开改名字与头像
   ════════════════════════════════════════════════════════════ */

.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.nav-user:hover {
  border-color: var(--gold-line);
  background: rgba(255, 255, 255, 0.06);
}

.nav-user.active {
  border-color: var(--gold);
}

/* 头像在这里缩到导航的高度；display 显式写出来，免得被窄屏规则隐藏 */
.nav-user-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.nav-user-name {
  max-width: 96px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   牌桌聊天框（左上角）· 弹幕
   把 AI 的一句台词与真人的发言从"一闪而过的气泡"变成
   可回看的文字。聊天框与弹幕都活在牌毡容器里：聊天框取 z5
   （压得住座位与飞筹码；结算板同为 z5 但渲染更晚，仍然盖住它），
   弹幕层取 z4，从聊天框下面飘过。
   ════════════════════════════════════════════════════════════ */

.chat-box {
  position: absolute;
  /* 用容器查询单位贴着牌毡的左上角，宽屏不会被拉成一条长条 */
  top: clamp(16px, 3cqh, 34px);
  left: clamp(20px, 3cqw, 44px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: clamp(214px, 21cqw, 292px);
  /* 高度收着点：左中座位说话时气泡要摆在右手边，别正好落在聊天框下沿 */
  max-height: min(40%, 250px);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(217, 184, 119, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
    linear-gradient(180deg, rgba(16, 23, 31, 0.94), rgba(5, 9, 13, 0.96));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 12px;
}

/* 折叠态没有消息列表要撑高，让盒子按内容收缩（弹幕态仍显示列表，保持原高度） */
.chat-box.collapsed {
  max-height: none;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(217, 184, 119, 0.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  /* 标题栏是拖动手柄：给出"可抓"的光标，并禁掉触摸端的滚动与文字选择 */
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* 标题栏里的按钮仍然是"点"，不跟着变成抓手 */
.chat-head button {
  cursor: pointer;
}

/* 拖动中：光标收紧，并让位移跟手（不加过渡，否则会有延迟感） */
.chat-box.dragging .chat-head {
  cursor: grabbing;
}

.chat-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--gold-bright);
}

/* 标题前的小圆点：像一枚"在线"指示灯，让标题不显得空 */
.chat-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(89, 192, 141, 0.7);
}

.chat-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* 消息条数：收起时也能一眼知道有没有人说话 */
.chat-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chat-count.has-messages {
  background: rgba(217, 184, 119, 0.16);
  color: var(--gold-bright);
}

.chat-box .tiny {
  padding: 3px 8px;
  font-size: 11px;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 60px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 184, 119, 0.36) transparent;
  padding: 8px 10px;
}

.chat-list::-webkit-scrollbar {
  width: 5px;
}

.chat-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(217, 184, 119, 0.32);
}

.chat-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-item {
  line-height: 1.45;
  word-break: break-word;
}

.chat-who {
  margin-right: 2px;
  color: var(--gold);
  font-weight: 700;
}

.chat-item.is-you .chat-who {
  color: var(--green);
}

.chat-text {
  color: rgba(232, 238, 244, 0.92);
}

.chat-empty {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(217, 184, 119, 0.15);
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid rgba(217, 184, 119, 0.22);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}

.chat-input::placeholder {
  color: rgba(147, 160, 174, 0.7);
}

.chat-input:focus {
  outline: none;
  border-color: rgba(217, 184, 119, 0.6);
  box-shadow: 0 0 0 2px rgba(217, 184, 119, 0.16);
}

/* ── 弹幕层：铺满牌毡、裁掉溢出，只让消息自己飘 ───────── */

.danmaku-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.danmaku-item {
  position: absolute;
  left: 100%;
  /* 每条占一条轨道：5 条错开上下，同一时刻不会叠字 */
  top: calc(9% + var(--lane, 0) * 40px);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(217, 184, 119, 0.3);
  background: linear-gradient(180deg, rgba(12, 18, 25, 0.92), rgba(4, 8, 12, 0.92));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: clamp(12px, 0.92cqw, 15px);
  white-space: nowrap;
  will-change: transform;
  /* 时长由视图给的 --dur 决定，负延迟让它落在该有的进度上（见 danmakuLayer 说明） */
  animation: danmaku-fly var(--dur, 7000ms) linear forwards;
  animation-delay: var(--delay, 0ms);
}

.danmaku-item.is-you {
  border-color: rgba(89, 192, 141, 0.45);
}

.danmaku-who {
  color: var(--gold-bright);
  font-weight: 700;
}

.danmaku-item.is-you .danmaku-who {
  color: var(--green);
}

@keyframes danmaku-fly {
  from {
    transform: translateX(0);
  }
  to {
    /* 走完自身宽度 + 一整个牌毡宽度，才算彻底飘出左边 */
    transform: translateX(calc(-100cqw - 100%));
  }
}

/* 窄屏：聊天框再收窄一点，别盖住座位 */
@media (max-width: 1024px) {
  .chat-box {
    width: clamp(180px, 34cqw, 232px);
    max-height: min(44%, 210px);
  }
}

/* ── 出局后的"跳过本局" ───────────────────────────────
   真人打光筹码后本场还在模拟别的牌桌：右上角留一个醒目的跳过入口，
   牌桌上再弹一次问话（见 views.ts 的 skipPromptView / header-tools）。
   z-index 要压过结算板（5）、牌型速查（20）与积分规则（21）。 */

.skip-cta {
  border: 1px solid rgba(233, 196, 106, 0.7);
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.22), rgba(233, 196, 106, 0.08));
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.14), 0 6px 18px rgba(0, 0, 0, 0.45);
  animation: skip-cta-pulse 2.4s ease-in-out infinite;
}

.skip-cta:hover {
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.34), rgba(233, 196, 106, 0.16));
}

@keyframes skip-cta-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.14), 0 6px 18px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.22), 0 6px 18px rgba(0, 0, 0, 0.45);
  }
}

.skip-prompt {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 24;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(217, 184, 119, 0.5);
  background: linear-gradient(180deg, rgba(15, 23, 32, 0.99), rgba(6, 11, 16, 0.99));
  box-shadow: var(--shadow-3);
  text-align: center;
  animation: summary-in 0.22s cubic-bezier(0.2, 1.3, 0.5, 1);
}

.skip-kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 4px;
}

.skip-title {
  color: var(--gold);
  font-size: var(--text-lg);
  letter-spacing: 1px;
}

.skip-body {
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.skip-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.skip-yes,
.skip-no {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  cursor: pointer;
}

.skip-yes {
  border: 1px solid rgba(233, 196, 106, 0.7);
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.26), rgba(233, 196, 106, 0.1));
  color: var(--gold-bright);
  font-weight: 700;
}

.skip-yes:hover {
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.4), rgba(233, 196, 106, 0.18));
}

.skip-no {
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
}

.skip-no:hover {
  color: var(--text);
}