/* 拱猪牌桌 · 配色沿用掼蛋 D5「墨园宣纸」（docs/guandan-ui-spec.md 1.8 节），卡面沿用四象限设计系统。
 * 唯一尺寸源：JS 只算 --u（手牌卡宽），其余尺寸都从它推。 */

body.gz-fullscreen { margin: 0; background: #f3eee3; overflow: hidden; }
body.gz-fullscreen .site-shell-nav,
body.gz-fullscreen footer,
body.gz-fullscreen .site-footer { display: none !important; }

.gz-app {
  --gz-paper: #f3eee3;
  --gz-ink: #1d1b18;
  --gz-ink-mute: #6a6358;
  --gz-ink-faint: #aaa294;
  --gz-off: #b3ab9e;
  --gz-wash: #ebe5d8;
  --gz-seal: #b4392c;
  --gz-seal-ink: #fbf6ec;
  --gz-card: #fffdf8;
  --gz-red: #a8322a;
  --gz-black: #1f1c18;
  --gz-good: #3d6b4f;
  --gz-gold: #c9a96e;
  --u: 56px;
  --h: calc(var(--u) * 1.44);
  --tu: var(--u);
  --th: calc(var(--tu) * 1.44);
  --m: clamp(22px, calc(var(--u) * 0.48), 34px);
  --mh: calc(var(--m) * 1.4);
  --z-table: 0; --z-lift: 10; --z-band: 20; --z-fx: 30; --z-dialog: 50;

  position: fixed; inset: 0;
  background: var(--gz-paper);
  color: var(--gz-ink);
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  -webkit-user-select: none; user-select: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}
.gz-app *, .gz-app *::before, .gz-app *::after { box-sizing: border-box; }

/* 裱框：外墨线 + 内 35% 墨线 */
.gz-table {
  position: relative;
  height: 100%;
  margin: 0 auto;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(84px, 1fr) minmax(0, 3fr) minmax(84px, 1fr);
  grid-template-rows: 52px auto minmax(calc(var(--th) * 2 + 24px), 1fr) auto auto;
  grid-template-areas:
    "bar   bar    bar"
    ".     top    ."
    "left  center right"
    "me    me     me"
    "hand  hand   hand";
  border: 1px solid var(--gz-ink);
  border-radius: 2px;
  outline: 1px solid rgba(29, 27, 24, 0.35);
  outline-offset: -6px;
  padding: 6px 10px 8px;
}

/* ───── 顶栏 ───── */
.gz-topbar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gz-round-info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0; background: none; padding: 4px 6px; color: inherit; font: inherit; cursor: pointer; border-radius: 8px;
}
.gz-round-no { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.gz-tools { display: flex; gap: 8px; }
.gz-tool {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gz-ink); background: var(--gz-paper); color: var(--gz-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.gz-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gz-tool svg .dot { fill: currentColor; stroke: none; }
.gz-tool:focus-visible, .gz-btn:focus-visible, .gz-round-info:focus-visible { outline: 2px solid var(--gz-seal); outline-offset: 2px; }

/* ───── 座位 ───── */
.gz-seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.gz-seat-top { grid-area: top; padding-bottom: 4px; }
.gz-seat-left { grid-area: left; }
.gz-seat-right { grid-area: right; }
.gz-seat-me { grid-area: me; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 4px calc(50% + 64px) 4px 0; }

.gz-who { display: flex; align-items: center; gap: 8px; }
.gz-seat-left .gz-who, .gz-seat-right .gz-who { flex-direction: column; gap: 7px; }
.gz-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gz-wash); border: 1.5px solid var(--gz-ink-faint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--gz-ink);
  transition: box-shadow 0.2s, border-color 0.2s;
  flex-shrink: 0; position: relative;
}
.gz-seat-me .gz-avatar { border-color: var(--gz-ink); }
.gz-seat.is-turn .gz-avatar { border-color: var(--gz-seal); box-shadow: 0 0 0 3px rgba(180, 57, 44, 0.22); }
/* 倒计时：头像外圈一道红环，顺时针收走；有限时就用它代替光晕 */
.gz-clock {
  position: absolute; left: -7px; top: -7px; width: calc(100% + 14px); height: calc(100% + 14px);
  transform: rotate(-90deg); pointer-events: none; overflow: visible;
}
.gz-clock circle {
  fill: none; stroke: var(--gz-seal); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0;
}
.gz-seat.is-turn.is-timed .gz-avatar { box-shadow: none; }
.gz-seat.is-turn.is-timed .gz-clock circle { opacity: 1; animation: gz-clock var(--turn-ms, 20s) linear forwards; }
.gz-seat.is-paused .gz-clock circle, .gz-seat.is-paused .gz-avatar { animation-play-state: paused; }
.gz-seat.is-turn.is-hurry .gz-avatar { animation: gz-hurry 0.5s ease-in-out infinite alternate; }
@keyframes gz-clock { to { stroke-dashoffset: 100; } }
@keyframes gz-hurry { to { transform: scale(1.08); } }
/* 托管：头像右下角挂一枚小机器人（我自己的点手牌或头像收回；联机里别人托管也一样挂，不写字） */
.gz-seat-me.is-auto .gz-avatar { cursor: pointer; }
.gz-seat.is-auto .gz-avatar::after {
  content: ''; position: absolute; right: -6px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gz-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3ece0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='14' height='11' rx='3'/%3E%3Cpath d='M12 4v4M9.5 13h.01M14.5 13h.01M10 16.5h4'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1.5px solid var(--gz-paper);
}
.gz-name-line { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.gz-seat-me .gz-name-line, .gz-seat-top .gz-name-line { align-items: flex-start; }
.gz-name { font-size: 14px; font-weight: 700; white-space: nowrap; }
.gz-total { font-size: 15px; color: var(--gz-ink-mute); white-space: nowrap; }
.gz-total.neg { color: var(--gz-seal); }
.gz-num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 1.12em; }

/* 吃牌区：真牌面小牌。顺序固定 变压器 · 猪 · 羊 · 红桃扇，末尾本局分 */
.gz-caps { display: flex; justify-content: center; width: 100%; min-width: 0; height: calc(var(--mh) + 4px); }
.gz-seat-me .gz-caps { justify-content: flex-start; flex: 1; }
.gz-caps-row {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: inherit;
  gap: calc(var(--m) * 0.16); max-width: 100%;
  padding: 2px; border-radius: 5px;
}
.gz-mini {
  width: var(--m); height: var(--mh); --q: var(--m);
  border-radius: 3px; box-shadow: 0 1px 2px rgba(20, 18, 15, 0.16);
}
.gz-mini .q-tl { width: calc(var(--q) * 0.58); height: calc(var(--q) * 0.56); font-size: calc(var(--q) * 0.46); }
.gz-mini.rank-j .q-tl { font-size: calc(var(--q) * 0.42); }
.gz-mini .q-tr { display: none; }
.gz-mini .q-bl {
  display: flex; top: calc(var(--q) * 0.52); bottom: auto; width: calc(var(--q) * 0.58); height: calc(var(--q) * 0.5);
  font-size: calc(var(--q) * 0.42); transform: none;
}
.gz-mini .bigsuit {
  right: calc(var(--q) * var(--gz-brH)); bottom: calc(var(--q) * var(--gz-bbH));
  font-size: calc(var(--q) * var(--gz-bigH) * 0.8); opacity: var(--gz-opH);
}
.gz-fan { display: inline-flex; padding: 1px; border-radius: 4px; }
.gz-fan .gz-mini + .gz-mini { margin-left: calc(var(--fanstep, calc(var(--m) * 0.44)) - var(--m)); }
.gz-mini.is-doubler { margin-right: calc(var(--m) * 0.12); }
.gz-cap-score { font-size: 16px; line-height: 1; margin-left: 3px; color: var(--gz-ink-mute); }   /* 行高收紧：不比小牌高，两行摆法才不超出吃牌区 */
.gz-cap-score.neg { color: var(--gz-seal); }
.gz-cap-score.pos { color: var(--gz-good); }
.gz-cap-score.is-gold { color: #a8843e; text-shadow: 0 0 6px rgba(201, 162, 39, 0.35); }
.gz-caps .incoming { visibility: hidden; }
/* 教程讲到吃牌区：先放大再缩回（只用 transform，不挤布局），之后金边呼吸 */
.gz-caps.is-focus .gz-caps-row { transform-origin: left center; border-radius: 6px;
  animation: gz-focus-pop 0.5s cubic-bezier(.2, .8, .3, 1.2), gz-focus-glow 1.6s ease-in-out 0.5s infinite alternate; }
.gz-seat-left .gz-caps.is-focus .gz-caps-row, .gz-seat-right .gz-caps.is-focus .gz-caps-row, .gz-seat-top .gz-caps.is-focus .gz-caps-row { transform-origin: center; }
@keyframes gz-focus-pop { from { transform: scale(1.45); } to { transform: scale(1); } }
@keyframes gz-focus-glow { from { box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.25); } to { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.75), 0 0 14px 3px rgba(201, 169, 110, 0.35); } }
/* 分数在数：放大一点、涨分墨绿 / 扣分朱红，数完回原样（只用 transform，不挤布局） */
.gz-cap-score, .gz-total { display: inline-block; transition: transform 0.22s cubic-bezier(.2, .8, .3, 1.4), color 0.3s; }
.gz-cap-score { transform-origin: left center; }
.gz-cap-score.is-rolling, .gz-total.is-rolling { transform: scale(1.32); }
.gz-cap-score.is-rolling.up, .gz-total.is-rolling.up { color: var(--gz-good); }
.gz-cap-score.is-rolling.down, .gz-total.is-rolling.down { color: var(--gz-seal); }

.gz-res-caps { height: auto; }

/* 明出来的牌靠牌面本身区分（黑猪、红羊、×4、写着 ×2 的大红心，见「明牌牌面」）；
 * 只有设置里换成「普通牌面」时没有画可换，才在左下角点一个朱红圆点 */
.gz-card.is-exposed:not(.has-art):not(.has-ha)::after {
  content: ''; position: absolute; bottom: calc(var(--q) * 0.08); left: calc(var(--q) * 0.08);
  width: calc(var(--q) * 0.13); height: calc(var(--q) * 0.13); border-radius: 50%;
  background: var(--gz-seal);
}
.gz-mini.is-exposed:not(.has-art):not(.has-ha)::after { width: calc(var(--q) * 0.24); height: calc(var(--q) * 0.24); }
/* 别家亮出、还没打的牌：正面朝上排在牌背后面，小一号（宽 21px）。这一行永远留 30px 高（有没有亮牌都一样），
 * 亮牌出现 / 打出都不挤动布局；有亮牌时牌背和亮牌都叠紧一点，整行收在座位宽度以内，不压上面的分数、不出界 */
.gz-hold { position: relative; display: flex; justify-content: center; align-items: center; gap: 5px; height: 30px; max-width: 100%; }
.gz-shown { display: flex; flex: none; }
.gz-shown:empty { display: none; }
.gz-shown .gz-mini { width: 21px; height: 30px; --q: 21px; box-shadow: 0 1px 2px rgba(20, 18, 15, 0.2); }
.gz-shown .gz-mini + .gz-mini { margin-left: -7px; }
.gz-hold:has(.gz-shown:not(:empty)) .gz-back { margin-left: -11px; }
.gz-hold:has(.gz-shown:not(:empty)) .gz-back:first-child { margin-left: 0; }

/* 对手手牌背面小扇 */
.gz-backs { display: flex; height: 20px; }
.gz-back {
  width: 14px; height: 20px; border-radius: 2px; margin-left: -9px;
  background: repeating-linear-gradient(45deg, #b4392c 0 2px, #c2493b 2px 4px);
  border: 1px solid var(--gz-paper);
}
.gz-back:first-child { margin-left: 0; }

/* ───── 中央：本墩。四张牌各自靠向出牌人，端端正正摆着 ───── */
.gz-center { grid-area: center; position: relative; min-height: 0; }
.gz-slot { position: absolute; width: var(--tu); height: var(--th); }
/* 离中心的距离按牌的尺寸算、再被区域边缘夹住；左右两家拉得更开，四张牌排成一个扁菱形 */
.gz-slot-0 { left: 50%; bottom: max(2%, calc(50% - var(--th) * 1.9)); margin-left: calc(var(--tu) / -2); --fx: 0; --fy: 40%; }
.gz-slot-2 { left: 50%; top: max(2%, calc(50% - var(--th) * 1.9)); margin-left: calc(var(--tu) / -2); --fx: 0; --fy: -40%; }
.gz-slot-1 { right: max(4%, calc(50% - var(--tu) * 4.8)); top: 50%; margin-top: calc(var(--th) / -2); --fx: 40%; --fy: 0; }
.gz-slot-3 { left: max(4%, calc(50% - var(--tu) * 4.8)); top: 50%; margin-top: calc(var(--th) / -2); --fx: -40%; --fy: 0; }
.gz-slot .gz-card {
  position: absolute; inset: 0; width: 100%; height: 100%; --q: var(--tu);
  box-shadow: 0 2px 6px rgba(20, 18, 15, 0.16);
}
.gz-slot .gz-card.in { animation: gz-in 0.24s ease-out; }
.gz-slot .gz-card.is-top { box-shadow: 0 0 0 2px var(--gz-seal), 0 3px 8px rgba(20, 18, 15, 0.2); }
@keyframes gz-in {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)); }
  to { opacity: 1; transform: none; }
}
/* 一墩打完：牌复制成浮层——分牌飞进赢家吃牌区，没分的牌就地淡出 */
/* 选择器要比后面的 .gz-card { position: relative } 更具体，否则飞行中的牌会掉回文档流、飞在屏幕外看不见 */
.gz-card.gz-flyer {
  position: fixed; margin: 0; z-index: var(--z-fx); pointer-events: none;
  transform-origin: 50% 50%; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45, 0, .3, 1);
}

/* ───── 特殊事件动画：插画 / 大字 / 波纹 / 烟花粒子（位移都由 JS 的 Web Animations 驱动） ───── */
.gz-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.gz-fxitem { z-index: 2; position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; }
.gz-fxart svg { display: block; width: 190px; height: auto; filter: drop-shadow(0 4px 6px rgba(20, 18, 15, 0.16)); }
.kind-slam .gz-fxart svg { width: 176px; filter: drop-shadow(0 6px 12px rgba(169, 130, 58, 0.4)); }
.kind-pig .gz-fxart { filter: drop-shadow(0 0 18px rgba(122, 30, 26, 0.45)); }
/* 分数大字：扣分朱红、加分墨绿 */
.gz-fxscore { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: 0.02em;
  text-shadow: 0 0 12px var(--gz-paper), 0 0 4px var(--gz-paper); }
.gz-fxscore.neg { color: var(--gz-seal); }
.gz-fxscore.pos { color: var(--gz-good); }
.kind-allhearts .gz-fxscore, .kind-slam .gz-fxscore { font-size: 60px; }
.kind-allhearts .gz-fxscore { color: var(--gz-seal); }
.kind-slam .gz-fxscore { color: #a8843e; }
/* 变压器：一枚圆环，×2 居中 */
.gz-fxcoin { width: 136px; height: 136px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255, 253, 248, 0.95) 55%, rgba(255, 253, 248, 0.6) 70%, transparent 72%);
  box-shadow: inset 0 0 0 4px var(--tone), inset 0 0 0 9px rgba(255, 253, 248, 0.9), inset 0 0 0 10px var(--tone); }
.gz-fxcoin span { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 70px; line-height: 1; transform: translateY(-3px); }
.gz-fxword { font-size: 54px; font-weight: 900; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; color: var(--gz-seal);
  text-shadow: 0 0 12px var(--gz-paper), 0 0 4px var(--gz-paper), 0 3px 0 rgba(180, 57, 44, 0.18); }
.kind-doubler .gz-fxword { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 72px; color: #b8924a;
  text-shadow: 0 0 12px var(--gz-paper), 0 2px 0 rgba(168, 132, 62, 0.35); }
.kind-slam .gz-fxword { color: #a8843e; font-size: 44px; }
.gz-fxlabel { font-size: 20px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; color: var(--gz-ink);
  text-shadow: 0 0 8px var(--gz-paper), 0 0 3px var(--gz-paper); }
.gz-flash.red { background: radial-gradient(circle, rgba(255, 214, 205, 0.9), rgba(180, 57, 44, 0.28) 45%, transparent 70%); }
/* 全红：一颗大红心托着「全红」二字 */
.gz-fxheart { position: relative; width: 210px; }
.gz-fxheart svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(180, 57, 44, 0.3)); }
.gz-fxheart .w { position: absolute; left: 0; right: 0; top: 30%; text-align: center; color: #fffaf3;
  font-size: 56px; font-weight: 900; letter-spacing: 0.08em; line-height: 1; }
.gz-flash { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 236, 200, 0.95), rgba(201, 169, 110, 0.35) 45%, transparent 70%); }
.gz-spark { z-index: 1; position: absolute; left: 50%; top: 50%; line-height: 1; opacity: 0; font-family: 'Apple Symbols', 'Segoe UI Symbol', serif; }
/* 领出花色的 A：小印「照单全收」压在牌的右下角 */
.gz-slot.is-ace::after {
  content: '照单全收'; position: absolute; right: calc(var(--tu) * -0.32); bottom: calc(var(--th) * -0.14); z-index: 2;
  padding: 2px 5px; border-radius: 3px; background: var(--gz-seal); color: var(--gz-seal-ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; transform: rotate(-6deg);
  animation: gz-ace-in 0.36s cubic-bezier(.2, .7, .3, 1.4);
}
@keyframes gz-ace-in { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* ───── 决策带与手牌 ───── */
/* 出牌按钮：在我这一行的正中（跟我的座位同一格，叠在上面） */
.gz-band { grid-area: me; justify-self: center; align-self: center; display: flex; align-items: center; justify-content: center; z-index: var(--z-band); }
.gz-btn {
  min-width: 88px; height: 40px; padding: 0 18px; border-radius: 8px;
  border: 1px solid var(--gz-ink); background: var(--gz-paper); color: var(--gz-ink);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer;
}
.gz-btn-primary { background: var(--gz-seal); border-color: var(--gz-seal); color: var(--gz-seal-ink); }
.gz-btn:disabled { background: transparent; border: 1px dashed var(--gz-off); color: var(--gz-off); cursor: default; }

.gz-hand {
  grid-area: hand;
  position: relative;
  height: calc(var(--h) + var(--u) * 0.32 + 6px);
  margin-top: 2px;
}
.gz-hand .gz-card {
  position: absolute; bottom: 4px;
  width: var(--u); height: var(--h); --q: var(--u);
  transition: transform 0.14s ease-out, filter 0.14s;
  cursor: pointer;
}
.gz-hand .gz-card.is-illegal { filter: grayscale(0.25) brightness(0.86); cursor: default; }
.gz-hand.my-turn .gz-card:not(.is-illegal):hover { transform: translateY(calc(var(--u) * -0.12)); }
.gz-hand .gz-card.selected,
.gz-hand.my-turn .gz-card.selected:hover { transform: translateY(calc(var(--u) * -0.3)); }

/* ───── 卡面：四象限（迁自掼蛋 / 斗地主，变量前缀换成 --gz-） ───── */
.gz-card {
  display: inline-block; position: relative; overflow: hidden; flex-shrink: 0;
  background: var(--gz-card);
  border: 1px solid rgba(29, 27, 24, 0.28);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(20, 18, 15, 0.16);
  -webkit-tap-highlight-color: transparent;
}
.gz-card.suit-red { color: var(--gz-red); }
.gz-card.suit-black { color: var(--gz-black); }
.gz-card .q { position: absolute; display: flex; line-height: 1; }
.gz-card .q-tl {
  left: 0; top: 0; width: calc(var(--q) * 0.38); height: calc(var(--q) * 0.38);
  align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, 'Songti SC', serif; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: calc(var(--q) * 0.28);
}
.gz-card.rank-j .q-tl { font-size: calc(var(--q) * 0.25); }
.gz-card .q-tr {
  left: calc(var(--q) * 0.38); top: 0; right: 0; height: calc(var(--q) * 0.38);
  align-items: center; justify-content: center;
  font-size: calc(var(--q) * var(--gz-tr, 0.35));
  transform: translateY(calc(var(--q) * var(--gz-try, 0)));
}
.gz-card .q-bl {
  left: 0; top: calc(var(--q) * 0.38); width: calc(var(--q) * 0.38); bottom: 0;
  align-items: center; justify-content: center;
  font-size: calc(var(--q) * var(--gz-bl, 0.35));
  transform: translateY(calc(var(--q) * var(--gz-bly, 0)));
}
.gz-card .bigsuit {
  position: absolute; display: flex; align-items: center; justify-content: center; line-height: 1;
  right: calc(var(--q) * var(--gz-br, -0.3));
  bottom: calc(var(--q) * var(--gz-bb, -0.1));
  width: 1em; height: 1em;
  font-size: calc(var(--q) * var(--gz-big, 1.1));
  opacity: var(--gz-op, 0.9);
}
.gz-card .q-tr, .gz-card .q-bl, .gz-card .bigsuit { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols2", monospace; }
.gz-card .suit-svg { width: 1em; height: 1em; display: block; fill: currentColor; overflow: visible; }
/* 单张完整（本墩）：露左上 + 右上 + 右下；手牌叠放：露左上 + 左下 */
.gz-card .q-bl { display: none; }
.gz-hand .gz-card .q-bl, .gz-card.gz-handlike .q-bl { display: flex; }
.gz-hand .gz-card .q-tr, .gz-card.gz-handlike .q-tr { display: none; }
/* 教程里展示的牌（gz-handlike）跟手牌同一套版式，只按 --q 缩放 */
.gz-hand .gz-card .bigsuit, .gz-card.gz-handlike .bigsuit {
  right: calc(var(--q) * var(--gz-brH));
  bottom: calc(var(--q) * var(--gz-bbH));
  font-size: calc(var(--q) * var(--gz-bigH));
  opacity: var(--gz-opH);
}
/* 点了不能出的牌：抖一下 */
.gz-hand .gz-card.nope { animation: gz-nope 0.28s ease-in-out; }
/* 教程里久不出牌：建议的那张牌「呼吸」——只浮 4px、金边透明度 0.25↔0.7，亮度不变，不抢戏但看得见 */
.gz-hand .gz-card.is-suggest { animation: gz-breathe 1.8s ease-in-out infinite alternate; z-index: 30 !important; }
@keyframes gz-breathe {
  from { transform: translateY(0); box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.25), 0 1px 3px rgba(20, 18, 15, 0.16); }
  to { transform: translateY(-4px); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.7), 0 0 14px 2px rgba(201, 169, 110, 0.35); }
}
.gz-btn.is-suggest { animation: gz-breathe-btn 1.8s ease-in-out infinite alternate; }
@keyframes gz-breathe-btn {
  from { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.25); }
  to { box-shadow: 0 0 0 5px rgba(201, 169, 110, 0.6), 0 0 14px 2px rgba(201, 169, 110, 0.3); }
}
@keyframes gz-nope { 0%, 100% { margin-left: 0; } 25% { margin-left: -4px; } 75% { margin-left: 4px; } }

/* ───── 弹窗 ───── */
.gz-dialog-mask {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  background: rgba(29, 27, 24, 0.32);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.gz-dialog-mask[hidden] { display: none; }
.gz-dialog {
  background: var(--gz-paper); color: var(--gz-ink);
  border: 1px solid var(--gz-ink); outline: 1px solid rgba(29, 27, 24, 0.35); outline-offset: -6px;
  border-radius: 2px; padding: 20px 20px 16px;
  width: min(560px, 100%); max-height: calc(100% - 16px); overflow: auto;
}
.gz-dialog h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: 0.06em; }
.gz-dialog p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
.gz-dialog .gz-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gz-score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gz-score-table th, .gz-score-table td { padding: 7px 4px; border-bottom: 1px solid rgba(29, 27, 24, 0.14); text-align: left; vertical-align: top; }
.gz-score-table th { font-size: 12px; color: var(--gz-ink-mute); font-weight: 400; }
.gz-score-table td.n { text-align: right; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 17px; white-space: nowrap; }
.gz-score-table td.n.neg { color: var(--gz-seal); }
.gz-score-table td.n.pos { color: var(--gz-good); }
.gz-score-table .how { display: block; font-size: 12px; color: var(--gz-ink-mute); margin-top: 2px; }
.gz-score-table tr.me td:first-child { font-weight: 700; }
.gz-res { display: grid; }
.gz-res-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px 64px; align-items: center; gap: 6px;
  padding: 8px 2px; border-bottom: 1px solid rgba(29, 27, 24, 0.14); font-size: 14px;
}
.gz-res-head { padding: 0 2px 4px; font-size: 12px; color: var(--gz-ink-mute); }
.gz-res-row.me .gz-res-name { font-weight: 700; }
/* 自己那一行：置顶，底色是垫在整行后面的一层（向两边多铺 10px、圆角），行本身的边距一点不动——
 * 「我」和别人的名字、我的牌和别人的牌都在同一条竖线上。得分为正淡朱红、为负淡灰墨、持平淡金 */
.gz-res-row.me { position: relative; isolation: isolate; border-bottom-color: transparent; }
.gz-res-row.me::before {
  content: ''; position: absolute; z-index: -1; inset: 3px -10px; border-radius: 10px;
  background: var(--gz-res-bg); box-shadow: inset 0 0 0 1px var(--gz-res-line);
}
.gz-res-row.me.is-up { --gz-res-bg: rgba(180, 57, 44, 0.09); --gz-res-line: rgba(180, 57, 44, 0.22); }
.gz-res-row.me.is-down { --gz-res-bg: rgba(29, 27, 24, 0.06); --gz-res-line: rgba(29, 27, 24, 0.14); }
.gz-res-row.me.is-even { --gz-res-bg: rgba(201, 169, 110, 0.16); --gz-res-line: rgba(201, 169, 110, 0.4); }
.gz-res-caps { justify-content: flex-start; min-height: 0; }
.gz-res-caps:empty::before { content: '—'; color: var(--gz-off); }
.gz-res-n { text-align: right; white-space: nowrap; }
.gz-res-row .gz-res-n.gz-num { font-size: 18px; }
.gz-res-n.neg { color: var(--gz-seal); }
.gz-res-n.pos { color: var(--gz-good); }
/* 结算：这一行放不下的人，名字和分数一行、吃牌整行放到下面（红桃再放不下就挪第三行） */
.gz-res-row.is-stack .gz-res-caps { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 441px) {
  .gz-res-row.is-stack .gz-res-n { grid-row: 1; grid-column: 3; }
  .gz-res-row.is-stack .gz-res-tot { grid-column: 4; }
}
.gz-res-row.is-stack .gz-res-caps { --caps-rows: 2; }
.gz-res-caps .gz-caps-row.is-wrapped { justify-content: flex-start; }
.gz-res-caps .gz-caps-row.is-wrapped .gz-fan { justify-content: flex-start; }
@media (max-width: 440px) {
  .gz-res-row { grid-template-columns: minmax(0, 1fr) 52px 60px; }
  .gz-res-caps { grid-column: 1 / -1; grid-row: 2; --caps-rows: 2; }
  .gz-res-head span:nth-child(2) { display: none; }
}
.gz-pig-badge { display: inline-block; margin-left: 4px; font-size: 12px; padding: 0 6px; border-radius: 9px; background: var(--gz-seal); color: var(--gz-seal-ink); }
.gz-seg { display: flex; border: 1px solid var(--gz-ink); border-radius: 8px; overflow: hidden; margin: 6px 0 14px; }
.gz-seg button { flex: 1; border: 0; background: transparent; padding: 9px 4px; font: inherit; font-size: 14px; cursor: pointer; color: var(--gz-ink); }
.gz-seg button + button { border-left: 1px solid var(--gz-ink); }
.gz-seg button[aria-pressed="true"] { background: var(--gz-ink); color: var(--gz-paper); }
.gz-field-label { font-size: 13px; color: var(--gz-ink-mute); }
.gz-seg.is-4 { flex-wrap: wrap; }
.gz-seg.is-4 button { flex: 1 1 50%; }
.gz-seg.is-4 button:nth-child(3) { border-left: 0; }
.gz-seg.is-4 button:nth-child(n+3) { border-top: 1px solid var(--gz-ink); }
.gz-variants { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(29, 27, 24, 0.18); }
.gz-variants summary { cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 0 8px; }
.gz-note { color: var(--gz-ink-mute); font-size: 13px !important; }
.gz-rules dt { font-weight: 700; margin-top: 8px; font-size: 14px; }
.gz-rules dd { margin: 2px 0 0; font-size: 14px; line-height: 1.7; }

/* ───── 新手教程：讲解浮在牌桌中央（绝对定位，不占布局）。两种姿态：
 *   说（is-say）：一墩收完、桌面空了，居中大字，点任意处 / 空格继续；
 *   提示（is-hint）：轮到我出牌，落在我出牌的位置（slot-0 那块此时是空的），出了牌就收。 */
.gz-topleft { display: flex; align-items: center; gap: 6px; }
.gz-skip {
  visibility: hidden; border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 13px;
  color: var(--gz-ink-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.is-tutorial .gz-skip { visibility: visible; }
/* 不在教程里时「跳过教程」不占位，局数不折行 */
.gz-table:not(.is-tutorial) .gz-skip { display: none; }
.gz-round-no { white-space: nowrap; }
@media (max-width: 400px) {
  .gz-tools { gap: 6px; }
  .gz-tool { width: 36px; height: 36px; }
}
.gz-coach {
  position: absolute; left: 50%; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--gz-ink); opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease;
}
.gz-coach[hidden] { display: none; }
.gz-coach.on { opacity: 1; }
.gz-coach.is-say { top: 50%; width: min(560px, 94%); transform: translate(-50%, calc(-50% + 8px)); }
.gz-coach.is-say.on { transform: translate(-50%, -50%); }
.gz-coach.is-hint { bottom: max(2%, calc(50% - var(--th) * 1.9)); width: min(540px, 96%); transform: translate(-50%, 6px); }
.gz-coach.is-hint.on { transform: translate(-50%, 0); }
.gz-coach-seal {
  width: 26px; height: 26px; border-radius: 4px; background: var(--gz-seal); color: var(--gz-seal-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
  transform: rotate(-4deg); margin-bottom: 10px; box-shadow: 0 1px 0 rgba(20, 18, 15, 0.15);
}
.gz-coach.is-hint .gz-coach-seal { width: 20px; height: 20px; font-size: 12px; margin-bottom: 6px; }
.gz-coach-text {
  margin: 0; font-size: 21px; line-height: 1.75; letter-spacing: 0.02em; text-wrap: balance;
  text-shadow: 0 0 10px var(--gz-paper), 0 0 3px var(--gz-paper);
}
.gz-coach.is-hint .gz-coach-text { font-size: 16px; line-height: 1.6; }
/* 一笔淡金细线收尾，替代边框 */
.gz-coach.is-say .gz-coach-text::after {
  content: ''; display: block; width: 72px; height: 2px; margin: 12px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gz-gold), transparent);
}
.gz-coach-parts { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px; --m: 40px; --mh: 56px; }
.gz-coach-parts:not(:empty) { margin-top: 12px; }
.gz-part .gz-card.gz-handlike { --q: 42px; width: 42px; height: 60px; }
.gz-part { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 17px; }
.gz-part .neg, .gz-part-sum.neg { color: var(--gz-seal); }
.gz-part-sum { font-size: 26px; align-self: center; margin-left: 4px; }
.gz-coach-more { margin-top: 14px; font-size: 12px; letter-spacing: 0.2em; color: var(--gz-ink-mute); animation: gz-more 1.6s ease-in-out infinite alternate; }
.gz-coach.is-hint .gz-coach-more { display: none; }
@keyframes gz-more { from { opacity: 0.35; } to { opacity: 0.85; } }
.gz-coach.pulse .gz-coach-text { animation: gz-coach-pulse 0.45s ease-out; }
@keyframes gz-coach-pulse { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
/* 嵌在讲解文字里的真牌面：大小跟着字号走 */
/* 尺寸用 px：牌面内部按 --q 换算，若用 em 会被各元素自己的字号放大，大花色跑出牌面 */
.gz-coach-text .gz-card.gz-inline {
  --q: 32px; width: 32px; height: 46px; display: inline-block; vertical-align: middle; position: relative; top: -2px;
  margin: 0 3px; text-shadow: none; line-height: 1; border-radius: 4px;
}
.gz-coach.is-hint .gz-coach-text .gz-card.gz-inline { --q: 26px; width: 26px; height: 37px; }
/* 牌的大小：四排真牌，整张等比例缩小、不叠放 */
.gz-ranks { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gz-rank-row { display: flex; gap: 3px; }
.gz-rank-row .gz-card.gz-rank-card { --q: 30px; width: 30px; height: 43px; border-radius: 3px; }
.gz-rank-arrow { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--gz-ink-mute); }
.gz-rank-arrow svg { flex: 1; height: 16px; overflow: visible; }
/* 讲解里排出这一轮四家的牌 */
.gz-trickrow { display: flex; justify-content: center; gap: 18px; }
.gz-tr-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gz-tr-cell .gz-card.gz-tr-card { --q: 46px; width: 46px; height: 66px; border-radius: 4px; }
.gz-tr-cell.is-off .gz-tr-card { filter: grayscale(0.35) brightness(0.95); }
.gz-tr-cell.is-win .gz-tr-card { box-shadow: 0 0 0 2px var(--gz-gold), 0 0 12px 2px rgba(201, 169, 110, 0.5); }
.gz-tr-name { font-size: 14px; font-weight: 700; }
.gz-tr-tag { font-size: 12px; min-height: 1.2em; color: var(--gz-ink-mute); letter-spacing: 0.1em; }
.gz-tr-cell.is-win .gz-tr-tag { color: #a8843e; font-weight: 700; }
/* 讲解前：桌上这一轮的牌调暗，视线交给讲解里排出来的那一排 */
.gz-center.is-review .gz-slot .gz-card, .gz-center.is-review .gz-slot::after { opacity: 0.07; transition: opacity 0.25s; }
/* 红桃扣分一排：牌下写分 */
.gz-hc-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gz-hc-cell .gz-num { font-size: 15px; color: var(--gz-seal); }
.gz-hc-row { gap: 3px; }
/* 全红示例：13 张红桃 + 每张的负分；一道墨线从左划到右把负分全划掉，再浮出大号 +200 */
.gz-allhearts { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gz-allhearts .gz-rank-row { position: relative; padding: 6px; border-radius: 6px; box-shadow: 0 0 0 2px var(--gz-gold), 0 0 16px 2px rgba(201, 169, 110, 0.35); }
.gz-strike {
  position: absolute; left: 0; right: 0; bottom: 17px; height: 2.5px;
  /* 一道水平细墨线：中间实、两头渐淡，形状也两头收尖 */
  background: linear-gradient(90deg, transparent, var(--gz-ink) 14%, var(--gz-ink) 86%, transparent);
  clip-path: polygon(0 50%, 12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%);
  transform: scaleX(0); transform-origin: left center;
  animation: gz-strike 0.7s cubic-bezier(.6, 0, .3, 1) 0.6s forwards;
}
.gz-ah-total { font-size: 56px; line-height: 1; color: var(--gz-seal); opacity: 0;
  animation: gz-ah-total 0.55s cubic-bezier(.2, .8, .3, 1.3) 1.35s forwards; }
@keyframes gz-strike { to { transform: scaleX(1); } }
@keyframes gz-ah-total { from { opacity: 0; transform: translateY(10px) scale(0.6); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .gz-rank-row { gap: 2px; }
  .gz-rank-row .gz-card.gz-rank-card { --q: 23px; width: 23px; height: 33px; border-radius: 2px; }
}

/* ───── 竖屏 / 窄屏：左右两家移到上方一行 ───── */
@media (max-aspect-ratio: 1/1) {
  .gz-app { --tu: calc(var(--u) * 1.2); }
  .gz-table {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 48px auto minmax(calc(var(--th) * 2 + 40px), 1fr) auto auto;
    grid-template-areas:
      "bar  bar    bar"
      "left top    right"
      "center center center"
      "me   me     me"
      "hand hand   hand";
    padding: 6px 8px 8px;
  }
  .gz-coach-text { font-size: 18px; }
  .gz-coach.is-hint .gz-coach-text { font-size: 15px; }
  .gz-seat-left, .gz-seat-right, .gz-seat-top { justify-content: flex-start; }
  .gz-seat-left .gz-who, .gz-seat-right .gz-who { flex-direction: column; }
  .gz-seat-top .gz-who { flex-direction: column; gap: 3px; }
  .gz-seat-top .gz-name-line { align-items: center; }
  .gz-avatar { width: 34px; height: 34px; font-size: 15px; }
  /* 竖屏：按钮左边放不下吃牌区——头像留左半边，吃牌区挪到按钮右边 */
  .gz-seat-me { display: grid; grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr); padding: 4px 0; gap: 0; }
  .gz-seat-me .gz-who { grid-column: 1; }
  .gz-seat-me .gz-caps { grid-column: 3; padding-left: 4px; }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .gz-table { grid-template-rows: 44px auto minmax(calc(var(--th) * 2 + 8px), 1fr) auto auto; padding: 4px 8px 4px; }
  .gz-avatar { width: 32px; height: 32px; font-size: 14px; }
  .gz-seat-top .gz-who { flex-direction: row; }
  .gz-seat-top { flex-direction: row; gap: 10px; }
}
/* 放不下牌桌时的提示层 */
.gz-fit { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--gz-paper); padding: 24px; text-align: center; }
.gz-fit[hidden] { display: none; }
.gz-fit-icon { width: 64px; height: 64px; fill: none; stroke: var(--gz-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  animation: gz-fit-turn 2.4s ease-in-out infinite; }
.gz-fit-icon .arc { stroke: var(--gz-seal); }
.gz-fit.to-portrait .gz-fit-icon { animation-name: gz-fit-turn-back; }
.gz-fit-text { margin: 0; font-size: 16px; line-height: 1.7; max-width: 22em; }
@keyframes gz-fit-turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@keyframes gz-fit-turn-back { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .gz-slot .gz-card.in { animation: none; }
  .gz-hand .gz-card.nope, .gz-seat.is-turn.is-hurry .gz-avatar { animation: none; }
  .gz-slot.is-ace::after, .gz-hand .gz-card.is-suggest, .gz-btn.is-suggest { animation: none; }
}

/* ───── 联机 ───── */
/* 座位上的小签：房主 / 掉线 / 已离开 / 托管 */
.gz-tag {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 17px;
  border: 1px solid var(--gz-ink-mute); color: var(--gz-ink-mute); vertical-align: middle; white-space: nowrap;
}
.gz-tag[hidden] { display: none; }
.gz-tag.is-host { border-color: var(--gz-gold); color: #8a6d36; background: rgba(201, 169, 110, 0.14); }

/* 大厅：座位就是一张可点的名牌；空位虚线 */
.is-lobby .gz-band, .is-lobby .gz-hand { visibility: hidden; }
.gz-lobby-seat {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: none; padding: 6px 8px; font: inherit; color: inherit; cursor: pointer; border-radius: 12px;
}
.gz-seat-me .gz-lobby-seat { flex-direction: row; cursor: default; }
.gz-lobby-seat:disabled { cursor: default; }
.gz-lobby-seat:not(:disabled):hover { background: rgba(29, 27, 24, 0.05); }
.gz-lobby-seat .gz-avatar.is-bot { border-style: double; border-width: 3px; }
.gz-lobby-seat.is-empty .gz-avatar { border-style: dashed; color: var(--gz-ink-mute); font-size: 24px; }
.gz-lobby-name { font-size: 15px; font-weight: 600; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-lobby-seat.is-empty .gz-lobby-name { color: var(--gz-ink-mute); font-weight: 400; }
.gz-lobby-hint { font-size: 12px; color: var(--gz-seal); }

.gz-lobby {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: min(420px, 96%); max-height: 100%; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.gz-lobby[hidden] { display: none; }
.gz-lobby-code { display: flex; align-items: baseline; gap: 10px; }
.gz-lobby-code span { font-size: 13px; color: var(--gz-ink-mute); letter-spacing: 0.1em; }
.gz-lobby-code b { font-family: var(--gz-num-font, inherit); font-size: 40px; letter-spacing: 0.16em; line-height: 1; }
.gz-lobby-qr canvas { display: block; border: 1px solid rgba(29, 27, 24, 0.2); border-radius: 4px; }
.gz-lobby-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.gz-lobby-links .gz-btn[hidden] { display: none; }
/* 房间规则只读清单：一行一条；房主改过的那几行淡金底 + 小字写原来是什么 */
.gz-rulelist { margin: 4px 0 10px; border-top: 1px solid rgba(29, 27, 24, 0.12); }
.gz-rl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 8px; border-bottom: 1px solid rgba(29, 27, 24, 0.12); font-size: 14px; }
.gz-rl-k { color: var(--gz-ink-mute); flex: none; }
.gz-rl-v { text-align: right; font-weight: 600; }
.gz-rl-v small { display: block; font-weight: 400; font-size: 12px; color: var(--gz-ink-mute); }
.gz-rl-row.is-changed { background: rgba(197, 154, 64, 0.16); }
.gz-lobby-wait { margin: 0; font-size: 14px; }
@media (max-height: 520px) { .gz-lobby-qr { display: none; } .gz-lobby-code b { font-size: 30px; } }

/* 入口弹窗 */
.gz-input {
  width: 100%; box-sizing: border-box; margin: 6px 0 14px; padding: 9px 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--gz-ink); border-radius: 8px; background: #fffdf8; color: var(--gz-ink);
}
.gz-input:focus { outline: 2px solid var(--gz-seal); outline-offset: 1px; }
.gz-join-row { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
.gz-join-row .gz-input { margin: 0; flex: 1; letter-spacing: 0.2em; }
.gz-err { color: var(--gz-seal) !important; }
.gz-dialog .gz-actions-start { justify-content: flex-start; margin: 0 0 12px; }
.gz-wait { font-size: 14px; color: var(--gz-ink-mute); align-self: center; }

.gz-toast {
  position: fixed; left: 50%; bottom: 18%; z-index: calc(var(--z-dialog) + 1); transform: translate(-50%, 8px);
  background: var(--gz-ink); color: var(--gz-paper); padding: 8px 16px; border-radius: 18px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: 86vw; text-align: center;
}
.gz-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───── 吃牌区：窄座位留两排，红桃多了挪到第二排（见 fitFan） ───── */
.gz-seat-left .gz-caps, .gz-seat-right .gz-caps { --caps-rows: 2; height: calc(var(--mh) * 2 + 12px); align-items: flex-start; }
@media (max-aspect-ratio: 1/1) {
  .gz-seat-top .gz-caps { --caps-rows: 2; height: calc(var(--mh) * 2 + 12px); align-items: flex-start; }
}
.gz-caps-row.is-wrapped { flex-wrap: wrap; row-gap: 3px; justify-content: center; }   /* 断行元素自成一行：两道 3px 间隔 = 原来一道 6px */
/* 换行：用一个占满整行的空元素断行，红桃扇（和挪下来的本局分）在第二行居中 */
.gz-caps-row.is-wrapped::after { content: ''; order: 1; flex: 0 0 100%; height: 0; }
.gz-caps-row.is-wrapped .gz-fan { order: 2; }
.gz-caps-row.is-wrapped.score-down .gz-cap-score { order: 3; font-size: 13px; margin-left: 0; }

/* 我自己那排挤了（见 fitFan）：横屏红桃扇 + 本局分挪到出牌键右边；竖屏整排吃牌区另起一行、占满整宽 */
.is-me-spill .gz-seat-me { padding-right: 0; }
@media (max-aspect-ratio: 1/1) {
  .is-me-spill .gz-seat-me { row-gap: 4px; }
  .is-me-spill .gz-seat-me .gz-caps { grid-column: 1 / -1; grid-row: 2; padding-left: 0; }
  .is-me-spill .gz-band { align-self: start; }
}

.gz-tool[hidden] { display: none; }

/* 牌桌始终是宣纸配色：手机开了深色模式时，全站样式会把标题等改成浅色字，在牌桌上就看不见了——这里一律钉回墨色 */
.gz-app { color-scheme: light; color: var(--gz-ink); }
.gz-app :is(h1, h2, h3, h4) { color: var(--gz-ink); }
/* 弹窗内容滚动时，iOS Safari 不算滚动容器的底部内边距：最后一排按钮会压到内框线上。补一个真实的垫块 */
.gz-dialog::after { content: ''; display: block; height: 10px; }
.gz-app { font-variant-emoji: text; }
.gz-spark .suit-svg { width: 1em; height: 1em; display: block; fill: currentColor; overflow: visible; }

/* ───── 特色牌面：猪 / 羊 / 变压器 ×2（大花色换成画，角标不变） ───── */
.gz-card.has-art .bigsuit { display: none; }
/* 画放在角标下面那块地方的正中，大小只跟牌宽 --q 走：桌上、手牌、吃牌区、规则里同一张牌比例一样 */
.gz-face { position: absolute; left: 10%; right: 10%; top: calc(var(--q) * 0.42); bottom: calc(var(--q) * 0.1); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gz-face svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* 吃牌区小牌：点数和花色并排在顶上一行，下面整块给画（不再给左下角圆点让位，画居中、放大），左右各留一点牌边 */
.gz-mini .gz-face { left: 7%; right: 7%; top: calc(var(--q) * 0.46); bottom: calc(var(--q) * 0.08); }
/* 羊本身重心偏下：所有地方都往上提一点 */
.gz-card[data-card="35"] .gz-face svg { translate: 0 -7%; }
.gz-dbl { color: #b8924a; }
[data-dbl="ash"] .gz-dbl { color: #7b756b; }
[data-dbl="navy"] .gz-dbl { color: #3d5878; }
/* 规则里点名的牌：和教程一样的小牌，跟着文字走 */
.gz-rules .gz-card.gz-inline {
  --q: 26px; width: 26px; height: 37px; display: inline-block; vertical-align: middle; position: relative; top: -2px;
  margin: 0 3px; line-height: 1; border-radius: 3px; box-shadow: 0 1px 2px rgba(20, 18, 15, 0.16);
}
.gz-rules dt .gz-card.gz-inline { --q: 24px; width: 24px; height: 34px; }

/* ───── 猪羊对撞 ───── */
.gz-fxitem.is-duel .gz-fxart svg { width: 150px; }
.gz-fxitem.is-duel .gz-fxscore { font-size: 40px; }
.gz-smoke {
  position: absolute; left: 50%; top: 50%; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 45% 40%, rgba(255, 252, 246, 0.98) 0%, rgba(226, 219, 207, 0.85) 42%, rgba(205, 197, 184, 0) 70%);
}
.gz-fxitem.is-duel .gz-fxcoin { width: 104px; height: 104px; }
.gz-fxitem.is-duel .gz-fxcoin span { font-size: 54px; }

/* 动画预览（?fxdemo=）：顶上一条切换栏 */
.gz-demo { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 6; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  background: rgba(243, 238, 227, 0.95); border: 1px solid var(--gz-ink); border-radius: 18px; padding: 5px 12px; font-size: 13px; max-width: 94%; }
.gz-demo b { font-weight: 700; margin-right: 2px; }
.gz-demo a { color: var(--gz-ink); text-decoration: none; padding: 2px 8px; border-radius: 10px; }
.gz-demo a[aria-current="true"] { background: var(--gz-ink); color: var(--gz-paper); }
/* 对撞中央的巨大花色（字号由 JS 给；矢量花色 1em 高） */
.gz-giant { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none; opacity: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 14px rgba(20, 18, 15, 0.22)); }
.gz-giant .suit-svg { width: 1em; height: 1em; display: block; fill: currentColor; overflow: visible; }
/* 特效在桌子中间放的时候，这一轮的四张牌先调暗（特效放完再一起收走） */
.gz-center .gz-slot { transition: opacity 0.2s ease; }
.gz-center.is-fxing .gz-slot { opacity: 0.28; }

/* 这一轮打什么花色：桌子正中一个淡淡的大花色，压在出的牌下面（见 showLead） */
.gz-lead {
  position: absolute; left: 50%; top: 50%; font-size: calc(var(--th) * 1.05); line-height: 0; color: var(--gz-ink);
  transform: translate(-50%, -50%) scale(0.7); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.2, .8, .3, 1.15);
}
.gz-lead.on { opacity: 0.11; transform: translate(-50%, -50%) scale(1); }
.gz-lead.red { color: var(--gz-red); }
.gz-lead.red.on { opacity: 0.13; }
.gz-lead:not(.on) { transition: opacity 0.25s ease; }
.gz-lead .suit-svg { display: block; width: 1em; height: 1em; fill: currentColor; overflow: visible; transform: translateY(var(--ldy, 0)) scale(var(--ls, 1)); }
.gz-center.is-fxing .gz-lead, .gz-center.is-review .gz-lead { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gz-lead { transition: opacity 0.2s; transform: translate(-50%, -50%); } }

/* 声音按钮 + 小面板（音效 / 背景音乐两个开关） */
.gz-sound .off { display: none; }
.gz-sound.is-off .on { display: none; }
.gz-sound.is-off .off { display: inline; }
.gz-sound-panel {
  position: fixed; z-index: calc(var(--z-dialog) + 1); width: 160px; box-sizing: border-box; padding: 8px 6px;
  background: var(--gz-paper); border: 1px solid var(--gz-ink); border-radius: 10px; box-shadow: 0 8px 20px rgba(20, 18, 15, 0.16);
  display: flex; flex-direction: column; gap: 2px;
}
.gz-sound-panel[hidden] { display: none; }
.gz-sound-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 15px; cursor: pointer; color: var(--gz-ink); }
.gz-sound-row:hover { background: var(--gz-wash); }
.gz-sound-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--gz-seal); }

/* ───── 明牌牌面：明出来的牌（以及明牌环节里点选、已点「明牌」还在等别家的牌）一眼认得出 ─────
 * 整张牌换底色（手牌叠着放只露左边一截，角标 / 章会被盖住，底色不会）：
 *   猪淡藏青底（用户挑「乙1」：原先的淡红底和明 ♥A 后的红桃太像）、羊淡金底；形象不变。
 *   变压器灰底、写 ×4；♥A 淡红底、换成写着 ×2 的大红心，明了它这一局所有红桃垫更淡的红底。 */
.gz-card.is-exposed[data-card="10"] { background: linear-gradient(160deg, #dfe7f3, #b5c5dd); border-color: rgba(61, 88, 120, 0.7); }
.gz-card.is-exposed[data-card="35"] { background: linear-gradient(160deg, #fbf1d2, #f0d99a); border-color: rgba(169, 130, 58, 0.75); }
/* 变压器：灰底（用户定）；♥A：淡红底（同猪，红桃翻倍是坏事），而且明了 ♥A 这一局所有红桃都垫一层更淡的红底（用户挑「乙」） */
.gz-card.is-exposed[data-card="47"] { background: linear-gradient(160deg, #f1efeb, #d9d5cd); border-color: rgba(110, 104, 95, 0.5); }
.gz-app.is-hx2 .gz-card.is-heart { background: linear-gradient(160deg, #fdf1ed, #f7ddd5); border-color: rgba(180, 57, 44, 0.32); }
.gz-card.is-exposed[data-card="25"], .gz-app.is-hx2 .gz-card.is-exposed[data-card="25"] { background: linear-gradient(160deg, #fbe4de, #f2c4b9); border-color: rgba(180, 57, 44, 0.5); }
.gz-dbl .x4 { display: none; }
.gz-card.is-exposed .gz-dbl .x2 { display: none; }
.gz-card.is-exposed .gz-dbl .x4 { display: inline; }

/* 右上角菜单：每条一行粗字 + 一行小字说明会怎样；最底下「返回百宝奇巧」 */
.gz-menu {
  position: fixed; z-index: calc(var(--z-dialog) + 1); width: 264px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 6px;
  background: var(--gz-paper); border: 1px solid var(--gz-ink); border-radius: 12px; box-shadow: 0 10px 26px rgba(20, 18, 15, 0.18);
  display: flex; flex-direction: column; max-height: calc(100vh - 80px); overflow-y: auto;
}
.gz-menu[hidden] { display: none; }
.gz-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: inherit; color: var(--gz-ink); cursor: pointer;
}
.gz-menu button:hover, .gz-menu button:focus-visible { background: var(--gz-wash); outline: none; }
.gz-menu b { font-size: 15px; font-weight: 700; }
.gz-menu small { font-size: 12px; color: var(--gz-ink-mute); }
.gz-menu hr { border: 0; border-top: 1px solid rgba(29, 27, 24, 0.14); margin: 4px 8px; }
.gz-menu-head { font-size: 12px; color: var(--gz-ink-mute); padding: 6px 10px 2px; letter-spacing: 0.06em; }
.gz-menu .is-exit b::before { content: '‹ '; }

.gz-face-ha { display: none; }
.gz-card.is-exposed .gz-face-ha { display: flex; }
.gz-card.is-exposed.has-ha .bigsuit { display: none; }

/* 红桃拆成上下两行（窄座位、红桃多、第二行还挤时）：吃牌区临时长高一行 */
.gz-seat .gz-caps.is-tall { height: calc(var(--mh) * 3 + 16px); }
.gz-fan.is-split { flex-wrap: wrap; row-gap: 2px; }
.gz-fan-br { flex: 0 0 100%; height: 0; }


/* 头像：内层 .gz-av-face 撑满圆框，联机时放矢量头像（gongzhu-avatars.js），单机放一个字；裁圆在内层做，外层的托管机器人小章、倒计时环不被裁 */
.gz-av-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gz-av-face svg { width: 100%; height: 100%; display: block; }
/* 机器人的档位小签：比「房主」「掉线」淡一点 */
.gz-tag.is-level { border-color: rgba(61, 88, 120, 0.4); color: #3d5878; background: rgba(61, 88, 120, 0.07); }