/* 牌桌布局 —— 棋牌室拟物风 */

.app {
  --topbar-h: 52px;
  display: flex;
  flex-direction: column;
  /* 按浏览器实际看得见的高度排布，避免 iPad 工具栏把底部手牌和按钮裁掉 */
  height: 100vh;
  height: 100svh;
  height: var(--app-h, 100svh);
  max-height: var(--app-h, 100svh);
  overflow: hidden;
  background: #050d0a;
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: linear-gradient(180deg, #1d3b2c 0%, #12271d 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.brand-logo {
  font-size: 21px;
  color: #ffd970;
  text-shadow: 0 0 10px rgba(255, 217, 112, 0.5);
}

.brand-name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.12em;
}

.brand-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 246, 242, 0.42);
}

.topbar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-stats .stat { white-space: nowrap; }

.stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.stat-label {
  font-size: 11px;
  color: rgba(243, 246, 242, 0.5);
}

.stat-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffd970;
}

.stat-value.flash,
.seat-total.flash { animation: pop 0.45s ease; }

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.tool-btn {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(243, 246, 242, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background 0.15s, transform 0.1s, color 0.15s;
}

.tool-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.tool-btn:active { transform: translateY(1px); }
.tool-btn.on { color: #ffd970; border-color: rgba(255, 217, 112, 0.45); }

.stat-btn { cursor: pointer; }
.stat-btn:hover { border-color: rgba(255, 217, 112, 0.35); }
.stat-btn.on { border-color: rgba(255, 217, 112, 0.55); }

/* 折叠菜单：窄屏下把工具栏收进抽屉 */
.menu-toggle { display: none; font-size: 15px; line-height: 1; }

.tool-menu {
  position: absolute;
  right: 10px;
  top: calc(100% + 6px);
  min-width: 152px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  background: rgba(6, 20, 14, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  z-index: 60;
  animation: fade-in-up 0.18s ease;
}

.tool-menu-item {
  padding: 9px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 13px;
  color: rgba(243, 246, 242, 0.88);
}

.tool-menu-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ---------------- 牌桌 ---------------- */
.table-wrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 38%, #1f6144 0%, #14442f 42%, #0a261b 78%, #061710 100%);
}

.table-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.016) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 62%);
}

.table-felt {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
}

.table-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  height: 42%;
  border: 2px dashed rgba(255, 255, 255, 0.07);
  border-radius: 50% / 46%;
  transform: translateY(-42%);
  pointer-events: none;
}

/* ---------------- 座位 ---------------- */
.seat {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  z-index: 12;
}

.seat-left { left: 12px; top: 50%; transform: translateY(-58%); }
.seat-right { right: 12px; top: 50%; transform: translateY(-58%); flex-direction: row-reverse; }
.seat-self { left: 12px; bottom: 10px; align-items: center; }

.avatar {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(160deg, #2f5a46, #17392a);
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: box-shadow 0.25s, border-color 0.25s;
}

.avatar-face { font-size: 28px; line-height: 1; }

.avatar-ring {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.25s;
}

.avatar.active .avatar-ring {
  border-color: #ffd970;
  animation: ring-pulse 1.4s ease-in-out infinite;
}

.avatar.landlord {
  background: linear-gradient(160deg, #7a4a1c, #3d2109);
  border-color: rgba(255, 217, 112, 0.55);
}

.avatar.farmer { border-color: rgba(120, 220, 170, 0.4); }

.role-tag {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: #1c4a34;
  color: #a8f0c8;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.avatar.landlord .role-tag { background: #6b3d0f; color: #ffd970; }

.avatar-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.seat-total {
  margin-top: 12px;
  min-width: 32px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.seat-total.up { color: #ffd970; }
.seat-total.down { color: #ff8b6b; }

.seat-info { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.seat-right .seat-info { align-items: flex-end; }

.seat-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.seat-index {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
}

.seat-right .seat-index { margin-left: 0; margin-right: 6px; }

.seat-cards {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.seat-cards .card-count {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffd970;
}

.seat-cards.danger .card-count { color: #ff8b6b; }

.seat-bubble {
  min-height: 20px;
  font-size: 12px;
  color: #ffe9a8;
  white-space: nowrap;
}

/* 出牌轮次：箭头放在桌中间，指向当前该出牌的人 */

/* 小牌堆（对手剩余的牌背） */
.seat-back {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 32px;
  display: flex;
  align-items: center;
  z-index: 11;
}

.seat-back.left { left: 84px; transform: translateY(-50%); }
.seat-back.right { right: 84px; transform: translateY(-50%); flex-direction: row-reverse; }

.seat-back i {
  width: 16px;
  height: 26px;
  margin-left: -9px;
  border-radius: 3px;
  background: linear-gradient(140deg, #b8232f, #7d1420);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.seat-back i:first-child { margin-left: 0; }

/* ---------------- 底牌 ---------------- */
.bottom-cards {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 14;
}

.bottom-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.42);
}

.bottom-cards-row {
  display: flex;
  gap: 5px;
  perspective: 800px;
}

.bottom-cards-row .card-slot {
  width: 42px;
  height: 58px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.22);
}

/* ---------------- 出牌区 ---------------- */
.play-zone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

.play-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-slot .play-cards {
  display: flex;
  gap: 2px;
  min-height: 1px;
}

.play-left { left: 15%; top: 32%; transform: translateY(-50%); }
.play-right { right: 15%; top: 32%; transform: translateY(-50%); }
.play-self { left: 50%; bottom: 25%; transform: translateX(-50%); }

.play-cards.remain-cards {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  width: min(340px, 34vw);
}

.play-cards.remain-cards .card,
.play-cards.remain-cards .card.tiny {
  --cw: 36px;
  --ch: 50px;
  margin-left: var(--overlap, -22px);
  flex: 0 0 auto;
}

.play-cards.remain-cards .card:first-child { margin-left: 0; }

#play-right .play-cards.remain-cards { justify-content: flex-end; }

.play-badge {
  position: absolute;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.play-pass {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.52);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: fade-in-up 0.28s ease;
}

.play-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.table-next {
  pointer-events: auto;
  margin-top: 6px;
  min-width: 8em;
}

.center-msg {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s;
}

.center-msg.hide { opacity: 0; }

.turn-pointer {
  width: 96px;
  height: 50px;
  color: #ffd970;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.turn-pointer-spin {
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.turn-pointer svg { width: 100%; height: 100%; overflow: visible; display: block; }

.turn-pointer path {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.turn-pointer[data-dir="left"] .turn-pointer-spin {
  transform: rotate(180deg);
  animation: pointer-left 0.9s ease-in-out infinite;
}
.turn-pointer[data-dir="right"] .turn-pointer-spin {
  transform: none;
  animation: pointer-right 0.9s ease-in-out infinite;
}
.turn-pointer[data-dir="down"] .turn-pointer-spin {
  transform: rotate(90deg);
  animation: pointer-down 0.9s ease-in-out infinite;
}

.play-center .big-msg {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ffd970;
  text-shadow: 0 0 22px rgba(255, 217, 112, 0.45), 0 3px 0 rgba(0, 0, 0, 0.45);
  animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* ---------------- 手牌区 ---------------- */
.hand-area {
  --hand-pad-x: 14px;
  --hand-pad-left: 148px;
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
  padding: 6px var(--hand-pad-x) max(12px, env(safe-area-inset-bottom)) var(--hand-pad-left);
  background: linear-gradient(180deg, rgba(4, 16, 11, 0) 0%, rgba(4, 16, 11, 0.88) 26%, #030c08 100%);
}

.hand-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.hand-role {
  padding: 1px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  background: rgba(120, 220, 170, 0.16);
  color: #9fe9c3;
  border: 1px solid rgba(120, 220, 170, 0.3);
}

.hand-role.landlord {
  background: rgba(255, 217, 112, 0.16);
  color: #ffd970;
  border-color: rgba(255, 217, 112, 0.4);
}

.hand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 132px;
  padding-top: 22px;
  user-select: none;
  touch-action: pan-x;
}

.hand .card { --cw: 78px; --ch: 110px; }

.actions {
  position: static;
  display: flex;
  justify-content: center;
  gap: 36px;
  width: calc(100% + var(--hand-pad-left) + var(--hand-pad-x));
  margin: 2px calc(-1 * var(--hand-pad-x)) 4px calc(-1 * var(--hand-pad-left));
  z-index: 22;
}

.actions .btn {
  padding-inline: 25px;
  min-width: calc(5.8em * 1.2);
}

/* ---------------- 通用按钮 ---------------- */
.btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #eef3ef;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { filter: brightness(1.14); }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled {
  opacity: 0.38;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(180deg, #f4c452, #d1952a);
  color: #3b2405;
  border-color: rgba(255, 233, 168, 0.6);
}

.btn-warn {
  background: linear-gradient(180deg, #e8705a, #b8412f);
  color: #fff;
  border-color: rgba(255, 180, 160, 0.4);
}

.btn-ghost { background: rgba(255, 255, 255, 0.07); }

.btn-bid { min-width: 76px; }

/* ---------------- 提示条 ---------------- */
.toast {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -8px);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(8, 24, 17, 0.92);
  border: 1px solid rgba(255, 217, 112, 0.35);
  color: #ffe9a8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 60;
  white-space: nowrap;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 叫分面板 ---------------- */
.bid-panel {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(6, 20, 14, 0.92);
  border: 1px solid rgba(255, 217, 112, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  z-index: 50;
  animation: fade-in-up 0.28s ease;
}

.bid-title { font-size: 13px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.1em; }
.bid-buttons { display: flex; gap: 10px; }

/* ---------------- 记牌器 ---------------- */
.counter-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 90px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 6px 8px 6px 12px;
  border-radius: 14px;
  background: rgba(6, 20, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  z-index: 15;
}

.counter-panel .panel-head {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.counter-panel .panel-head span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter-panel .counter-grid {
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 4px;
}

.counter-panel .counter-cell {
  padding: 3px 0 2px;
}

.counter-panel .counter-cell .rank { font-size: 12px; }
.counter-panel .counter-cell .left { font-size: 10px; }

.counter-panel .panel-foot {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 38%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter-panel .panel-close { flex: 0 0 auto; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}

.panel-close { color: rgba(255, 255, 255, 0.5); font-size: 14px; }
.panel-close:hover { color: #fff; }

.counter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.counter-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.counter-cell .rank {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.counter-cell .left {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}

.counter-cell .left.zero { color: #6f8f80; }
.counter-cell .left.hot { color: #ff9d7a; font-weight: 700; }
.counter-cell.just-played {
  background: rgba(255, 217, 112, 0.22);
  border-color: rgba(255, 217, 112, 0.45);
}

.panel-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}

/* ---------------- 历史分数 ---------------- */
.history-panel {
  position: absolute;
  right: 12px;
  top: calc(var(--topbar-h) + 12px);
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  border-radius: 14px;
  background: rgba(6, 20, 14, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.62);
  z-index: 73;
  animation: fade-in-up 0.2s ease;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(52vh, 420px);
  overflow: auto;
}

.history-empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.history-row .when {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.history-row .meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.history-row .delta {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.history-row .delta.up { color: #7ee0a8; }
.history-row .delta.down { color: #ff8f7a; }

.history-foot { display: flex; justify-content: flex-end; }

/* ---------------- 设置面板 ---------------- */
.settings-panel {
  position: absolute;
  right: 12px;
  top: calc(var(--topbar-h) + 12px);
  width: 312px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(6, 20, 14, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.62);
  z-index: 72;
  animation: fade-in-up 0.2s ease;
}

.settings-group + .settings-group { margin-top: 14px; }

.settings-label {
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-row .settings-label { margin-bottom: 0; }

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.switch.on { background: linear-gradient(180deg, #f4c452, #d1952a); border-color: rgba(255, 233, 168, 0.6); }

.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.switch.on .switch-knob { transform: translateX(20px); }

.segmented {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 2px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(243, 246, 242, 0.72);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.seg-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.seg-btn.active {
  background: linear-gradient(180deg, #f4c452, #d1952a);
  color: #3b2405;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.settings-desc {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  min-height: 2.6em;
}

/* ---------------- 弹窗 ---------------- */
.dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px);
  z-index: 80;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 90;
  padding: 20px;
}

.modal-card {
  width: min(400px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #17392a, #0c2118);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  animation: pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.modal-card-wide { width: min(560px, 94vw); }

.modal-banner {
  padding: 18px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #ffe9a8;
  background: linear-gradient(180deg, rgba(255, 217, 112, 0.22), rgba(255, 217, 112, 0));
  text-shadow: 0 2px 10px rgba(255, 217, 112, 0.35);
}

.modal-banner.banner-plain { font-size: 17px; letter-spacing: 0.14em; color: #fff; }
.modal-banner.lose { color: #ffb0a0; text-shadow: none; background: linear-gradient(180deg, rgba(255, 120, 90, 0.18), transparent); }

.modal-body { padding: 4px 20px 18px; }
.modal-actions {
  display: flex;
  gap: 10px;
  padding: 0 20px 20px;
}

.modal-actions .btn { flex: 1 1 0; }

.result-role { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-bottom: 12px; }

.result-rows { display: flex; flex-direction: column; gap: 7px; }

.result-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
}

.result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-hand {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  min-height: 18px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 12px;
}

.result-hand .card,
.result-hand .card.tiny {
  --cw: 32px;
  --ch: 44px;
  margin-left: var(--overlap, -18px);
  flex: 0 0 auto;
}

.result-hand .card:first-child { margin-left: 0; }

.result-row.me { background: rgba(255, 217, 112, 0.13); border: 1px solid rgba(255, 217, 112, 0.28); }
.result-row .who { color: rgba(255, 255, 255, 0.85); }
.result-row .who small { color: rgba(255, 255, 255, 0.42); margin-left: 6px; }
.result-row .delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.result-row .delta.up { color: #7ee0a8; }
.result-row .delta.down { color: #ff8f7a; }

.help-body { max-height: 62vh; overflow-y: auto; font-size: 13px; line-height: 1.75; color: rgba(235, 243, 238, 0.82); }
.help-body h4 { margin-top: 12px; margin-bottom: 3px; font-size: 13px; color: #ffd970; letter-spacing: 0.06em; }
.help-body h4:first-child { margin-top: 0; }

/* ---------------- 动画 ---------------- */
@keyframes pop {
  0% { transform: scale(0.86); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 112, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(255, 217, 112, 0); }
}

@keyframes pointer-left {
  0%, 100% { transform: rotate(180deg) translateX(0); }
  50% { transform: rotate(180deg) translateX(8px); }
}

@keyframes pointer-right {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(0deg) translateX(8px); }
}

@keyframes pointer-down {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(8px); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(-26px) scale(0.9) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1120px) {
  .topbar-stats .stat-label { display: none; }
  .stat { padding: 3px 9px; }
}

@media (max-width: 1000px) {
  .hand-area { --hand-pad-left: 8px; }
  .seat-self { bottom: 6px; }
  /* 手牌区不再为头像留出横向空间，头像浮在手牌上方 */
  .hand { padding-top: 30px; }
  .play-left { left: 8%; }
  .play-right { right: 8%; }
}

@media (max-width: 900px) {
  .brand-sub { display: none; }
  .seat-left { left: 6px; }
  .seat-right { right: 6px; }
  .seat-back.left { left: 70px; }
  .seat-back.right { right: 70px; }
}

@media (max-width: 720px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .brand { gap: 4px; }
  .brand-logo { font-size: 17px; }
  .brand-name { font-size: 14px; letter-spacing: 0.04em; }
  .topbar-stats { gap: 4px; }
  .stat { padding: 2px 7px; gap: 3px; }
  .stat-label { display: none; }
  .stat-value { font-size: 12px; }
  .topbar-tools { gap: 4px; }
  .tool-btn { padding: 5px 8px; font-size: 12px; }

  .avatar { width: 48px; height: 48px; }
  .avatar-face { font-size: 22px; }
  .seat-total { margin-top: 10px; font-size: 11px; min-width: 28px; padding: 0 6px; }
  .seat-name { font-size: 12px; white-space: nowrap; }
  .seat-index { display: none; }
  .seat-bubble { font-size: 11px; white-space: nowrap; }

  .hand { height: 98px; padding-top: 26px; }
  .hand .card { --cw: 52px; --ch: 74px; }
  .hand .card .corner .rank { font-size: 16px; }
  .hand .card .pip { font-size: 22px; }
  .hand .card.selected { transform: translateY(-16px); }

  .actions { gap: 12px; }
  .actions .btn { padding: 7px 17px; min-width: calc(5.2em * 1.2); font-size: 13px; border-radius: 9px; }

  .play-left { left: 4%; top: 38%; }
  .play-right { right: 4%; top: 38%; }
  #play-left:has(.remain-cards) { left: 8px; top: 22%; }
  #play-right:has(.remain-cards) { right: 8px; top: 22%; }
  .play-self { bottom: 30%; }
  .play-cards .card { --cw: 40px; --ch: 56px; margin-left: -16px; }
  .play-cards .card.small, .play-cards .card.tiny { --cw: 38px; --ch: 54px; }
  .play-cards.remain-cards { width: calc(50vw - 20px); }
  .play-cards.remain-cards .card,
  .play-cards.remain-cards .card.tiny { --cw: 30px; --ch: 42px; }
  .play-cards .card .corner .rank { font-size: 13px; }
  .play-cards .card .pip { font-size: 17px; }

  .bid-panel { bottom: 30%; padding: 12px 14px; }
  .btn-bid { min-width: 62px; padding: 8px 12px; }
  .settings-panel,
  .history-panel { right: 6px; }

  .counter-panel {
    left: auto;
    right: 6px;
    top: 8px;
    flex-direction: column;
    align-items: stretch;
    width: min(268px, calc(100% - 12px));
    padding: 10px;
    gap: 0;
  }
  .counter-panel .panel-head { margin-bottom: 8px; }
  .counter-panel .counter-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .counter-panel .panel-foot {
    max-width: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    white-space: normal;
  }

  .modal-actions { padding: 0 14px 16px; }
  .modal-body { padding: 4px 14px 14px; }
  .help-body { max-height: 56vh; }
}

/* 电脑和 iPad：记牌器两行贴在右上角，下沿停在小刚头顶之上 */
@media (min-width: 721px) {
  .counter-panel {
    left: max(calc(50% + 76px), calc(100% - 372px));
    right: 10px;
    top: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    width: auto;
    max-height: calc(50% - 72px);
    overflow: hidden;
    padding: 6px 8px 6px 10px;
  }

  .counter-panel .panel-head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.2;
  }

  .counter-panel .panel-close {
    grid-column: 2;
    grid-row: 1;
    line-height: 1;
  }

  .counter-panel .counter-grid {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }

  .counter-panel .counter-cell {
    padding: 2px 0 1px;
    line-height: 1.05;
  }
  .counter-panel .counter-cell .rank { font-size: 12px; }
  .counter-panel .counter-cell .left { font-size: 10px; }

  .counter-panel .panel-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    margin-top: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 720px) {
  .menu-toggle { display: block; }
  .topbar-tools > .tool-btn:not(.menu-toggle) { display: none; }
  .stat { padding: 2px 7px; }
  .stat-value { font-size: 12px; }
}

@media (max-width: 540px) {
  .topbar { gap: 5px; }
  .brand-name { font-size: 14px; letter-spacing: 0.02em; }
  .stat { padding: 2px 6px; }
  .stat-value { font-size: 11.5px; }
  .seat-name { font-size: 11.5px; }
  .seat-info { gap: 1px; }
}

/* 矮屏（横屏手机）时压缩纵向空间 */
@media (max-height: 520px) {
  .hand { height: 82px; padding-top: 18px; }
  .hand .card { --cw: 44px; --ch: 62px; }
  .play-self { bottom: 34%; }
  .bottom-cards { top: 2px; }
  .play-left, .play-right { top: 30%; }
}