/* h5/css/style.css —— 三打一 H5 版样式（横屏版：160×90 设计基准，脱胎于小程序 750rpx 竖版） */

/* rem 基准：160rem = 16:9 横屏设计宽（手机横屏/桌面随窗口整体缩放，宽、高取紧者）；
   更宽的窗口（20:9 手机、超宽屏）版心横向拉伸至 240rem 封顶，牌桌中央区吸收多余宽度；
   更高比例（4:3 iPad 横屏）多余高度由牌桌中部 flex 吸收 */
html { font-size: min(calc(100vw / 160), calc(100vh / 90)); }
/* iOS 横屏地址栏收展跟随动态视口（dvh 变化触发 resize → app.js 重排手牌） */
@supports (height: 100dvh) {
  html { font-size: min(calc(100vw / 160), calc(100dvh / 90)); }
  html, body { height: 100dvh; }
}

/* 版心随视口满宽拉伸（超宽屏 240rem 封顶居中）；竖屏手机见文末整层旋转成横屏 */
#app { max-width: 240rem; margin: 0 auto; }

/* ========== 全局 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 关键：视图类有 display:flex，同优先级会覆盖 UA 的 [hidden]{display:none}
   → hidden 属性失效、三个视图全叠着显示、点开始"没反应"。强制 hidden 生效。 */
[hidden] { display: none !important; }

html, body, #app { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  color: #f5f2e9;
  background: #07452a;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

:root {
  --color-felt-dark: #07452a;
  --color-felt: #0b6b3a;
  --color-felt-light: #15934f;
  --color-card-bg: #ffffff;
  --color-card-border: #c8c2b6;
  --color-red: #d0342c;
  --color-black: #222222;
  --color-gold: #f3c14b;
  --color-gold-deep: #caa235;
  --color-primary: #f3c14b;
  --color-danger: #e54d42;
  --color-success: #35c46a;
  --color-text-light: #f5f2e9;
  --color-text-dim: #a8d5ba;
  --color-mask: rgba(0, 0, 0, 0.55);
  --card-w: 11.73rem;
  --card-h: 16.53rem;
  --radius-card: 1.33rem;
  --radius-btn: 5.87rem;
  --anim-fast: 150ms ease;
  --anim-normal: 300ms ease;
}

.view { height: 100%; }

button { font-family: inherit; border: none; outline: none; cursor: pointer; }

/* ========== 按钮 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 5.87rem;
  border-radius: var(--radius-btn);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--anim-fast), opacity var(--anim-fast);
}
.btn--primary {
  background: linear-gradient(180deg, #f7d478, var(--color-primary));
  color: #5c3d00;
  border: 0.27rem solid var(--color-gold-deep);
  box-shadow: 0 0.8rem 2.13rem rgba(202, 162, 53, 0.35);
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-light);
  border: 0.27rem solid rgba(255, 255, 255, 0.35);
}
.btn--disabled { opacity: 0.4; pointer-events: none; }
.btn:active { transform: scale(0.96); }

/* ========== 首页 ========== */
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.33rem;
  background: radial-gradient(circle at 50% 30%, #12904f, #0b6b3a 70%, #074f2c);
}
.home__logo { text-align: center; margin-bottom: 6.67rem; }
.home__title {
  font-size: 13.33rem;
  font-weight: 800;
  color: var(--color-gold);
  text-shadow: 0 0.53rem 1.6rem rgba(0, 0, 0, 0.4);
  letter-spacing: 1.6rem;
  margin-left: 1.6rem;
}
.home__subtitle { font-size: 3.73rem; color: var(--color-text-dim); margin-top: 1.6rem; }
.home__actions { display: flex; flex-direction: column; align-items: center; gap: 4rem; width: 100%; }
.home__start { font-size: 5.33rem; padding: 3.47rem 12rem; }
.home__secondary { display: flex; gap: 4rem; }
.home__stats { margin-top: 4rem; font-size: 3.2rem; color: var(--color-text-dim); }

/* ========== 规则页 ========== */
.rules {
  background: radial-gradient(circle at 50% 30%, #12904f, #0b6b3a 70%, #074f2c);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 3.2rem;
}
.rules__nav { margin-bottom: 2.67rem; }
.rules__body {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2.13rem;
  padding: 4rem;
  font-size: 3.47rem;
  line-height: 1.8;
  max-width: 120rem; /* 横屏版心宽，长文收窄保可读 */
  margin: 0 auto;
  width: 100%;
}
.rules__body h3 { color: var(--color-gold); margin: 3.2rem 0 1.33rem; font-size: 4rem; }
.rules__body p { color: var(--color-text-light); }
.rules__body li { color: var(--color-text-light); margin-left: 4rem; }

/* ========== 牌桌 ========== */
.table {
  height: 100%;
  background: radial-gradient(circle at 50% 30%, #12904f, #0b6b3a 70%, #074f2c);
  display: flex;
  flex-direction: column;
  /* 横屏：左右吃刘海安全区（iPhone 横屏刘海在两侧），底边避开细边距即可 */
  padding: 1.2rem max(2.4rem, env(safe-area-inset-left)) 1.6rem max(2.4rem, env(safe-area-inset-right));
}

.table__north { display: flex; justify-content: center; margin-bottom: 0.8rem; }

.table__mid { flex: 1; display: flex; align-items: stretch; gap: 1.07rem; min-height: 0; }

.table__side { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; }

.table__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 顶部对齐：内容超高时不再向上溢出压住北家头像（桌面矮视口场景） */
  justify-content: flex-start;
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* 横屏纵向预算紧（90rem）：工具条收窄、居中成组，不再左右贴边拉开 */
.table__tools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.67rem;
  margin: 0.4rem 0;
}
.table__tool-btn { padding: 0.8rem 3.2rem; font-size: 2.67rem; }
/* 音效开关：单字符图标，收窄内边距免挤占工具条 */
.table__tool-btn--sound { padding: 0.8rem 2.13rem; }
/* 重发二次确认：首点染红示警，2.5s 内再点才整局重发，超时自动复位 */
.table__tool-btn--armed {
  background: rgba(229, 77, 66, 0.25);
  border-color: var(--color-danger);
  color: #ffd9d5;
}

.table__trump-chip {
  padding: 0.8rem 2.67rem;
  border-radius: 999rem;
  background: rgba(0, 0, 0, 0.32);
  border: 0.27rem solid rgba(243, 193, 75, 0.5);
  color: var(--color-gold);
  font-size: 2.67rem;
  font-weight: 600;
}

.table__hand { background: rgba(0, 0, 0, 0.18); border-radius: 2.13rem; }

/* 操作条改为悬浮层（挂在中央区底部、工具条正上方）：不再占用纵向排版高度——
   横屏 90rem 里 20rem 固定插槽会把出牌区挤爆。报分/选主/埋底阶段中央出牌区是空的，
   悬浮不遮挡；出牌阶段按钮出现时南家尚未出牌，同样无遮挡 */
.table__action-slot {
  /* 全宽铺开再由 justify-content 居中子项：不能写 left:50%+translateX(-50%)，
     那样 shrink-to-fit 可用宽只有包含块的一半，叫分条会被挤成三行 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3.73rem;
  pointer-events: none; /* 空槽不挡牌桌 */
}
.table__action-slot > * { pointer-events: auto; }

/* ========== 状态栏 ========== */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1.6rem;
  padding: 0.8rem 1.6rem;
  width: 100%;
  max-width: 120rem; /* 横屏版心宽，收紧居中避免两端项目拉太开 */
}
.status-bar__item { display: flex; flex-direction: column; align-items: center; }
.status-bar__label { font-size: 2.4rem; color: var(--color-text-dim); }
.status-bar__value { font-size: 3.47rem; font-weight: 700; color: var(--color-text-light); }
.status-bar__value--gold { color: var(--color-gold); }
.status-bar__value--dim { font-size: 2.93rem; font-weight: 500; color: var(--color-text-dim); }
.status-bar__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 2.67rem;
  border-radius: 1.33rem;
  background: rgba(255, 255, 255, 0.08);
  border: 0.27rem solid rgba(255, 255, 255, 0.15);
}
.status-bar__score--mine { border-color: rgba(243, 193, 75, 0.55); }
.status-bar__score--enemy { border-color: rgba(229, 77, 66, 0.5); }
.status-bar__score-label { font-size: 2.4rem; color: var(--color-text-dim); }
.status-bar__score-value {
  font-size: 4.53rem;
  font-weight: 800;
  color: var(--color-text-light);
  font-family: 'DIN Alternate', 'Menlo', monospace;
}
.status-bar__score--mine .status-bar__score-value { color: var(--color-gold); }
.status-bar__divider { width: 0.27rem; height: 5.33rem; background: rgba(255, 255, 255, 0.2); }

/* ========== 中央出牌区 ========== */
.trick-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; min-height: 27.6rem; }
.trick-area--dim { opacity: 0.45; filter: saturate(0.6); }
/* 三行各自贴边：北贴顶（头像正下方）、南贴底（手牌正上方）、西/东经 mid 贴左右——不再向中心聚拢 */
.trick-area__seat { display: flex; align-items: center; justify-content: center; min-height: 9.2rem; }
.trick-area__middle { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.trick-area__seat--west, .trick-area__seat--east { min-width: 16rem; }
.trick-area__bottom-holder { flex: 1; display: flex; align-items: center; justify-content: center; }
.trick-area__bottom { display: flex; flex-direction: column; align-items: center; }
.trick-area__bottom-cards { display: flex; }
.trick-area__bottom-card {
  width: 5.33rem; height: 7.47rem; margin-left: -1.87rem; border-radius: 0.8rem;
  background: repeating-linear-gradient(45deg, #2c5f8a, #2c5f8a 0.8rem, #1d4467 0.8rem, #1d4467 1.6rem);
  border: 0.27rem solid #16374f;
}
.trick-area__bottom-label { font-size: 2.67rem; color: var(--color-text-dim); margin-top: 0.8rem; }

/* ========== 手牌区 ========== */
.hand-area { width: 100%; padding: 0.8rem 0; }
.hand-area__label { font-size: 2.67rem; color: var(--color-text-dim); margin-bottom: 0.4rem; padding-left: 2.13rem; min-height: 3.2rem; }
.hand-area__row { display: flex; align-items: flex-end; padding: 3.2rem 1.07rem 0.8rem; min-height: 17.5rem; }
.hand-area__divider {
  align-self: stretch;
  width: 0.53rem;
  margin: 0.8rem 0.53rem 0.8rem 2.13rem;
  border-radius: 0.27rem;
  background: linear-gradient(180deg, rgba(243, 193, 75, 0.15), rgba(243, 193, 75, 0.85), rgba(243, 193, 75, 0.15));
  box-shadow: 0 0 1.07rem rgba(243, 193, 75, 0.4);
  flex-shrink: 0;
}

/* ========== 卡牌 ========== */
.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius-card);
  background: var(--color-card-bg);
  border: 0.27rem solid var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast);
  flex-shrink: 0;
  box-shadow: 0 0.27rem 0.8rem rgba(0, 0, 0, 0.22);
}
.card--red { color: var(--color-red); }
.card--black { color: var(--color-black); }
.card--trump {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 0.27rem rgba(243, 193, 75, 0.55), 0 0.27rem 0.8rem rgba(0, 0, 0, 0.22);
}
.card--selected { transform: translateY(-3.2rem); box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.35); border-color: var(--color-primary); }
.card--disabled { opacity: 0.35; filter: grayscale(0.8); }
.card__corner { position: absolute; top: 0.8rem; left: 1.07rem; display: flex; flex-direction: column; align-items: center; }
.card__rank { font-size: 4rem; font-weight: 700; line-height: 1.1; }
.card__suit { font-size: 3.2rem; line-height: 1.1; }
.card--dense { width: 8.53rem; height: 12.8rem; border-radius: 1.07rem; }
.card--dense .card__rank { font-size: 3.2rem; }
.card--dense .card__suit { font-size: 2.67rem; }
.card--dense .card__corner { top: 0.53rem; left: 0.53rem; }
.card--joker { background: linear-gradient(160deg, #fffef7 0%, #ffe9b8 100%); }
.card--joker-big { background: linear-gradient(160deg, #fff5f3 0%, #ffd9c2 55%, #ffb98a 100%); }
.card__rank--joker { font-size: 4rem; line-height: 1.1; }
/* 小王空心星描边微加粗，避免小字号下空心轮廓不清 */
.card--joker .card__rank--joker { font-weight: 700; text-shadow: 0 0 0.27rem currentColor; }
.card--dense .card__rank--joker { font-size: 3.2rem; }

/* 出牌区专属小牌规格（比 dense 再小一档）：横屏三行出牌必须塞进中央区可用高度，
   否则 space-between 会把南家牌挤出下边界压到工具条 */
.trick-area .card { width: 6.4rem; height: 9.2rem; }
.trick-area .card__rank { font-size: 2.67rem; }
.trick-area .card__suit { font-size: 2.13rem; }
.trick-area .card__rank--joker { font-size: 2.67rem; }
.trick-area .card__corner { top: 0.4rem; left: 0.53rem; }

/* ========== 座位信息 ========== */
.seat-info {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 2.13rem;
  padding: 1.33rem 2.13rem;
  border: 0.27rem solid transparent;
  transition: border-color var(--anim-fast), box-shadow var(--anim-fast);
}
.seat-info--turn { border-color: var(--color-primary); box-shadow: 0 0 2.13rem rgba(243, 193, 75, 0.4); }
.seat-info--vertical { flex-direction: column; padding: 1.6rem 1.33rem; gap: 0.8rem; }
.seat-info--vertical .seat-info__meta { align-items: center; min-width: 0; }
.seat-info--vertical .seat-info__name { font-size: 2.93rem; }
.seat-info__avatar {
  position: relative;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  background: linear-gradient(160deg, #35c46a, #128a45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.27rem 0.8rem rgba(0, 0, 0, 0.3);
}
.seat-info__avatar-text { font-size: 3.73rem; font-weight: 700; color: #fff; }
/* v2.2 拿底牌者（叫牌成交/埋底）：头像绿转金黄，一眼认出庄家（配色同叫分气泡） */
.seat-info__avatar--gold {
  background: linear-gradient(160deg, #f7d478, #e0a92c);
  box-shadow: 0 0 1.6rem rgba(243, 193, 75, 0.45);
}
.seat-info__avatar--gold .seat-info__avatar-text { color: #5c3d00; }
.seat-info__dealer-badge {
  position: absolute;
  top: -1.6rem; right: -1.6rem;
  width: 5.33rem; height: 5.33rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7d478, #e8a92f);
  border: 0.27rem solid #b8860b;
  color: #5c3d00;
  font-size: 2.67rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-float 2.2s ease-in-out infinite;
}
.seat-info__meta { display: flex; flex-direction: column; margin-left: 1.6rem; }
.seat-info--vertical .seat-info__meta { margin-left: 0; }
.seat-info__name { font-size: 3.2rem; color: var(--color-text-light); }
.seat-info__cards { color: var(--color-text-dim); font-size: 2.67rem; }
/* 北家在纵排流里：思考指示若占位会把出牌区顶下去（横屏高度预算紧）→ 悬浮在座位下方 */
#seat-2 .seat-info__thinking {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.4rem;
  white-space: nowrap;
}
.seat-info__thinking {
  display: flex; gap: 0.8rem; align-items: center;
  padding: 0.8rem 1.6rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999rem;
  box-shadow: 0 0.53rem 1.33rem rgba(0, 0, 0, 0.25);
  margin-top: 1.07rem;
}
.seat-info--vertical .seat-info__thinking { padding: 0.53rem 1.33rem; }
.seat-info__dot { width: 1.33rem; height: 1.33rem; border-radius: 50%; background: #0b6b3a; animation: dot-jump 1.2s ease-in-out infinite; }
.seat-info__dot--2 { animation-delay: 0.15s; }
.seat-info__dot--3 { animation-delay: 0.3s; }
.seat-info__camp {
  font-size: 2.4rem; line-height: 1; padding: 0.53rem 1.33rem; border-radius: 1.07rem;
  background: rgba(255, 255, 255, 0.15); color: var(--color-text-dim);
}
.seat-info__camp--foe {
  background: rgba(229, 77, 66, 0.35); color: #ffb3ad; border: 0.13rem solid rgba(229, 77, 66, 0.5);
}
.seat-info--vertical .seat-info__camp { font-size: 2.13rem; padding: 0.4rem 1.07rem; }

/* ========== 报分/选主/埋底/出牌操作条 ========== */
/* 横屏压扁：提示语/选项/不叫同行横排换行，窄屏两行也只占 ~16rem 高，不碰状态栏与北家 */
.bid-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.07rem;
  background: rgba(0, 0, 0, 0.35); border-radius: 2.13rem; padding: 1.6rem;
}
.bid-bar__tip { font-size: 2.93rem; color: var(--color-gold); }
.bid-bar__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.07rem; }
.bid-bar__option {
  background: linear-gradient(180deg, #f7d478, var(--color-primary));
  border-radius: 1.6rem; padding: 0.8rem 2.67rem;
  display: flex; flex-direction: column; align-items: center;
  border: 0.27rem solid #caa235;
}
.bid-bar__option:active { transform: scale(0.95); }
.bid-bar__option-label { font-size: 3.2rem; font-weight: 700; color: #5c3d00; }
.bid-bar__option-sub { font-size: 2.67rem; color: #7a5a1a; }
.bid-bar__pass {
  padding: 0.8rem 4.27rem; border-radius: 999rem;
  background: rgba(255, 255, 255, 0.12); border: 0.27rem solid rgba(255, 255, 255, 0.3);
  color: var(--color-text-light); font-size: 2.93rem;
}
.bid-bar__option--suit { min-width: 16rem; padding: 1.6rem 3.73rem; }
.bid-bar__suit-symbol { font-size: 6.4rem; font-weight: 700; color: #222; line-height: 1.2; }
.bid-bar__option--red .bid-bar__suit-symbol { color: #d0342c; }

.bury-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0, 0, 0, 0.35); border-radius: 2.13rem; padding: 1.87rem 2.67rem;
  width: 100%;
}
.bury-bar__tip { font-size: 3.2rem; color: var(--color-gold); }
.bury-bar__confirm {
  padding: 1.6rem 4.27rem; border-radius: 999rem;
  background: linear-gradient(180deg, #f7d478, var(--color-primary));
  border: 0.27rem solid #caa235;
  color: #5c3d00; font-size: 3.47rem; font-weight: 700;
}

/* 末墩扣底条：最后一墩亮出停顿后才弹；操作条贴底会压住南家末墩牌，抬高悬进中央空档。
   单行紧凑（高≤9rem）：任何窗口下都不越出中排空档碰到北家牌 */
.settle-bar {
  display: flex; align-items: center; gap: 2.67rem;
  background: rgba(0, 0, 0, 0.55); border-radius: 2.13rem; padding: 1.2rem 2.67rem;
  margin-bottom: 10.4rem; /* 越过南家末墩牌行（9.2rem）再留呼吸空隙 */
  animation: play-in var(--anim-normal) ease;
}
.settle-bar__tip { font-size: 3.2rem; color: var(--color-gold); }
.settle-bar__confirm {
  padding: 1.2rem 4.8rem; border-radius: 999rem;
  background: linear-gradient(180deg, #f7d478, var(--color-primary));
  border: 0.27rem solid #caa235;
  color: #5c3d00; font-size: 3.47rem; font-weight: 700;
}

/* ========== 结算弹层 ========== */
.result-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; }
.result-modal__mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--color-mask); }
.result-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100rem; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(170deg, #fffdf5, #f7ecd2);
  border-radius: 3.2rem; padding: 5.33rem 4rem;
  box-shadow: 0 2.67rem 8rem rgba(0, 0, 0, 0.45);
}
.result-modal__banner { text-align: center; font-size: 5.33rem; font-weight: 800; color: #8a5a2b; margin-bottom: 3.2rem; }
.result-modal__banner--win { color: #d0342c; }
.result-modal__scores { display: flex; flex-wrap: wrap; gap: 2.67rem; justify-content: center; margin-bottom: 3.2rem; }
.result-modal__score-item {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0, 0, 0, 0.06); border-radius: 1.6rem; padding: 2.13rem 4rem; min-width: 24rem;
}
.result-modal__score-label { font-size: 2.93rem; color: #8a6d3a; }
.result-modal__score-value { font-size: 5.33rem; font-weight: 800; color: #5c4a24; }
.result-modal__score-value--gold { color: #b8860b; }
.result-modal__bottom { text-align: center; margin-bottom: 3.2rem; }
.result-modal__bottom-title { font-size: 3.2rem; color: #8a6d3a; margin-bottom: 1.6rem; }
.result-modal__bottom-cards { display: flex; justify-content: center; }
.result-modal__actions { display: flex; gap: 3.2rem; justify-content: center; }

/* ========== 历史弹层 ========== */
.history-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; }
.history-modal__mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--color-mask); }
.history-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100rem; max-height: 80vh;
  background: linear-gradient(170deg, #fffdf5, #f7ecd2);
  border-radius: 3.2rem; padding: 4rem;
  display: flex; flex-direction: column;
  box-shadow: 0 2.67rem 8rem rgba(0, 0, 0, 0.45);
}
.history-modal__title { font-size: 4rem; font-weight: 700; color: #8a5a2b; margin-bottom: 2.67rem; text-align: center; }
.history-modal__list { overflow-y: auto; flex: 1; }
.history-modal__trick {
  background: rgba(0, 0, 0, 0.05); border-radius: 1.6rem; padding: 2.13rem; margin-bottom: 1.87rem;
}
.history-modal__trick-head { font-size: 3.2rem; color: #5c4a24; font-weight: 600; margin-bottom: 1.07rem; }
.history-modal__play { display: block; font-size: 2.93rem; color: #7a5f33; line-height: 1.7; }
.history-modal__empty { text-align: center; color: #8a6d3a; padding: 4rem; font-size: 3.2rem; }
.history-modal__close { margin-top: 2.67rem; align-self: center; }

/* ========== 叫分气泡（挂各座位旁，去中心化） ========== */
.seat-info__bid-bubble {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 0.8rem; padding: 0.53rem 1.6rem; border-radius: 999rem;
  font-size: 2.67rem; font-weight: 600; white-space: nowrap; z-index: 6;
  pointer-events: none; color: #5c3d00;
  background: linear-gradient(180deg, #f7d478, #f3c14b);
  border: 0.27rem solid #caa235;
  box-shadow: 0 0.53rem 1.07rem rgba(0, 0, 0, 0.25);
}
.seat-info__bid-bubble--pass {
  color: #d8cfc0; background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.18);
}
/* 东家（右侧）气泡朝桌心 → 放座位左侧；西家（左侧）→ 放座位右侧 */
#seat-1 .seat-info__bid-bubble { top: 50%; left: auto; right: 100%; transform: translateY(-50%); margin-top: 0; margin-right: 0.8rem; }
#seat-3 .seat-info__bid-bubble { top: 50%; left: 100%; transform: translateY(-50%); margin-top: 0; margin-left: 0.8rem; }

/* ========== 底牌明示 ========== */
.table__bottom-reveal { display: flex; flex-direction: column; align-items: center; margin-top: 0.53rem; }
.table__bottom-reveal-label { font-size: 2.67rem; color: var(--color-gold); margin-bottom: 0.53rem; }
.table__bottom-reveal-cards { display: flex; align-items: center; }

/* ========== 收墩飘分 ========== */
.table__float-layer {
  position: absolute; top: 40%; left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none; z-index: 10;
}
.table__float-points {
  font-size: 7.47rem; font-weight: 800; color: var(--color-gold);
  text-shadow: 0 0.53rem 1.6rem rgba(0, 0, 0, 0.5), 0 0 2.67rem rgba(243, 193, 75, 0.6);
}

/* ========== 发牌动画 ========== */
.deal-anim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 8; pointer-events: none; }
.deal-anim__deck {
  position: absolute; left: 50%; top: 46%; width: 0; height: 0;
  animation: deal-deck-pulse 0.9s ease-in-out infinite;
}
.deal-anim__deck-card {
  position: absolute; left: -5.87rem; top: -8rem;
  width: 11.73rem; height: 16rem;
  border-radius: 1.33rem;
  background: linear-gradient(160deg, #4a72c4 0%, #33518f 55%, #274070 100%);
  border: 0.4rem solid #e8ecf4;
  box-shadow: 0 0.53rem 1.33rem rgba(0, 0, 0, 0.35);
}
.deal-anim__deck-card--2 { transform: translate(-0.67rem, 0.67rem) rotate(-4deg); }
.deal-anim__deck-card--3 { transform: translate(0.67rem, -0.67rem) rotate(3deg); }
.deal-anim__fly-wrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.deal-anim__fly {
  position: absolute; left: 50%; top: 46%;
  width: 11.73rem; height: 16rem;
  margin-left: -5.87rem; margin-top: -8rem;
  border-radius: 1.33rem;
  background: linear-gradient(160deg, #4a72c4 0%, #33518f 55%, #274070 100%);
  border: 0.4rem solid #e8ecf4;
  box-shadow: 0 0.53rem 1.33rem rgba(0, 0, 0, 0.3);
  animation-duration: 320ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.deal-anim__fly--s0 { animation-name: deal-fly-s0; }
.deal-anim__fly--s1 { animation-name: deal-fly-s1; }
.deal-anim__fly--s2 { animation-name: deal-fly-s2; }
.deal-anim__fly--s3 { animation-name: deal-fly-s3; }

@keyframes deal-fly-s0 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate(0, 36rem) rotate(24deg) scale(0.85); opacity: 1; }
  100% { transform: translate(0, 48rem) rotate(40deg) scale(0.6); opacity: 0; }
}
@keyframes deal-fly-s1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate(46rem, 2rem) rotate(24deg) scale(0.85); opacity: 1; }
  100% { transform: translate(60rem, 2.67rem) rotate(40deg) scale(0.6); opacity: 0; }
}
@keyframes deal-fly-s2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate(0, -36rem) rotate(24deg) scale(0.85); opacity: 1; }
  100% { transform: translate(0, -48rem) rotate(40deg) scale(0.6); opacity: 0; }
}
@keyframes deal-fly-s3 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate(-46rem, 2rem) rotate(24deg) scale(0.85); opacity: 1; }
  100% { transform: translate(-60rem, 2.67rem) rotate(40deg) scale(0.6); opacity: 0; }
}
@keyframes deal-deck-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ========== 抓底牌动画 ========== */
.grab-anim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 9; pointer-events: none; }
.grab-anim__glow {
  position: absolute; left: 50%; top: 46%;
  width: 56rem; height: 40rem;
  margin-left: -28rem; margin-top: -20rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(243, 193, 75, 0.35) 0%, rgba(243, 193, 75, 0.12) 55%, rgba(243, 193, 75, 0) 75%);
  animation: grab-glow-pulse 0.9s ease-in-out infinite;
}
@keyframes grab-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
.grab-anim__pile {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.grab-anim__cards { display: flex; align-items: center; }
.grab-anim__card {
  width: 9.6rem; height: 13.33rem;
  margin-left: -6.13rem;
  border-radius: 1.07rem;
  background: linear-gradient(160deg, #4a72c4 0%, #33518f 55%, #274070 100%);
  border: 0.4rem solid #f3c14b;
  box-shadow: 0 0.53rem 1.33rem rgba(0, 0, 0, 0.35), 0 0 1.33rem rgba(243, 193, 75, 0.35);
  animation: grab-card-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.grab-anim__card:first-child { margin-left: 0; }
.grab-anim__card--gone { visibility: hidden; }
@keyframes grab-card-pop {
  0% { opacity: 0; transform: translateY(-4.8rem) scale(0.6); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.grab-anim__label {
  margin-top: 1.33rem; padding: 0.53rem 2.4rem; border-radius: 999rem;
  font-size: 2.93rem; font-weight: 700; color: #5c3d00;
  background: linear-gradient(180deg, #f7d478, #f3c14b);
  border: 0.27rem solid #caa235;
  box-shadow: 0 0.53rem 1.07rem rgba(0, 0, 0, 0.25);
}
/* 真人庄家拿底：底牌翻面亮出（看清抓到了什么；不带金框——内层主牌/级牌金边自己会亮） */
.grab-anim__card--face {
  background: none;
  border: none;
  box-shadow: 0 0.53rem 1.33rem rgba(0, 0, 0, 0.35);
  animation: grab-card-flip 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.grab-anim__card--face .card { width: 100%; height: 100%; }
@keyframes grab-card-flip {
  0% { opacity: 0; transform: rotateY(90deg) scale(0.7); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

/* ========== 动效库 ========== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1.6rem); }
  40% { transform: translateX(1.6rem); }
  60% { transform: translateX(-1.07rem); }
  80% { transform: translateX(1.07rem); }
}
.anim-shake { animation: shake 320ms ease; }

@keyframes play-in {
  from { opacity: 0; transform: translateY(5.33rem) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.anim-play-in { animation: play-in var(--anim-normal) ease; }

/* 新抓底牌闪烁提示（QQ 式成牌提示）：牌正常插进所属花色排序位，不抬高不突兀，
 * 仅金光呼吸闪烁 ~4.2s（7 次）点出「这几张是底牌进来的」——对子/连牌落位一目了然；
 * 动画不 forwards，闪完自然回常态，点牌/超时摘类收尾 */
@keyframes card-flash {
  0%, 100% { filter: brightness(1); }
  50% {
    border-color: #ffdf80;
    box-shadow: 0 0 2.4rem 0.53rem rgba(255, 205, 70, 0.85);
    filter: brightness(1.32) saturate(1.2);
  }
}
.card--flash { animation: card-flash 0.6s ease-in-out 7; }

@keyframes dot-jump {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-1.33rem); opacity: 1; }
}

@keyframes float-up {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  25% { opacity: 1; transform: translateY(-2.67rem) scale(1.15); }
  100% { opacity: 0; transform: translateY(-12rem) scale(1); }
}
.anim-float-up { animation: float-up 1.3s ease-out forwards; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.anim-pulse { animation: pulse 1.8s ease-in-out infinite; }

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.53rem); }
}

/* ========== toast ========== */
.toast {
  position: fixed; left: 50%; bottom: 32vh; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8); color: #fff;
  padding: 1.87rem 4.27rem; border-radius: 1.33rem;
  font-size: 3.47rem; z-index: 200;
  max-width: 80rem; text-align: center;
  transition: opacity 0.25s;
}
.toast--hidden { opacity: 0; pointer-events: none; }

/* ========== 竖屏自动转横屏（仅横屏游戏：竖屏手机整层旋转 90°，无提示直接玩） ========== */
/* 触屏设备竖屏打开时把 #app 整层顺时针转 90°、宽高互换，铺满屏幕——等效手机横屏，
   点按命中由浏览器按变换矩阵自动换算；桌面竖窗不旋转（rem 缩放照常可玩） */
@media (orientation: portrait) and (pointer: coarse) {
  html { font-size: min(calc(100vh / 160), calc(100vw / 90)); }
  html, body { height: 100%; width: 100%; overflow: hidden; }
  #app {
    position: fixed;
    top: 0; left: 0;
    width: 100vh; height: 100vw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }
  /* 竖屏的顶/底安全区（刘海、Home 条）旋转后落在横屏左右两侧，横向内边距吃对应 inset */
  .table {
    padding-left: max(2.4rem, env(safe-area-inset-top));
    padding-right: max(2.4rem, env(safe-area-inset-bottom));
  }
}
@supports (width: 1dvw) {
  @media (orientation: portrait) and (pointer: coarse) {
    html { font-size: min(calc(100dvh / 160), calc(100dvw / 90)); }
    #app { width: 100dvh; height: 100dvw; }
  }
}

/* ========== v3.0 云账号（首页状态行 + 账号弹层） ========== */
.home__cloud {
  margin-top: 2.67rem;
  display: flex; align-items: center; justify-content: center; gap: 2.4rem;
}
.home__cloud-state { font-size: 2.93rem; color: var(--color-text-dim); }
.home__cloud-btn { font-size: 2.93rem; padding: 1.07rem 3.2rem; }

.cloud-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; }
.cloud-modal__mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--color-mask); }
.cloud-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100rem; max-height: 85vh;
  background: linear-gradient(170deg, #fffdf5, #f7ecd2);
  border-radius: 3.2rem; padding: 4rem;
  display: flex; flex-direction: column;
  box-shadow: 0 2.67rem 8rem rgba(0, 0, 0, 0.45);
}
.cloud-modal__title { font-size: 4rem; font-weight: 700; color: #8a5a2b; margin-bottom: 2.67rem; text-align: center; }
.cloud-modal__hint { font-size: 2.93rem; color: #5c4a24; text-align: center; margin-bottom: 2.67rem; line-height: 1.6; }
.cloud-modal__input {
  font-size: 3.2rem; color: #4a3a1c;
  background: #fff; border: 0.27rem solid #d8c79a; border-radius: 1.6rem;
  padding: 2.13rem 2.67rem; margin-bottom: 2.13rem; width: 100%;
  box-sizing: border-box;
}
.cloud-modal__input:focus { outline: none; border-color: #caa235; }
.cloud-modal__input::placeholder { color: #b3a377; }
.cloud-modal__actions { display: flex; gap: 2.67rem; margin-top: 1.07rem; }
.cloud-modal__actions .btn { flex: 1; font-size: 3.2rem; padding: 2.4rem 0; }
.cloud-modal__foot { font-size: 2.4rem; color: #8a6d3a; text-align: center; margin-top: 2.67rem; line-height: 1.6; }
.cloud-modal__close { margin-top: 2.67rem; align-self: center; }

/* ========== v3.1 排行榜弹层（报满坐庄榜） ========== */
.lb-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; }
.lb-modal__mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--color-mask); }
.lb-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100rem; max-height: 85vh;
  background: linear-gradient(170deg, #fffdf5, #f7ecd2);
  border-radius: 3.2rem; padding: 4rem;
  display: flex; flex-direction: column;
  box-shadow: 0 2.67rem 8rem rgba(0, 0, 0, 0.45);
}
.lb-modal__title { font-size: 4rem; font-weight: 700; color: #8a5a2b; text-align: center; }
.lb-modal__sub { font-size: 2.4rem; color: #8a6d3a; text-align: center; margin: 1.07rem 0 2.67rem; }
.lb-modal__list { overflow-y: auto; flex: 1; }
.lb-modal__row {
  display: flex; align-items: center; gap: 2.67rem;
  background: rgba(0, 0, 0, 0.05); border-radius: 1.6rem;
  padding: 2.13rem 2.67rem; margin-bottom: 1.87rem;
}
.lb-modal__row--me {
  background: linear-gradient(180deg, #f7d478, #f3c14b);
  border: 0.27rem solid #caa235;
}
.lb-modal__rank { font-size: 3.2rem; font-weight: 700; color: #8a5a2b; width: 5.33rem; text-align: center; flex-shrink: 0; }
.lb-modal__nick { font-size: 3.2rem; color: #5c4a24; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-modal__count { font-size: 3.2rem; color: #7a5f33; flex-shrink: 0; }
.lb-modal__empty { text-align: center; color: #8a6d3a; padding: 4rem; font-size: 3.2rem; }
.lb-modal__close { margin-top: 2.67rem; align-self: center; }