/* ==========================================================================
   杭州麻将 H5 —— 全局样式（纯手写；仅牌面使用一张本地精灵图）
   ========================================================================== */

:root {
  --felt-1: #1c7a52;
  --felt-2: #0b3a28;
  --felt-3: #06231a;
  --gold: #e8c66a;
  --gold-2: #b8933d;
  --ink: #1d2430;
  --paper: #fdfaf1;
  --red: #b32222;
  --green: #0f7a3d;
  --blue: #1b4f9c;
  --panel: rgba(5, 30, 21, 0.72);
  --panel-2: rgba(5, 30, 21, 0.5);
  --line: rgba(232, 198, 106, 0.28);
  --txt: #f2f6f3;
  --muted: #9fb8ac;
  --ok: #3ddc84;
  --err: #ff6b6b;
  --radius: 12px;
  --tap: 44px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  color: var(--txt);
  background: radial-gradient(circle at 50% 0%, #14603f 0%, #0a3423 45%, #04190f 100%) fixed;
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

input {
  -webkit-appearance: none;
  appearance: none;
}

/* 复选框/单选框保留原生外观：上面的 appearance:none 会连勾选框一起抹掉，
   导致「记住账号/记住密码」「音效」等只剩文字、看不到方框 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.hidden {
  display: none !important;
}

.dim {
  color: var(--muted);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   通用控件
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--txt);
  transition: transform 0.08s ease, filter 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
}

.btn-primary {
  background: linear-gradient(180deg, #e8c66a, #c19f42);
  color: #3a2a05;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 198, 106, 0.45);
}

.btn-block {
  width: 100%;
}

.btn-mini {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--txt);
}

.btn-mini.primary {
  background: linear-gradient(180deg, #e8c66a, #c19f42);
  color: #3a2a05;
}

.btn-mini.ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--muted);
}

.btn-mini:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}

.field input {
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--txt);
  font-size: 16px;
}

.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 198, 106, 0.2);
}

.field input[type="date"] {
  color-scheme: dark;
}

/* 下拉选择框（注册表单的性别）：与 .field input 同款外观，右侧自带箭头 */
.field select {
  min-height: var(--tap);
  padding: 0 40px 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(0, 0, 0, 0.28);
  background-image:
    linear-gradient(45deg, transparent 50%, #cfe3d8 50%),
    linear-gradient(135deg, #cfe3d8 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--txt);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 198, 106, 0.2);
}

/* 下拉展开后的选项列表（移动端由系统渲染，这里主要照顾桌面浏览器） */
.field select option {
  background: #0a3423;
  color: var(--txt);
}

.field-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

/* 性别选择：注册表单与个人信息页共用（决定头像图片与牌桌语音音色） */
.gender-pick {
  display: flex;
  gap: 8px;
}

.gp {
  flex: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #eaf2ee;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gp input {
  accent-color: var(--gold);
}

.gp.on,
.gp:has(input:checked) {
  border-color: var(--gold);
  background: rgba(232, 198, 106, 0.16);
  color: #ffe9a8;
}

/* 密码强度条 */
.pwd-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 2px;
}

.pm-bars {
  display: flex;
  gap: 4px;
  flex: 1;
}

.pm-bar {
  height: 5px;
  flex: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.pm-text {
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
  width: 24px;
  text-align: right;
}

.pwd-meter.lv-1 .pm-bar:nth-child(1) { background: #e56b6b; }
.pwd-meter.lv-1 .pm-text { color: #ff9b9b; }
.pwd-meter.lv-2 .pm-bar:nth-child(-n + 2) { background: #e8c66a; }
.pwd-meter.lv-2 .pm-text { color: var(--gold); }
.pwd-meter.lv-3 .pm-bar { background: #58c98a; }
.pwd-meter.lv-3 .pm-text { color: #7ce3a8; }

/* 登录：记住账号 / 记住密码 */
.auth-options {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: -2px 0 2px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

/* 图形验证码 */
.captcha-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.captcha-row input {
  flex: 1;
  min-width: 0;
}

.captcha-img {
  flex: 0 0 auto;
  width: 116px;
  height: var(--tap);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  overflow: hidden;
  background: #eef2ea;
  cursor: pointer;
}

.captcha-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: 14px;
  color: var(--txt);
}

.switch input {
  width: 22px;
  height: 22px;
  accent-color: #e8c66a;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  color: var(--txt);
}

.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--txt);
  white-space: nowrap;
}

.tag-ai {
  background: rgba(96, 165, 250, 0.28);
  color: #cfe6ff;
}

.tag-dealer {
  background: rgba(232, 198, 106, 0.9);
  color: #3a2a05;
}

.tag-off {
  background: rgba(255, 107, 107, 0.25);
  color: #ffd0d0;
}

.tag-ready {
  background: rgba(61, 220, 132, 0.22);
  color: #bff5d8;
}

.tag-auto {
  background: rgba(255, 196, 87, 0.28);
  color: #ffe6b8;
}

/* 飘财神（爆头听牌时打出财神，胡牌按财飘翻倍） */
.tag-piao {
  background: rgba(232, 121, 249, 0.3);
  color: #f6d8ff;
}

.wind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  color: var(--gold);
  flex: 0 0 auto;
}

.score.up,
.up {
  color: var(--ok);
}

.score.down,
.down {
  color: var(--err);
}

.flat {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   吐司提示
   -------------------------------------------------------------------------- */
/* 提示条：由 JS 锚定到中央计时环正上方（room.js syncToastAnchor）；
   top 仅为无计时环（大厅/等待）时的兜底位置 */
.toast-wrap {
  position: absolute;
  left: 50%;
  top: 12%;
  bottom: auto;
  transform: translateX(-50%);
  width: min(90vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 500;
  pointer-events: none;
}

.toast {
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: #eaf6ee;
  background: rgba(10, 32, 23, 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  word-break: break-word;
  animation: toastIn 0.16s ease-out;
}

.toast.err {
  border-color: rgba(255, 107, 107, 0.75);
  color: #ffdcdc;
}

.toast.ok {
  border-color: rgba(61, 220, 132, 0.7);
  color: #d4ffe8;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   弹层 / 面板
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.62);
}

.sheet {
  width: min(94vw, 540px);
  /* 横屏兜底：竖屏旋转显示时 100vh 是「长边」，只按它算高度会让弹层上下被裁掉，
     所以再与 --shell-h（= 视口短边，即旋转后的可视高度）取小值 */
  max-height: min(88vh, calc(var(--shell-h, 100vh) - 28px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: linear-gradient(180deg, #10402c, #092618);
  border: 1px solid var(--line);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6);
}

.sheet-body {
  padding: 16px;
}

.sheet-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--gold);
}

.copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--line);
}

.copy-box .cb-label {
  font-size: 12px;
  color: var(--muted);
}

.copy-box .cb-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold);
  word-break: break-all;
  user-select: all;
}

.copy-box .cb-value.small {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--txt);
}

/* ==========================================================================
   登录 / 大厅（index.html）
   ========================================================================== */
/* 未登录：登录卡在竖屏下居中显示（登录后才进入横屏大厅） */
/* 登录/注册页背景：深绿渐变 + 顶部微光 + 底部压暗（按设计稿） */
body.page-index:not(.logged-in) {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 2px, rgba(255, 255, 255, 0) 2px 7px),
    radial-gradient(130% 58% at 50% 20%, rgba(40, 128, 86, 0.6) 0%, rgba(40, 128, 86, 0) 62%),
    radial-gradient(100% 46% at 50% 112%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, #0e4029 0%, #0a3220 52%, #041a0f 100%);
  background-attachment: fixed;
}

.auth-wrap {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(22px, 7vh, 66px) clamp(16px, 5vw, 28px)
    calc(40px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* 底部四角麻将牌装饰：纯 CSS 画牌（半露、倾斜、半透明），与设计稿一致 */
.auth-deco {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.dt {
  position: absolute;
  width: 74px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(158deg, #fffdf6 0%, #f6efdf 58%, #e2d6ba 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -4px 7px rgba(0, 0, 0, 0.13);
  font-family: "KaiTi", "STKaiti", "Songti SC", serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: #c8322c;
  opacity: 0.72;
}

.dt-gray {
  background: linear-gradient(158deg, #f0f0ea 0%, #dcdcd4 60%, #c3c3ba 100%);
  color: #7d7d76;
  opacity: 0.55;
}

.dt-blank {
  color: transparent;
}

.dt-l1 {
  left: -18px;
  bottom: -34px;
  transform: rotate(-15deg);
}

.dt-l2 {
  left: 46px;
  bottom: -62px;
  transform: rotate(9deg);
  opacity: 0.58;
}

.dt-r1 {
  right: 92px;
  bottom: -50px;
  transform: rotate(-10deg);
}

.dt-r2 {
  right: 4px;
  bottom: -28px;
  width: 84px;
  height: 112px;
  transform: rotate(12deg);
  opacity: 0.8;
}

.dt-r3 {
  right: -26px;
  bottom: -66px;
  transform: rotate(-7deg);
}

/* 品牌块：金色渐变方牌 + 描金标题 */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}

.auth-mark {
  position: relative;
  z-index: 0;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-family: "KaiTi", "STKaiti", "Songti SC", serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #c8322c;
  background: linear-gradient(155deg, #fdf6d5 0%, #e6c163 40%, #c9a03e 74%, #a97f22 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 240, 190, 0.35);
}

/* 牌面：白色内嵌面（z-index:-1 落在金色底之上、文字之下） */
.auth-mark::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 13px;
  background: linear-gradient(160deg, #fffef8 0%, #f7f1e1 58%, #e8ddc4 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -4px 7px rgba(120, 95, 40, 0.18);
}

.auth-brand h1 {
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.15;
  background: linear-gradient(180deg, #fff8d8 0%, #f6dc90 38%, #e0af4b 72%, #bf8e2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
}

.auth-brand p {
  font-size: 13px;
  color: rgba(206, 228, 214, 0.78);
  margin-top: 3px;
  letter-spacing: 0.5px;
}

/* 表单直接浮在背景上（设计稿无卡片面板） */
.card.auth-card {
  padding: 0;
  margin-bottom: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.auth-card .form-grid {
  gap: 14px;
  margin-bottom: 22px;
}

.auth-card .field {
  gap: 7px;
  font-size: 14px;
  color: #cfe3d8;
}

.auth-card .field input,
.auth-card .field select {
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(2, 24, 15, 0.42);
  color: #f0f6f2;
}

.auth-card .field input::placeholder {
  color: rgba(188, 208, 195, 0.55);
}

.auth-card .field-hint {
  font-size: 12px;
  color: rgba(170, 196, 180, 0.85);
}

/* 登录：记住账号 / 记住密码 */
.auth-card .auth-options {
  gap: 26px;
  margin: 4px 0 6px;
}

.auth-card .check {
  font-size: 14px;
  color: #e3efe8;
  gap: 8px;
}

.auth-card .check input {
  width: 20px;
  height: 20px;
}

/* 注册：服务条款 / 隐私协议勾选行 */
.agree-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
  font-size: 13px;
  color: #e3efe8;
}

.agree-row .check {
  font-size: 13px;
  gap: 6px;
}

.agree-link {
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}

/* 条款 / 隐私协议弹层正文 */
.agree-body {
  max-height: 48vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  text-align: left;
}

.agree-body b {
  color: #e3efe8;
}

/* 主按钮：金色渐变胶囊 + 外发光 */
.auth-card .btn-primary {
  min-height: 52px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #8f2a12;
  border: 1px solid rgba(255, 240, 190, 0.7);
  background: linear-gradient(180deg, #fdeaae 0%, #efc96b 38%, #dcaa45 72%, #c1902f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(150, 105, 20, 0.3),
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(232, 198, 106, 0.32);
}

.auth-card .btn-primary:active {
  filter: brightness(0.95);
}

.card {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(2px);
}

.card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 12px;
}

.form-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

/* 分段切换：整行圆角描金，激活侧金色渐变 + 深红字（设计稿） */
.tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  border: 1.5px solid rgba(232, 198, 106, 0.5);
  background: rgba(3, 26, 17, 0.42);
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.tab {
  flex: 1;
  min-height: 50px;
  border-radius: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #cfe0d6;
}

.tab.active {
  background: linear-gradient(180deg, #fbe6a4 0%, #e7c163 46%, #cf9f3c 100%);
  color: #8a2118;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.invite-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(232, 198, 106, 0.18), rgba(232, 198, 106, 0.06));
  border: 1px solid rgba(232, 198, 106, 0.5);
}

.invite-banner .ib-icon {
  font-size: 20px;
  line-height: 1.2;
}

.invite-banner .ib-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
}

.invite-banner .ib-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ==========================================================================
   横屏大厅（登录后：平台大厅 / 游戏大厅）
   ========================================================================== */
/* 登录后横屏大厅固定一屏，内部区域自行滚动；未登录的登录页仍可纵向滚动 */
body.page-index.logged-in {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* 横屏大厅可视高度：真机横屏 = 视口高；竖屏旋转兜底时整块被旋转，
     此时容器「高度」= 视口宽，取两者较小值即可两种情形通吃 */
  --shell-h: min(100vw, 100vh);
}

/* 平台大厅背景：青绿山水图 + 上下压暗渐变（保证顶栏/卡片文字可读）。
   用 fixed 伪元素而不是 body 背景，两点适配手机横屏：
   1) iOS Safari 不支持 background-attachment: fixed，body 背景会随内容异常；
   2) 竖屏旋转兜底时内容被 .lobby-rotor 转了 90°，body 背景转不了导致图是侧的，
      伪元素可以跟着同参数旋转（见下方 is-rotated 规则）。
   游戏大厅（body.on-platform 移除后）回落到全局绿色渐变 */
body.page-index.logged-in.on-platform {
  /* 图未加载完成时的深绿兜底 */
  background: #0a2e1d;
}

body.page-index.logged-in.on-platform::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 18, 11, 0.46) 0%, rgba(3, 18, 11, 0.18) 38%, rgba(3, 18, 11, 0.58) 100%),
    url('/static/img/hall-bg.webp?v=20261011b') center / cover no-repeat;
}

/* 竖屏旋转兜底：背景与 .lobby-rotor 同参数旋转（宽=视口高、高=视口宽），
   保证山水方向与内容一致 */
body.is-rotated.page-index.logged-in.on-platform::before {
  width: 100vh;
  height: 100vw;
  transform: translate(100vw, 0) rotate(90deg);
  transform-origin: 0 0;
}

@supports (height: 100dvh) {
  body.is-rotated.page-index.logged-in.on-platform::before {
    width: 100dvh;
    height: 100dvw;
    transform: translate(100dvw, 0) rotate(90deg);
    transform-origin: 0 0;
  }
}

body.logged-in #main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lobby-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) 18px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}

/* 平台大厅顶栏右侧成组：灵石栏 + 全屏按钮 */
.lt-right {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 灵石栏：深色圆角胶囊（设计稿）+ 宝石图标 + 千分位数量，
   有签到「+」时它也在这个胶囊内部右端。
   尺寸随 --shell-h 缩放，与顶栏头像/全屏按钮同一档 */
.lt-lingshi {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, calc(var(--shell-h) * 0.014), 10px);
  height: clamp(30px, calc(var(--shell-h) * 0.098), 54px);
  padding: 0 clamp(4px, calc(var(--shell-h) * 0.013), 8px) 0 clamp(7px, calc(var(--shell-h) * 0.022), 13px);
  border-radius: clamp(9px, calc(var(--shell-h) * 0.03), 17px);
  background: linear-gradient(180deg, rgba(44, 50, 56, 0.94), rgba(20, 24, 28, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ls-ico {
  flex: 0 0 auto;
  display: block;
  width: clamp(20px, calc(var(--shell-h) * 0.066), 40px);
  height: clamp(20px, calc(var(--shell-h) * 0.066), 40px);
  /* 宝石本身自带高光与投影，这里只补一层同色系辉光 */
  filter: drop-shadow(0 0 6px rgba(96, 186, 255, 0.5));
}

.ls-num {
  font-size: clamp(13px, calc(var(--shell-h) * 0.042), 23px);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 灵石栏右端的「+」签到按钮（设计稿）：绿色高光球钮 + 白色圆头加号，
   外径约为胶囊高度的 3/4，四周留一点内边距 */
.ls-plus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(22px, calc(var(--shell-h) * 0.072), 40px);
  height: clamp(22px, calc(var(--shell-h) * 0.072), 40px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* 中心偏上提亮、边缘转深，做出球面感 */
  background: radial-gradient(circle at 50% 30%, #a6f68e 0%, #5fdb52 36%, #28ad2f 70%, #14751d 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}

.ls-plus:active {
  transform: translateY(1px);
}

.ls-plus-ico {
  display: block;
  width: 62%;
  height: 62%;
}

/* 签到弹层：顶部额度卡（图标 + 说明 + 当前余额） */
.ck-hero {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(var(--shell-h, 100vh) * 0.026), 16px);
  margin: clamp(4px, calc(var(--shell-h, 100vh) * 0.012), 10px) 0 clamp(12px, calc(var(--shell-h, 100vh) * 0.034), 22px);
  padding: clamp(10px, calc(var(--shell-h, 100vh) * 0.032), 20px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24, 44, 38, 0.9), rgba(8, 22, 18, 0.92));
  border: 1px solid rgba(140, 196, 240, 0.28);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ck-ico {
  flex: 0 0 auto;
  width: clamp(34px, calc(var(--shell-h, 100vh) * 0.11), 68px);
  height: clamp(34px, calc(var(--shell-h, 100vh) * 0.11), 68px);
  filter: drop-shadow(0 0 8px rgba(96, 186, 255, 0.5));
}

.ck-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ck-text b {
  font-size: clamp(15px, calc(var(--shell-h, 100vh) * 0.046), 26px);
  color: #ffffff;
}

.ck-text span {
  font-size: clamp(12px, calc(var(--shell-h, 100vh) * 0.034), 18px);
  color: rgba(255, 255, 255, 0.7);
}

.ck-balance {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ck-balance .dim {
  font-size: clamp(11px, calc(var(--shell-h, 100vh) * 0.03), 16px);
}

.ck-balance b {
  font-size: clamp(16px, calc(var(--shell-h, 100vh) * 0.05), 28px);
  font-weight: 800;
  color: #ffffff;
}

/* 创建房间弹层的灵石消耗提示；余额不足时标红 */
.cr-cost.is-lack {
  color: #ff9a8f;
}

/* 房间顶栏：房主可点的「第 x/y 局 ＋」追加局数入口 */
.tb-extend {
  color: #ffe1a3;
  font-weight: 700;
  text-decoration: underline dotted rgba(255, 225, 163, 0.75);
  cursor: pointer;
}
.tb-extend:active {
  opacity: 0.7;
}

/* 追加局数弹层：说明文字与消耗提示（复用创建弹层的 is-lack 标红） */
.extend-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt);
}
.extend-desc.dim {
  color: var(--muted);
}
.ex-cost.is-lack {
  color: #ff9a8f;
}

/* 问题反馈输入框：与设置弹层同宽，深色底、随屏幕档位缩放 */
.fb-text {
  display: block;
  width: 100%;
  min-height: clamp(96px, calc(var(--shell-h, 100vh) * 0.26), 190px);
  margin: clamp(6px, calc(var(--shell-h, 100vh) * 0.018), 12px) 0 clamp(10px, calc(var(--shell-h, 100vh) * 0.028), 18px);
  padding: clamp(8px, calc(var(--shell-h, 100vh) * 0.022), 14px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.32);
  color: inherit;
  font-family: inherit;
  /* 与设置弹层正文同一档字号 */
  font-size: clamp(13px, calc(var(--shell-h, 100vh) * 0.038), 20px);
  line-height: 1.5;
  resize: none;
}

.fb-text:focus {
  outline: none;
  border-color: rgba(232, 198, 106, 0.75);
  box-shadow: 0 0 0 3px rgba(232, 198, 106, 0.14);
}

.fb-text::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

/* 顶部条：左上头像（点击查看个人信息/退出），标题居中 */
.lobby-topbar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lobby-avatar {
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
}

.lv-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  color: #fff7e0;
  background: linear-gradient(150deg, #2f9a68, #14603f);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 150, 190, 0.45), 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* 默认头像图片（男女各一张）：正好盖住圆圈内圆，图片缺失时露出下面的首字 */
.av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.lv-md {
  width: clamp(32px, calc(var(--shell-h) * 0.1), 58px);
  height: clamp(32px, calc(var(--shell-h) * 0.1), 58px);
  font-size: clamp(15px, calc(var(--shell-h) * 0.048), 27px);
}

.lv-sm {
  width: 36px;
  height: 36px;
  font-size: 17px;
}

.lobby-avatar:active .lv-face {
  transform: scale(0.94);
}

.lt-user {
  min-width: 0;
}

/* 全屏按钮：平台大厅 / 游戏大厅 / 牌桌三处顶栏右上角共用（fullscreen.js 生成）。
   进/出全屏共用一个按钮，图标随 body.is-fullscreen 切换。
   自带底色描边、不挂 .icon-btn —— 免得再跟它的 min-width/min-height 打层叠官司 */
.fs-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9px;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.fs-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

/* 大厅顶栏（平台大厅 / 游戏大厅）：尺寸随 --shell-h 缩放，与顶栏头像同一档 */
.lobby-topbar .fs-btn {
  width: clamp(32px, calc(var(--shell-h) * 0.1), 58px);
  height: clamp(32px, calc(var(--shell-h) * 0.1), 58px);
}

/* 牌桌顶栏：做成与「战绩 / 分享」同高的小方块，紧凑档跟着压下来 */
.topbar .fs-btn {
  width: clamp(30px, calc(var(--shell-h, 100vh) * 0.11), 42px);
  height: clamp(30px, calc(var(--shell-h, 100vh) * 0.11), 42px);
}

body.compact-table .topbar .fs-btn {
  width: 26px;
  height: 26px;
}

.fs-ico {
  display: none;
  align-items: center;
}

body:not(.is-fullscreen) .fs-enter,
body.is-fullscreen .fs-exit {
  display: inline-flex;
}

.fs-ico-svg {
  display: block;
  width: clamp(16px, calc(var(--shell-h) * 0.055), 30px);
  height: clamp(16px, calc(var(--shell-h) * 0.055), 30px);
}

/* iPhone「添加到主屏幕」全屏指引弹层（fullscreen.js 注入 body，三页共用） */
.fs-guide-mask {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
}

.fs-guide {
  position: relative;
  width: min(92%, 420px);
  padding: 22px 20px 16px;
  border-radius: 14px;
  border: 1px solid rgba(230, 190, 100, 0.35);
  background: linear-gradient(180deg, #0e4630, #0a3423);
  color: #e9e2cf;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.fs-guide h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: #f4cf7d;
  text-align: center;
}

.fs-guide p,
.fs-guide li {
  font-size: 13px;
  line-height: 1.7;
}

.fs-guide p {
  margin: 0 0 8px;
}

.fs-guide ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.fs-guide li {
  margin-bottom: 4px;
}

.fs-guide b {
  color: #f4cf7d;
}

.fs-guide .fs-guide-tip {
  margin: 0;
  font-size: 12px;
  color: rgba(233, 226, 207, 0.6);
}

.fs-guide-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e9e2cf;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
}

.lt-name {
  font-size: clamp(14px, calc(var(--shell-h) * 0.05), 24px);
  font-weight: 800;
  line-height: 1.2;
}

.lt-sub {
  font-size: clamp(10px, calc(var(--shell-h) * 0.033), 15px);
  color: #d8c78d;
  margin-top: 2px;
}

.lt-sub b {
  color: var(--gold);
}

/* 积分左侧的金币小图标 */
.lt-coin {
  width: 1em;
  height: 1em;
  margin-right: 3px;
  vertical-align: -0.16em;
}

/* 返回：绿色渐变胶囊 + 浅绿箭头（设计稿） */
.icon-btn.lt-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: clamp(28px, calc(var(--shell-h) * 0.072), 42px);
  padding: 0 clamp(12px, calc(var(--shell-h) * 0.032), 20px);
  font-size: clamp(12px, calc(var(--shell-h) * 0.034), 18px);
  font-weight: 800;
  color: #ffffff;
  border: 1px solid rgba(214, 255, 190, 0.5);
  border-radius: 10px;
  background: linear-gradient(180deg, #7ecf4f 0%, #4fa52f 55%, #3b8a24 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35);
}

.icon-btn.lt-back::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2.5px solid #e8ffdc;
  border-bottom: 2.5px solid #e8ffdc;
  transform: rotate(45deg);
}

/* 游戏名：绝对居中（设计稿里标题压在顶栏正中，与左右两侧互不挤压） */
.lt-game {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.lt-game b {
  font-size: clamp(15px, calc(var(--shell-h) * 0.05), 26px);
  line-height: 1.2;
}

.lt-game .dim {
  margin-top: 2px;
  font-size: clamp(10px, calc(var(--shell-h) * 0.028), 15px);
}

/* 游戏大厅顶栏右侧：头像 + 昵称 / 本游戏积分（点击看个人信息） */
.lt-me {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(5px, calc(var(--shell-h) * 0.016), 10px);
  padding: 0;
  background: none;
  text-align: left;
}

.lt-me-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lt-me .lt-name {
  font-size: clamp(13px, calc(var(--shell-h) * 0.042), 23px);
  font-weight: 800;
  color: #f2f7f4;
  white-space: nowrap;
}

.lt-me .lt-sub {
  font-size: clamp(10px, calc(var(--shell-h) * 0.03), 15px);
  color: #cfe3d8;
  margin-top: 2px;
  white-space: nowrap;
}

.lt-me .lt-sub b {
  color: var(--gold);
}

.lt-me:active .lv-face {
  transform: scale(0.94);
}

/* 中央游戏区：三张竖版游戏卡片并排居中 */
.lobby-games {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(var(--shell-h) * 0.028), 24px);
  max-width: 100%;
}

/* 后台把所有玩法都关掉时的兜底占位 */
.lobby-games-empty {
  padding: 0 18px;
  font-size: clamp(13px, calc(var(--shell-h) * 0.036), 19px);
  color: var(--muted);
}

.game-card {
  position: relative;
  --gcw: clamp(132px, calc(var(--shell-h) * 0.46), 236px);
  flex: 0 0 auto;
  width: var(--gcw);
  height: calc(var(--gcw) * 1.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--gcw) * 0.1) calc(var(--gcw) * 0.075) calc(var(--gcw) * 0.11);
  border-radius: calc(var(--gcw) * 0.075);
  color: var(--txt);
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(74, 178, 128, 0.42), rgba(6, 40, 28, 0) 64%),
    linear-gradient(168deg, rgba(38, 124, 88, 0.92), rgba(6, 40, 28, 0.96));
  border: 1px solid rgba(232, 198, 106, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.1s ease;
}

.game-card:active {
  transform: scale(0.96);
}

/* 金质麻将牌面：大号金色方块 + 牌面字 */
.gc-mark {
  width: calc(var(--gcw) * 0.38);
  height: calc(var(--gcw) * 0.38);
  margin-top: calc(var(--gcw) * 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--gcw) * 0.075);
  font-size: calc(var(--gcw) * 0.2);
  font-weight: 900;
  color: #fff8e3;
  background: linear-gradient(158deg, #ffeeb4 0%, #f3ca66 30%, #d5a333 64%, #a97c1d 100%);
  border: 2px solid rgba(255, 240, 190, 0.8);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.42), inset 0 -4px 8px rgba(122, 80, 10, 0.32),
    inset 0 4px 8px rgba(255, 255, 255, 0.55);
  text-shadow: 0 2px 4px rgba(122, 80, 10, 0.6);
}

/* 整图主视觉玩法（文成麻将）：玉牌玉佩图代替「文字图 + 文字名」，desc 顶到卡底 */
.gc-icon {
  width: calc(var(--gcw) * 0.68);
  height: calc(var(--gcw) * 0.68);
  margin-top: calc(var(--gcw) * 0.03);
  border-radius: 16%;
  object-fit: cover;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.42);
}

.game-card-icon .gc-desc {
  margin-top: auto;
}

.gc-name {
  margin-top: auto;
  font-size: calc(var(--gcw) * 0.115);
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.gc-desc {
  margin-top: calc(var(--gcw) * 0.035);
  font-size: calc(var(--gcw) * 0.055);
  color: #b7cec1;
  text-align: center;
  white-space: nowrap;
}

.gc-tags {
  margin-top: calc(var(--gcw) * 0.055);
  display: flex;
  gap: calc(var(--gcw) * 0.03);
}

.gc-tags i {
  font-style: normal;
  font-size: calc(var(--gcw) * 0.06);
  padding: calc(var(--gcw) * 0.008) calc(var(--gcw) * 0.045);
  border-radius: 999px;
  background: rgba(4, 34, 24, 0.78);
  border: 1px solid rgba(126, 196, 160, 0.35);
  color: #cfe6da;
}

/* 状态角标：骑在卡片上边框左端 */
.gc-tag {
  position: absolute;
  top: 0;
  left: 8%;
  transform: translateY(-50%);
  font-size: calc(var(--gcw) * 0.062);
  font-weight: 700;
  padding: calc(var(--gcw) * 0.014) calc(var(--gcw) * 0.06);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(160deg, #66da8c, #2e9a4d);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.gc-tag-on {
  background: linear-gradient(160deg, #f4d67f, #c39b32);
  color: #3a2a05;
}

.gc-tag-soon {
  background: linear-gradient(160deg, #a3b0a9, #6d7b74);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 底部功能模块栏：图标 + 金色文字 */
.lobby-dock {
  flex: 0 0 auto;
  display: grid;
  /* auto-fit：入口减少（隐藏背包/规则后只剩 2 个）时自动均分整行，不偏左 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: clamp(8px, calc(var(--shell-h) * 0.03), 26px);
  max-width: min(100%, clamp(360px, calc(var(--shell-h) * 1.5), 1000px));
  width: 100%;
  margin: 0 auto;
}

.dock-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(var(--shell-h) * 0.014), 11px);
  min-height: clamp(38px, calc(var(--shell-h) * 0.132), 62px);
  border-radius: clamp(9px, calc(var(--shell-h) * 0.028), 16px);
  font-size: clamp(13px, calc(var(--shell-h) * 0.046), 22px);
  font-weight: 800;
  letter-spacing: 1px;
  color: #f4d883;
  background: linear-gradient(170deg, rgba(38, 124, 88, 0.72), rgba(6, 40, 28, 0.88));
  border: 1px solid rgba(126, 196, 160, 0.4);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.1s ease;
}

.dock-item:active {
  transform: scale(0.96);
}

.dk-ico {
  width: clamp(18px, calc(var(--shell-h) * 0.058), 30px);
  height: clamp(18px, calc(var(--shell-h) * 0.058), 30px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dk-ico svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  color: #f0c552;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* 游戏大厅：顶栏（返回 / 居中标题 / 头像+积分）→ 页签行 → 房间列表 + 右侧开局栏 */
.game-lobby .lobby-topbar {
  position: relative;
  padding-bottom: clamp(4px, calc(var(--shell-h) * 0.014), 9px);
}

/* 页签行：我的房间 / 游戏大厅，最右侧「刷新」 */
.gl-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, calc(var(--shell-h) * 0.01), 6px);
  margin-top: clamp(2px, calc(var(--shell-h) * 0.01), 6px);
  border-bottom: 1px solid rgba(232, 198, 106, 0.22);
}

/* 未选中页签：墨绿色，比选中项矮一截 */
.gl-tab {
  position: relative;
  min-height: clamp(30px, calc(var(--shell-h) * 0.088), 48px);
  padding: 0 clamp(14px, calc(var(--shell-h) * 0.05), 30px);
  margin-bottom: -1px;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(232, 198, 106, 0.16);
  border-bottom: 0;
  font-size: clamp(13px, calc(var(--shell-h) * 0.038), 21px);
  font-weight: 700;
  color: rgba(206, 224, 214, 0.78);
  background: linear-gradient(180deg, rgba(8, 44, 30, 0.9), rgba(5, 30, 20, 0.55));
}

/* 选中页签：金色渐变 + 深红棕字，文件夹式凸起（设计稿） */
.gl-tab.on {
  min-height: clamp(36px, calc(var(--shell-h) * 0.104), 56px);
  color: #6d2408;
  font-weight: 800;
  border-color: rgba(255, 244, 200, 0.75);
  background: linear-gradient(180deg, #ffeeb4 0%, #f4d078 45%, #ddb04b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.gl-tab:active {
  transform: scale(0.98);
}

.gl-refresh {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: clamp(26px, calc(var(--shell-h) * 0.07), 38px);
  padding: 0 clamp(10px, calc(var(--shell-h) * 0.034), 20px);
  font-size: clamp(11px, calc(var(--shell-h) * 0.03), 16px);
  color: #dce8e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.gl-refresh-ico {
  width: 1em;
  height: 1em;
}

.gl-refresh:active {
  transform: scale(0.96);
}

/* 主体：左房间列表 + 右开局栏 */
.game-lobby-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(8px, calc(var(--shell-h) * 0.026), 20px);
}

/* 房间列表：卡片自上而下排，多了在列表内上下滚动 */
.gl-rooms {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, calc(var(--shell-h) * 0.02), 14px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.gl-rooms::-webkit-scrollbar {
  width: 6px;
}

.gl-rooms::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(232, 198, 106, 0.45);
}

.gl-rooms::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

.room-empty {
  margin: auto;
  padding: 20px 8px;
  text-align: center;
}

/* 房间卡片：横向一行 —— 大房间号 / 信息 / 按钮 */
.room-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(var(--shell-h) * 0.034), 22px);
  padding: clamp(8px, calc(var(--shell-h) * 0.026), 16px) clamp(10px, calc(var(--shell-h) * 0.03), 20px);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(6, 34, 23, 0.72), rgba(4, 24, 16, 0.85));
  border: 1.5px solid rgba(232, 198, 106, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.room-card.is-here {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.25), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.rc-no {
  flex: 0 0 auto;
  min-width: clamp(88px, calc(var(--shell-h) * 0.3), 170px);
  font-size: clamp(19px, calc(var(--shell-h) * 0.072), 40px);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
  color: #fdf6e3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.rc-detail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, calc(var(--shell-h) * 0.008), 6px);
}

.rc-line {
  display: flex;
  align-items: center;
  gap: clamp(6px, calc(var(--shell-h) * 0.02), 12px);
  min-width: 0;
}

.rc-tag {
  flex: 0 0 auto;
  padding: 1px clamp(8px, calc(var(--shell-h) * 0.026), 16px);
  border-radius: 8px;
  font-size: clamp(11px, calc(var(--shell-h) * 0.032), 17px);
  font-weight: 800;
  color: #5a3d0a;
  background: linear-gradient(180deg, #ffe9a8, #d9ac44);
  border: 1px solid rgba(255, 240, 190, 0.6);
}

/* 大厅牌桌的牌桌名称徽标（房主创建时起的名，最多 6 个字） */
.rc-name {
  flex: 0 1 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, calc(var(--shell-h) * 0.034), 18px);
  font-weight: 700;
  color: #dff3e4;
}

.rc-tag.lobby {
  color: #ffffff;
  background: linear-gradient(180deg, #6ec3ff, #2f7fd0);
  border-color: rgba(200, 232, 255, 0.6);
}

.rc-owner {
  min-width: 0;
  font-size: clamp(11px, calc(var(--shell-h) * 0.032), 17px);
  color: #e8f2ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-meta {
  font-size: clamp(10px, calc(var(--shell-h) * 0.028), 15px);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-btns {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, calc(var(--shell-h) * 0.018), 12px);
}

.rc-btn {
  min-width: clamp(72px, calc(var(--shell-h) * 0.24), 132px);
  min-height: clamp(30px, calc(var(--shell-h) * 0.084), 46px);
  padding: 0 clamp(10px, calc(var(--shell-h) * 0.03), 20px);
  border-radius: 9px;
  font-size: clamp(12px, calc(var(--shell-h) * 0.034), 18px);
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #eef4f0;
}

.rc-btn.primary {
  color: #7d2408;
  border-color: rgba(255, 240, 190, 0.65);
  background: linear-gradient(180deg, #fdeaae 0%, #efc96b 42%, #d3a13c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rc-btn.ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #e2ece6;
}

.rc-btn:active {
  transform: scale(0.97);
}

.rc-btn:disabled {
  opacity: 0.4;
}

/* 右侧开局栏：标题 + 说明 + 两个按钮（按钮撑满右栏宽度、靠底） */
.gl-side {
  flex: 0 0 auto;
  width: clamp(150px, calc(var(--shell-h) * 0.52), 300px);
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: clamp(4px, calc(var(--shell-h) * 0.02), 14px) 0;
}

.gl-actions {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, calc(var(--shell-h) * 0.014), 10px);
}

.gl-title {
  font-size: clamp(15px, calc(var(--shell-h) * 0.046), 26px);
  font-weight: 800;
  color: var(--gold);
  text-align: center;
}

.gl-actions .hint {
  font-size: clamp(10px, calc(var(--shell-h) * 0.026), 14px);
  line-height: 1.45;
  color: #ddd3b4;
}

/* 开局两个按钮：宽度由 btn-block 撑满右栏，高度取常规按钮（--tap 44px）的两倍 */
.gl-actions .btn {
  min-height: clamp(56px, calc(var(--shell-h) * 0.16), 88px);
  font-size: clamp(14px, calc(var(--shell-h) * 0.04), 22px);
}

/* 第一个按钮沉到底部，与设计稿里按钮靠下的位置一致 */
.gl-actions .btn:first-of-type {
  margin-top: auto;
}

/* 创建房间弹框：类别二选一 */
.seg {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.seg-item {
  position: relative;
  flex: 1 1 0;
}

.seg-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.seg-item input:checked + span {
  color: #3a2a05;
  background: linear-gradient(180deg, #e8c66a, #c19f42);
  border-color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
 * 创建房间弹层：沿用游戏大厅的「墨绿描金 + 金色主按钮」风格
 * 类别二选一的配色直接对齐大厅卡片上的类别胶囊（VIP 金 / 大厅牌桌蓝）
 * -------------------------------------------------------------------------- */
.sheet-create .sheet-title {
  font-size: clamp(15px, calc(var(--shell-h) * 0.042), 22px);
  margin-bottom: clamp(8px, calc(var(--shell-h) * 0.022), 14px);
}

.sheet-create .seg {
  gap: clamp(6px, calc(var(--shell-h) * 0.018), 12px);
  margin-bottom: clamp(4px, calc(var(--shell-h) * 0.014), 10px);
}

.sheet-create .seg-item span {
  min-height: clamp(36px, calc(var(--shell-h) * 0.098), 50px);
  border-radius: 10px;
  font-size: clamp(13px, calc(var(--shell-h) * 0.036), 18px);
  font-weight: 800;
  color: #e8f2ec;
  background: linear-gradient(180deg, rgba(6, 34, 23, 0.72), rgba(4, 24, 16, 0.85));
  border: 1.5px solid rgba(232, 198, 106, 0.35);
}

/* 未选中的大厅牌桌走蓝色描边，和它在列表里的蓝色胶囊一致 */
.sheet-create .seg-item input[value="lobby"] + span {
  color: #d8ecff;
  border-color: rgba(120, 190, 255, 0.42);
}

.sheet-create .seg-item input[value="vip"]:checked + span {
  color: #5a3d0a;
  background: linear-gradient(180deg, #ffeeb4 0%, #f4d078 45%, #ddb04b 100%);
  border-color: rgba(255, 244, 200, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sheet-create .seg-item input[value="lobby"]:checked + span {
  color: #ffffff;
  background: linear-gradient(180deg, #6ec3ff, #2f7fd0);
  border-color: rgba(200, 232, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* 三个输入框并排：横屏才放得下，窄屏自动折行 */
.sheet-create .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(6px, calc(var(--shell-h) * 0.018), 12px);
  margin-bottom: clamp(6px, calc(var(--shell-h) * 0.018), 12px);
}

.sheet-create .field {
  font-size: clamp(11px, calc(var(--shell-h) * 0.03), 15px);
}

.sheet-create .field input {
  min-height: clamp(36px, calc(var(--shell-h) * 0.098), 48px);
  border-radius: 10px;
  border: 1.5px solid rgba(232, 198, 106, 0.3);
  background: rgba(3, 22, 14, 0.6);
  font-size: clamp(15px, calc(var(--shell-h) * 0.04), 19px);
}

.sheet-create .switch {
  min-height: clamp(34px, calc(var(--shell-h) * 0.092), 46px);
  border-color: rgba(232, 198, 106, 0.3);
  font-size: clamp(12px, calc(var(--shell-h) * 0.032), 16px);
}

.sheet-create .hint {
  margin: clamp(2px, calc(var(--shell-h) * 0.008), 6px) 0 clamp(6px, calc(var(--shell-h) * 0.018), 12px);
  font-size: clamp(11px, calc(var(--shell-h) * 0.03), 15px);
  line-height: 1.4;
}

.sheet-create .btn {
  min-height: clamp(38px, calc(var(--shell-h) * 0.1), 50px);
  font-size: clamp(14px, calc(var(--shell-h) * 0.038), 19px);
}

/* 横屏矮屏：整块再压扁一档，保证标题到按钮一屏放完、不被上下裁掉 */
body.lobby-compact .sheet-create {
  padding: 10px 12px;
}

body.lobby-compact .sheet-create .sheet-title {
  font-size: 15px;
  margin-bottom: 6px;
}

body.lobby-compact .sheet-create .seg-item span {
  min-height: 34px;
  font-size: 13px;
}

body.lobby-compact .sheet-create .field {
  gap: 3px;
  font-size: 11px;
}

body.lobby-compact .sheet-create .field input {
  min-height: 34px;
  font-size: 15px;
}

body.lobby-compact .sheet-create .switch {
  min-height: 32px;
  font-size: 12px;
}

body.lobby-compact .sheet-create .hint {
  margin: 2px 0 6px;
  font-size: 11px;
}

body.lobby-compact .sheet-create .btn {
  min-height: 36px;
  font-size: 14px;
}

body.lobby-compact .sheet-create .act-btn.block {
  margin-top: 6px;
}

/* 房间创建成功弹层：竖屏单列顺排；横屏矮屏切成左右两列，
   左列房号/密码、右列邀请链接与按钮，一屏放完不用上下滚 */
.cr-cols {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 列内已有 gap，copy-box / hint 自带的底边距要去掉，否则间距翻倍 */
.cr-col .copy-box,
.cr-col .hint {
  margin-bottom: 0;
}

.cr-btns {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.cr-btns .act-btn {
  justify-content: center;
}

body.lobby-compact .sheet:has(.sheet-created) {
  /* 用百分比而不是 vw：竖屏旋转兜底时容器宽度是视口长边，vw 会算窄 */
  width: min(96%, 760px);
}

body.lobby-compact .sheet-created {
  padding: 12px 14px;
}

body.lobby-compact .sheet-created .sheet-title {
  font-size: 15px;
  margin-bottom: 8px;
}

body.lobby-compact .cr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

body.lobby-compact .cr-btns {
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
}

body.lobby-compact .sheet-created .copy-box {
  padding: 7px 10px;
}

body.lobby-compact .sheet-created .cb-value {
  font-size: 17px;
}

body.lobby-compact .sheet-created .cb-value.small {
  font-size: 12px;
}

body.lobby-compact .sheet-created .hint {
  font-size: 11px;
  line-height: 1.35;
}

body.lobby-compact .cr-btns .act-btn {
  min-height: 40px;
  padding: 0 8px;
  font-size: 14px;
}

/* 战绩在个人信息弹框中展示，列表超高时弹层内滚动。
   限高按视口短边算：竖屏旋转显示时 56vh 是长边，会把弹层顶出可视区 */
.stats-box.in-sheet {
  max-height: min(56vh, calc(var(--shell-h, 100vh) - 170px));
  overflow: auto;
  margin-bottom: 10px;
}

/* 积分排行榜弹层里的补充说明（未上榜提示 / 加载中） */
.lb-note {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
}

/* 个人信息弹层 */
.pf-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0 14px;
}

/* 弹层右上角的关闭叉（个人信息 / 我的战绩两个弹层共用）：
   原来是各自底部的一个「关闭」按钮，现在都改成右上角一个圆形叉号 */
.sheet-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, calc(var(--shell-h, 100vh) * 0.084), 42px);
  height: clamp(30px, calc(var(--shell-h, 100vh) * 0.084), 42px);
  padding: 0;
  border-radius: 50%;
  color: var(--txt);
}

/* 所有弹层右上角的关闭叉加粗：填充图形叠一层同色描边 */
.sheet-close .set-ico {
  stroke: currentColor;
  stroke-width: 2;
}

.sheet-close:active {
  background: rgba(255, 255, 255, 0.1);
}

/* 个人信息弹层没有标题行，叉号直接钉在头部右上角 */
.pf-head .sheet-close {
  position: absolute;
  right: 0;
  top: 0;
}

/* 「我的战绩」弹层头部：沿用结算弹层的「左标题 + 右关闭」行，
   标题只有一行所以改成垂直居中，标题行与内容的间距转由整行下外边距提供 */
.stats-head {
  align-items: center;
  margin-bottom: 12px;
}

.stats-head .sheet-title {
  margin-bottom: 0;
}

.pf-big-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 900;
  color: #fff7e0;
  background: linear-gradient(150deg, #2f9a68, #14603f);
  border: 2px solid var(--gold);
}

.pf-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
}

/* 昵称作为「修改资料」入口：可点、带小铅笔图标（点击弹出修改资料窗） */
button.pf-name.pf-name-edit {
  margin: 0; padding: 4px 10px;
  background: none; border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 999px; color: inherit;
  font: inherit; letter-spacing: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button.pf-name.pf-name-edit:active { transform: scale(0.96); }
.pf-edit-ico {
  width: 13px; height: 13px; flex: 0 0 auto;
  color: rgba(255, 214, 130, 0.9);
}

/* 个人信息里的性别行：未设置时点一下即可补选（头像与语音随之生效） */
.pf-gender {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pf-g-label {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--muted);
}

.pf-gender .gender-pick {
  flex: 1;
}

/* 空状态（背包/活动） */
.empty-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.eb-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  color: #3a2a05;
  background: linear-gradient(150deg, #f4dfa0, #c9a445);
}

/* 平台公告（公告中心弹层）：等宽页签 + 纯文字卡片 + 详情。
   尺寸随 --shell-h 自适应，横屏矮屏同样放得下；卡片横屏铺两栏 */
/* 页签铺满弹层整宽（左右 -16px 正好抵消 .sheet-body 的内边距），两半等分无间隙 */
.notice-tabs {
  display: flex;
  margin: 0 -16px clamp(9px, calc(var(--shell-h, 100vh) * 0.024), 13px);
  background: rgba(0, 0, 0, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nt-item {
  flex: 1 1 50%;
  padding: clamp(7px, calc(var(--shell-h, 100vh) * 0.02), 10px) 0;
  font-size: clamp(12px, calc(var(--shell-h, 100vh) * 0.033), 15px);
  font-weight: 800;
  color: var(--muted);
  background: transparent;
}

/* 选中页签：金色渐变 + 深棕字，底部一道暗边做出「抬起」感 */
.nt-item.on {
  color: #5a3a10;
  background: linear-gradient(180deg, #ffd75e, #e8a920);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.nt-item:active {
  filter: brightness(1.06);
}

/* 横屏铺两栏：列宽门槛 280px（弹层上限 700px、内容区约 668px 正好两栏，
   竖屏窄屏自动回落单栏）。auto-fit 在只有一条公告时会收成一栏铺满整宽 */
.notice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(9px, calc(var(--shell-h, 100vh) * 0.022), 12px);
  margin-bottom: 14px;
}

.notice-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: clamp(11px, calc(var(--shell-h, 100vh) * 0.03), 16px);
  border-radius: 13px;
  background: linear-gradient(180deg, #131a24, #0b1017);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.08s ease, filter 0.15s ease;
}

.notice-card:active {
  transform: scale(0.98);
  filter: brightness(1.18);
}

.nc-title {
  font-size: clamp(13px, calc(var(--shell-h, 100vh) * 0.037), 17px);
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.nc-summary {
  margin-top: clamp(4px, calc(var(--shell-h, 100vh) * 0.012), 7px);
  font-size: clamp(11px, calc(var(--shell-h, 100vh) * 0.029), 13.5px);
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* margin-top:auto 让状态胶囊贴到卡片底部 —— 两栏时卡片等高，胶囊才会左右对齐；
   padding-top 兜住「摘要与胶囊之间的最小间距」 */
.nc-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: clamp(7px, calc(var(--shell-h, 100vh) * 0.02), 11px);
}

.nc-status {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: clamp(10px, calc(var(--shell-h, 100vh) * 0.026), 12px);
  font-weight: 800;
  line-height: 1.7;
}

.nc-status.ongoing {
  color: #06231a;
  background: linear-gradient(180deg, #58e39a, #1fae66);
}

.nc-status.upcoming {
  color: #f0e6c8;
  background: rgba(232, 198, 106, 0.2);
  border: 1px solid rgba(232, 198, 106, 0.45);
}

/* 标题图：代替文字标题的位置，横幅式裁切（有图的卡片头部整块是图） */
.nc-img {
  display: block;
  width: 100%;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.nc-img img {
  display: block;
  width: 100%;
  height: clamp(64px, calc(var(--shell-h, 100vh) * 0.19), 120px);
  object-fit: cover;
}

/* 详情视图的标题图：置顶整宽横幅 */
.nd-img {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: clamp(8px, calc(var(--shell-h, 100vh) * 0.02), 12px);
  background: rgba(0, 0, 0, 0.35);
}

.nd-img img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.notice-hint {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.notice-retry {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
}

.notice-detail {
  margin-bottom: 4px;
}

.nd-title {
  margin: 0;
  font-size: clamp(15px, calc(var(--shell-h, 100vh) * 0.044), 20px);
  font-weight: 800;
  color: #fff;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.nd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(7px, calc(var(--shell-h, 100vh) * 0.02), 11px) 0
    clamp(10px, calc(var(--shell-h, 100vh) * 0.026), 14px);
  color: var(--muted);
  font-size: clamp(11px, calc(var(--shell-h, 100vh) * 0.028), 13px);
}

.notice-body {
  font-size: clamp(12px, calc(var(--shell-h, 100vh) * 0.032), 15px);
  line-height: 1.8;
  color: #d9e8df;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 规则弹层 */
.rules-body {
  max-height: 52vh;
  overflow: auto;
  margin-bottom: 12px;
}

.rules-body p {
  font-size: 13px;
  line-height: 1.7;
  color: #d9e8df;
  margin-bottom: 8px;
}

.fan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}

.fan-table th,
.fan-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fan-table th {
  color: var(--gold);
  font-weight: 800;
}

.fan-table td:nth-child(2) b {
  color: var(--gold);
}

.fan-table td:nth-child(3) {
  color: var(--muted);
}

/* 规则弹层玩法页签（杭州 / 文成） */
.rules-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
}

.rt-item {
  flex: 1;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.rt-item.on {
  background: linear-gradient(135deg, #1f8a5b, #2fae74);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* 设置弹层（按设计稿：顶部返回箭头 + 居中标题、深墨绿卡片行、
   金色胶囊开关、底部红色退出登录按钮）。各项尺寸随 --shell-h 自适应，
   横屏档下同样不裁切 */
/* 横屏展示：设置页与公告中心比别的弹层宽一档，好让内容铺成两栏。
   宽度用 % 而不是 vw —— 竖屏旋转兜底时 .overlay 的包含块是 .room-rotor
   （宽 = 视口长边），而 vw 恒为视口短边，直接写 vw 只能算出 360 多像素的窄条。
   公告中心的两级视图（列表 / 详情）都取同一宽度，开合详情时弹层不会跳动 */
body.page-index .sheet:has(.set-head),
body.page-index .sheet:has(.notice-tabs) {
  width: min(94%, 700px);
}

.set-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(36px, calc(var(--shell-h, 100vh) * 0.1), 50px);
  margin-bottom: clamp(10px, calc(var(--shell-h, 100vh) * 0.024), 16px);
}

/* 返回箭头绝对定位在左侧，标题才能相对整行真正居中 */
.set-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, calc(var(--shell-h, 100vh) * 0.084), 42px);
  height: clamp(30px, calc(var(--shell-h, 100vh) * 0.084), 42px);
  padding: 0;
  border-radius: 50%;
  color: var(--txt);
}

.set-back:active {
  background: rgba(255, 255, 255, 0.1);
}

/* 设置 / 反馈 / 公告的头：关闭叉钉在右侧，与左侧返回箭头对称，
   标题因此始终相对整行居中 */
.set-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 标题字号与游戏大厅的「开局」标题（.gl-title）同一档 */
.set-title {
  margin: 0;
  font-size: clamp(15px, calc(var(--shell-h, 100vh) * 0.046), 26px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--txt);
}

.set-ico {
  display: block;
  width: 1em;
  height: 1em;
  font-size: clamp(17px, calc(var(--shell-h, 100vh) * 0.052), 23px);
}

/* 横屏铺两栏（宽度够就自动分栏，不够自动回落单栏）。
   列宽门槛取 240px：弹层上限 700px、内容区约 668px，正好只分两栏；
   若用 200px 会分出三栏，7 行摆成 3/3/1 反而散 */
.set-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(6px, calc(var(--shell-h, 100vh) * 0.015), 10px);
}

/* 同时用于 <label>（开关行）与 <button>（清除缓存 / 关于 / 协议），
   故把标签与按钮的默认样式都抹平 */
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: clamp(42px, calc(var(--shell-h, 100vh) * 0.118), 58px);
  padding: 0 clamp(12px, calc(var(--shell-h, 100vh) * 0.032), 18px);
  border-radius: 12px;
  background: linear-gradient(180deg, #0d3a27, #082418);
  border: 1px solid rgba(232, 198, 106, 0.16);
  font: inherit;
  color: inherit;
  text-align: left;
}

button.set-row:active,
label.set-row:active {
  background: linear-gradient(180deg, #12482f, #0a2c1d);
}

/* 行文字字号与游戏大厅的页签 / 卡片主文案同一档（.gl-tab） */
.set-label {
  font-size: clamp(13px, calc(var(--shell-h, 100vh) * 0.038), 21px);
  font-weight: 600;
  color: var(--txt);
}

/* 右侧灰字与游戏大厅房间卡片的次要文案同一档（.rc-owner） */
.set-val {
  font-size: clamp(11px, calc(var(--shell-h, 100vh) * 0.032), 17px);
  color: var(--muted);
}

.set-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

/* 胶囊开关：与后台「系统设置 · 游戏开关」(.adm-switch) 同一套样式
   关 = 石板灰胶囊 + 白球钮靠左；开 = 金色胶囊 + 白球钮靠右
   沿用后台开关量得的比例：宽高比 52:28，球钮 22/28，左右留边 3/28
   选择器用 input.set-tgl：上面 input[type="checkbox"]{appearance:auto} 的优先级更高，
   用纯类名会被它压掉 appearance，导致原生勾选框样式盖住这枚胶囊开关 */
input.set-tgl {
  --sw-w: clamp(40px, calc(var(--shell-h, 100vh) * 0.11), 54px);
  --sw-h: calc(var(--sw-w) / 1.857);
  --sw-pad: calc(var(--sw-h) * 0.107);
  --sw-knob: calc(var(--sw-h) * 0.786);
  position: relative;
  flex: 0 0 auto;
  width: var(--sw-w);
  height: var(--sw-h);
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  /* 关态：石板灰 */
  background: linear-gradient(180deg, #6b757e, #4f5962);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.18s ease;
}

input.set-tgl::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: var(--sw-knob);
  height: var(--sw-knob);
  transform: translateY(-50%);
  border-radius: 50%;
  /* 球钮：纯白球体 */
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.18s ease;
}

input.set-tgl:checked {
  /* 开态：金色 */
  background: linear-gradient(180deg, #f2cf6b, #c9a445);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

input.set-tgl:checked::after {
  left: calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad));
}

/* 关于我们 / 用户协议正文：限高内滚动，避免长文把弹层顶出可视区 */
.doc-box {
  max-height: min(52vh, calc(var(--shell-h, 100vh) * 0.56));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(10px, calc(var(--shell-h, 100vh) * 0.026), 16px);
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  font-size: clamp(12px, calc(var(--shell-h, 100vh) * 0.034), 18px);
  line-height: 1.7;
  color: var(--txt);
}

.doc-box p {
  margin: 0 0 10px;
}

.doc-box p:last-child {
  margin-bottom: 0;
}

.doc-box .dim {
  color: var(--muted);
  font-size: 0.9em;
}

/* 横屏紧凑档（手机横屏 / 旋转兜底，高 ≤ 600） */
body.lobby-compact .lobby-shell {
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  gap: 6px;
}

body.lobby-compact .lv-sm {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

body.lobby-compact .lt-game b {
  font-size: 14px;
}

body.lobby-compact .lt-game .dim {
  font-size: 11px;
}

/* 平台大厅的头像 / 卡片 / 底栏尺寸均由 --shell-h 自适应，紧凑档不再另设固定值 */

/* 横屏矮屏：开局栏按钮同样加倍高度，只是整体压扁一点 */
body.lobby-compact .gl-actions .btn {
  min-height: clamp(52px, calc(var(--shell-h) * 0.156), 76px);
  padding: 0 8px;
  font-size: clamp(12px, calc(var(--shell-h) * 0.04), 18px);
}

body.lobby-compact .card {
  padding: 10px;
  margin-bottom: 0;
}

body.lobby-compact .card-title {
  font-size: 14px;
  margin-bottom: 8px;
}

body.lobby-compact .form-grid {
  gap: 7px;
  margin-bottom: 8px;
}

body.lobby-compact .field {
  font-size: 11px;
}

body.lobby-compact .field input {
  min-height: 38px;
  font-size: 14px;
}

body.lobby-compact .switch {
  min-height: 38px;
  font-size: 12px;
}

body.lobby-compact .btn {
  min-height: 40px;
  font-size: 14px;
}

body.lobby-compact .stats-box.in-sheet {
  max-height: min(46vh, calc(var(--shell-h, 100vh) - 170px));
}

body.lobby-compact .rules-body {
  max-height: min(46vh, calc(var(--shell-h, 100vh) - 150px));
}

/* 横屏矮屏：个人信息弹层整体压扁，头像/各玩法积分/按钮一屏看完 */
body.lobby-compact .pf-head {
  gap: 6px;
  padding: 2px 0 8px;
}

body.lobby-compact .pf-big-avatar {
  width: 46px;
  height: 46px;
  font-size: 22px;
}

body.lobby-compact .pf-name {
  font-size: 14px;
}

body.lobby-compact .pf-games {
  gap: 5px;
  margin-bottom: 8px;
}

body.lobby-compact .pf-game-row {
  padding: 6px 9px;
  font-size: 12px;
}

body.lobby-compact .pf-game-row b {
  font-size: 13px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #3a2a05;
  background: linear-gradient(150deg, #f4dfa0, #c9a445);
}

.profile-main {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-name {
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.profile-sub b {
  color: var(--gold);
  font-size: 14px;
}

.hint {
  min-height: 18px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  word-break: break-word;
}

.hint.ok {
  color: #bff5d8;
}

.hint.err {
  color: #ffc9c9;
}

.stats-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stats-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin: 6px 0 2px;
}

.stat-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.stat-line .sl-room {
  color: var(--muted);
  flex: 0 0 auto;
}

.stat-line .sl-type {
  color: var(--gold);
  flex: 0 0 auto;
}

.stat-line .sl-fans {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  color: var(--txt);
}

.stat-line .sl-delta {
  margin-left: auto;
  font-weight: 800;
  font-size: 14px;
}

.stat-line .sl-bal {
  color: var(--muted);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   积分按游戏拆分：个人信息各游戏积分
   -------------------------------------------------------------------------- */
.pf-games {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.pf-game-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.pf-game-row .pg-name {
  flex: 0 0 auto;
}

.pf-game-row .pg-sub {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-game-row b {
  margin-left: auto;
  font-weight: 800;
  font-size: 14px;
}

/* 负分清零小按钮：只在该玩法积分为负时出现在个人信息行里 */
.pg-reset {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #ffd98a;
  background: rgba(122, 84, 16, 0.28);
  border: 1px solid rgba(255, 217, 138, 0.55);
}

.pg-reset:active { transform: scale(0.94); }

/* 个人信息弹窗的「修改资料」窗：昵称/邮箱/性别 */
.pf-edit { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 12px; }
.pf-edit-body { display: flex; flex-direction: column; gap: 10px; }
.pf-edit-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--dim, #9fb2a6); text-transform: uppercase;
}
.pf-field { display: flex; flex-direction: column; gap: 4px; }
.pf-field > span { font-size: 12px; color: var(--dim, #9fb2a6); }
.pf-field input,
.pf-field select {
  width: 100%; box-sizing: border-box;
  font-size: 14px; color: var(--txt, #eaf3ec);
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-appearance: none; appearance: none;
}
.pf-field input:focus,
.pf-field select:focus { outline: none; border-color: rgba(255, 214, 130, 0.6); }

/* 负分清零确认弹层 */
.reset-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt);
}

.reset-desc b.neg {
  color: #ff9d9d;
}

/* --------------------------------------------------------------------------
   我的战绩：按游戏分类的房间列表（可时间查询）→ 房间明细
   -------------------------------------------------------------------------- */
.stats-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.sf-games {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sf-tab {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--txt);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

.sf-tab.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #2a1c00;
  font-weight: 700;
}

.sf-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sf-dates input[type='date'] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--txt);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
}

/* 房间号 + 类别标签（我的战绩里的房间行复用） */
.rr-no {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}

.rr-tag {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #e8c66a;
  background: rgba(232, 198, 106, 0.18);
  border: 1px solid rgba(232, 198, 106, 0.5);
}

.rr-tag.lobby {
  color: #8fd3ff;
  background: rgba(120, 200, 255, 0.14);
  border-color: rgba(120, 200, 255, 0.45);
}

.stat-room-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 10px;
  color: var(--txt);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-room-row .srr-main {
  flex: 1 1 auto;
  min-width: 0;
}

.stat-room-row .srr-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-room-row .srr-game {
  font-size: 12px;
}

.stat-room-row .srr-meta {
  font-size: 11px;
  margin-top: 3px;
}

.stat-room-row .srr-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.stat-room-row .srr-score b {
  font-size: 16px;
}

.stat-room-row .srr-score span {
  font-size: 11px;
}

/* 房间战绩明细表（我的战绩 / 牌桌内共用） */
.rs-head {
  margin-bottom: 4px;
}

.rs-title {
  font-size: 15px;
  font-weight: 800;
}

.rs-sub {
  font-size: 12px;
  margin-top: 2px;
}

.rs-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rs-tr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.rs-tr.rs-th {
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.rs-tr.is-me {
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.rs-td {
  flex: 0 0 auto;
}

.rs-td.rk {
  width: 32px;
}

/* 积分排行榜前三名的金 / 银 / 铜牌（尺寸随 --shell-h 缩放） */
.rs-td.rk .medal {
  display: block;
  margin: 0 auto;
  width: clamp(17px, 0.05 * var(--shell-h), 28px);
  height: clamp(17px, 0.05 * var(--shell-h), 28px);
}

.rs-td.nm {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-td.sc {
  width: 52px;
  text-align: right;
  font-weight: 800;
}

.rs-td.wl {
  width: 52px;
  text-align: right;
  color: var(--muted);
}

.rs-td.rd {
  width: 40px;
  text-align: right;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   手机竖屏适配（320px ~ 480px）—— 仅覆盖本页，桌面端不受影响
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* 昵称 + @用户名 过长时换行显示，避免被 nowrap 裁掉 */
  .profile-row .profile-name {
    flex-wrap: wrap;
    white-space: normal;
    gap: 4px;
  }

  .profile-row .tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .card-title {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .invite-banner {
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .form-grid {
    gap: 8px;
    margin-bottom: 10px;
  }

  /* 触摸目标 ≥ 44px */
  .page-index .btn-mini {
    min-height: 44px;
  }

  .profile-row {
    gap: 10px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .profile-name {
    font-size: 15px;
  }

  .profile-row .btn-mini {
    padding: 0 10px;
    font-size: 12px;
  }

  /* 战绩行允许换行，极窄屏也不撑破卡片 */
  .stat-line {
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 8px;
  }

  .stat-line .sl-delta {
    font-size: 13px;
  }

  .page-index .sheet-body {
    padding: 14px 12px;
  }
}

@media (max-width: 360px) {
  .dt {
    width: 64px;
    height: 88px;
    font-size: 40px;
  }

  .dt-r2 {
    width: 74px;
    height: 98px;
  }

  .profile-row .btn-mini {
    padding: 0 8px;
  }
}

/* ==========================================================================
   牌面（参考图切片精灵图，4 行 × 9 列）
   ========================================================================== */
.tile {
  /* 只维护高度，宽度按牌面长宽比派生：精灵图单格 148×232 ≈ 0.638，
     牌盒同比例才不会把牌面横向拉伸 */
  --th: 46px;
  --tar: 0.638;
  --trad: 5px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--th) * var(--tar));
  height: var(--th);
  padding: 0;
  border-radius: var(--trad);
  overflow: hidden;
  vertical-align: bottom;
  color: var(--ink);
  /* 财神角标等文字用衬线字形，贴近实体牌的毛笔字观感 */
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Kaiti TC", "楷体", "Songti SC",
    "STSong", "Noto Serif SC", serif;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  /* 容器透明：牌面完全由精灵图呈现，background-position 由 JS 内联指定 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.tile.sz-xs {
  --th: 26px;
  --trad: 3px;
}

/* 对手手牌背面：只用来表示"还剩几张"，做得很小 */
.tile.sz-back {
  --th: 16px;
  --trad: 2px;
  padding: 0;
}

.tile.sz-sm {
  --th: 34px;
  --trad: 4px;
}

.tile.sz-md {
  --th: 46px;
}

.tile.sz-hand {
  --th: 60px;
  --trad: 7px;
}

.tile.sz-lg {
  --th: 78px;
  --trad: 8px;
}

/* 财神（白板）高亮：牌面来自精灵图，只叠一圈金色光环 */
.tile.is-joker {
  animation: jokerPulse 1.9s ease-in-out infinite;
}

.tile.is-joker .joker-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 900;
  line-height: 12px;
  color: #3a2a05;
  background: linear-gradient(135deg, #ffe9a8, #c9a445);
  border-bottom-left-radius: 6px;
}

@keyframes jokerPulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(232, 198, 106, 0.75), 0 0 7px rgba(232, 198, 106, 0.5),
      0 2px 3px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255, 226, 138, 1), 0 0 16px rgba(255, 226, 138, 0.95),
      0 2px 3px rgba(0, 0, 0, 0.35);
  }
}

.tile.is-back {
  padding: 0;
  background: linear-gradient(135deg, #1f7452, #0e4530);
  /* 容器已无边框，背面牌自行补一圈描边 */
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 3px rgba(0, 0, 0, 0.35);
}

.tile.is-back .tile-back-pattern {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.11) 0 3px,
    rgba(255, 255, 255, 0) 3px 6px
  );
}

.tile.is-selected {
  transform: translateY(-12px);
  box-shadow: 0 0 0 2px var(--gold), 0 10px 14px rgba(0, 0, 0, 0.5);
}

.meld {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}

.meld.meld-ankong,
.meld.meld-bukong,
.meld.meld-mingkong {
  background: rgba(232, 198, 106, 0.16);
}

.tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: flex-end;
}

/* ==========================================================================
   牌桌（room.html）
   ========================================================================== */
body.page-room {
  overflow: hidden;
}

.page-room {
  height: 100vh;
  height: 100dvh;
}

/* 牌桌容器：横屏（含旋转兜底）时整块由它承载 */
.room-rotor {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 桌面可视高度：横屏时等于视口高；竖屏旋转兜底时桌面被转 90°，高度其实是视口宽。
     横屏下的牌面尺寸都按它等比缩放，这样 568×320 到 915×412 各种机型都放得下 */
  --tbl-h: 100vh;
  /* 弹层限高基准：视口短边 = 旋转后的真实可视高度。
     牌桌页原先没定义它，.sheet 会退回 100vh（竖屏旋转时是长边），结算弹层会被上下裁掉 */
  --shell-h: min(100vw, 100vh);
}

@supports (height: 100dvh) {
  .room-rotor {
    --tbl-h: 100dvh;
  }
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-top) * 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  min-height: 40px;
  min-width: 54px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.icon-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

/* 顶栏「战绩 / 分享」：设计稿里是图标 + 文字（图标为设计稿切图） */
.icon-btn.has-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(var(--shell-h, 100vh) * 0.008), 7px);
  padding: 0 clamp(8px, calc(var(--shell-h, 100vh) * 0.016), 14px);
  min-width: 0;
  color: #f4ecd8;
}

.icon-btn .ic-img {
  display: block;
  height: 1.25em;
  width: auto;
  flex: 0 0 auto;
  pointer-events: none;
}

.topbar-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}

.tb-room {
  color: var(--muted);
  white-space: nowrap;
}

.tb-room b {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 1px;
}

.tb-sub {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.connbar {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  text-align: center;
  color: #3a2a05;
  background: linear-gradient(90deg, #e8c66a, #d0ac52);
  font-weight: 700;
}

.connbar.online {
  background: rgba(61, 220, 132, 0.18);
  color: #bff5d8;
}

/* 仅牌桌：大厅的 #main 是普通块级流，卡片需要纵向堆叠 */
.page-room #main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.table-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.side-row {
  flex: 0 0 auto;
  /* 左右空轨道与 .mid-row 的左右玩家面板同宽（82px + 6px gap），
     中间列自然与中央桌面 .center-col 严格等宽，对家框水平居中 */
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 82px;
  column-gap: 6px;
}

/* 对家框落在中间列：与桌面一样宽，头像/副露在左，手牌背面在框正中 */
.side-row .opp {
  grid-column: 2;
  width: 100%;
}

.mid-row {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  min-height: 168px;
}

.mid-row .opp-left,
.mid-row .opp-right {
  flex: 0 0 82px;
  width: 82px;
}

.mid-row .center-col {
  flex: 1 1 auto;
  min-width: 0;
}

/* 对手：头像/副露/手牌背面全部悬浮在桌面上，无面板框 */
.opp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
  min-width: 0;
}

.opp-empty {
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.opp-head {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.opp-head .score {
  font-weight: 800;
  font-size: 12px;
  color: var(--gold);
  line-height: 1;
}

/* 头像右边：上分数、下状态标签的紧凑竖列（替代原来的名字长条） */
.opp-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.opp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.opp .tag {
  font-size: 9px;
  line-height: 14px;
  padding: 0 5px;
}

/* 吃碰杠区：花牌在前、吃碰杠在后（左右两家由下方规则改为上下两段） */
.opp-melds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

/* 吃碰杠本身一排（花牌条与它平级，DOM 顺序决定花牌在前/在上） */
.opp-meld-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

/* 左右两家：花牌在上、吃碰杠在下；花牌一行 4 张，超出换行 */
.mid-row .opp-left .opp-melds,
.mid-row .opp-right .opp-melds {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.mid-row .opp-left .flower-row,
.mid-row .opp-right .flower-row {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  gap: 2px;
}

/* 四家头像：名字首字 + 风位角标，颜色按座位区分，点击查看资料 */
.seat-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: linear-gradient(150deg, var(--av-c1), var(--av-c2));
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}

button.seat-avatar {
  font: inherit;
}

.seat-avatar .av-face {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.seat-avatar .av-wind {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #ffe9a8;
  background: #0a3322;
  border: 1px solid var(--gold);
}

.av-seat-0 { --av-c1: #e7c873; --av-c2: #a8812c; }
.av-seat-1 { --av-c1: #4fce8d; --av-c2: #1e8a52; }
.av-seat-2 { --av-c1: #5aa0e8; --av-c2: #27609e; }
.av-seat-3 { --av-c1: #e28ac4; --av-c2: #9c4478; }

.seat-avatar.is-off {
  filter: grayscale(0.7) brightness(0.65);
}

.seat-avatar.is-empty {
  background: rgba(255, 255, 255, 0.06);
  border-style: dashed;
  cursor: default;
  box-shadow: none;
}

.seat-avatar.is-empty .av-face {
  color: var(--muted);
  text-shadow: none;
}

.opp.is-active .seat-avatar {
  box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(232, 198, 106, 0.55);
}

.seat-avatar.av-lg {
  width: 54px;
  height: 54px;
}

.seat-avatar.av-lg .av-face {
  font-size: 24px;
}

.seat-avatar.av-lg .av-wind {
  min-width: 19px;
  height: 19px;
  font-size: 11px;
}

.opp-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  max-width: 100%;
}

.hand-backs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1px;
  max-width: 100%;
}

/* 对家（上方）：手牌背面在面板里水平居中（横屏由 JS 按桌面宽度精确定位） */
.side-row .opp .opp-hand {
  align-self: center;
  justify-content: center;
}

/* 左右两家：背面牌竖排居中 —— 左家逆时针 90°、右家顺时针 90°。
   盒子宽高对调后再旋转，视觉上是一摞侧躺的牌，沿竖直方向紧密叠放 */
.mid-row .opp-left .opp-hand,
.mid-row .opp-right .opp-hand {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.mid-row .opp-left .hand-backs,
.mid-row .opp-right .hand-backs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
}

.mid-row .opp-left .opp-hand .tile,
.mid-row .opp-right .opp-hand .tile {
  flex: 0 0 auto;
  width: var(--th);
  height: calc(var(--th) * var(--tar));
}

.mid-row .opp-left .opp-hand .tile {
  transform: rotate(-90deg);
}

.mid-row .opp-right .opp-hand .tile {
  transform: rotate(90deg);
}

/* 中央桌面：对家弃牌在顶、左右分列；计时器在桌面几何正中，
   牌墙/局数贴其下，自家弃牌再往下；环上箭头指向当前出牌的一家
   ┌──────── 对家弃牌 ────────┐
   │ 左家 │   ◄ 倒计时 ►  │ 右家 │
   │      │  牌墙·局数·庄     │
   │      │   自家弃牌(居中)   │ */
.center-col {
  /* 桌面顶缘与左右玩家头像顶部齐平（opp 内边距 2px） */
  position: relative;
  margin-top: 2px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    'top  top   top'
    'left core  right';
  align-items: center;
  justify-items: center;
  gap: 4px 6px;
  padding: 6px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, rgba(28, 122, 82, 0.5), rgba(4, 25, 15, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.center-discard {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.cd-top {
  grid-area: top;
}

/* 自家弃牌：绝对定位在计时器/局数文字正下方，水平居中，底部留 6px */
.cd-bottom {
  position: absolute;
  top: calc(50% + 52px);
  left: 8px;
  right: 8px;
  bottom: 6px;
  justify-content: center;
  align-items: flex-start;
}

.cd-bottom .cd-tiles {
  justify-content: center;
}

.cd-left {
  grid-area: left;
}

.cd-right {
  grid-area: right;
}

.cd-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
}

.cd-tiles {
  display: grid;
  position: relative;
  grid-template-columns: repeat(8, auto);
  justify-content: start;
  gap: 2px;
  min-width: 0;
  /* 刚打出的牌要放大亮出，故不裁切；多余张数由 .center-col 的 overflow 兜底 */
  overflow: visible;
}

/* 刚打出的牌：先在出牌方那一侧的弃牌最前位放大亮出，再回落到池中的正常大小 */
.cd-tiles .live-discard {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: 0 0;
  filter: drop-shadow(0 0 6px rgba(232, 198, 106, 0.9));
  animation: live-discard-pop 0.9s ease-out both;
}

@keyframes live-discard-pop {
  0% { transform: scale(2.2); opacity: 0; }
  22% { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(1.3); opacity: 1; }
}

.cd-empty {
  font-size: 11px;
  color: var(--muted);
}

/* 左右两家位置窄，一排 3 张 */
.cd-left .cd-tiles,
.cd-right .cd-tiles {
  grid-template-columns: repeat(3, auto);
}

.center-discard .tile[data-last="1"] {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* 倒计时环：绝对定位于桌面几何正中（谁出牌的文字已去掉，改用环上箭头指示） */
.timer-ring {
  --p: 0;
  /* 环心到箭头中心的径向距离 = 半径29 + 箭头半高7 + 间隙2 */
  --arr-d: 38px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg),
    rgba(255, 255, 255, 0.12) 0);
}

/* 贴在计时器环上的方向箭头：以环心为基准沿径向摆出，正对上/下/左/右。
   注意选择器特异性要高于 .timer-ring span，否则会被其 position:relative 拉回流内 */
.timer-ring .turn-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 7px solid transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  animation: turn-pulse 1.1s ease-in-out infinite;
  pointer-events: none;
}

.timer-ring .turn-arrow.ta-up {
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--arr-d)));
  border-bottom-color: var(--gold);
}

.timer-ring .turn-arrow.ta-down {
  transform: translate(-50%, -50%) translateY(var(--arr-d));
  border-top-color: var(--gold);
}

.timer-ring .turn-arrow.ta-left {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--arr-d)));
  border-right-color: var(--gold);
}

.timer-ring .turn-arrow.ta-right {
  transform: translate(-50%, -50%) translateX(var(--arr-d));
  border-left-color: var(--gold);
}

@keyframes turn-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 牌墙 / 局数 / 庄：贴在计时环正下方，水平居中 */
.core-meta {
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted);
}

.timer-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #0d4430, #06231a);
  border: 1px solid rgba(232, 198, 106, 0.25);
}

.timer-ring.low {
  background: conic-gradient(#ff6b6b calc(var(--p) * 360deg),
    rgba(255, 255, 255, 0.12) 0);
}

.timer-ring span {
  position: relative;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}

.timer-ring.low span {
  color: #ffb3b3;
}

.core-meta b {
  font-size: 14px;
  color: var(--gold);
}

/* 我的区域（相对定位：头像行与操作条都脱离文档流悬浮在桌面上，
   文档流里只剩手牌行，腾出的高度让中央桌面一直延伸到头像底部） */
.my-area {
  --my-head-h: 40px;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}

/* 头像信息条：无框悬浮在手牌上方，底部与中央桌面下缘对齐（+行间距6px） */
.my-head {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  font-size: 13px;
}

.my-head .my-score {
  font-weight: 800;
  font-size: 14px;
  color: var(--gold);
}

/* 自家标签（庄/托管中/飘）与对手头像旁的小标签同尺寸 */
.my-head .tag {
  font-size: 9px;
  line-height: 14px;
  padding: 0 5px;
}

.my-tags {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

/* 底部行：手牌占满左侧，吃碰杠副露摊在右侧（操作按钮下方）。
   手牌尺寸以整行宽度（.my-bottom）为单位计算，与右侧副露多少无关；
   副露挤不下时整排折到手牌上方、靠右对齐（wrap-reverse：首行贴底） */
.my-bottom {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  /* 手牌原来的左右留白移到整行上：cqw 量到的手牌可用宽度与改造前完全一致 */
  padding: 0 8px;
  /* 手牌尺寸的宽度查询容器：用整行而不是手牌自身，
     这样右侧摊上副露后手牌尺寸保持恒定 */
  container-type: inline-size;
}

.my-bottom .hand-scroll {
  flex: 1 1 auto;
  min-width: 0;
}

/* 副露：小牌横成一排摊在手牌右边，不倾斜、不换行；折行时整排靠右 */
.my-melds {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  padding: 0 0 4px 2px;
}

.my-melds.is-empty {
  display: none;
}

.my-melds .tile {
  --th: 24px;
  --trad: 3px;
}

.my-melds .meld {
  flex: 0 0 auto;
  padding: 2px 3px;
  border-radius: 5px;
  background: rgba(8, 36, 24, 0.55);
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);
}

/* 操作区：整条脱离文档流悬浮在桌面下沿（与自家头像同一带）——
   提示居中、半透明；吃碰杠胡/开始游戏等按钮落在桌面右下角。
   容器本身不挡点击（pointer-events:none），只有按钮可点。 */
.action-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 8;
  min-height: 34px;
  /* 与悬浮头像行的底部齐平（头像行 bottom: 100% + 6px） */
  margin-bottom: 6px;
  padding: 2px 4px;
  pointer-events: none;
}

.act-hint {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 110px);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 半透明浅色，像浮在桌面上的水印提示 */
  color: rgba(236, 242, 234, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* 操作按钮：落在中间桌面（.center-col）的右下角 */
.act-btns {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  max-width: calc(100% - 16px);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  min-width: 62px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #3a2a05;
  background: linear-gradient(180deg, #e8c66a, #c19f42);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.act-btn:active {
  transform: scale(0.97);
}

.act-btn:disabled {
  opacity: 0.45;
}

.act-btn.hot {
  color: #fff;
  background: linear-gradient(180deg, #ff8a5b, #d9451f);
  border-color: rgba(255, 255, 255, 0.35);
}

.act-btn.ghost {
  color: var(--txt);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}

.act-btn.block {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* 图片按钮（设计稿切图：吃/碰/杠/胡/过/开始游戏）：
   按钮整体就是那张图，去掉底色与描边；尺寸跟桌面高度走，横竖屏都放得下 */
.act-btn.pic {
  --pic-h: clamp(34px, calc(var(--tbl-h, 100vh) * 0.145), 62px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  flex-direction: column;
  gap: 1px;
  color: var(--txt);
}

/* 横屏挡里 .act-btn 的 padding / 最小宽会撑到切图外面，这里收回来 */
body.compact-table .act-btn.pic {
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.act-btn.pic .pic-img {
  display: block;
  width: auto;
  height: var(--pic-h);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* 整宽场景（等待区 / 结果面板）：图居中并限宽，别被拉变形 */
.act-btn.pic.block .pic-img {
  width: min(100%, calc(var(--pic-h) * 4.6));
  height: auto;
}

.act-btn.pic .pic-tip {
  font-size: clamp(9px, calc(var(--tbl-h, 100vh) * 0.024), 12px);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.act-btn.pic:disabled .pic-img {
  filter: grayscale(0.55) brightness(0.85) opacity(0.55);
}

/* 下一局「开始游戏」：已选择开始、等待其他玩家时整颗按钮变灰变暗；
   再点一次取消开始，类名移除后恢复原样（提示文字不跟着变灰，保持可读） */
.act-btn.pic.is-wait .pic-img {
  filter: grayscale(1) brightness(0.55);
}
.act-btn.pic.is-wait:active .pic-img {
  filter: grayscale(1) brightness(0.45);
}

/* 「出牌」按钮：两张切图（亮/暗）都渲染，按是否选中手牌切换显示。
   选择器必须带 .act-btn.pic 前缀抬权重：上面的 `.act-btn.pic .pic-img`
   （0,3,0）会把图片压成 display:block，只写 `.pic-discard .pic-on`（0,2,0）
   会被覆盖，未选中时会同时露出两张图。
   暗图本身就是「不可用」的样子，所以不要再叠 :disabled 的置灰滤镜 */
.act-btn.pic.pic-discard .pic-on { display: none; }
.act-btn.pic.pic-discard .pic-off { display: block; }
.act-btn.pic.pic-discard.on .pic-on { display: block; }
.act-btn.pic.pic-discard.on .pic-off { display: none; }

.act-btn.pic.pic-discard:disabled {
  /* 暗图已表达「不可用」，不再整体降透明度 */
  opacity: 1;
}

.act-btn.pic.pic-discard:disabled .pic-img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.act-btn.pic.pic-discard:not(:disabled):active .pic-img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) brightness(1.08);
}

/* 手牌 */
.hand-scroll {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 16px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* cqw = .my-bottom（整行）的宽度，与副露多少无关，故手牌尺寸恒定。
   14 张牌总宽 = 14×0.638×th + 13×6(间隔) + 8(刚摸牌) + 16(容器padding)，
   另留 4px 余量 → 常数 106；写两行以兼容不支持 cqw 的旧浏览器 */
.hand-scroll .tile.sz-hand {
  --th: 60px;
  --th: min(60px, calc((100cqw - 106px) / 8.93));
}

/* 文成 16/17 张制：手牌多 3 张，间隔不变 → 常数 +18，系数 17×0.638 */
body.game-wencheng .hand-scroll .tile.sz-hand {
  --th: min(60px, calc((100cqw - 124px) / 10.846));
}

.hand-scroll::-webkit-scrollbar {
  height: 4px;
}

.hand-scroll::-webkit-scrollbar-thumb {
  background: rgba(232, 198, 106, 0.4);
  border-radius: 2px;
}

/* 刚摸到的牌与手牌之间的额外间隔（包一层，只占一份 margin，不再叠加 flex gap） */
.hand-drawn {
  display: flex;
  flex: 0 0 auto;
  margin-left: 8px;
}

/* 开局抓牌特效：每亮出一组（每次四张）就落桌一次，四组抓完即结束 */
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes dealInBack {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hand-scroll .tile[data-deal] {
  animation: dealIn 0.2s ease-out both;
}
/* 左右两家的背面牌靠 rotate 竖排，不能再动 transform，只做淡入 */
.opp-hand .tile[data-deal] {
  animation: dealInBack 0.2s ease-out both;
}

/* 等待开局面板（按设计稿：顶部房间信息行 + 四张座位卡 + 说明 + 中央大按钮） */
.waiting-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wait-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.wait-head b {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: 16px;
}

.seat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 座位卡：深墨绿卡面 + 细描边；自己那张描金并压一层暖色底 */
.wait-seat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(21, 63, 45, 0.92), rgba(8, 34, 24, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.28);
  min-height: 96px;
}

.wait-seat.is-me {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, rgba(232, 198, 106, 0.17), rgba(8, 34, 24, 0.94));
  box-shadow: 0 0 0 1px rgba(232, 198, 106, 0.3), 0 0 16px rgba(232, 198, 106, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wait-seat.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(4, 22, 15, 0.5);
}

/* 风位：金底深字的方块（设计稿里的「东/南/西/北」） */
.ws-wind {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #5a3d0a;
  background: linear-gradient(180deg, #ffeeb4 0%, #f0cb6c 48%, #d9a93b 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 「房主」标签：与风位同一套金底 */
.ws-owner {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #5a3d0a;
  background: linear-gradient(180deg, #ffeeb4 0%, #f0cb6c 48%, #d9a93b 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ws-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 26px;
}

.ws-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  min-width: 0;
}

/* 卡内头像：设计稿是圆角方形（沿用四家的座位配色） */
.ws-av {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.ws-av .av-img {
  border-radius: inherit;
}

.ws-av .av-face {
  font-size: 20px;
}

.ws-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ws-name {
  font-size: 17px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-score {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}

.ws-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1px;
}

.ws-actions {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.wait-seat.empty .ws-actions {
  margin-top: 0;
}

/* 空位卡里的「NPC 补位」：石墨灰胶囊 */
.btn-mini.npc {
  background: linear-gradient(180deg, rgba(120, 133, 128, 0.42), rgba(66, 78, 73, 0.5));
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--txt);
}

/* 底部按钮区：整块贴到面板下沿（设计稿里按钮落在下半屏），
   按钮居中、不撑满整屏宽 */
.wait-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.wait-actions > .act-btn.block,
.wait-actions > .res-section {
  width: min(100%, 340px);
}

.wait-actions > .act-btn.block {
  min-height: clamp(38px, calc(var(--tbl-h, 100vh) * 0.09), 52px);
  margin-top: 0;
}

/* 「开始游戏」：切图放大，作为这一屏的主按钮 */
.wait-actions .act-btn.pic {
  width: min(100%, 330px);
  --pic-h: clamp(44px, calc(var(--tbl-h, 100vh) * 0.17), 86px);
}

.wait-actions .act-btn.ghost.block {
  background: linear-gradient(180deg, rgba(52, 68, 61, 0.85), rgba(30, 44, 38, 0.9));
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--txt);
  font-weight: 700;
}

.wait-actions .act-btn.ghost.block:last-child {
  background: linear-gradient(180deg, rgba(122, 92, 38, 0.9), rgba(84, 62, 26, 0.92));
  border-color: rgba(232, 198, 106, 0.35);
  color: #ffe9a8;
}

/* 结算面板 */
.res-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}

.fan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.fan-tags .tag {
  font-size: 12px;
  padding: 3px 9px;
  background: rgba(232, 198, 106, 0.22);
  color: #ffe9a8;
}

/* 结算弹层：去掉顶部「谁胡」标题与摘要条。左列胡家、右列三家，
   两栏并排，宽度比单人排行版放宽一些，避免两列都挤成窄条 */
.sheet.is-result {
  width: min(94vw, 640px);
}

.sheet.is-result .sheet-body {
  padding: 12px;
}

.sheet.is-result .fan-tags,
.sheet.is-result .res-section {
  margin-bottom: 8px;
}

.sheet.is-result .delta-list {
  gap: 4px;
}

.sheet.is-result .delta-row {
  padding: 6px 10px;
}

.sheet.is-result .res-foot {
  margin-top: 8px;
  gap: 6px;
}

/* 结算弹层首行：番型标签 + 右上角关闭按钮同一行，按钮贴最右不额外占高 */
.res-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.res-head .fan-tags,
.res-head .sheet-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* 结算弹层首行也用全站统一的 .sheet-close 关闭叉，这里只需保证它不被压缩 */
.res-head .sheet-close {
  flex: 0 0 auto;
}

/* 横屏牌桌的结算弹层：竖屏那版是窄条，横屏会拉得又窄又长。
   这里放宽到整屏可用宽度，左列胡家（含牌型）右列三家并排 */
body.compact-table .sheet.is-result {
  /* 用百分比取容器宽（旋转兜底时容器宽是视口长边），再用 px 封顶 */
  width: min(96%, 900px);
}

body.compact-table .sheet.is-result .sheet-body {
  padding: 10px 14px;
}

body.compact-table .sheet.is-result .res-cols {
  gap: 5px 10px;
}

body.compact-table .sheet.is-result .res-foot {
  margin-top: 6px;
}

body.compact-table .sheet.is-result .draw-note {
  padding: 10px 0;
}

/* 结算两栏：左=胡牌家（牌型跟在下面），右=其余三家 */
.res-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}

.res-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* 左列只有半屏宽，花牌不再与手牌并排，改到手牌下方整行排 */
.res-col .win-line {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.res-section {
  margin-bottom: 10px;
}

.res-section-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.dec-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px;
  margin: 0 6px 6px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
}

.dec-group.is-pair {
  background: rgba(232, 198, 106, 0.16);
}

.dec-group .dec-tag {
  font-size: 10px;
  color: var(--muted);
  align-self: center;
  margin-left: 3px;
}

/* 胡牌：副露 + 手牌全部摊成一行，牌高随弹层宽度自适应（--fit-th 由 JS 按牌数算出），
   副露最多也能一屏放全；实在过窄时保留横滑兜底 */
.win-tiles {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(8, 36, 24, 0.5);
  border: 1px solid rgba(232, 198, 106, 0.18);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  container-type: inline-size;
}

.win-tiles .tile {
  --th: var(--fit-th, 26px);
  --trad: 3px;
}

.win-tiles .meld {
  flex: 0 0 auto;
  background: rgba(232, 198, 106, 0.12);
}

.win-tiles::-webkit-scrollbar {
  height: 4px;
}

.win-tiles::-webkit-scrollbar-thumb {
  background: rgba(232, 198, 106, 0.4);
  border-radius: 2px;
}

/* 头像个人信息弹层 */
.profile-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pn-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-sub {
  font-size: 12px;
  color: var(--muted);
}

.profile-rows {
  display: flex;
  flex-direction: column;
  margin: 12px 0 14px;
  border-radius: 10px;
  overflow: hidden;
}

.pf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
}

.pf-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}

.pf-k {
  color: var(--muted);
  flex: 0 0 auto;
}

.pf-v {
  font-weight: 700;
  text-align: right;
}

.delta-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.delta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.delta-row .d-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delta-row .d-val {
  font-weight: 800;
  font-size: 16px;
}

.delta-row .d-score {
  font-size: 11px;
  color: var(--muted);
}

/* 非胡家：牌面台只报总数，做成小胶囊贴在名字后面，不另起一行展开细则 */
.delta-row .d-face {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* 文成台制：每家行下方挂台数明细（牌面台逐项、胡家再加胡牌台逐项） */
.delta-row.has-detail {
  flex-wrap: wrap;
}

.d-detail {
  flex: 1 0 100%;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.d-detail .dd-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.d-detail .dd-label {
  flex: 0 0 auto;
  font-weight: 700;
  color: #ffe9a8;
}

.d-detail .dd-label b {
  font-size: 12px;
  color: var(--gold);
}

.d-detail .dd-items {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.d-detail .dd-item {
  white-space: nowrap;
}

.d-detail .dd-item b {
  margin-left: 2px;
  color: #ffe9a8;
}

/* 胡牌玩家那行：计台/得分文字换行挂在玩家后面 */
.delta-row.is-winner {
  flex-wrap: wrap;
  background: rgba(232, 198, 106, 0.14);
}

.d-tai {
  flex: 1 0 100%;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.d-tai b {
  font-size: 12px;
  color: var(--gold);
}

/* 胡牌牌型（副露 + 手牌）与花牌合成一行，紧贴在胡牌玩家下方 */
.win-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px;
}

.win-line .win-tiles {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px;
}

/* 花牌用固定小牌高：--fit-th 的 cqw 只在 .win-tiles 内有效，花牌在容器外不能复用 */
.win-line .flower-row .tile {
  --th: 15px;
  --trad: 2px;
}

.res-foot {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-note,
.finish-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.finish-note {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}

.draw-note {
  padding: 18px 0;
  text-align: center;
  font-size: 16px;
  color: var(--muted);
}

.chow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.chow-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}

.chow-opt:active {
  background: rgba(232, 198, 106, 0.2);
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.rank-row.is-me {
  border: 1px solid var(--gold);
}

.rank-row .rk-no {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(232, 198, 106, 0.85);
  color: #3a2a05;
}

.rank-row .rk-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading {
  margin: auto;
  color: var(--muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   桌面端适配
   -------------------------------------------------------------------------- */
@media (min-width: 760px) and (min-height: 600px) {
  .mid-row .opp-left,
  .mid-row .opp-right {
    flex: 0 0 118px;
    width: 118px;
  }

  /* 桌面端左右面板 118px，上方对家框的空轨道同步对齐 */
  .side-row {
    grid-template-columns: 118px minmax(0, 1fr) 118px;
  }

  .table-wrap {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  .hand-scroll .tile.sz-hand {
    --th: 70px;
    --th: min(70px, calc((100cqw - 106px) / 8.93));
  }

  body.game-wencheng .hand-scroll .tile.sz-hand {
    --th: min(70px, calc((100cqw - 124px) / 10.846));
  }

  .seat-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-height: 640px) {
  .hand-scroll .tile.sz-hand {
    --th: 52px;
    --th: min(52px, calc((100cqw - 106px) / 8.93));
  }

  body.game-wencheng .hand-scroll .tile.sz-hand {
    --th: min(52px, calc((100cqw - 124px) / 10.846));
  }

  .mid-row {
    min-height: 130px;
  }
}

/* --------------------------------------------------------------------------
   横屏牌桌
   body.compact-table：按横屏比例排布（真机横屏，或竖屏旋转兜底时）
   body.is-rotated   ：竖屏且无法锁定横屏，把整块旋转 90°，画面依旧正立
   -------------------------------------------------------------------------- */
body.is-rotated .room-rotor {
  --rw: 100vh;
  --rh: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--rw);
  height: var(--rh);
  /* 绕左上角顺时针转 90° 后，盒子的 x 落在 [-height, 0]，需右移自身「高度」才对齐屏幕左缘 */
  transform: translate(var(--rh), 0) rotate(90deg);
  transform-origin: 0 0;
}

@supports (height: 100dvh) {
  body.is-rotated .room-rotor {
    --rw: 100dvh;
    --rh: 100dvw;
  }
}

/* 旋转兜底时桌面高 = 视口宽（--rh），牌面尺寸据此走同一套比例 */
body.is-rotated .room-rotor {
  --tbl-h: var(--rh);
}

/* 顶栏压缩 */
/* 顶栏压成一行：房间号 / 密码 / 底分·局数·房主 并排，高度由 66px 降到约 32px */
body.compact-table .topbar {
  gap: 6px;
  padding: 3px 8px;
}

body.compact-table .topbar-main {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

body.compact-table .tb-row {
  flex: 0 0 auto;
  gap: 6px;
}

body.compact-table .tb-room {
  font-size: 11px;
}

body.compact-table .tb-room b {
  font-size: 14px;
}

body.compact-table .chip {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

body.compact-table .tb-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
}

body.compact-table .icon-btn {
  min-height: 26px;
  min-width: 42px;
  padding: 0 8px;
  font-size: 11px;
}

body.compact-table .table-wrap {
  gap: 4px;
  max-width: none;
  padding: 4px 8px 0;
}

/* 对家压成一行并锁定高度：头像/分数在左，花牌+吃碰杠贴右侧（向左生长），
   手牌居中、被副露顶到时由 JS 左移让位 */
body.compact-table .side-row .opp {
  position: relative;
  grid-column: 2;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px 10px;
  padding: 2px 6px;
  max-height: 42px;
  overflow: hidden;
}

body.compact-table .side-row .opp .opp-head {
  flex: 1 1 auto;
  min-width: 0;
  /* 单行铺满整行，花牌/吃碰杠靠 margin-left:auto 顶到右缘 */
  flex-wrap: nowrap;
  overflow: hidden;
}

/* 对家单行档：花牌与吃碰杠不再换行，贴右缘向左排（顶到手牌时手牌左移让位） */
body.compact-table .side-row .opp .opp-melds,
body.compact-table .side-row .opp .opp-meld-list {
  flex-wrap: nowrap;
}

body.compact-table .side-row .opp .opp-melds {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  justify-content: flex-end;
  overflow: hidden;
}

body.compact-table .side-row .opp .opp-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

body.compact-table .mid-row {
  min-height: 0;
  gap: 6px;
}

body.compact-table .mid-row .opp-left,
body.compact-table .mid-row .opp-right {
  /* 左右悬浮面板收窄，把宽度让给中央桌面 */
  flex: 0 0 82px;
  width: 82px;
  overflow: hidden;
}

body.compact-table .opp {
  gap: 2px;
  padding: 2px 3px;
  overflow: hidden;
}

/* 横屏头像收小，给桌面腾出高度 */
body.compact-table .seat-avatar {
  width: 28px;
  height: 28px;
  border-width: 1px;
}

body.compact-table .seat-avatar .av-face {
  font-size: 13px;
}

body.compact-table .seat-avatar .av-wind {
  right: -4px;
  bottom: -4px;
  min-width: 13px;
  height: 13px;
  font-size: 8px;
}

body.compact-table .opp .tag {
  font-size: 8px;
  line-height: 13px;
  padding: 0 4px;
}

/* 左右两家面板窄：花牌/吃碰杠单独占一段并右对齐，手牌背面图贴在底部 */
body.compact-table .mid-row .opp .opp-melds {
  flex: 1 1 100%;
  align-items: flex-end;
}

body.compact-table .mid-row .opp .opp-meld-list {
  justify-content: flex-end;
}

body.compact-table .mid-row .opp .opp-melds .meld:nth-last-child(n + 4) {
  display: none;
}

body.compact-table .mid-row .opp .opp-hand {
  margin-top: auto;
}

body.compact-table .opp-melds {
  gap: 2px;
}

body.compact-table .tile.sz-back {
  --th: clamp(11px, calc(var(--tbl-h) * 0.037), 15px);
  --trad: 2px;
}

/* 中央「桌面」：四家弃牌围着倒计时，固定三行三列，内容再多也不越界；
   顶缘与左右头像顶部齐平，下缘延伸到自家头像底部 */
body.compact-table .center-col {
  margin-top: 2px;
  column-gap: 4px;
  row-gap: 1px;
  padding: 3px 6px;
  box-shadow: inset 0 0 0 1px rgba(232, 198, 106, 0.12),
    inset 0 0 26px rgba(0, 0, 0, 0.45);
}

body.compact-table .center-discard {
  gap: 3px;
}

body.compact-table .cd-wind {
  width: 14px;
  height: 14px;
  font-size: 9px;
  border-radius: 4px;
}

/* 横屏中央区：弃牌随桌面高度缩放，一排 8 张始终放得下 */
body.compact-table .center-discard .tile.sz-xs {
  --th: clamp(18px, calc(var(--tbl-h) * 0.064), 26px);
  --trad: 2px;
  padding: 0;
}

body.compact-table .cd-tiles {
  gap: 1px;
  grid-template-columns: repeat(8, auto);
}

/* 横屏中央区够宽，左右两家也按一排 8 张排，四家保持一致 */
body.compact-table .cd-left .cd-tiles,
body.compact-table .cd-right .cd-tiles {
  grid-template-columns: repeat(8, auto);
}

body.compact-table .timer-ring {
  width: 42px;
  height: 42px;
}

/* 横屏环小（42px，半径21 + 箭头半高6 + 间隙2） */
body.compact-table .timer-ring {
  --arr-d: 29px;
}

body.compact-table .timer-ring .turn-arrow {
  border-width: 6px;
}

body.compact-table .timer-ring span {
  font-size: 15px;
}

/* 环 42px：牌墙/局数贴环下沿，弃牌区整体上提 */
body.compact-table .core-meta {
  top: calc(50% + 25px);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.compact-table .cd-bottom {
  top: calc(50% + 40px);
}

body.compact-table .core-meta b {
  font-size: 12px;
}

/* 横屏我的区域：头像行悬浮脱流，文档流只剩手牌+副露一行 */
body.compact-table .my-area {
  --my-head-h: 32px;
  position: relative;
  gap: 2px;
  padding-bottom: calc(2px + env(safe-area-inset-bottom));
}

body.compact-table .my-head {
  left: 4px;
  right: 4px;
  /* 底部与桌面下缘对齐（行间距 4px） */
  bottom: calc(100% + 4px);
  padding: 2px 4px;
  gap: 6px;
  min-width: 0;
}

body.compact-table .my-tags .tag {
  font-size: 9px;
  line-height: 14px;
  padding: 0 5px;
}

/* 副露贴在右手边（界面的右下角），挤不下时整排折到手牌上方，花牌已移到中间桌面左下角 */
body.compact-table .my-bottom {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
}

body.compact-table .my-melds {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  padding: 0 2px 1px 2px;
}

body.compact-table .my-melds .tile {
  --th: clamp(16px, calc(var(--tbl-h) * 0.058), 23px);
}

body.compact-table .my-melds .meld {
  padding: 1px 2px;
  transform: none;
}

body.compact-table .hand-scroll {
  flex: 1 1 auto;
  align-items: center;
  padding: 6px 0 2px;
  /* 横屏横向紧张，手牌之间收窄到 2px，腾出的宽度让牌更大 */
  gap: 2px;
}

/* 刚摸的牌仍与手牌留一点间隔，方便一眼看出是哪张 */
body.compact-table .hand-drawn {
  margin-left: 5px;
}

/* 横屏：操作条贴桌面下沿（与头像行齐平，头像行 bottom:100%+4px） */
body.compact-table .action-bar {
  min-height: 32px;
  margin-bottom: 4px;
  padding: 0 4px;
}

body.compact-table .act-hint {
  font-size: 12px;
}

/* 横屏按钮较窄，右下角内缩小一点 */
body.compact-table .act-btns {
  right: 6px;
  bottom: 6px;
  gap: 6px;
  max-width: calc(100% - 12px);
}

body.compact-table .act-btn {
  min-height: 34px;
  min-width: 50px;
  padding: 0 10px;
  font-size: 14px;
}

/* 手牌行收窄了顶部留白，选中时的上抬幅度同步收小，避免被 overflow 裁掉 */
body.compact-table .tile.is-selected {
  transform: translateY(-6px);
}

/* 旋转兜底时视口仍是竖屏，max-height 媒体查询不生效，
   所以横屏挡的手牌尺寸统一在这里按桌面高度等比给（--tbl-h 已处理旋转情形） */
body.compact-table .tile.sz-hand {
  --th: clamp(48px, calc(var(--tbl-h) * 0.176), 76px);
  /* 横屏：13×2(间隔) + 5(刚摸牌) + 8(padding) + 5 余量 = 44 */
  --th: min(clamp(48px, calc(var(--tbl-h) * 0.176), 76px),
    calc((100cqw - 44px) / 8.93));
}

/* 文成 16/17 张制（横屏）：16×2(间隔) + 5(刚摸牌) + 8(padding) + 5 余量 = 62 */
body.compact-table.game-wencheng .tile.sz-hand {
  --th: min(clamp(48px, calc(var(--tbl-h) * 0.176), 76px),
    calc((100cqw - 62px) / 10.846));
}

/* 等待开局面板：横屏下座位排成一行 */
body.compact-table .seat-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

body.compact-table .waiting-panel {
  gap: 8px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
}

body.compact-table .wait-seat {
  padding: 8px 10px;
  gap: 6px;
  min-height: 0;
}

body.compact-table .ws-av {
  width: 52px;
  height: 52px;
}

body.compact-table .ws-name {
  font-size: 18px;
}

body.compact-table .ws-empty {
  font-size: 22px;
}

/* ==========================================================================
   文成麻将：花牌区 / 财神指示条 / 抢杠胡 / 锁定牌
   ========================================================================== */

/* 财神提示：绝对定位于中间桌面 .center-col 的左上角。
   只显示财神牌面 + 「财神」标签，牌面上不加任何文字 */
.joker-bar {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 5px;
  border-radius: 9px;
  background: rgba(8, 30, 20, 0.82);
  border: 1px solid rgba(232, 198, 106, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  font-size: 10px;
  color: var(--muted);
}

.joker-bar .jb-cap {
  font-weight: 800;
  color: var(--gold);
}

/* 财神牌面与弃牌同尺寸（基础档 .tile.sz-xs 为 26px） */
.joker-bar .tile {
  --th: 26px;
  --trad: 2px;
  margin: 1px 0;
}

body.compact-table .joker-bar {
  top: 2px;
  left: 4px;
  font-size: 9px;
  gap: 2px;
  padding: 2px 5px 2px 4px;
}

/* 横屏：与 center-discard 的弃牌同尺寸 */
body.compact-table .joker-bar .tile {
  --th: clamp(18px, calc(var(--tbl-h) * 0.064), 26px);
}

/* 自家花牌区：贴在中间桌面 .center-col 的左下角（文成的春夏秋冬/梅兰竹菊
   与红中、发财等补花牌）。矮着桌面下缘、向上生长，牌多时自动折行不越界 */
.my-flower-zone {
  position: absolute;
  left: 6px;
  bottom: 5px;
  z-index: 3;
  max-width: 46%;
  display: flex;
  align-items: flex-end;
}

.my-flower-zone.is-empty {
  display: none;
}

/* 该处的花牌条不再用「贴在手牌右边」时的左分隔线 */
.my-flower-zone .flower-row {
  flex-wrap: wrap;
  max-width: 100%;
  row-gap: 2px;
}

body.compact-table .my-flower-zone {
  left: 4px;
  bottom: 3px;
  max-width: 44%;
}

body.compact-table .my-flower-zone .tile {
  --th: clamp(14px, calc(var(--tbl-h) * 0.05), 18px);
  --trad: 2px;
}

/* 花牌条：标签 + 花牌一排（xs），嵌入各玩家副露容器或结算弹层 */
.flower-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.flower-row .flower-cap {
  align-self: center;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  color: #3a2a05;
  background: linear-gradient(135deg, #ffe9a8, #c9a445);
  border-radius: 4px;
}

.flower-row .tile {
  --th: 18px;
  --trad: 2px;
}

.opp-melds.is-empty {
  display: none;
}

/* 花牌描边：与普通牌区分的暖色微光 */
.tile.is-flower {
  box-shadow: 0 1px 3px rgba(120, 72, 160, 0.35);
}

/* 文成手牌中的财神/花牌不可点击：去手型、轻微降饱和提示锁定 */
.tile.tile-locked {
  cursor: not-allowed;
  filter: saturate(0.82);
}

/* 海底捞月：中央局数信息变红强调 */
.core-meta.is-final {
  color: #ffb3b3;
  font-weight: 700;
}

.core-meta.is-final b {
  color: #ff8a8a;
}

/* 抢杠胡短窗：提示条与热键变红警示 */
.action-bar.is-qg .act-hint {
  color: #ffb3b3;
  font-weight: 700;
}

.action-bar.is-qg .btn.hot {
  border-color: #ff8a8a;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.45);
}