/* 玩家信息单行、最后出牌放大、牌盒去底 */
.game-screen .seat {
  min-width: 0;
  max-width: 146px;
  padding: 4px 6px;
  gap: 5px;
  align-items: center;
  border-radius: 12px;
}

.game-screen .seat .avatar {
  width: 27px;
  height: 27px;
  font-size: 12px;
}

.game-screen .seat .seat-body {
  min-width: 0;
  flex: 1;
}

.game-screen .seat .seat-name {
  min-width: 0;
  gap: 3px;
  font-size: 9px;
}

.game-screen .seat .name-text {
  max-width: 66px;
}

.game-screen .seat .dealer-badge {
  width: 12px;
  height: 12px;
  font-size: 7px;
}

.game-screen .seat .seat-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
}

.game-screen .seat .seat-kind {
  height: 15px;
  padding: 0 4px;
  font-size: 7px;
}

.game-screen .seat .void-chip {
  height: 16px;
  padding: 0 4px;
  gap: 2px;
  font-size: 6px;
}

.game-screen .seat .void-chip b {
  font-size: 8px;
}

.seat-win-inline {
  color: var(--gold-light);
  font-size: 7px;
  font-weight: 700;
}

/* 其他玩家牌背与自家手牌一样一张张并排，牌与牌之间留缝（尺寸由 updateEdgeSizing 计算） */
.edge-hand .tile {
  width: var(--edge-top-tile, 20px) !important;
}

.edge-left,
.edge-right {
  gap: var(--edge-gap, 0px);
}

.edge-back-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.edge-top .edge-back-row {
  flex-direction: row;
  gap: var(--edge-gap, 0px);
}

.edge-left .edge-back-row,
.edge-right .edge-back-row {
  gap: var(--edge-gap, 0px);
}

.edge-left .edge-back-row .tile,
.edge-right .edge-back-row .tile {
  width: var(--edge-side-tile, 14px) !important;
  /* 旋转 90° 后布局盒比视觉高度多 0.375 倍，用负边距把它收掉，缝隙只由 gap 决定 */
  margin-top: calc(var(--edge-side-tile, 14px) * -0.375) !important;
  transform: rotate(90deg);
  transform-origin: center;
}

.edge-left .edge-back-row .tile:first-child,
.edge-right .edge-back-row .tile:first-child {
  margin-top: 0 !important;
}

.edge-hand .edge-melds .tile {
  width: calc(var(--hand-tile-size, 20px) * 0.5) !important;
}

.edge-hand {
  gap: 0;
}

.edge-melds {
  gap: 0;
  max-width: none;
}

.edge-melds .meld-group {
  gap: 0;
  margin: 0;
  padding: 0;
}

/* 自己的碰杠参考对家：小牌一排，紧挨手牌左侧 */
.own-melds .tile {
  width: calc(var(--hand-tile-size, 24px) * 0.5) !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}

.own-melds {
  max-width: 150px;
}

.edge-melds {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  justify-content: center;
  max-width: 70px;
}

.edge-melds .meld-group {
  display: flex;
  gap: 0;
  background: transparent;
  padding: 0;
}

.edge-melds .tile {
  width: 12px;
}

.edge-left .edge-melds,
.edge-right .edge-melds {
  flex-direction: column;
  max-width: none;
}

/* 自己的信息也收成一行 */
.hand-row,
.hand-wrap,
.hand {
  overflow: visible;
}

.hand-wrap {
  position: relative;
  z-index: 5;
}

.hand {
  justify-content: flex-start;
}

.self-left-stack {
  overflow: visible;
}

/* 牌河高于座位，避免已打出的牌被头像/副露遮住 */
.center-board {
  z-index: 40 !important;
}

.self-zone {
  z-index: 45;
}

.river {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible !important;
}

.center-hub {
  z-index: 1;
}

.hand-row {
  position: relative;
  z-index: 3;
}

.self-left-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px;
  max-width: none;
}

.self-left-stack .self-info {
  position: relative;
  order: 1;
  width: auto;
  min-width: 0;
  max-width: 145px;
  flex: 0 0 auto;
  overflow: visible;
}

/* 倒计时悬在用户名盒子上方，不参与盒子高度 */
.self-left-stack .turn-timer.self-countdown {
  position: absolute;
  left: 0;
  top: -28px;
  z-index: 8;
  width: 26px;
  height: 26px;
  margin: 0;
}

.self-left-stack .own-melds {
  order: 2;
  position: relative;
  z-index: 6;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end;
  gap: 3px;
  max-width: none;
}

.self-left-stack .own-melds .meld-group {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* 所有碰杠组始终横向并排，不上下堆叠 */
.self-left-stack .own-melds {
  gap: 4px;
}

.hand-row {
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: max-content max-content;
  column-gap: 10px;
  align-items: end;
  justify-content: center;
  width: 100%;
}

/* 用户名 + 碰杠 + 手牌：网格列严格并列，绝不互相覆盖 */
.hand-row .self-left-stack,
.hand-row .hand-wrap {
  flex: none;
  width: max-content;
  max-width: none;
  min-width: 0;
}

.hand-row .self-left-stack {
  z-index: 4;
}

.hand-row .hand-wrap {
  z-index: 3;
}

.hand-row .hand {
  max-width: none;
  overflow: visible;
}

.edge-top .edge-back-row {
  gap: var(--edge-gap, 0px);
}

.hand .tile.is-selected {
  position: relative;
  z-index: 500;
}

/* 胡了的那张牌：亮在手牌最右侧，带金色描边，不能再点选 */
.hand .tile.is-winning {
  margin-left: var(--drawn-gap, 9px);
  cursor: default;
  filter: drop-shadow(0 0 7px rgba(231, 209, 154, 0.65));
}

.hand .tile.is-winning .tile-face {
  box-shadow: inset 0 0 0 2px rgba(198, 162, 92, 0.9);
}

/* 其他三家：胡的那张牌亮在牌背最右侧 */
.edge-back-row .tile.edge-win-tile .tile-face {
  box-shadow: inset 0 0 0 1px rgba(231, 209, 154, 0.9);
}

.self-left-stack .self-info {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
  padding: 3px 5px;
  white-space: nowrap;
}

.self-left-stack .self-name-line {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
}

.self-left-stack .self-avatar {
  flex: 0 1 auto;
  max-width: 82px;
  min-width: 0;
  font-size: 7px;
}

.self-left-stack .self-avatar .avatar {
  width: 15px;
  height: 15px;
  font-size: 7px;
}

.self-left-stack .dealer-badge {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  font-size: 7px;
}

.self-left-stack .self-void {
  flex: 0 0 auto;
  height: 16px;
  padding: 0 4px;
  font-size: 6px;
}

.self-left-stack .self-void b {
  font-size: 8px;
}

.self-left-stack .turn-timer {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  font-size: 8px;
}

.self-left-stack .self-status {
  display: none;
}

/* 副露框不要深色底盒，避免像牌盒一样遮住牌 */
.own-melds .meld-group,
.seat-melds .meld-group {
  background: transparent;
  padding: 0;
}

/* 中间：左侧牌墙/最后打出文字，右侧放大最后出的牌 */
.hub-columns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.hub-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.hub-last-label {
  font-size: 8px;
  color: rgba(246, 237, 219, 0.4);
  white-space: nowrap;
}

.hub-last-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.hub-last-tile .tile {
  width: clamp(26px, 2.6vw, 32px);
}

.hub-last-tile em {
  font-style: normal;
  color: rgba(246, 237, 219, 0.25);
}

.center-hub {
  width: min(100%, 110px);
  padding: 8px 8px;
}

#app.force-landscape .center-hub {
  width: min(100%, 100px);
  padding: 6px 7px;
}

#app.force-landscape .hub-last-tile .tile {
  width: 25px;
}

/* 中间四边亮灯，替代方向箭头 */
.center-side {
  position: absolute;
  border-radius: 999px;
  background: rgba(231, 209, 154, 0.12);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.center-side.side-top,
.center-side.side-bottom {
  left: 50%;
  width: 20px;
  height: 2px;
  transform: translateX(-50%);
}

.center-side.side-top {
  top: -2px;
}
.center-side.side-bottom {
  bottom: -2px;
}

.center-side.side-left,
.center-side.side-right {
  top: 50%;
  width: 2px;
  height: 20px;
  transform: translateY(-50%);
}

.center-side.side-left {
  left: -2px;
}
.center-side.side-right {
  right: -2px;
}

.center-side.is-lit {
  background: #fff8e2;
  box-shadow:
    0 0 6px 1px rgba(255, 248, 226, 0.95),
    0 0 14px rgba(231, 209, 154, 0.9),
    0 0 26px rgba(231, 209, 154, 0.6);
  animation: center-side-flash 0.9s ease-in-out infinite;
}

/* 亮灯时稍微加粗一点，更醒目 */
.center-side.is-lit.side-top,
.center-side.is-lit.side-bottom {
  width: 26px;
  height: 3px;
}

.center-side.is-lit.side-left,
.center-side.is-lit.side-right {
  width: 3px;
  height: 26px;
}

@keyframes center-side-flash {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1.3);
  }
  50% {
    opacity: 0.32;
    filter: brightness(0.85);
  }
}

/* 左右牌河盒子加宽 */
.center-board {
  grid-template-columns: 1.18fr 1fr 1.18fr;
}

.river-left,
.river-right {
  width: 100%;
  justify-self: stretch;
  min-width: 96px;
}

/* 自摸、暗杠按钮更醒目 */
.btn-action.is-self-action {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.btn-action.btn-hu.is-self-action {
  color: #fff4ec;
  border-color: rgba(255, 197, 168, 0.7);
  background: linear-gradient(145deg, #d15a43, #8f2d23);
  box-shadow:
    0 0 0 2px rgba(183, 66, 52, 0.18),
    0 0 20px rgba(183, 66, 52, 0.42);
}

.btn-action.btn-gang.is-self-action {
  color: #30220d;
  border-color: rgba(255, 232, 179, 0.75);
  background: linear-gradient(145deg, #e2c47c, #ae8038);
  box-shadow:
    0 0 0 2px rgba(198, 162, 92, 0.16),
    0 0 18px rgba(198, 162, 92, 0.32);
}

.btn-action.is-self-action .fan-badge {
  height: 17px;
  padding: 0 5px;
  font-size: 8px;
  background: rgba(0, 0, 0, 0.22);
}

/* 碰杠胡浮层最高优先级 */
.quick-action-layer {
  z-index: 330;
}

@media (max-width: 420px) {
  .self-left-stack {
    flex-basis: auto;
    max-width: none;
  }

  .self-left-stack .self-info {
    min-width: 88px;
    max-width: 120px;
  }

  .self-left-stack .self-avatar {
    max-width: 58px;
  }

  .game-screen .seat {
    max-width: 142px;
  }

  .seat-inline .name-text {
    max-width: 46px;
  }
}

.settlement-tags em {
  font-size: 7px;
}

.settlement-tags em.patterns {
  padding: 0;
  background: transparent;
  color: var(--text-soft);
  opacity: 0.85;
}

/* 顶部品牌：中文名保持一行 */
.brand-words strong {
  white-space: nowrap;
}

.game-topbar .brand-words span {
  display: none;
}

.game-topbar .brand-lockup {
  gap: 8px;
}

/* 麻将牌面图片（SpriteFrames） */
.tile-face.has-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.82), transparent 62%),
    linear-gradient(155deg, #fbf6ea, #efe5d0);
  box-shadow:
    inset 0 0 0 1px rgba(177, 156, 112, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tile-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 暂停按钮和暂停遮罩 */
.pause-button {
  color: var(--gold-light);
}

.pause-layer {
  z-index: 200;
  background: rgba(3, 14, 11, 0.62);
  backdrop-filter: blur(5px);
}

.pause-card {
  width: min(330px, 84vw);
  padding: 24px 20px;
  border-radius: 20px;
  border: 1px solid rgba(231, 209, 154, 0.35);
  background:
    radial-gradient(circle at 50% 0%, rgba(198, 162, 92, 0.16), transparent 55%),
    #0a2b22;
  color: var(--paper);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.pause-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(231, 209, 154, 0.4);
  color: var(--gold-light);
  background: rgba(198, 162, 92, 0.12);
}

.pause-icon .icon {
  width: 22px;
  height: 22px;
}

.pause-card h2 {
  margin: 10px 0 6px;
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--gold-light);
}

.pause-card p {
  margin: 0 0 16px;
  font-size: 10px;
  line-height: 1.7;
  color: rgba(246, 237, 219, 0.58);
}

.pause-card .btn {
  width: 100%;
  min-height: 40px;
}

/* 结算按钮：返回房间和再来一局同一行 */
.settlement-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.settlement-inline-actions .btn {
  min-width: 0;
  flex: 1;
}

/* 四家牌河：对家/本家 15 张宽 × 2 行，左右 8 张宽 × 3 行 */
.game-screen .center-board,
#app.force-landscape .center-board {
  display: block;
  width: 74% !important;
  height: 64% !important;
  top: 50% !important;
}

.river {
  position: absolute;
  --river-tile: 18px;
  display: grid;
  padding: 2px;
  gap: 0;
  align-content: center;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}

/* 弃牌与手牌同一长宽比（64:88），宽度统一走 --river-tile，列宽跟着走，牌与牌并排不重叠 */
.river .tile {
  width: var(--river-tile, 18px);
  height: auto;
}

/* 对家和本家：逐行并排，一行放满再换行 */
.river-top,
.river-self {
  left: 50%;
  transform: translateX(-50%);
  width: 302px;
  height: auto;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(auto-fit, var(--river-tile, 18px));
  grid-auto-flow: row;
}

.river-top {
  top: 0;
}

.river-self {
  bottom: 0;
}

/* 左右两家也是两行，朝中间对齐 */
.river-left,
.river-right {
  top: 50%;
  transform: translateY(-50%);
  width: 162px;
  height: auto;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(auto-fit, var(--river-tile, 18px));
  grid-auto-flow: row;
}

.river-left {
  left: 12%;
  justify-content: end;
}

.river-right {
  right: 12%;
  justify-content: start;
}

.center-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* 用户名位置：左右上移，对家右移 */
.game-screen .seat-left,
#app.force-landscape .seat-left {
  left: 2px;
  top: 24%;
}

.game-screen .seat-right,
#app.force-landscape .seat-right {
  right: 2px;
  top: 24%;
}

.game-screen .seat-top,
#app.force-landscape .seat-top {
  left: auto !important;
  right: 2px;
  top: 6px;
  transform: none;
}

/* =========================================================
   对手信息：用户名在左，碰杠牌在右，碰杠组横向并排
   ========================================================= */
.game-screen .seat,
#app.force-landscape .seat {
  width: auto;
  max-width: none;
}

.game-screen .seat .seat-body,
#app.force-landscape .seat .seat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.game-screen .seat-melds,
#app.force-landscape .seat-melds {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  max-width: none;
}

.game-screen .seat-melds .meld-group,
#app.force-landscape .seat-melds .meld-group {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.game-screen .seat-melds .tile,
#app.force-landscape .seat-melds .tile {
  width: clamp(7px, min(1.2vw, calc(var(--hand-tile-size, 24px) * 0.25)), 12px) !important;
}

#app.force-landscape .seat-melds .tile {
  width: clamp(8px, calc(var(--hand-tile-size, 24px) * 0.28), 13px) !important;
}

/* =========================================================
   上下家牌背：两行（两列）显示，降低高度，避开用户名信息卡
   ========================================================= */
.edge-left,
.edge-right,
#app.force-landscape .edge-left,
#app.force-landscape .edge-right {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.edge-left .edge-back-row,
.edge-right .edge-back-row,
#app.force-landscape .edge-left .edge-back-row,
#app.force-landscape .edge-right .edge-back-row {
  flex-direction: column;
  align-items: center;
}

/* =========================================================
   胡牌：单独放在手牌最右侧，和手牌同尺寸，不放大、不插进手牌
   ========================================================= */
.hand-wrap {
  align-items: flex-end;
  gap: 8px;
}

.hand-winning-slot {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
}

.hand-winning-slot .tile {
  width: var(--hand-tile-size, 24px);
  flex: 0 0 auto;
  border-radius: 6px;
}

/* =========================================================
   已胡牌：桌面四边灯用绿色，座位也统一成绿色
   ========================================================= */
.center-side.is-won,
.center-side.is-won.is-lit {
  background: #4cdc8a;
  box-shadow: none;
  animation: none;
}

.game-screen .seat.is-won,
#app.force-landscape .seat.is-won {
  border-color: rgba(88, 216, 145, 0.58);
  background: rgba(10, 51, 36, 0.82);
  box-shadow:
    0 0 0 1px rgba(88, 216, 145, 0.14),
    0 0 20px rgba(64, 188, 116, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.24);
}

.seat-win-inline {
  color: #8be3ac;
}

/* =========================================================
   对家：用户名 → 碰杠 → 手牌，排成和自家一样的一行
   ========================================================= */
.top-opponent-row {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: min(92%, 760px);
  pointer-events: none;
}

#app.force-landscape .top-opponent-row {
  top: 5px;
}

.top-opponent-row .seat-top {
  position: relative;
  top: auto;
  left: auto !important;
  right: auto !important;
  transform: none;
  flex: 0 0 auto;
}

#app.force-landscape .top-opponent-row .seat-top,
#app.force-landscape .top-opponent-row .edge-top {
  top: auto;
  left: auto;
  right: auto;
}

#app.force-landscape .top-opponent-row .seat-top {
  transform: none;
}

.top-opponent-row .top-melds {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  max-width: none;
}

.top-opponent-row .edge-top {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

/* 倒计时位于用户名标签外，悬在用户名上方 */
.self-left-stack .turn-timer.self-countdown {
  pointer-events: none;
}

/* =========================================================
   四家统一的玩家信息卡：左头像，右侧用户名（AI/庄家）+ 定缺
   ========================================================= */
.game-screen .seat .seat-name {
  min-width: 0;
  overflow: hidden;
}

.game-screen .seat .seat-name .name-text {
  flex: 0 1 auto;
  min-width: 0;
}

.game-screen .seat .seat-name .seat-kind,
#app.force-landscape .seat .seat-name .seat-kind {
  flex: 0 0 auto;
}

.game-screen .seat .void-chip,
#app.force-landscape .seat .void-chip {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.void-chip.suit-0,
.void-chip.suit-1,
.void-chip.suit-2 {
  background: transparent;
}

/* 自家信息卡和其他三家同构，不再用单独的姓名胶囊 */
.self-left-stack .self-info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: 158px;
  padding: 4px 7px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 12px;
  border: 1px solid rgba(231, 209, 154, 0.16);
  background: rgba(4, 22, 17, 0.58);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.self-left-stack .self-info .seat-body {
  min-width: 0;
  flex: 1 1 auto;
}

.self-left-stack .self-info .seat-name {
  font-size: 9px;
  line-height: 1.2;
}

.self-left-stack .self-info .seat-meta {
  margin-top: 2px;
  gap: 4px;
  font-size: 6px;
}

.self-left-stack .self-info .seat-meta .void-chip {
  flex: 0 0 auto;
}

/* =========================================================
   左右两家：用户名卡、碰杠、手牌在卡外按同一顺序排列
   左家从上往下；右家反过来，从玩家自己的左侧读仍是用户名→碰杠→手牌
   ========================================================= */
.side-opponent {
  position: absolute;
  top: 50%;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.side-opponent-left {
  left: 2px;
  transform: translateY(-50%);
}

.side-opponent-right {
  right: 2px;
  transform: translateY(-50%);
  flex-direction: column-reverse;
}

.side-opponent .seat,
#app.force-landscape .side-opponent .seat {
  position: relative;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}

.side-opponent .edge-hand,
#app.force-landscape .side-opponent .edge-hand {
  position: relative;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto;
}

/* 碰杠牌尺寸和自家完全一致，不塞进用户名卡 */
.side-melds {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  max-width: none;
}

.side-melds .meld-group {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* 左右两家：一副碰杠和另一副碰杠上下排列，每组内部仍保持横排。 */
.side-opponent .side-melds {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.side-melds .tile,
.top-melds .tile {
  width: calc(var(--hand-tile-size, 24px) * 0.5) !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}

/* =========================================================
   左右牌河：固定两牌高，牌多了横向加宽，不再堆成三行
   ========================================================= */
.river-left,
.river-right {
  width: max(162px, calc(var(--river-tile, 18px) * 9 + 8px));
  min-height: calc(var(--river-tile, 18px) * 2.75 + 6px);
  grid-template-columns: repeat(9, var(--river-tile, 18px));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
}

.river-left {
  left: 3%;
}

.river-right {
  right: 3%;
}

/* 对家行：手牌 → 碰杠 → 用户名，碰杠尺寸与自家一致 */
.top-opponent-row {
  flex-wrap: nowrap;
}

/* 对家的胡牌比牌背略小一点 */
.top-opponent-row .edge-top .tile.edge-win-tile {
  width: calc(var(--edge-top-tile, 20px) * 0.86) !important;
}