/* 斗地主牌桌：独立视图，不参与棋盘布局。
   人机桌与好友桌共用同一套牌桌、座位与出牌区样式，换的是数据来源。 */
.ddz-view{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0);background:linear-gradient(180deg,#153a2c 0%,#0f2c22 100%);color:#f4efe4}
.ddz-view[hidden]{display:none}
/* 结构保证：只有 data-open 的牌桌才接收点击。
   任何残留状态（旧页面、异常中断、请求超时）都不会让全屏遮罩吃掉大厅的按钮。 */
.ddz-view{pointer-events:none}
.ddz-view[data-open]{pointer-events:auto}

/* ── 顶部栏 ── */
.ddz-top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(10,28,21,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(190,224,207,.14);flex:0 0 auto}
.ddz-top .text-button,.ddz-top .icon-button{color:#f4efe4}
.ddz-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ddz-title .eyebrow{color:#a8cfba;font-size:11px}
.ddz-title strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ddz-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:8px 10px 10px;gap:8px}

/* ── 邀请码 ── */
.ddz-invite{flex:0 0 auto;padding:9px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(255,217,138,.17),rgba(255,217,138,.07));border:1px solid rgba(255,217,138,.4);text-align:center}
.ddz-invite[hidden]{display:none}
.ddz-invite-note{margin:0 0 7px;font-size:12px;color:#ffe6b0}
.ddz-invite-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ddz-invite-row strong{font-size:21px;letter-spacing:3px;font-variant-numeric:tabular-nums;color:#fff}
.ddz-invite-row button{padding:8px 12px;border-radius:11px;border:1px solid rgba(190,224,207,.35);background:rgba(9,26,19,.55);color:#f4efe4;font-size:13px;font-weight:600}
.ddz-invite-row button.primary-button{background:#ffd98a;color:#243024;border-color:#ffd98a}

/* ── 牌桌本体：绒面 + 内阴影 + 高光。桌面本身是一个三行网格，
   出牌、提示、自家出牌各占一行，再窄的屏幕也不会互相压住。 ── */
.ddz-table{position:relative;flex:1 1 auto;min-height:0;border-radius:22px;overflow:hidden;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
  column-gap:6px;row-gap:5px;
  padding:10px 10px 8px;
  background:radial-gradient(118% 88% at 50% 10%,#33705a 0%,#21503e 52%,#12352a 100%);
  box-shadow:inset 0 0 0 1px rgba(196,232,214,.15),inset 0 0 70px rgba(0,0,0,.34),0 10px 26px rgba(0,0,0,.3)}
/* 四人桌左右还各坐一位，出牌分三栏 */
.ddz-table[data-seats="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ddz-table[data-seats="4"] .ddz-play-cards{--ddz-card-w:27px}
.ddz-table::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 42%,rgba(255,255,255,.07),transparent 70%)}
.ddz-table::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(closest-side,transparent 78%,rgba(255,233,186,.1) 100%)}

/* 轮到谁走时在桌沿给一条时间进度 */
.ddz-timer{position:absolute;left:9%;right:9%;top:0;height:3px;border-radius:0 0 3px 3px;background:rgba(255,217,138,.16);overflow:hidden;opacity:0;transition:opacity .25s}
.ddz-table[data-ticking="1"] .ddz-timer{opacity:1}
.ddz-timer-fill{display:block;height:100%;width:100%;transform-origin:left center;background:linear-gradient(90deg,#ffd98a,#ffb347)}

/* ── 底牌 ── */
.ddz-bottom{grid-column:1 / -1;grid-row:2;justify-self:center;align-self:start;display:flex;align-items:center;gap:6px;z-index:4;min-width:0;flex-wrap:wrap;justify-content:center}
.ddz-bottom[hidden]{display:none}
.ddz-bottom-label{font-size:10px;letter-spacing:.16em;color:#bfe0cf;text-transform:uppercase}
.ddz-bottom-cards{display:flex;gap:3px}
.ddz-bottom .ddz-card{--ddz-card-w:28px}

/* ── 座位 ── */
.ddz-seats{grid-column:1 / -1;grid-row:1;display:flex;align-items:stretch;justify-content:space-between;gap:5px;min-width:0;z-index:5}
.ddz-seats[data-opponents="1"]{justify-content:center}
/* 座位在对手条里按顺时针排：上家在最左、对家在中间、下家在最右。 */
.ddz-seat[data-zone="left"]{order:1}
.ddz-seat[data-zone="top"]{order:2}
.ddz-seat[data-zone="right"]{order:3}
.ddz-seat[data-zone="me"]{order:1}
/* 人机桌与好友桌各有一个「自己」的座位条，选择器要同时认这两个 id。 */
#ddz-self,#ddzr-self{grid-column:1 / -1;grid-row:6;justify-self:start;align-self:end;min-width:0;max-width:80%;z-index:6}
#ddz-self[hidden],#ddzr-self[hidden]{display:none}
#ddz-self .ddz-seat,#ddzr-self .ddz-seat{flex:0 1 auto}

.ddz-seat{position:relative;display:flex;align-items:center;gap:5px;padding:5px 8px 5px 5px;border-radius:15px;
  flex:0 1 auto;min-width:0;
  background:rgba(8,24,17,.62);border:1px solid rgba(190,224,207,.2);backdrop-filter:blur(4px);
  transition:border-color .2s,box-shadow .2s,background .2s}
.ddz-seat.passed{opacity:.62}
.ddz-seat.active{border-color:#ffd98a;background:rgba(46,32,8,.7);box-shadow:0 0 0 1px rgba(255,217,138,.5),0 0 22px rgba(255,217,138,.3)}
.ddz-seat.active::after{content:'';position:absolute;inset:-3px;border-radius:18px;border:1px solid rgba(255,217,138,.45);animation:ddz-pulse 1.6s ease-in-out infinite}
@keyframes ddz-pulse{0%,100%{opacity:.25}50%{opacity:.75}}
.ddz-seat-text{display:flex;flex-direction:column;min-width:0;line-height:1.2;gap:2px}
.ddz-seat-name{display:block;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddz-seat-info{display:flex;align-items:center;gap:4px;min-width:0;color:#a8cfba;font-size:10.5px;white-space:nowrap;overflow:hidden}
.ddz-seat-state{font-style:normal;color:#ffd98a;overflow:hidden;text-overflow:ellipsis}
/* 地主做成挂在头像角上的小绶带，不再撑宽座位。 */
.ddz-seat .ddz-badge{position:absolute;left:2px;top:-7px;z-index:2;padding:1px 6px;border-radius:999px;
  background:linear-gradient(180deg,#e8604a,#c8452f);color:#fff;font-size:9.5px;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 5px rgba(6,20,14,.45)}

/* 行动中的头像外圈：金色倒计时弧，和牌桌"轮到谁"的读法一致。 */
.ddz-ring{position:relative;display:grid;place-items:center;flex:0 0 auto;border-radius:50%}
.ddz-ring.ticking::before{content:'';position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(from -90deg,#ffd98a calc(var(--p,1) * 360deg),rgba(255,217,138,.18) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 74%,#000 76%);
  mask:radial-gradient(farthest-side,transparent 74%,#000 76%);
  filter:drop-shadow(0 0 5px rgba(255,217,138,.4))}
@keyframes ddz-ring-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.ddz-ring.ticking::before{animation:ddz-ring-breathe 1.8s ease-in-out infinite}

/* 头像 */
.ddz-avatar{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;overflow:hidden;
  background:linear-gradient(180deg,#2c5c49,#1b3f31);border:2px solid rgba(190,224,207,.4);color:#dff3e6;font-size:15px;font-weight:700}
.ddz-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ddz-avatar.has-photo .ddz-avatar-fallback{display:none}
.ddz-seat.active .ddz-avatar{border-color:#ffd98a;box-shadow:0 0 0 3px rgba(255,217,138,.24)}
.ddz-avatar.empty{background:rgba(9,26,19,.5);border-style:dashed;color:#7fae97;font-size:19px}

/* 剩余张数做成小牌堆 */
.ddz-count{display:flex;align-items:center;gap:4px;flex:0 0 auto;min-width:0}
.ddz-seats .ddz-count-stack i:nth-child(n+4){display:none}
/* 剩余张数用一小叠牌背表示：张数越少牌堆越薄，一眼看出谁快走完了。 */
.ddz-count-stack{display:flex;align-items:center;flex:0 0 auto;padding-left:7px}
.ddz-count-stack i{width:11px;height:16px;flex:0 0 11px;border-radius:2.5px;
  background:linear-gradient(150deg,#3f7aa6,#274c6b);border:1px solid rgba(255,255,255,.46);
  box-shadow:0 1px 2px rgba(6,20,14,.45)}
.ddz-count-stack i+i{margin-left:-7px}
.ddz-count b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:#ffe6b0}
.ddz-count b.low{color:#ff9a86}

/* ── 出牌区：贴在各自座位那一侧。出牌容器不生成盒子，
   每种方位的出牌直接落到牌桌网格上，互不重叠。 ── */
.ddz-plays{display:contents;pointer-events:none}
.ddz-play{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;max-width:100%;z-index:3}
.ddz-play[data-zone="left"]{grid-column:1;grid-row:4;justify-self:start;align-self:center}
.ddz-play[data-zone="right"]{grid-column:2;grid-row:4;justify-self:end;align-items:flex-end;align-self:center}
.ddz-play[data-zone="top"]{grid-column:1 / -1;grid-row:3;justify-self:center;align-self:start}
.ddz-table[data-seats="4"] .ddz-play[data-zone="right"]{grid-column:3}
.ddz-table[data-seats="4"] .ddz-play[data-zone="top"]{grid-column:2}
.ddz-play[data-zone="me"]{grid-column:1 / -1;grid-row:5;justify-self:center;align-self:center}
.ddz-play-cards{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;--ddz-card-w:36px}
.ddz-play-cards .ddz-card{box-shadow:0 1px 2px rgba(6,20,14,.4),0 4px 10px rgba(6,20,14,.28)}
.ddz-play-name{font-size:10px;color:#bfe0cf;white-space:nowrap}
.ddz-play-tag{padding:3px 9px;border-radius:999px;background:rgba(8,24,17,.6);border:1px solid rgba(190,224,207,.24);font-size:11px;color:#dff3e6}
.ddz-play-tag.pass{color:#a8cfba}
.ddz-play-tag.bomb{background:rgba(200,69,47,.85);border-color:#ff9a86;color:#fff;font-weight:700}
.ddz-play.latest .ddz-play-cards .ddz-card{box-shadow:0 0 0 1px rgba(255,217,138,.55),0 3px 8px rgba(6,20,14,.35),0 8px 16px rgba(6,20,14,.3)}

/* ── 牌桌上方的 HUD：轮到谁 + 地主/底分/倍数 ── */
.ddz-hud{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
  padding:6px 12px;border-radius:14px;background:rgba(8,24,17,.5);border:1px solid rgba(190,224,207,.16)}
.ddz-note{flex:1 1 auto;min-width:0;margin:0;font-size:12.5px;color:#e7f6ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddz-note[data-your-turn="1"]{color:#ffe6b0;font-weight:700}
.ddz-meter{flex:0 0 auto;display:flex;justify-content:flex-end;gap:5px;flex-wrap:nowrap;min-width:0}
.ddz-meter span{padding:2px 9px;border-radius:999px;background:rgba(8,24,17,.55);border:1px solid rgba(190,224,207,.2);font-size:11px;color:#ffe6b0;font-variant-numeric:tabular-nums}

/* ── 我自己的状态条 ── */



/* ── 手牌 ── */
/* ── 扑克牌牌面：左上角点数+花色、中央大花色，王牌单独绘制 ── */
.ddz-card{
  position:relative;flex:0 0 auto;
  width:var(--ddz-card-w,46px);height:calc(var(--ddz-card-w,46px)*1.4);
  border-radius:calc(var(--ddz-card-w,46px)*.13);
  background:linear-gradient(167deg,#fffefc 0%,#fdf9f0 58%,#f2e9d8 100%);
  border:1px solid rgba(122,104,74,.55);
  box-shadow:0 1px 2px rgba(6,20,14,.32),0 5px 12px rgba(6,20,14,.22),inset 0 0 0 1px rgba(255,255,255,.65);
  color:#1c1e1b;overflow:hidden;user-select:none;transition:transform .16s ease,box-shadow .16s ease
}
.ddz-card-corner{position:absolute;top:6%;left:7%;display:flex;flex-direction:column;align-items:center;line-height:1}
.ddz-card-corner b{font-size:calc(var(--ddz-card-w,46px)*.36);font-weight:800;letter-spacing:-.03em}
.ddz-card-corner i{font-size:calc(var(--ddz-card-w,46px)*.3);font-style:normal;margin-top:2%}
.ddz-card-pip{position:absolute;left:0;right:0;bottom:4%;display:grid;place-items:center;font-size:calc(var(--ddz-card-w,46px)*.44);line-height:1;opacity:.95}
.ddz-card.red{color:#c0392b}
.ddz-card.red .ddz-card-pip{color:#c0392b}
.ddz-card.joker{background:linear-gradient(167deg,#fffefc 0%,#fdf8ee 55%,#f4ecdc 100%)}
/* 小丑必须整个待在左上角「大 / 王」两行字的下方：图案一旦压上去，那个「王」就像被削掉半截。
   牌高只有 1.4 个牌宽，而「大 / 王」的字形墨迹要到牌高 49% 才收尾，所以图案缩到 50% 牌宽、
   落到 72% 处，实测净空 19px 底牌 2.3px、46px 手牌 1.5px、56px 手牌 1.5px。
   别只按元素盒子去推：文字行盒比字形墨迹高出一大截，照盒子排会把图案顶得太靠上。 */
.ddz-card-joker-art{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);width:50%;aspect-ratio:1}
.ddz-card-joker-art .ddz-joker-figure{display:block;width:100%;height:100%}
.ddz-card.big-joker{color:#c0392b}
.ddz-card.small-joker{color:#1c1e1b}
.ddz-hand .ddz-card .ddz-card-pip{opacity:.9}

/* 选中的牌向上抽出，并给一圈暖色高光 */
.ddz-card.selectable{cursor:pointer}
.ddz-card.selectable:focus-visible{outline:2px solid #ffd98a;outline-offset:2px}
.ddz-card.selected{transform:translateY(-18%);box-shadow:0 2px 4px rgba(6,20,14,.3),0 12px 22px rgba(6,20,14,.34),0 0 0 2px #ffd98a}
.ddz-hand-stack{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;width:100%}
.ddz-hand{display:flex;justify-content:center;align-items:flex-end}
.ddz-hand .ddz-card+.ddz-card{margin-left:calc(var(--ddz-spread,34px) - var(--ddz-card-w,46px))}
.ddz-hand .ddz-card.selectable:hover{transform:translateY(-6%)}
.ddz-hand .ddz-card.selectable.selected{transform:translateY(-22%)}

/* ── 操作按钮 ── */
.ddz-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:42px;align-items:center}
.ddz-actions button{min-width:82px;padding:10px 15px;border-radius:13px;border:1px solid rgba(190,224,207,.32);background:rgba(9,26,19,.62);color:#f4efe4;font-size:14px;font-weight:600}
.ddz-actions button.primary{background:linear-gradient(180deg,#ffe1a3,#ffcf72);color:#2b2415;border-color:#ffd98a;box-shadow:0 3px 10px rgba(255,207,114,.28)}
.ddz-actions button:disabled{opacity:.42}
.ddz-actions button:not(:disabled):active{transform:translateY(1px)}

/* ── 结算与规则弹层 ── */
.ddz-result{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(6,18,13,.7);backdrop-filter:blur(3px)}
.ddz-result[hidden]{display:none}
.ddz-result-card{width:min(340px,86vw);padding:20px;border-radius:20px;background:linear-gradient(180deg,#fffdf7,#f6efe0);color:#243024;text-align:center;box-shadow:0 20px 44px rgba(0,0,0,.4)}
.ddz-result-card h2{margin:0 0 6px;font-size:20px}
.ddz-result-card p{margin:4px 0;font-size:13px;color:#4a5a4f}
.ddz-result-card .ddz-actions{margin-top:14px}
.ddz-result-card .ddz-actions button{border-color:#d6cdb8;background:#f0e7d5;color:#243024;min-width:96px}
.ddz-result-card .ddz-actions button.primary{background:linear-gradient(180deg,#3a7a5f,#2b5c47);color:#fff;border-color:#2b5c47}
.ddz-rules{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(6,18,13,.7);padding:18px}
.ddz-rules[hidden]{display:none}
.ddz-rules-card{width:min(430px,92vw);max-height:82vh;overflow:auto;padding:18px 20px;border-radius:18px;background:linear-gradient(180deg,#fffdf7,#f6efe0);color:#243024}
.ddz-rules-card h2{margin:0 0 8px;font-size:18px}
.ddz-rules-card ul{padding-left:18px;margin:0;font-size:13px;line-height:1.6;color:#3a4a40}
.ddz-rules-card li+li{margin-top:6px}

/* ── 窄屏与矮屏兜底 ── */
@media (max-width:420px){
  .ddz-seat{padding:4px 7px 4px 4px;gap:4px;border-radius:13px}
  .ddz-seat-name{font-size:11px}
  .ddz-seat-info{font-size:10px}
  /* 三位对手同排时，只有这一种情况才真的挤，此时让掉"行动中"三个字。 */
  .ddz-table[data-seats="4"] .ddz-seat-state{display:none}
  .ddz-table[data-seats="4"] .ddz-seat{flex:1 1 0;
    max-width:calc((100% - 10px) / 3)}
  .ddz-avatar{width:31px;height:31px;flex-basis:31px;font-size:13px}
  .ddz-play-cards{--ddz-card-w:31px}
  .ddz-bottom .ddz-card{--ddz-card-w:23px}
  .ddz-actions button{min-width:74px;padding:9px 12px;font-size:13px}
}
/* 矮屏：牌桌贴边留白已由网格行接管，这里只收紧出牌张幅和牌面尺寸。 */
@media (max-height:720px){
  .ddz-table{padding:8px 8px 6px}
  .ddz-play-cards{--ddz-card-w:26px}
  .ddz-bottom .ddz-card{--ddz-card-w:23px}
}
@media (max-height:620px){
  .ddz-table{padding:6px 6px 5px;row-gap:3px}
  .ddz-seat{padding:4px 7px 4px 4px;gap:4px}
  .ddz-avatar{width:29px;height:29px;flex-basis:29px;font-size:13px}
  .ddz-play-cards{--ddz-card-w:22px}
  .ddz-bottom .ddz-card{--ddz-card-w:19px}
  .ddz-meter span{font-size:10px;padding:2px 7px}
  .ddz-felt-mark{width:min(52%,150px)}
}

/* ── 小游戏手感：气泡、发牌、炸弹、分组、桌心 ── */

/* 不出/要不起：贴着座位飘起来再淡出。 */
.ddz-float{position:absolute;left:50%;top:50%;z-index:12;transform:translate(-50%,-50%);
  padding:3px 11px;border-radius:999px;background:rgba(8,24,17,.9);border:1px solid rgba(190,224,207,.36);
  color:#e7f6ee;font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none;
  box-shadow:0 6px 16px rgba(4,16,11,.4);
  animation:ddz-float 1.5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ddz-float{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  40%{transform:translate(-50%,-50%) scale(1)}
  76%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}

/* 发牌：整手牌按张序错开落桌。 */
.ddz-view.ddz-dealing .ddz-hand .ddz-card{animation:ddz-deal .34s cubic-bezier(.2,.9,.3,1.25) backwards;
  animation-delay:calc(var(--i,0) * 26ms)}
.ddz-view.ddz-dealing .ddz-count-stack i{animation:ddz-deal .3s cubic-bezier(.2,.9,.3,1.25) backwards}
.ddz-view.ddz-dealing .ddz-count-stack i:nth-child(1){animation-delay:80ms}
.ddz-view.ddz-dealing .ddz-count-stack i:nth-child(2){animation-delay:120ms}
.ddz-view.ddz-dealing .ddz-count-stack i:nth-child(3){animation-delay:160ms}
.ddz-view.ddz-dealing .ddz-count-stack i:nth-child(4){animation-delay:200ms}
.ddz-view.ddz-dealing .ddz-count-stack i:nth-child(5){animation-delay:240ms}
@keyframes ddz-deal{from{opacity:0;transform:translateY(-28px) scale(.86)}to{opacity:1;transform:none}}

/* 炸弹：桌面闪一下、晃两下。 */
.ddz-view.ddz-boom .ddz-table{animation:ddz-rumble .55s ease-in-out}
.ddz-view.ddz-boom .ddz-table::after{opacity:1;background:radial-gradient(closest-side,rgba(255,240,205,.55),transparent 76%)}
@keyframes ddz-rumble{0%,100%{transform:translateX(0)}
  15%{transform:translateX(-4px) rotate(-.4deg)}35%{transform:translateX(4px) rotate(.4deg)}
  55%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* 出牌区标出是谁出的。 */
.ddz-play-who{font-size:10px;color:#a8cfba;white-space:nowrap}

/* 底牌做成一枚有标签的筹码片，不再让"底牌"两个字孤零零浮着。 */
.ddz-bottom{gap:0;padding:4px 10px 5px;border-radius:14px;background:rgba(8,24,17,.42);
  border:1px solid rgba(190,224,207,.18);flex-direction:column;align-items:center;gap:4px}
.ddz-bottom-label{font-size:10px;letter-spacing:.18em;color:#ffe6b0}

/* 桌心：给牌桌一点纵深，空处不再是一整片死绿。 */
.ddz-table::before{background:
  radial-gradient(46% 34% at 50% 42%,rgba(255,255,255,.07),transparent 70%),
  radial-gradient(closest-side at 50% 44%,rgba(196,232,214,.07),transparent 72%)}

.ddz-note{margin:0;font-size:13px}
.ddz-meter{margin-top:8px}


/* ── 桌心徽记：空绒面上有一枚牌桌标记，纵深有了焦点，不像一块没画完的绿板。 ── */
.ddz-felt-mark{position:absolute;left:50%;top:50%;width:min(58%,210px);aspect-ratio:1;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(196,232,214,.13);
  background:radial-gradient(closest-side,rgba(255,233,186,.09),rgba(255,233,186,.02) 62%,transparent 74%)}
.ddz-felt-mark::before{content:'';position:absolute;inset:13%;border-radius:50%;border:1px dashed rgba(196,232,214,.11)}
.ddz-felt-mark b{font-size:clamp(15px,4.4vw,21px);font-weight:700;letter-spacing:.32em;text-indent:.32em;
  color:rgba(223,243,230,.16);text-shadow:0 1px 0 rgba(4,16,11,.3)}

/* ── 大屏：牌桌有余量时把牌面放大，桌面才撑得起来。 ── */
@media (min-height:800px){
  .ddz-play-cards{--ddz-card-w:42px}
  .ddz-bottom .ddz-card{--ddz-card-w:31px}
  .ddz-avatar{width:40px;height:40px;flex-basis:40px;font-size:16px}
  .ddz-seat{padding:6px 10px 6px 6px}
  .ddz-note{font-size:13.5px}
}
@media (min-height:880px){
  .ddz-play-cards{--ddz-card-w:48px}
  .ddz-bottom .ddz-card{--ddz-card-w:34px}
}

/* 顶栏的“教程 / 玩法”是小胶囊按钮，不和方形图标按钮抢位置 */
.ddz-top-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.table-chip{height:32px;padding:0 12px;border-radius:11px;border:1px solid rgba(190,224,207,.32);
  background:rgba(9,26,19,.6);color:#f4efe4;font-size:13px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center}
.table-chip:not(:disabled):active{transform:translateY(1px)}
@media (max-width:420px){.table-chip{height:30px;padding:0 9px;font-size:12.5px}}

/* 结算里的玩家：头像 + 名字 + 身份（地主／农民）+ 这一局的得分，赢家描金。
   和五子棋的结算读法一致。 */
.ddz-result-players{display:flex;justify-content:center;align-items:flex-start;gap:8px;margin:14px 0 2px}
.ddz-result-person{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.ddz-result-person .ddz-avatar{width:44px;height:44px;flex:0 0 44px;font-size:17px;
  border-color:rgba(36,48,36,.18);background:linear-gradient(180deg,#f2ece0,#e4dccc);color:#4a5a4f}
.ddz-result-person.is-winner .ddz-avatar{border-color:#c79a3f;box-shadow:0 0 0 3px rgba(199,154,63,.22)}
.ddz-result-name{max-width:100%;font-size:12.5px;font-weight:600;color:#243024;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddz-result-role{font-size:11px;color:#6b7a6f;white-space:nowrap}
.ddz-result-person.is-winner .ddz-result-role{color:#a07835;font-weight:700}
.ddz-result-score{font-size:12px;font-variant-numeric:tabular-nums;color:#6b7a6f}
.ddz-result-score.up{color:#2b7a55;font-weight:700}
.ddz-result-score.down{color:#b4553f}
.ddz-result-card .ddz-result-players + p{margin-top:10px}