/* ============================================================
   骗子酒馆 Liar's Bar — 样式表
   深夜酒馆 · 烛光 · 威士忌与谎言
   ============================================================ */

:root {
  --bg-0: #0b0705;
  --bg-1: #171009;
  --wood-1: #2a1a0e;
  --wood-2: #3b2412;
  --felt: #1d3a2a;
  --felt-2: #14301f;
  --gold: #e3b25f;
  --gold-hi: #ffd98c;
  --amber: #ffb347;
  --red: #c0392b;
  --red-hi: #e74c3c;
  --ivory: #f4ead2;
  --card-face: #f7f1e0;
  --ink: #1c1410;
  --txt: #ecd9b0;
  --txt-dim: #9c8a6a;
  --shadow-deep: 0 14px 34px rgba(0,0,0,.6);
  --radius: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg-0);
  color: var(--txt);
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  overflow: hidden;
  user-select: none;
}

#app { position: fixed; inset: 0; }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; animation: screenIn .45s ease both; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

button {
  font-family: inherit; cursor: pointer;
  border: none; background: none; color: inherit;
}
button:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.6); }

/* ---------------- 通用按钮 ---------------- */
.btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
  border: 1px solid transparent;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #241505;
  box-shadow: 0 6px 18px rgba(227,178,95,.35);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(227,178,95,.55); }
.btn-danger {
  background: linear-gradient(180deg, var(--red-hi), var(--red));
  color: #fff;
  box-shadow: 0 6px 18px rgba(192,57,43,.35);
}
.btn-ghost {
  border-color: rgba(227,178,95,.45);
  color: var(--gold);
  background: rgba(23,16,9,.55);
}
.btn-ghost:hover:not(:disabled) { background: rgba(227,178,95,.12); }
.btn-small { padding: 6px 12px; font-size: 13px; }
.btn-big { padding: 14px 34px; font-size: 18px; }
.btn-back { align-self: flex-start; }

/* ============================================================
   主菜单
   ============================================================ */
#screen-menu { align-items: center; justify-content: center; overflow: hidden; }
.menu-bg {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(255,140,40,.34), transparent 55%),
    radial-gradient(ellipse at 18% 12%, rgba(255,190,90,.10), transparent 40%),
    linear-gradient(180deg, #120a06 0%, #241208 55%, #0c0705 100%);
  filter: blur(1px);
  pointer-events: none;
}
.menu-bg::after { /* 酒馆剪影灯影 */
  content: "🏮🏮🏮";
  position: absolute; bottom: 6%; width: 100%;
  text-align: center; font-size: 40px; letter-spacing: 40px;
  opacity: .5; filter: drop-shadow(0 0 18px rgba(255,150,50,.9));
}
.menu-inner {
  position: relative; text-align: center;
  max-width: 760px; width: 92%;
  padding: 30px 20px;
}
.menu-tag {
  letter-spacing: 6px; font-size: 13px; color: var(--txt-dim);
  margin-bottom: 18px;
}
.menu-title {
  font-size: clamp(58px, 13vw, 108px);
  font-weight: 900;
  letter-spacing: 10px;
  margin: 0 0 6px;
  color: var(--ivory);
  text-shadow:
    0 0 22px rgba(255,170,60,.55),
    0 6px 0 #5c2f0e,
    0 12px 24px rgba(0,0,0,.7);
  font-family: "STKaiti","KaiTi","FZKai-Z03S","Kaiti SC",serif;
}
.menu-title span { color: var(--gold); }
.menu-sub {
  font-size: 15px; line-height: 1.9; color: var(--txt-dim);
  margin: 14px 0 30px;
}
.menu-modes {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 26px;
}
.mode-card {
  background: linear-gradient(180deg, rgba(59,36,18,.9), rgba(34,20,10,.92));
  border: 1px solid rgba(227,178,95,.28);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: left;
  transition: transform .15s ease, border-color .2s, box-shadow .2s;
}
.mode-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-deep); }
.mode-icon { font-size: 34px; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.mode-name { font-size: 21px; font-weight: 800; color: var(--gold-hi); letter-spacing: 2px; margin-bottom: 6px; }
.mode-desc { font-size: 13px; color: var(--txt-dim); line-height: 1.6; }
.menu-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.menu-foot { margin-top: 30px; font-size: 11px; color: rgba(236,217,176,.4); letter-spacing: 1px; }

/* ============================================================
   选人
   ============================================================ */
#screen-lobby { align-items: center; justify-content: center; overflow: auto; }
.lobby-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(120,70,30,.5), transparent 60%),
    linear-gradient(180deg, #171009, #0b0705);
}
.lobby-inner { position: relative; width: 94%; max-width: 940px; padding: 22px 0 40px; }
.lobby-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lobby-title { font-size: 26px; margin: 0; letter-spacing: 3px; color: var(--ivory); }
.lobby-hint { color: var(--txt-dim); font-size: 14px; }
.lobby-hint b { color: var(--gold); }
.roster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-bottom: 18px;
}
.roster-card {
  background: linear-gradient(180deg, rgba(50,31,16,.95), rgba(26,16,9,.95));
  border: 1px solid rgba(227,178,95,.2);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  transition: transform .12s ease, border-color .2s, box-shadow .2s;
  position: relative;
}
.roster-card:not(.picked):hover { border-color: rgba(227,178,95,.55); transform: translateY(-2px); }
.roster-card.picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(227,178,95,.25);
}
.roster-card.player-row { cursor: default; border-style: dashed; opacity: .8; }
.roster-card .rc-top { display: flex; align-items: center; gap: 10px; }
.roster-card .rc-name { font-size: 16px; font-weight: 700; color: var(--ivory); }
.roster-card .rc-role { font-size: 11px; color: var(--txt-dim); margin-left: auto; }
.roster-card .rc-bio { font-size: 12px; line-height: 1.6; color: var(--txt-dim); min-height: 38px; }
.rc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(227,178,95,.14); color: var(--gold);
  border: 1px solid rgba(227,178,95,.3);
}
.lobby-actions { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.lobby-selected { color: var(--txt-dim); font-size: 14px; }
.lobby-selected b { color: var(--gold); }

/* ============================================================
   牌桌
   ============================================================ */
.table-room {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,170,60,.10), transparent 60%),
    linear-gradient(180deg, #1d120a 0%, #120a05 100%);
  overflow: hidden;
}
.room-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 160px rgba(0,0,0,.85);
}
.game-top {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  z-index: 5;
}
.game-title {
  font-size: 15px; letter-spacing: 4px; color: var(--gold);
  text-shadow: 0 0 12px rgba(227,178,95,.4);
}

/* ---- 对手席位（一排三人） ---- */
.seats-opp {
  position: relative; z-index: 3;
  display: flex; justify-content: space-evenly; align-items: flex-start;
  gap: 12px;
  padding: 4px 8px;
}
.seat-opp { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; }
.avatar-frame {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  background: radial-gradient(circle at 35% 30%, #4a2c14, #221208);
  border: 3px solid rgba(227,178,95,.35);
  box-shadow: var(--shadow-deep);
  transition: box-shadow .2s, border-color .2s;
}
.seat-opp .avatar-frame { width: 66px; height: 66px; font-size: 34px; }
.avatar-frame .ai-emoji { line-height: 1; }
.seat-active .avatar-frame {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(255,217,140,.35), 0 0 24px rgba(255,180,80,.6), var(--shadow-deep);
  animation: pulseRing 1.3s ease infinite;
}
@keyframes pulseRing {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,217,140,.25), 0 0 14px rgba(255,180,80,.35), var(--shadow-deep); }
  50% { box-shadow: 0 0 0 5px rgba(255,217,140,.4), 0 0 26px rgba(255,180,80,.7), var(--shadow-deep); }
}
.seat-dead .avatar-frame { filter: grayscale(1) brightness(.55); }
.seat-winner .avatar-frame { border-color: var(--gold-hi); box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(255,215,130,.8); }

.nameplate {
  font-size: 12px; font-weight: 700; color: var(--ivory);
  background: rgba(0,0,0,.5); padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; border: 1px solid rgba(227,178,95,.2);
}
.hand-count { font-size: 11px; color: var(--txt-dim); }
.hearts { font-size: 13px; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hearts .lost { opacity: .28; filter: grayscale(1); }
.opp-cards {
  display: flex; gap: 2px; height: 22px; margin-top: 2px;
}
.opp-cards i {
  width: 13px; height: 20px; border-radius: 2px; display: inline-block;
  background: repeating-linear-gradient(45deg, #7a2f2f 0 2px, #5c1f1f 2px 4px);
  border: 1px solid rgba(0,0,0,.5);
}

/* ---- 中央桌面 ---- */
.stage {
  position: relative; z-index: 2;
  flex: 1;
  margin: 4px 12px 6px;
  border-radius: 200px 200px 28px 28px / 40px 40px 16px 16px;
  background:
    radial-gradient(ellipse at 50% 30%, var(--felt), var(--felt-2) 75%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.5);
  border: 10px solid var(--wood-2);
  border-top-width: 8px; border-bottom-width: 14px;
  display: flex; flex-direction: column;
  min-height: 300px;
}
.stage-info {
  text-align: center; padding: 6px 0 2px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  min-height: 26px;
}
.rank-badge {
  font-size: 15px; font-weight: 800; letter-spacing: 2px;
  color: #2b1a08; background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  padding: 3px 16px; border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,190,90,.5);
  animation: badgeIn .4s ease;
}
@keyframes badgeIn { from { transform: scale(1.7); opacity: 0; } to { transform: none; opacity: 1; } }
.stage-sub { font-size: 13px; color: var(--txt-dim); }
.center-area {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 8px;
}

/* ---- 记录 ---- */
.log {
  position: absolute; right: 8px; bottom: 8px; z-index: 9;
  width: min(230px, 34%);
  max-height: 42%;
  overflow-y: auto;
  font-size: 12px; line-height: 1.7;
  background: rgba(10,6,3,.62);
  border: 1px solid rgba(227,178,95,.15);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--txt-dim);
  backdrop-filter: blur(2px);
}
.log::-webkit-scrollbar { width: 4px; }
.log::-webkit-scrollbar-thumb { background: rgba(227,178,95,.3); border-radius: 2px; }
.log p { margin: 0; }
.log .l-self { color: var(--gold-hi); }
.log .l-evt { color: #8fb9a6; }
.log p:last-child { animation: logIn .3s ease; }
@keyframes logIn { from { opacity: 0; transform: translateX(6px); } }

/* ---- 玩家席位 ---- */
.player-seat { position: relative; z-index: 4; padding: 2px 0 0; }
.ps-top {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 2px;
}
.ps-hand {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 118px;
  padding: 4px 10px 2px;
}
.card {
  --cw: clamp(46px, 9vw, 66px);
  --ch: calc(var(--cw) * 1.42);
  width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * .12);
  background: var(--card-face);
  border: 1px solid #d8c9a3;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  position: relative;
  transition: transform .18s ease, box-shadow .18s;
  cursor: pointer;
  margin: 0 -8px;
}
.card:hover:not(.disabled) { transform: translateY(-10px); z-index: 2; }
.card.selected { transform: translateY(-24px); box-shadow: 0 0 0 3px var(--gold-hi), 0 8px 16px rgba(0,0,0,.5); }
.card.disabled { cursor: not-allowed; filter: brightness(.55); }
.card .c-main { font-size: calc(var(--cw) * .5); font-weight: 800; line-height: 1; }
.card .c-suit { font-size: calc(var(--cw) * .34); margin-top: 2px; }
.card.red { color: #b0302a; }
.card.black { color: #221c16; }

/* 盖牌（背面） */
.card.down {
  background:
    repeating-linear-gradient(45deg, rgba(120,40,40,.25) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #8c2f2f, #5c1616 70%);
  border: 1px solid #7c1f1f;
}
.card.down::before {
  content: "✦";
  font-size: calc(var(--cw) * .4);
  color: rgba(255,200,120,.75);
  text-shadow: 0 0 8px rgba(255,160,60,.8);
}
/* 明牌验证标记（质疑翻牌演出） */
.card.claim-ok { box-shadow: 0 0 0 3px #6cc26c, 0 4px 10px rgba(0,0,0,.5); }
.card.claim-fail { box-shadow: 0 0 0 3px #e2554d, 0 4px 10px rgba(0,0,0,.5); }
.card.down.claim-ok::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * .5); color: #8fd08a;
  background: rgba(0,0,0,.25);
  text-shadow: 0 0 10px rgba(120,255,120,.9);
  border-radius: inherit;
}
.card.down.claim-fail::after {
  content: "✗";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * .5); color: #ff9d8a;
  background: rgba(0,0,0,.35);
  text-shadow: 0 0 10px rgba(255,80,60,.9);
  border-radius: inherit;
}

/* 中央牌堆 */
.pile {
  display: flex; align-items: center; justify-content: center;
}
.pile .card { margin: 0 -14px; cursor: default; animation: pileIn .3s ease; }
@keyframes pileIn { from { transform: translateY(-40px) scale(.7); opacity: 0; } }

.card.reveal { animation: revealFlip .5s ease; }
@keyframes revealFlip {
  0% { transform: rotateY(0) scale(1); }
  45% { transform: rotateY(90deg) scale(.9); }
  100% { transform: rotateY(0) scale(1); }
}
.card.shake { animation: shakeX .5s ease; }
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}
.card.fly-to { transition: all .5s cubic-bezier(.3,1.2,.4,1); }

/* ---- 控制区 ---- */
.controls {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  padding: 6px 12px 14px;
  min-height: 56px;
}
.ctl-hint { font-size: 13px; color: var(--txt-dim); letter-spacing: 1px; }

/* ---- 气泡 ---- */
.bubble {
  position: absolute; z-index: 12;
  background: rgba(20,13,6,.94);
  border: 1px solid rgba(227,178,95,.4);
  color: var(--ivory);
  padding: 6px 12px; border-radius: 12px 12px 12px 2px;
  font-size: 13px; max-width: 210px;
  box-shadow: var(--shadow-deep);
  animation: bubbleIn .25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(.9); } }

/* ---- 中央提示 ---- */
.big-flag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 20;
  font-size: clamp(28px, 6vw, 54px); font-weight: 900; letter-spacing: 8px;
  padding: 10px 30px; border-radius: 14px;
  background: rgba(10,6,3,.85);
  color: var(--gold-hi);
  border: 2px solid var(--gold);
  box-shadow: 0 0 40px rgba(255,170,60,.5);
  animation: flagIn .35s cubic-bezier(.2,1.6,.4,1) both;
  pointer-events: none;
  text-align: center;
}
.big-flag.danger { color: #ffb4a6; border-color: var(--red-hi); box-shadow: 0 0 40px rgba(231,76,60,.55); }
.big-flag.win { color: #b8f0a0; border-color: #7ecf62; box-shadow: 0 0 40px rgba(140,255,120,.45); }
@keyframes flagIn { from { opacity: 0; transform: translate(-50%,-50%) scale(2.2); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.big-flag.flag-out { animation: flagOut .4s ease both; }
@keyframes flagOut { to { opacity: 0; transform: translate(-50%,-58%) scale(.85); } }

/* 轮盘图形 */
.gun-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gun-svg { filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.chambers { display: flex; gap: 8px; }
.chamber {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--gold);
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--ivory);
}
.chamber.live { border-color: var(--red-hi); background: radial-gradient(circle, #7a1f14, #3d0c06); animation: livePulse 1s ease infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 16px rgba(255,90,60,.8); } }
.chamber.spent { opacity: .35; }
.gun-meta { font-size: 14px; color: var(--ivory); letter-spacing: 2px; }
.gun-meta b { color: var(--red-hi); font-size: 18px; }

.die-box {
  width: 64px; height: 64px; border-radius: 10px;
  background: #efe6cf; color: #1c1410;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800;
  box-shadow: 0 6px 12px rgba(0,0,0,.5), inset 0 -4px 0 rgba(0,0,0,.18);
  animation: dieToss .5s ease;
}
@keyframes dieToss { 0% { transform: rotate(-720deg) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---- 浮层 / 弹窗 ---- */
.overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(6,3,1,.72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .25s ease;
}
.overlay[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: linear-gradient(180deg, #241609, #160d06);
  border: 1px solid rgba(227,178,95,.4);
  border-radius: 16px;
  box-shadow: var(--shadow-deep);
  max-width: 620px; width: 100%;
  max-height: 86%; overflow-y: auto;
  padding: 22px 24px;
  animation: modalIn .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes modalIn { from { transform: scale(.92) translateY(10px); opacity: 0; } }
.modal h3 { color: var(--gold-hi); letter-spacing: 3px; margin: 0 0 12px; font-size: 22px; }
.modal h4 { color: var(--gold); margin: 14px 0 6px; font-size: 15px; letter-spacing: 1px; }
.modal p, .modal li { color: var(--txt); font-size: 14px; line-height: 1.85; margin: 4px 0; }
.modal ul { padding-left: 20px; margin: 6px 0; }
.modal .rules-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.modal-close-x {
  float: right; font-size: 18px; color: var(--txt-dim); padding: 4px 8px;
}
.result-title { font-size: 30px; text-align: center; letter-spacing: 6px; margin: 6px 0 4px; }
.result-emoji { text-align: center; font-size: 52px; }
.result-sub { text-align: center; color: var(--txt-dim); margin-bottom: 10px; }
.result-list { list-style: none; padding: 0; margin: 8px 0 4px; }
.result-list li {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px dashed rgba(227,178,95,.18);
  padding: 7px 2px;
}
.result-list .r-name { display: flex; align-items: center; gap: 8px; }
.result-list .r-status { font-size: 13px; }

.toast-holder { align-items: flex-start; padding-top: 5%; background: none; backdrop-filter: none; pointer-events: none; }
.toast {
  background: rgba(16,10,5,.92);
  border: 1px solid var(--gold);
  color: var(--ivory);
  padding: 10px 22px; border-radius: 999px;
  font-size: 15px; letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  animation: toastIn .3s ease;
  margin: 6px 0;
}
@keyframes toastIn { from { transform: translateY(-16px); opacity: 0; } }

/* ---- 牌局结算 ---- */
.winner-banner {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(80,50,10,.55), rgba(0,0,0,.82));
  pointer-events: none;
  animation: fadeIn 1s ease;
}
.winner-card {
  text-align: center;
  background: rgba(10,6,3,.9);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 30px 44px;
  box-shadow: 0 0 70px rgba(255,180,80,.5);
  animation: modalIn .6s cubic-bezier(.2,1.4,.4,1);
}
.winner-card .w-emoji { font-size: 60px; }
.winner-card .w-name { font-size: 30px; font-weight: 900; color: var(--gold-hi); letter-spacing: 6px; margin: 8px 0; }
.winner-card .w-sub { color: var(--txt-dim); margin-bottom: 6px; }
.winner-card .w-stars { font-size: 20px; letter-spacing: 4px; color: var(--gold); }

/* ---- 骰子 ---- */
.dice-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.die-face {
  font-size: 38px; line-height: 1;
  color: #f2e9d0;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 14px rgba(255,190,90,.25);
}
.dice-own-label { font-size: 13px; color: var(--txt-dim); letter-spacing: 1px; margin-bottom: 4px; }

/* 叫价面板 */
.bidbar { display: flex; flex-direction: column; gap: 8px; width: min(560px, 96%); }
.bidrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bid-state { text-align: center; font-size: 13px; line-height: 1.8; color: var(--txt-dim); }
.bid-num {
  min-width: 44px; text-align: center;
  font-size: 20px; font-weight: 800; color: var(--gold-hi);
}
.btn.bid-step { min-width: 40px; font-size: 18px; line-height: 1; }
.btn.bid-face { min-width: 40px; font-size: 18px; line-height: 1; padding: 4px 6px; }
.btn.bid-face.sel {
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #241505;
  box-shadow: 0 0 12px rgba(255,200,110,.45);
}
.btn.bid-face:disabled { filter: grayscale(1) brightness(.45); }

/* ---- 响应式 ---- */
@media (max-width: 760px) {
  .log { width: 42%; font-size: 11px; }
  .seat-opp { min-width: 0; }
  .seat-opp .avatar-frame { width: 52px; height: 52px; font-size: 26px; }
  .nameplate { font-size: 10px; padding: 1px 6px; }
  .player-seat .avatar-frame { width: 52px; height: 52px; font-size: 26px; }
  .controls .btn { padding: 8px 14px; font-size: 14px; }
}