/* ============================================================
   斗地主联机 - 样式
   主题 token 沿用平台 theme.css,只补足游戏所需样式
   ============================================================ */

.ddz-app {
  --ddz-bg:        var(--bg-base);
  --ddz-surface:   var(--bg-surface);
  --ddz-elev:      var(--bg-elev);
  --ddz-fg:        var(--fg-strong);
  --ddz-fg-2:      var(--fg-normal);
  --ddz-fg-3:      var(--fg-muted);
  --ddz-line:      var(--line-soft);
  --ddz-line-2:    var(--line-strong);
  --ddz-pri:       var(--accent);
  --ddz-pri-ink:   var(--accent-ink);
  --ddz-ok:        var(--state-ok);
  --ddz-err:       var(--state-err);
  --ddz-warn:      var(--state-warn);

  --ddz-table:     #2f7a3e;       /* 牌桌绿 */
  --ddz-table-2:   #1d5a2b;
  --ddz-card:      #fdfaf2;       /* 牌面米色 */
  --ddz-card-2:    #f4ecd9;
  --ddz-card-line: #c8b88a;

  --ddz-red:       #c41e1e;
  --ddz-black:     #1f1f1f;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--ddz-bg);
  color: var(--ddz-fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.ddz-app { width: 100%; height: 100%; display: flex; flex-direction: column; }

/* ===== 屏切换 ===== */
/* 与五子棋一致:.ddz-screen 充满整个舞台,内容由内部 box 居中
   - 默认隐藏,is-active 显示
   - 居中靠 align-items + justify-content (水平 + 垂直 同时居中) */
.ddz-screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ddz-screen.is-active { display: flex; }

/* 对局屏单独:不居中,顶栏 + 牌桌 + 操作条 自上而下 */
.ddz-screen.ddz-screen-game { display: none; }
.ddz-screen.ddz-screen-game.is-active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

/* ===== 大厅 ===== */
.ddz-lobby {
  width: 100%;
  max-width: 560px;
  background: var(--ddz-surface);
  border: 1px solid var(--ddz-line);
  border-radius: 18px;
  padding: 28px 24px 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,.08);
}
.ddz-lobby-head { text-align: center; margin-bottom: 18px; }
.ddz-title { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.ddz-title-cn { font: 700 28px/1 inherit; letter-spacing: 4px; }
.ddz-title-en { font: 600 11px/1 ui-monospace, monospace; color: var(--ddz-fg-3); letter-spacing: 3px; }
.ddz-subtitle { margin-top: 10px; font-size: 13px; color: var(--ddz-fg-3); }

.ddz-lobby-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
.ddz-card {
  background: var(--ddz-surface);
  border: 1px solid var(--ddz-line);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, transform .15s ease;
}
.ddz-card:hover { border-color: var(--ddz-pri); transform: translateY(-2px); }
.ddz-card-ico { width: 36px; height: 36px; color: var(--ddz-pri); }
.ddz-card-ico svg { width: 100%; height: 100%; }
.ddz-card-name { font: 700 16px/1 inherit; }
.ddz-card-desc { font-size: 12px; color: var(--ddz-fg-3); }
.ddz-toggle-row {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--ddz-fg-3); cursor: pointer;
}
.ddz-toggle-row input { display: none; }
.ddz-toggle-track {
  width: 32px; height: 18px; background: var(--ddz-line);
  border-radius: 999px; position: relative; transition: background .15s ease;
}
.ddz-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform .15s ease;
}
.ddz-toggle-row input:checked + .ddz-toggle-track { background: var(--ddz-pri); }
.ddz-toggle-row input:checked + .ddz-toggle-track .ddz-toggle-thumb { transform: translateX(14px); }

.ddz-lobby-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ddz-fg-3); }
.ddz-foot-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ddz-elev); }

/* ===== 输入房间号(共用) ===== */
.ddz-input,
.ddz-room-input {
  width: 100%; height: 44px; padding: 0 14px;
  font: 600 16px/1 ui-monospace, "JetBrains Mono", monospace;
  letter-spacing: 4px; text-align: center;
  background: var(--ddz-elev);
  border: 1px solid var(--ddz-line-2);
  border-radius: 10px; color: var(--ddz-fg);
  outline: none;
}
.ddz-input:focus { border-color: var(--ddz-pri); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ===== 按钮 ===== */
.ddz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--ddz-elev); color: var(--ddz-fg);
  font: 600 14px/1 inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ddz-btn:hover { border-color: var(--ddz-line-2); }
.ddz-btn-primary { background: var(--ddz-pri); color: var(--ddz-pri-ink); border-color: var(--ddz-pri); }
.ddz-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.ddz-btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.ddz-btn-ghost { background: transparent; border-color: var(--ddz-line-2); }
.ddz-btn-ghost:hover { background: var(--ddz-elev); }
.ddz-btn-danger { background: var(--ddz-err); color: #fff; border-color: var(--ddz-err); }
.ddz-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ddz-btn-icon { width: 36px; height: 36px; padding: 0; }
.ddz-btn-back {
  width: 36px; height: 36px; border: 1px solid var(--ddz-line);
  border-radius: 10px; background: transparent; color: var(--ddz-fg);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ddz-btn-back:hover { background: var(--ddz-elev); }
.ddz-btn-link { background: transparent; border: 0; color: var(--ddz-fg-3); height: 32px; padding: 0 8px; cursor: pointer; }
.ddz-btn-link:hover { color: var(--ddz-fg); }

/* ===== 屏幕通用 ===== */
/* 各屏的具体内容盒子(在 .ddz-screen 内部,已被外层 flex 居中) */
.ddz-creating {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px;
}
.ddz-waiting {
  width: 100%;
  max-width: 480px;
  background: var(--ddz-surface);
  border: 1px solid var(--ddz-line);
  border-radius: 18px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(0,0,0,.08);
}
.ddz-join {
  width: 100%;
  max-width: 460px;
  background: var(--ddz-surface);
  border: 1px solid var(--ddz-line);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,.08);
}
.ddz-spinner {
  width: 40px; height: 40px; border: 3px solid var(--ddz-line);
  border-top-color: var(--ddz-pri); border-radius: 50%;
  animation: ddz-spin .8s linear infinite;
}
@keyframes ddz-spin { to { transform: rotate(360deg); } }
.ddz-creating-text { text-align: center; color: var(--ddz-fg-3); font-size: 14px; letter-spacing: 1px; }

/* ===== 房间号 / 等待 ===== */
.ddz-waiting-eyebrow { text-align: center; font-size: 12px; color: var(--ddz-fg-3); letter-spacing: 2px; }
.ddz-room-code-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 20px auto 14px;
  padding: 20px 16px;
  background: var(--ddz-surface);
  border: 1px solid var(--ddz-line);
  border-radius: 14px;
  max-width: 320px; width: 100%;
}
.ddz-room-code-label { font-size: 11px; color: var(--ddz-fg-3); letter-spacing: 2px; }
.ddz-room-code {
  font: 700 32px/1 ui-monospace, monospace; letter-spacing: 6px; color: var(--ddz-fg);
}
.ddz-waiting-status { text-align: center; font-size: 13px; color: var(--ddz-fg-2); margin-bottom: 8px; }
.ddz-waiting-status .ddz-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ddz-warn); margin-right: 6px;
  animation: ddz-pulse 1.4s ease-in-out infinite;
}
@keyframes ddz-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.6); }
}
.ddz-waiting-hint { text-align: center; font-size: 12px; color: var(--ddz-fg-3); margin-bottom: 14px; }
.ddz-waiting-players {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.ddz-waiting-slot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--ddz-elev);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ddz-fg-2);
  border: 1px solid var(--ddz-line);
}
.ddz-waiting-slot.is-empty { color: var(--ddz-fg-3); font-style: italic; }
.ddz-waiting-slot .dot-2 {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ddz-ok);
}
.ddz-waiting-slot.is-empty .dot-2 { background: var(--ddz-line-2); }

/* ===== 加入房间 ===== */
.ddz-join-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ddz-join-title { font: 700 16px/1 inherit; }
.ddz-join-body { display: flex; flex-direction: column; gap: 12px; }
.ddz-field-label { font-size: 12px; color: var(--ddz-fg-3); letter-spacing: 1px; }
.ddz-join-error {
  min-height: 16px;
  font-size: 12px;
  color: var(--ddz-err);
}

/* ===== 游戏主屏幕 ===== */
/* 对局屏里的内容盒子:占满 .ddz-screen-game(已被设置成 flex column 全屏) */
.ddz-game {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.ddz-game-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ddz-line);
  background: var(--ddz-surface);
  flex: 0 0 auto;
}
.ddz-game-title { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ddz-game-title-cn { font: 700 14px/1 inherit; }
.ddz-game-room { font: 600 11px/1 ui-monospace, monospace; color: var(--ddz-fg-3); letter-spacing: 2px; margin-top: 4px; }
.ddz-game-tools { display: inline-flex; align-items: center; gap: 6px; }
.ddz-turn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 11px/1 inherit;
  background: var(--ddz-elev);
  color: var(--ddz-fg-2);
  border: 1px solid var(--ddz-line);
}
.ddz-turn-pill.is-my-turn {
  background: var(--ddz-pri); color: var(--ddz-pri-ink); border-color: var(--ddz-pri);
}
/* 倒计时剩余 ≤ 5s:变红 + 抖动,提醒玩家 */
.ddz-turn-pill.is-warning {
  background: var(--ddz-err); color: #fff; border-color: var(--ddz-err);
  animation: ddz-turn-warn 0.8s ease-in-out infinite;
}
.ddz-turn-pill .ddz-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* 倒计时秒数文本(放在 pill 末尾) */
.ddz-turn-count {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  padding-left: 4px;
  letter-spacing: 1px;
}
@keyframes ddz-turn-warn {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(196,30,30,.45); }
  50%     { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(196,30,30,0); }
}

/* ===== 牌桌区 ===== */
.ddz-table {
  flex: 1; min-height: 0;
  background: var(--ddz-table);
  background-image:
    radial-gradient(circle at 50% 50%, var(--ddz-table) 0%, var(--ddz-table-2) 100%);
  display: flex; flex-direction: column;
  padding: 10px;
  position: relative;
  overflow: hidden;
  gap: 10px;
}

/*
  牌桌区布局(自身视角):
  ┌──────────────────────────────────┐
  │            底牌 (3 张)             │
  ├──────────────────────────────────┤
  │  P2  │   [出牌区 + 提示]   │  P3  │
  │  我  │   [手牌区]                │
  └──────────────────────────────────┘
*/
.ddz-players {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  grid-template-rows: 1fr auto;            /* 上行占满剩余空间,手牌行按内容自适应 */
  grid-template-areas:
    "p2  play  p3"
    "p1  hand  hand";
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
/* 顶部的底牌:横跨整个牌桌宽度,只占一小块区域,三张牌并排 */
.ddz-bottom-cards {
  flex: 0 0 auto;
  align-self: center;                       /* 在牌桌里水平居中,不再拉满整宽 */
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: 8px;
  color: rgba(255, 255, 255, .9);
  font-size: 11px;
}
.ddz-bottom-cards[hidden] { display: none; }
.ddz-bottom-cards-label { letter-spacing: 2px; flex: 0 0 auto; margin-right: 6px; }
/* 底牌区域内的牌:缩小为小尺寸,3 张并排刚好 */
.ddz-bottom-cards .ddz-card-vis.is-sm {
  width: 42px; height: 60px;
}
.ddz-bottom-cards .ddz-card-vis.is-sm .ddz-card-corner.is-top { top: 2px; left: 4px; }
.ddz-bottom-cards .ddz-card-vis.is-sm .ddz-card-rank { font-size: 16px; }
.ddz-bottom-cards .ddz-card-vis.is-sm .ddz-card-suit { font-size: 10px; }
.ddz-bottom-cards .ddz-card-vis.is-sm .ddz-card-suit-big { font-size: 32px; right: 2px; bottom: 0; }
.ddz-player-info {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #f4f4f1;
  font-size: 12px;
  position: relative;
}
/* 三个玩家的具体位置 */
.ddz-player-info[data-player="2"] { grid-area: p2; align-self: start; }
.ddz-player-info[data-player="3"] { grid-area: p3; align-self: start; }
.ddz-player-info[data-player="1"] { grid-area: p1; align-self: end; }

/* 头像容器 */
.ddz-player-avatar {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  overflow: hidden;
}
.ddz-avatar-svg {
  width: 100%; height: 100%;
  display: block;
}

/* 文字元数据(角色 / 名字 / 张数) */
.ddz-player-meta {
  display: flex; flex-direction: column;
  min-width: 0; flex: 1 1 auto;
}
.ddz-player-info .ddz-role {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  letter-spacing: 1px;
  align-self: flex-start;
  margin-bottom: 2px;
}
.ddz-player-info .ddz-name {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}
.ddz-player-info .ddz-cards-count {
  font-size: 11px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.2;
}

/* 自身视角下,自己的玩家卡要突出 */
.ddz-player-info.is-self {
  border-color: var(--ddz-pri);
  background: rgba(74, 144, 226, .25);
}
/* 自己 / 地主配色 */
.ddz-player-info.is-landlord {
  background: rgba(196, 30, 30, .35);
  border-color: rgba(196, 30, 30, .55);
}
.ddz-player-info.is-landlord.is-self {
  background: linear-gradient(135deg, rgba(196, 30, 30, .35) 0%, rgba(74, 144, 226, .25) 100%);
  border-color: var(--ddz-red);
}

.ddz-player-info .ddz-turn-marker {
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ddz-surface);
}
.ddz-player-info.is-turn .ddz-turn-marker { background: var(--ddz-pri); animation: ddz-pulse 1s ease-in-out infinite; }
.ddz-player-info.is-turn { box-shadow: 0 0 0 2px var(--ddz-pri); }

/* ===== 牌堆 / 已出 / 底牌 ===== */
.ddz-play-area {
  grid-area: play;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 8px;
  min-height: 0;
}
.ddz-last-play {
  display: flex; gap: 4px;
  align-items: center; justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  min-height: 70px;
}
.ddz-bottom-cards {
  /* 重置:底牌已上移至牌桌顶部,这里只保留旧规则以防 JS 没及时切换 */
  flex-direction: row;       /* 与顶部块一致:三张牌横向并排 */
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .25);
  border-radius: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: 11px;
  align-items: center;
}
.ddz-bottom-cards-label { letter-spacing: 2px; }
.ddz-pass-hint { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: 2px; padding: 16px; }

/* ===== 单张牌 ===== */
/*
  牌面布局(参照截图):
   ┌───────────────┐
   │   8           │  ← 左上角:大号点数(下)+ 小号花色
   │   ♣           │
   │               │
   │           ♣   │  ← 右下角:大号花色(占据下方主要区域)
   └───────────────┘
  红桃 / 方块 → is-red(显示红字)
  黑桃 / 梅花 → is-black(显示黑字)
*/
.ddz-card-vis {
  width: 60px; height: 84px;
  background: var(--ddz-card);
  border: 1px solid var(--ddz-card-line);
  border-radius: 6px;
  position: relative;
  font: 700 18px/1 inherit;
  box-shadow: 0 2px 4px rgba(0,0,0,.22);
  user-select: none;
  overflow: hidden;
}
.ddz-card-vis.is-red { color: var(--ddz-red); }
.ddz-card-vis.is-black { color: var(--ddz-black); }

/* 左上角:[大号点数][小号花色] 上下堆叠
   - flex-start 让点数和花色都靠左,避免"10"被居中后看起来偏右
   - 数字用 tabular-nums 等宽数字 + 负 letter-spacing,让 1 和 0 贴得更紧 */
.ddz-card-vis .ddz-card-corner.is-top {
  position: absolute;
  top: 4px; left: 6px;
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1;
  z-index: 2;
  text-align: left;
}
.ddz-card-vis .ddz-card-rank {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;       /* "10" 的 1 和 0 紧贴在一起 */
  text-align: left;
}
.ddz-card-vis .ddz-card-suit {
  font-size: 13px;
  line-height: 1;
  margin-top: 2px;
  text-align: left;
}

/* 右下角:大号花色 */
.ddz-card-vis .ddz-card-suit-big {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  z-index: 1;
}

/* ===== 大小王专属布局 =====
   - 左侧整列竖排 JOKER(占满高度,字距拉大)
   - 右下角改为小丑 SVG(不再是文本 "Joker")
   - 大王 → 红色;小王 → 黑色
*/
.ddz-card-vis.is-joker {
  background: linear-gradient(180deg, #fdfaf2 0%, #f0e3c7 100%);
}
/* 左侧竖排 JOKER */
.ddz-card-vis .ddz-card-joker-label {
  position: absolute;
  top: 4px; left: 4px; bottom: 4px;
  width: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  line-height: 1;
  z-index: 2;
}
.ddz-card-vis .ddz-card-joker-letter {
  font-size: 11px;
  letter-spacing: 0;
}
/* 右下角小丑 SVG:覆盖在 .ddz-card-suit-big 内
   - 贴右边、贴底边(尽可能靠右、靠下,避开 JOKER 竖排 + 手牌重叠区)
   - 配合手牌重叠 30px 后,可见的"小丑"会出现在卡面右半部 */
.ddz-card-vis.is-joker .ddz-card-suit-big {
  right: 0;
  bottom: 0;
  font-size: 0;     /* 让 SVG 顶替文字,避免 letter-spacing 干扰 */
  line-height: 0;
}
.ddz-card-vis .ddz-joker-svg {
  width: 50px;
  height: 50px;
  display: block;
  /* 整体稍向右下移动一点点,贴合卡片右下角 */
  transform: translate(2px, 2px);
}

/* 小尺寸的牌(对方手牌、底牌、历史记录等场景) */
.ddz-card-vis.is-sm { width: 40px; height: 56px; }
.ddz-card-vis.is-sm .ddz-card-corner.is-top { top: 2px; left: 3px; }
.ddz-card-vis.is-sm .ddz-card-rank { font-size: 14px; }
.ddz-card-vis.is-sm .ddz-card-suit { font-size: 10px; margin-top: 1px; }
.ddz-card-vis.is-sm .ddz-card-suit-big { font-size: 32px; right: 2px; bottom: 0; }
.ddz-card-vis.is-sm .ddz-card-joker-label { width: 8px; left: 2px; top: 2px; bottom: 2px; }
.ddz-card-vis.is-sm .ddz-card-joker-letter { font-size: 7px; }
.ddz-card-vis.is-sm .ddz-joker-svg { width: 32px; height: 32px; transform: translate(1px, 1px); }

/* 牌背 */
.ddz-card-back {
  width: 30px; height: 42px;
  background: repeating-linear-gradient(45deg, #1e4ea3 0 4px, #163a7d 4px 8px);
  border: 1px solid #0d2756;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* ===== 手牌 ===== */
/*
  手牌布局(参照截图):
   1) 所有牌底部对齐(align-items: flex-end)
   2) 从左到右依次重叠,右边牌压在左边牌上面(JS 按位置设置 z-index)
   3) 单张牌尺寸不变,只通过负 margin-right 让 相邻牌部分重叠
   4) 露出每张牌左侧的 rank + suit
   5) 整体居中摆放,超出容器时换行(wrap)
   6) 选中时只把该牌 translateY 上抬,其余位置不动
*/
.ddz-hand {
  grid-area: hand;
  display: flex;
  flex-wrap: wrap;
  align-items: center;       /* 垂直居中,让手牌在该区域正中 */
  justify-content: center;   /* 整体横向居中 */
  gap: 0;
  padding: 6px 12px;
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  flex: 0 0 auto;
  min-height: 96px;          /* 比单张牌(84px)略高,保证上下有少量留白 */
}
.ddz-hand.is-empty { color: rgba(255,255,255,.6); font-size: 13px; justify-content: center; }

/*
  手牌内单张牌的层叠规则:
   - 每张牌向右压住前一张牌 ~22px,保证左侧点数 + 花色清晰可见
   - z-index 由 JS 按"从左到右递增"赋值,形成阶梯状顶部轮廓
   - 选中态再覆盖一个更大的 z-index,保证选中牌一定在最上
*/
.ddz-hand .ddz-card-vis {
  position: relative;
  margin-right: -30px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, margin-right .12s ease;
  flex: 0 0 auto;
}
.ddz-hand .ddz-card-vis:last-child { margin-right: 0; }
.ddz-hand .ddz-card-vis:hover { transform: translateY(-8px); }
.ddz-hand .ddz-card-vis.is-selected {
  transform: translateY(-22px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
  border-color: var(--ddz-pri);
}
/*
  移动端更紧凑:减小重叠宽度 + 上抬高度,
  保证 17 张牌仍能在一屏内铺开且不超出左右边界
*/
@media (max-width: 540px) {
  .ddz-hand .ddz-card-vis { margin-right: -26px; }
  .ddz-hand .ddz-card-vis.is-selected { transform: translateY(-18px); }
}
@media (max-width: 380px) {
  .ddz-hand .ddz-card-vis { margin-right: -22px; }
  .ddz-hand .ddz-card-vis.is-selected { transform: translateY(-14px); }
}

/* ===== 操作条 ===== */
.ddz-actions {
  flex: 0 0 auto;
  display: flex; gap: 10px; justify-content: center;
  padding: 12px;
  background: var(--ddz-surface);
  border-top: 1px solid var(--ddz-line);
}
.ddz-actions .ddz-btn { min-width: 110px; }

/* ===== 提示(自己回合提示) ===== */
.ddz-tip {
  flex: 0 0 auto;
  text-align: center;
  font-size: 13px;
  padding: 8px;
  color: var(--ddz-fg-3);
  background: var(--ddz-elev);
  border-top: 1px solid var(--ddz-line);
}

/* ===== 模态层(沿用象棋的) ===== */
.ddz-modal-root { position: fixed; inset: 0; z-index: 50; display: none; }
.ddz-modal-root.is-on { display: flex; align-items: center; justify-content: center; }
.ddz-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.ddz-modal {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-surface, #fff);
  color: var(--fg-strong, #222);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 22px 20px 18px;
}
.ddz-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ddz-modal-badge {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.ddz-modal-head h3 { margin: 0; font-size: 16px; }
.ddz-modal-body { font-size: 13px; line-height: 1.6; color: var(--fg-normal, #444); margin-bottom: 16px; white-space: pre-line; }
.ddz-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ===== 提示栈 ===== */
.ddz-toast-stack {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.ddz-toast {
  pointer-events: auto;
  background: rgba(0,0,0,.8); color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; line-height: 1.4;
  animation: ddz-toast-in .25s ease;
}
.ddz-toast.is-warn { background: rgba(196,122,31,.92); }
.ddz-toast.is-err { background: rgba(196,30,30,.92); }
@keyframes ddz-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== 玩家徽章颜色 ===== */
.ddz-player-info .ddz-role.landlord {
  background: var(--ddz-red);
  color: #fff;
}

/* ===== 小屏适配 ===== */
@media (max-width: 540px) {
  /* 三人布局在窄屏下退化为竖排 */
  .ddz-players {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "p2"
      "p3"
      "play"
      "p1"
      "hand";
  }
  .ddz-play-area { padding: 4px; min-height: 80px; }
  .ddz-player-avatar { width: 36px; height: 36px; }
  .ddz-bottom-cards { flex-wrap: wrap; }
  .ddz-card-vis { width: 50px; height: 70px; }
  .ddz-card-vis .ddz-card-corner.is-top { top: 3px; left: 5px; }
  .ddz-card-vis .ddz-card-rank { font-size: 18px; }
  .ddz-card-vis .ddz-card-suit { font-size: 11px; }
  .ddz-card-vis .ddz-card-suit-big { font-size: 40px; right: 3px; bottom: 1px; }
  .ddz-card-back { width: 32px; height: 44px; }
  .ddz-card-vis.is-sm { width: 34px; height: 48px; }
  .ddz-actions { flex-wrap: wrap; }
  .ddz-actions .ddz-btn { min-width: 90px; flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .ddz-player-avatar { width: 30px; height: 30px; }
  .ddz-player-info { padding: 4px 6px; }
  .ddz-card-vis { width: 42px; height: 60px; }
  .ddz-card-vis .ddz-card-corner.is-top { top: 2px; left: 4px; }
  .ddz-card-vis .ddz-card-rank { font-size: 16px; }
  .ddz-card-vis .ddz-card-suit { font-size: 10px; }
  .ddz-card-vis .ddz-card-suit-big { font-size: 32px; right: 2px; bottom: 0; }
}