/* 上海敲麻 · 横屏暗夜金主题 */
:root {
  --gold: #D4AF37;
  --gold-light: #F0D060;
  --gold-dark: #A8860A;
  --red: #C0392B;
  --red-bright: #E74C3C;
  --green-table: #1A5C35;
  --green-dark: #0D3B20;
  --green-felt: #1E6B3C;
  --bg-dark: #0C1117;
  --bg-card: #161E2B;
  --bg-panel: #1A2435;
  --text-main: #F0EAD6;
  --text-dim: #8A9BB5;
  --border-gold: rgba(212,175,55,0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  height: 100%; width: 100%;
}

/* ===== 连接横幅 ===== */
.conn-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #7B2D2D; color: #FFC0C0;
  font-size: 13px; text-align: center; padding: 4px;
  display: none;
}
.conn-banner.show { display: block; }

/* ===== Toast ===== */
.toast-msg {
  position: fixed; top: 40%; left: 50%; transform: translateX(-50%);
  background: rgba(10,14,20,0.92); border: 1px solid var(--border-gold);
  color: var(--text-main); font-size: 14px;
  padding: 10px 24px; border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index: 300; white-space: nowrap;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.toast-msg.show { opacity: 1; }

/* ===== 视图切换 ===== */
.view { display: none; width: 100vw; height: 100vh; }
.view.active { display: flex; }

/* ===== 登录/注册(横屏) ===== */
.login-view, .register-view {
  flex-direction: row; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0C1117 0%, #0D2B1A 50%, #0C1117 100%);
  gap: 60px; padding: 40px;
}
.login-logo { text-align: center; }
.login-logo .logo-main {
  font-size: 44px; font-weight: 900; letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.5), 0 2px 4px rgba(0,0,0,0.6);
}
.login-logo .logo-sub {
  font-size: 13px; letter-spacing: 8px; color: var(--text-dim); margin-top: 8px;
}
.login-card {
  width: 340px;
  background: rgba(22,30,43,0.9);
  border: 1px solid var(--border-gold);
  border-radius: 16px; padding: 24px 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,175,55,0.1);
}
.form-group { margin-bottom: 14px; }
.form-label {
  font-size: 12px; color: var(--text-dim); letter-spacing: 1px;
  margin-bottom: 6px; display: block;
}
.form-input {
  width: 100%; padding: 10px 14px;
  background: rgba(12,17,23,0.8);
  border: 1px solid rgba(138,155,181,0.2);
  border-radius: 8px; color: var(--text-main);
  font-size: 15px; font-family: inherit;
  outline: none; transition: border-color .2s;
  -webkit-appearance: none;
}
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.1); }

.server-toggle {
  font-size: 12px; color: var(--text-dim); cursor: pointer;
  text-align: right; margin-bottom: 10px;
}
.server-toggle:hover { color: var(--gold); }

.btn-primary {
  width: 100%; padding: 12px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #B8860B, #D4AF37, #B8860B);
  color: #1A0F00; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer; letter-spacing: 2px;
  box-shadow: 0 4px 15px rgba(212,175,55,0.4);
  transition: transform .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  flex: 1; padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-main); font-size: 15px;
  font-family: inherit; cursor: pointer; letter-spacing: 1px;
  -webkit-appearance: none;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

.btn-guest {
  width: 100%; padding: 10px; border-radius: 8px;
  background: transparent; border: 1px solid rgba(212,175,55,0.2);
  color: var(--gold); font-size: 14px; font-family: inherit;
  cursor: pointer; letter-spacing: 1px; margin-top: 6px;
  -webkit-appearance: none;
}
.btn-guest:hover { background: rgba(212,175,55,0.08); }
.btn-row { display: flex; gap: 8px; margin-bottom: 10px; }
/* 登录↔注册 切换链接 */
.auth-switch {
  text-align: center; font-size: 13px; color: var(--gold);
  cursor: pointer; padding: 6px; letter-spacing: 1px;
}
.auth-switch:hover { color: var(--gold-light); }

/* ===== 大厅(横屏) ===== */
.lobby-view {
  flex-direction: column;
  background: linear-gradient(135deg, #0C1117 0%, #111827 100%);
}
.lobby-header {
  background: rgba(22,30,43,0.95); border-bottom: 1px solid var(--border-gold);
  padding: 10px 24px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.user-info { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #1A5C35, #0D3B20);
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--gold); font-weight: 700;
  flex-shrink: 0;
}
.user-name { font-size: 15px; font-weight: 600; }
.user-coin { font-size: 13px; color: var(--gold); margin-top: 2px; }

.lobby-body {
  flex: 1; padding: 20px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-content: start;
}
.section-title {
  grid-column: 1 / -1;
  font-size: 13px; letter-spacing: 3px; color: var(--text-dim);
  margin-bottom: 0;
}

.match-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px; padding: 24px 18px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .2s;
  -webkit-tap-highlight-color: rgba(212,175,55,0.1);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100px;
}
.match-card:active { transform: scale(0.98); }
.match-card-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.match-card-desc { font-size: 13px; color: var(--text-dim); }
.match-card-arrow {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--gold); opacity: 0.5; font-size: 20px;
}

.join-room-card {
  background: var(--bg-card);
  border: 1px solid rgba(138,155,181,0.15);
  border-radius: 16px; padding: 24px 18px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100px;
}
.join-room-row { display: flex; gap: 10px; margin-top: 10px; }
.room-code-input {
  flex: 1; padding: 10px 12px;
  background: rgba(12,17,23,0.8);
  border: 1px solid rgba(138,155,181,0.2);
  border-radius: 10px; color: var(--text-main);
  font-size: 18px; font-family: 'Courier New', monospace;
  letter-spacing: 4px; text-align: center; outline: none;
  -webkit-appearance: none;
}
.room-code-input:focus { border-color: var(--gold); }
.btn-join {
  padding: 10px 16px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #B8860B, #D4AF37);
  color: #1A0F00; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  -webkit-appearance: none;
}

.room-code-display {
  grid-column: 1 / -1;
  background: rgba(212,175,55,0.08);
  border: 1px dashed rgba(212,175,55,0.4);
  border-radius: 8px; padding: 8px 14px;
  font-size: 22px; font-family: 'Courier New', monospace;
  letter-spacing: 4px; color: var(--gold); text-align: center;
}

/* ===== 牌桌(横屏) ===== */
.table-view {
  flex-direction: column;
  background: #040608;
  position: relative; overflow: hidden;
}
/* table-title 已移除 */

.table-felt {
  flex: 1; display: flex; flex-direction: column;
  height: 100vh;
}

/* 桌面:木纹桌沿+墨绿绒面(哈灵风格加厚木框,顶部撑满) */
.table-surface {
  flex: 1; position: relative;
  margin: 0 2px 2px 2px;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(60,160,100,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at center, #1E7540 0%, #1A6838 35%, #126030 65%, #0D4A25 100%);
  border: 8px solid;
  border-image: linear-gradient(160deg, #5a3518, #3a1c08 30%, #2a1206 60%, #4a2a10) 1;
  border-radius: 0 0 12px 12px; border-style: solid;
  border-color: #3a1c08;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,0.25),
    inset 0 0 10px rgba(0,0,0,0.12),
    0 0 0 1.5px #5a3010,
    0 0 0 3px #1a0a02,
    0 0 0 5px rgba(90,48,16,0.3),
    0 4px 20px rgba(0,0,0,0.6);
  overflow: hidden;
}
.table-surface::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.03) 0%, transparent 55%);
  pointer-events: none; z-index: 1;
}

/* 座位区: 横屏 Grid — 宽侧栏放左/右家(哈灵比例) */
.seats-area {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 140px 1fr 140px;
  gap: 0;
  padding: 4px;
}
.seat { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; overflow: visible; }

/* 对家:顶行中间列 — 头像+信息+暗手牌居中排列 */
.seat-top {
  grid-row: 1; grid-column: 2;
  flex-direction: row; align-items: flex-start; justify-content: center;
  gap: 6px; padding: 2px 8px 0; flex-wrap: wrap;
}
/* 左家(上家) — 全高拉通,贴左侧 */
.seat-left {
  grid-row: 1 / 4; grid-column: 1;
  align-items: flex-start; justify-content: flex-start;
  padding: 4px 0 4px 4px; gap: 3px;
}
/* 右家(下家) — 全高拉通,贴右侧 */
.seat-right {
  grid-row: 1 / 4; grid-column: 3;
  align-items: flex-end; justify-content: flex-start;
  padding: 4px 4px 4px 0; gap: 3px;
}
/* 我(底行中间列):头像在左，手牌铺底 */
.seat-bottom {
  grid-row: 3; grid-column: 2;
  flex-direction: row; align-items: flex-end; justify-content: flex-start;
  gap: 8px; padding: 0 8px 4px; flex-wrap: nowrap;
}
/* 中心风向盘 */
.center-info {
  grid-row: 2; grid-column: 2;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 10;
}

/* ===== 哈灵风格圆形头像 ===== */
/* 大圆头像：用于四家主头像，CSS渐变+图标，四家不同主题色 */
.hl-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #fff;
  border: 2.5px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5), 0 3px 12px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.hl-avatar.active-turn {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 14px 4px rgba(212,175,55,0.65), 0 3px 12px rgba(0,0,0,0.5);
  animation: hl-turn-glow 1.6s ease-in-out infinite alternate;
}
@keyframes hl-turn-glow {
  from { box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 10px 2px rgba(212,175,55,0.45); }
  to   { box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 20px 6px rgba(212,175,55,0.8); }
}
.hl-avatar.knocked {
  border-color: var(--red-bright) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 12px 3px rgba(231,76,60,0.6);
}
/* 庄家角标 */
.hl-avatar .hl-dealer-badge {
  position: absolute; bottom: 0; right: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #D4A030, #B8860B);
  border: 1.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* 四家主题色 */
.hl-avatar.avatar-top    { background: radial-gradient(circle at 40% 35%, #5a8fd4, #2a5a9c); }
.hl-avatar.avatar-left   { background: radial-gradient(circle at 40% 35%, #5ab85a, #2a7a2a); }
.hl-avatar.avatar-right  { background: radial-gradient(circle at 40% 35%, #d45a5a, #9c2a2a); }
.hl-avatar.avatar-bottom { background: radial-gradient(circle at 40% 35%, #d4a030, #8c6010); }

/* 侧面小头像（左/右家，空间紧） */
.seat-left .hl-avatar,
.seat-right .hl-avatar {
  width: 44px; height: 44px; font-size: 16px;
}
.seat-left .hl-avatar .hl-dealer-badge,
.seat-right .hl-avatar .hl-dealer-badge { width: 15px; height: 15px; font-size: 8px; }

/* ===== 哈灵风格座位面板 ===== */
.hl-seat-panel {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0;
}
/* 对家：头像+信息横向排列 */
.seat-top .hl-seat-panel {
  flex-direction: row; align-items: flex-start; gap: 6px;
}
/* 左家：面板整体居左贴边 */
.seat-left .hl-seat-panel {
  align-items: flex-start;
}
/* 右家：面板整体居右贴边 */
.seat-right .hl-seat-panel {
  align-items: flex-end;
}
/* 我：头像+信息横排，贴底左 */
.seat-bottom .hl-seat-panel {
  flex-direction: row; align-items: flex-end; gap: 6px;
}

/* 头像右侧/下方的信息文字区 */
.hl-seat-info {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.hl-seat-name {
  font-size: 12px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  white-space: nowrap; max-width: 80px;
  overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.hl-seat-score {
  font-size: 13px; font-weight: 800; color: #FFD700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  line-height: 1;
}
.hl-seat-flower {
  font-size: 12px; color: #FF6B6B; font-weight: 800;
  line-height: 1;
}
.hl-seat-extra {
  font-size: 10px; color: rgba(255,255,255,0.55);
  line-height: 1;
}
/* 对家：信息竖排在头像旁 */
.seat-top .hl-seat-info {
  padding-top: 2px;
}
/* 我：信息在头像右侧，靠底对齐 */
.seat-bottom .hl-seat-info {
  padding-bottom: 2px;
}
/* 风向badge（保留显示，但改小） */
.hl-wind-badge {
  display: inline-block; font-size: 9px; padding: 1px 4px; border-radius: 3px;
  background: rgba(212,175,55,0.18); color: var(--gold); font-weight: 700;
  line-height: 1.3;
}

/* 玩家信息条 */
.player-badge {
  background: rgba(8,12,16,0.8);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px; padding: 4px 8px;
  display: inline-flex; align-items: center; gap: 5px;
  backdrop-filter: blur(4px);
  white-space: nowrap; font-size: 12px;
  transition: border-color .3s, box-shadow .3s;
  flex-shrink: 0;
}
.seat-left .player-badge,
.seat-right .player-badge {
  font-size: 10px; padding: 3px 5px; gap: 3px;
  white-space: normal; max-width: 120px;
  flex-wrap: wrap;
}
.player-badge.active-turn {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212,175,55,0.35);
  animation: turn-glow 1.8s ease-in-out infinite alternate;
}
@keyframes turn-glow {
  from { box-shadow: 0 0 6px rgba(212,175,55,0.2); }
  to   { box-shadow: 0 0 12px rgba(212,175,55,0.5); }
}
.player-badge.knocked { border-color: var(--red-bright); }

.player-avatar-sm {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #1A5C35, #0D3B20);
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--gold); font-weight: 700; flex-shrink: 0;
}
.seat-left .player-avatar-sm,
.seat-right .player-avatar-sm { width: 22px; height: 22px; font-size: 9px; }
.player-name-sm { font-weight: 600; font-size: 12px; }
.player-hand-count { font-size: 10px; color: var(--text-dim); }
.wind-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(212,175,55,0.15); color: var(--gold); font-weight: 700;
}
.flower-badge {
  font-size: 9px; background: rgba(255,180,0,0.15);
  color: #FFB400; border-radius: 4px; padding: 1px 4px;
}

/* 庄家标记 */
.player-avatar-sm.dealer {
  border-color: var(--gold) !important;
  box-shadow: 0 0 6px rgba(212,175,55,0.6);
}
.dealer-tag {
  font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 3px;
  background: linear-gradient(135deg, #D4A030, #B8860B);
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
/* 金币 */
.player-coin { font-size: 9px; color: #FFD700; }

/* 刚摸的牌间隔(哈灵风格:明显间距,小屏可缩) */
.drawn-gap { width: 16px; flex-shrink: 2; min-width: 6px; }

/* 弃牌河(圈风盘四周,哈灵风格方阵) */
.river-zone {
  position: absolute; z-index: 3;
}
.river-top {
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
}
.river-bottom {
  top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
}
.river-left {
  right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
}
.river-right {
  left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
}

.discard-river {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  gap: 2px;
}
.river-left .discard-river,
.river-right .discard-river {
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: auto;
  grid-auto-flow: row;
}

/* 副露 */
.meld-group { display: inline-flex; gap: 1px; margin: 2px; align-items: flex-end; }

/* 对家暗手牌：一排绿色牌背(哈灵玉色)。对家(顶部)横排，左/右家竖列。 */
.opp-hand {
  display: flex; margin-top: 3px;
  flex-direction: row; flex-wrap: wrap; justify-content: center;
}
/* 左/右家：竖列紧凑排列，贴各自座位区 */
.seat-left .opp-hand,
.seat-right .opp-hand { flex-direction: column; flex-wrap: nowrap; align-items: center; }

/* 单张绿色牌背(3D物理感:每张独立,可见底边厚度) */
.opp-back {
  width: 28px; height: 38px;
  border-radius: 4px;
  background: linear-gradient(170deg, #3a9a60 0%, #2e7d4f 20%, #246b42 60%, #1b5e3a 100%);
  border: 1px solid #14502f;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 1px 0 0 #0e3d22,
    0 2px 0 0 #0a2e18,
    0 3px 0 0 #072010,
    0 4px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
  margin-right: 1px;
}
.seat-top .opp-back { width: 28px; height: 38px; margin-right: 1px; }
/* 左/右家竖列:独立牌,不重叠 */
.seat-left .opp-back,
.seat-right .opp-back {
  width: 36px; height: 22px;
  margin-right: 0; margin-bottom: 1px;
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 0 0 #0e3d22,
    2px 0 4px rgba(0,0,0,0.35);
}
.seat-left .opp-back:last-of-type,
.seat-right .opp-back:last-of-type { margin-bottom: 0; }

/* 牌墙条(哈灵风格：厚实3D绿色条,像侧面看到的一摞牌) */
.wall-bar {
  position: relative;
  width: 100%; height: 22px;
  border-radius: 4px;
  margin-top: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #4a9a6a 0%, #2e7d4f 30%, #1b5e3a 70%, #145030 100%);
  border: 1px solid #0e402a;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.4);
}
.seat-left .wall-bar,
.seat-right .wall-bar {
  width: 22px; height: 100%;
  margin-top: 0; margin-left: 4px;
  background: linear-gradient(90deg, #4a9a6a 0%, #2e7d4f 30%, #1b5e3a 70%, #145030 100%);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,0.2),
    inset -1px 0 0 rgba(0,0,0,0.3),
    2px 0 6px rgba(0,0,0,0.4);
}
.wall-fill {
  height: 100%;
  background: linear-gradient(90deg, #5aaa70, #8ac8a0, #5aaa70);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.seat-left .wall-fill,
.seat-right .wall-fill {
  width: 100% !important;
  height: var(--wall-pct, 100%);
  transition: height 0.3s ease;
}
.wall-num {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  line-height: 1;
}
.seat-left .wall-num,
.seat-right .wall-num {
  right: auto; top: auto; bottom: 2px; left: 50%;
  transform: translateX(-50%);
}

/* 圈风盘（哈灵风格：鲜明四色分区+深色内盘+大号数字） */
.wind-dial {
  width: 150px; height: 150px;
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.wind-dial-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -45deg,
    #D4577A 0deg 90deg,
    #4CAF50 90deg 180deg,
    #3A7BD5 180deg 270deg,
    #D4A030 270deg 360deg
  );
  opacity: 0.92;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}
.wind-dial-inner {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #1a2238, #0a0e1a);
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.hu-type {
  font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 700;
  line-height: 1; letter-spacing: 2px;
}
.remain-count {
  font-size: 42px; font-weight: 900; color: #ff8c00;
  line-height: 1; margin-top: 1px;
  text-shadow: 0 0 14px rgba(255,140,0,0.4), 0 0 6px rgba(255,140,0,0.2);
  font-family: 'Courier New', monospace;
}
.treasure-tag {
  position: absolute; bottom: -6px; right: -6px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #fff; font-size: 10px; font-weight: 900;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px rgba(255,215,0,0.8), 0 1px 3px rgba(0,0,0,0.5);
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  animation: treasure-pulse 1.5s ease-in-out infinite;
}
@keyframes treasure-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,215,0,0.8); }
  50% { transform: scale(1.15); box-shadow: 0 0 16px rgba(255,215,0,1); }
}
.wind-label {
  position: absolute; z-index: 2;
  font-size: 15px; font-weight: 900;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  transition: color 0.3s, text-shadow 0.3s;
}
.wind-label.active {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 20px rgba(212,175,55,0.6);
  font-size: 17px;
}
.wl-east  { top: 1px; left: 50%; transform: translateX(-50%); }
.wl-south { right: 1px; top: 50%; transform: translateY(-50%); }
.wl-west  { bottom: 1px; left: 50%; transform: translateX(-50%); }
.wl-north { left: 1px; top: 50%; transform: translateY(-50%); }
/* 读秒环 */
.countdown-ring {
  position: absolute; inset: 0;
  width: 150px; height: 150px;
  z-index: 3; pointer-events: none;
  display: none;
}
.cd-track {
  fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3;
}
.cd-bar {
  fill: none; stroke: var(--gold); stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.6));
  transition: stroke-dashoffset 0.45s linear;
}
.cd-bar.urgent {
  stroke: var(--red-bright);
  filter: drop-shadow(0 0 6px rgba(231,76,60,0.6));
  animation: pulse-cd .6s ease-in-out infinite alternate;
}
/* 读秒数字:居中、大号白字,≤5秒转红色脉动 */
.cd-text {
  fill: #fff;
  font-size: 40px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.cd-text.urgent {
  fill: var(--red-bright);
  animation: pulse-cd .6s ease-in-out infinite alternate;
}
@keyframes pulse-cd { from { opacity: 1; } to { opacity: 0.5; } }

/* 好友房等待室浮层 */
.room-wait-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
}
.room-wait-card {
  background: linear-gradient(160deg, #1c2230, #11151e);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 16px;
  padding: 32px 48px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  min-width: 360px;
}
.room-wait-title { font-size: 20px; font-weight: 700; color: #e8e8e8; margin-bottom: 18px; }
.room-wait-code {
  font-size: 56px; font-weight: 900; letter-spacing: 10px;
  color: var(--gold, #f5c542); text-shadow: 0 0 16px rgba(212,175,55,0.5);
  margin-bottom: 14px;
}
.room-wait-hint { font-size: 14px; color: var(--text-dim, #9aa3ad); margin-bottom: 6px; }
.room-wait-status { font-size: 13px; color: #8fae8f; margin-bottom: 22px; }
.room-wait-btns { display: flex; gap: 14px; margin-bottom: 14px; }
.room-wait-btn {
  padding: 12px 26px; border-radius: 10px; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
  background: #2a3344; color: #e8e8e8;
}
.room-wait-btn.primary { background: linear-gradient(135deg, #f5c542, #e0a020); color: #1a1a1a; }
.room-wait-btn.ghost { background: transparent; color: var(--text-dim, #9aa3ad); border: 1px solid rgba(255,255,255,0.15); font-size: 13px; padding: 8px 20px; }

/* 花数徽章(哈灵风格:花朵图标+大号数字) */
.flower-count {
  font-size: 12px; font-weight: 800;
  color: #FF6B6B;
  background: rgba(255,100,100,0.12);
  border-radius: 8px; padding: 2px 6px;
  white-space: nowrap;
}
.flower-count::before {
  content: '🌸';
  font-size: 11px; margin-right: 2px;
}

/* 动作按钮栏:悬浮在桌面底部(手牌上方)，不占布局空间 */
.action-bar {
  display: flex; justify-content: center; gap: 10px; padding: 8px 12px;
  flex-wrap: wrap; position: absolute; left: 0; right: 0; bottom: 8px; z-index: 30;
  pointer-events: none;
}
.action-bar .action-btn { pointer-events: auto; }
.action-btn {
  padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; font-family: inherit; letter-spacing: 2px;
  transition: transform .15s, box-shadow .15s;
  -webkit-appearance: none; min-width: 50px;
}
.action-btn:active { transform: scale(0.94); }
.action-btn.hu {
  background: linear-gradient(135deg, #C0392B, #E74C3C);
  color: #fff; box-shadow: 0 3px 12px rgba(192,57,43,0.5);
  font-size: 17px; padding: 10px 22px;
  animation: hu-pulse 1s ease-in-out infinite alternate;
}
@keyframes hu-pulse {
  from { box-shadow: 0 3px 12px rgba(192,57,43,0.5); }
  to   { box-shadow: 0 3px 20px rgba(231,76,60,0.7); }
}
.action-btn.pong {
  background: linear-gradient(135deg, #B8860B, #D4AF37);
  color: #1A0F00; box-shadow: 0 3px 10px rgba(212,175,55,0.4);
}
.action-btn.kong {
  background: linear-gradient(135deg, #6B1A1A, #9B2D2D);
  color: #FFD700; box-shadow: 0 3px 10px rgba(107,26,26,0.5);
}
.action-btn.angang {
  background: linear-gradient(135deg, #2D1A6B, #4E2DE5);
  color: #D4B8FF; box-shadow: 0 3px 10px rgba(45,26,107,0.5);
}
.action-btn.addkong {
  background: linear-gradient(135deg, #6B4A1A, #9B6D2D);
  color: #FFD700; box-shadow: 0 3px 10px rgba(107,74,26,0.5);
}
.action-btn.knock {
  background: linear-gradient(135deg, #1A4A8A, #2E5CE5);
  color: #fff; box-shadow: 0 3px 10px rgba(26,74,138,0.5);
}
.action-btn.pass {
  background: rgba(138,155,181,0.15); color: var(--text-dim);
  border: 1px solid rgba(138,155,181,0.25);
}

/* 手牌区(哈灵风格:底部暗背景+微光) */
.hand-area {
  padding: 2px 8px 6px;
  background: linear-gradient(0deg, rgba(6,8,12,0.97) 0%, rgba(6,8,12,0.6) 70%, transparent 100%);
  position: relative; z-index: 20;
  flex-shrink: 0;
}
.hand-tiles {
  display: flex; gap: 2px; justify-content: center; flex-wrap: nowrap;
  overflow: hidden; padding: 2px 4px;
  max-width: 100%;
}

/* 手牌(哈灵风格:大尺寸+厚实3D立体,允许缩小适配小屏) */
.tile {
  flex-shrink: 1;
  width: 62px; min-width: 36px; height: 86px;
  border-radius: 5px;
  background: linear-gradient(175deg, #ffffff 0%, #f5f0e0 40%, #ede5cc 80%, #ddd5b8 100%);
  border: 1px solid #c0b898;
  cursor: pointer; position: relative;
  transition: transform .2s cubic-bezier(.22,.68,0,1.3), box-shadow .2s;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.6),
    0 1px 0 0 #d8d0b0,
    0 2px 0 0 #c8c0a0,
    0 3px 0 0 #b8b090,
    0 4px 0 0 #a8a080,
    0 5px 0 0 #989870,
    0 7px 14px rgba(0,0,0,0.45);
}
.tile:active {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 0 0 #d0c8a8,
    0 2px 0 0 #c0b898,
    0 3px 0 0 #b0a880,
    0 4px 0 0 #a09870,
    0 10px 20px rgba(0,0,0,0.45);
  z-index: 10;
}
.tile.disabled {
  opacity: 0.35; pointer-events: none;
  filter: grayscale(0.6);
}
/* 报听选牌:可打的牌金色高亮+上浮,提示玩家点它报听 */
.tile.knock-pick {
  transform: translateY(-8px);
  border-color: #f5c542;
  box-shadow:
    0 0 0 2px #f5c542,
    0 0 14px 3px rgba(245,197,66,0.75),
    0 10px 18px rgba(0,0,0,0.45);
  z-index: 9;
}
.tile-img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  border-radius: 4px;
}

/* 弃牌(3D物理感:可见底边厚度+投影) */
.discard-tile {
  width: 28px; height: 36px;
  display: inline-block;
  background: linear-gradient(175deg, #f8f4e8 0%, #ede5cc 50%, #ddd5b8 100%);
  border: 1px solid #b8b098;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 0 0 #c8c0a0,
    0 2px 0 0 #b0a880,
    0 3px 0 0 #989068,
    0 4px 6px rgba(0,0,0,0.35);
}
.discard-img {
  width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
  border-radius: 2px;
}

/* 我方副露分隔线 */
.meld-sep {
  width: 2px; height: 68px; align-self: center;
  background: rgba(212,175,55,0.3); border-radius: 1px;
  margin: 0 6px; flex-shrink: 0;
}

/* 副露(中等尺寸,3D物理感) */
.meld-tile {
  width: 32px; height: 42px;
  display: inline-block;
  background: linear-gradient(175deg, #f8f4e8 0%, #ede5cc 50%, #ddd5b8 100%);
  border: 1px solid #b8b098;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 0 0 #c8c0a0,
    0 2px 0 0 #b0a880,
    0 3px 0 0 #989068,
    0 4px 6px rgba(0,0,0,0.3);
}
.meld-tile.concealed {
  background: url('tiles/Back.svg') center/contain no-repeat, linear-gradient(175deg, #1a5530, #0e3820);
  border-color: #0a2818;
}
.meld-img {
  width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.flower-tile {
  border-color: #4a9; box-shadow: 0 0 4px rgba(68,170,136,0.4), 0 1px 0 #c0b898;
}

/* 副露横牌(被吃/碰/杠的那张):横放,哈灵风格紧凑。
   容器宽=牌高、高=牌宽+少许余量,牌旋转90°后刚好填满。 */
.meld-rot {
  width: 42px; height: 34px;
  display: inline-flex; align-items: flex-end; justify-content: center;
  background: none; border: none; box-shadow: none;
  position: relative;
}
.meld-rot .meld-img {
  width: 30px; height: 40px;
  transform: rotate(90deg);
  transform-origin: center center;
  position: absolute; bottom: -3px; left: 1px;
  border-radius: 3px;
  background: linear-gradient(175deg, #f0ecdc 0%, #ddd8c0 100%);
  border: 1px solid #b8b098;
  box-shadow: 0 1px 0 #c0b898, 0 2px 3px rgba(0,0,0,0.25);
}

/* 对家副露/花牌 */
.opp-melds { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0; }
.opp-flowers { display: flex; align-items: flex-end; gap: 1px; flex-wrap: wrap; }
/* 对家/左右家区域:副露缩小,横牌同比缩 */
.opp-melds .meld-tile, .opp-flowers .meld-tile { width: 24px; height: 32px; }
.opp-melds .meld-rot { width: 32px; height: 26px; }
.opp-melds .meld-rot .meld-img { width: 22px; height: 30px; bottom: -2px; left: 1px; }

/* === 左右家:副露/花牌竖排(和手牌backs同方向),牌面旋转90°填满容器 === */
.seat-left .opp-melds,
.seat-left .opp-flowers { flex-direction: column; align-items: flex-start; gap: 1px; }
.seat-left .meld-group { flex-direction: column; margin: 1px; }
.seat-left .opp-melds .meld-tile,
.seat-left .opp-flowers .meld-tile {
  width: 36px; height: 22px; position: relative; overflow: hidden;
}
.seat-left .opp-melds .meld-tile .meld-img,
.seat-left .opp-flowers .meld-tile .meld-img {
  position: absolute; width: 22px; height: 36px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  object-fit: contain;
}
.seat-left .opp-melds .meld-rot {
  width: 22px; height: 36px; overflow: visible;
}
.seat-left .opp-melds .meld-rot .meld-img {
  width: 22px; height: 36px;
  top: 0; left: 0;
  transform: none; position: static;
}

.seat-right .opp-melds,
.seat-right .opp-flowers { flex-direction: column; align-items: flex-end; gap: 1px; }
.seat-right .meld-group { flex-direction: column; margin: 1px; }
.seat-right .opp-melds .meld-tile,
.seat-right .opp-flowers .meld-tile {
  width: 36px; height: 22px; position: relative; overflow: hidden;
}
.seat-right .opp-melds .meld-tile .meld-img,
.seat-right .opp-flowers .meld-tile .meld-img {
  position: absolute; width: 22px; height: 36px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: contain;
}
.seat-right .opp-melds .meld-rot {
  width: 22px; height: 36px; overflow: visible;
}
.seat-right .opp-melds .meld-rot .meld-img {
  width: 22px; height: 36px;
  top: 0; left: 0;
  transform: none; position: static;
}

/* 对家副露:不旋转,保持可读(2D平面SVG旋转180°不自然) */
/* 弃牌:全部正面朝上,保持可读(2D无3D厚度,旋转效果差) */

/* ===== 结算(横屏) ===== */
/* 结算页（哈灵风格横排表） */
.settle-view {
  flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0C1117 0%, #0D2B1A 100%);
  padding: 16px 24px;
}
.settle-container {
  width: 100%; max-width: 1100px;
  display: flex; flex-direction: column; gap: 0;
}

/* Banner */
.settle-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; margin-bottom: 8px;
}
.settle-banner-type {
  font-size: 26px; font-weight: 900; color: var(--gold);
  text-shadow: 0 0 16px rgba(212,175,55,0.4);
  letter-spacing: 3px;
}
.settle-banner-detail {
  font-size: 14px; color: var(--text-dim); font-weight: 500;
}

/* Table header */
.settle-table-header {
  display: flex; align-items: center;
  padding: 6px 12px;
  background: rgba(212,175,55,0.08);
  border-bottom: 1px solid var(--border-gold);
  font-size: 11px; color: var(--text-dim); font-weight: 600;
  letter-spacing: 1px;
}

/* Column layout */
.stcol-player { width: 120px; flex-shrink: 0; }
.stcol-tiles  { flex: 1; min-width: 0; }
.stcol-base   { width: 70px; text-align: center; flex-shrink: 0; }
.stcol-mul    { width: 70px; text-align: center; flex-shrink: 0; }
.stcol-total  { width: 90px; text-align: right; flex-shrink: 0; font-weight: 700; }

/* Player rows */
.settle-table-body { display: flex; flex-direction: column; }
.settle-row {
  display: flex; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 56px;
}
.settle-row.winner {
  background: linear-gradient(90deg, rgba(212,175,55,0.08), rgba(212,175,55,0.03));
  border-left: 3px solid var(--gold);
}

/* Player info */
.settle-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #1A5C35, #0D3B20);
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--gold); font-weight: 700; flex-shrink: 0;
}
.settle-row .stcol-player {
  display: flex; align-items: center; gap: 8px;
}
.settle-name-wrap { display: flex; flex-direction: column; gap: 1px; }
.settle-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.settle-tags { display: flex; gap: 3px; }
.settle-tag {
  font-size: 9px; padding: 1px 4px; border-radius: 3px;
  font-weight: 600;
}
.settle-tag.dealer { background: rgba(212,175,55,0.2); color: var(--gold); }
.settle-tag.zimo { background: rgba(46,204,113,0.2); color: #2ECC71; }
.settle-tag.dianpao { background: rgba(231,76,60,0.2); color: var(--red-bright); }

/* Tiles */
.settle-fans-label {
  font-size: 10px; color: var(--gold); font-weight: 600;
  margin-bottom: 2px; letter-spacing: 1px;
}
.settle-tiles-row {
  display: flex; flex-wrap: wrap; gap: 1px; align-items: flex-end;
}
.settle-meld {
  display: inline-flex; gap: 0; margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.1); padding-right: 4px;
}
.settle-tile-img {
  width: 22px; height: 30px; object-fit: contain;
  border-radius: 2px;
  background: #f5f0e0; border: 0.5px solid #b0a080;
}
.settle-win-gap {
  width: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.settle-win-gap::after {
  content: ''; display: block;
  width: 2px; height: 24px; border-radius: 1px;
  background: rgba(255,68,68,0.5);
}
.settle-win-wrap {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  animation: settle-win-pop 0.5s ease-out;
}
.settle-win-tile {
  width: 28px !important; height: 38px !important;
  border: 2.5px solid #ff4444 !important;
  box-shadow: 0 0 12px rgba(255,68,68,0.8), 0 0 24px rgba(212,175,55,0.5);
  transform: translateY(-4px);
  background: linear-gradient(175deg, #fff8e0 0%, #f0e8c0 100%) !important;
}
.settle-win-tag {
  position: absolute; top: -10px; right: -8px;
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: #fff; font-size: 9px; font-weight: 900;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px rgba(255,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.3);
}
@keyframes settle-win-pop {
  0% { transform: scale(0.4) translateY(-4px); opacity: 0; }
  50% { transform: scale(1.2) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(-4px); }
}

/* Score columns */
.settle-row .stcol-base,
.settle-row .stcol-mul { font-size: 13px; color: var(--text-dim); }
.settle-row .stcol-total { font-size: 16px; }
.score-win { color: var(--gold) !important; }
.score-lose { color: #2ECC71 !important; }
.score-zero { color: var(--text-dim) !important; }

/* Bottom actions */
.settle-actions {
  display: flex; justify-content: center; gap: 16px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.btn-continue {
  padding: 12px 48px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #E67E22, #F39C12);
  color: #fff; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer; letter-spacing: 2px;
  box-shadow: 0 4px 16px rgba(243,156,18,0.3);
  -webkit-appearance: none;
}
.btn-continue:active { transform: scale(0.97); }

/* 牌谱按钮 */
.btn-gamelog {
  padding: 12px 32px; border-radius: 10px; border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold); font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; letter-spacing: 1px;
  -webkit-appearance: none;
}
.btn-gamelog:active { background: rgba(212,175,55,0.15); }

/* 牌谱浮层 */
.gamelog-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
.gamelog-panel {
  width: 92%; max-width: 600px; max-height: 85vh;
  background: #1a1a2e; border-radius: 12px;
  border: 1.5px solid rgba(212,175,55,0.3);
  overflow-y: auto; padding: 0;
}
.gamelog-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(212,175,55,0.2);
  font-size: 16px; font-weight: 700; color: var(--gold);
  position: sticky; top: 0; background: #1a1a2e; z-index: 1;
}
.gamelog-close {
  background: none; border: none; color: #aaa; font-size: 24px;
  cursor: pointer; padding: 0 4px; font-family: inherit;
  -webkit-appearance: none;
}
.gamelog-rivers { padding: 12px 16px; }
.gamelog-river-row {
  margin-bottom: 10px;
}
.gamelog-seat-label {
  font-size: 12px; font-weight: 700; color: var(--gold-light);
  margin-bottom: 4px;
}
.gamelog-river-tiles {
  display: flex; flex-wrap: wrap; gap: 3px;
}
.gamelog-tile {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
}
.gamelog-tile-img { width: 24px; height: auto; }
.gamelog-seq {
  font-size: 8px; color: rgba(255,255,255,0.4); line-height: 1;
}
.gamelog-hu-tile {
  background: rgba(255,50,50,0.3); border-radius: 3px;
  box-shadow: 0 0 6px rgba(255,50,50,0.5);
}
.gamelog-hu-tile .gamelog-seq { color: #ff6b6b; font-weight: 700; }
.gamelog-empty { font-size: 11px; color: rgba(255,255,255,0.3); }
.gamelog-section-title {
  font-size: 13px; font-weight: 700; color: var(--gold);
  padding: 8px 16px; border-top: 1px solid rgba(212,175,55,0.15);
}
.gamelog-timeline { padding-bottom: 12px; }
.gamelog-line {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 16px; font-size: 12px; color: rgba(255,255,255,0.7);
}
.gamelog-line:hover { background: rgba(255,255,255,0.05); }
.gamelog-line-seq { color: rgba(255,255,255,0.3); width: 28px; text-align: right; font-size: 10px; }
.gamelog-line-who { width: 36px; color: var(--gold-light); font-weight: 600; }
.gamelog-line-act { width: 32px; }
.gamelog-hu-act { color: #ff6b6b; font-weight: 700; }
.gamelog-line-tile { width: 20px; height: auto; }
.gamelog-line-note { color: #ff6b6b; font-size: 11px; font-weight: 600; }

/* 吃牌选择器 */
.chow-selector-overlay {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
}
.chow-selector {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: 14px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 200px;
}
.chow-selector-title {
  font-size: 14px; color: var(--gold); text-align: center;
  letter-spacing: 2px; font-weight: 600;
}
.chow-option {
  display: flex; gap: 4px; justify-content: center;
  cursor: pointer; padding: 6px 8px; border-radius: 8px;
  transition: background 0.15s;
}
.chow-option:hover { background: rgba(212,175,55,0.15); }
.chow-option-tile {
  width: 40px; height: 56px; border-radius: 4px;
  background: #fff; border: 1px solid #b0a080;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.chow-option-tile .tile-img { width: 100%; height: 100%; object-fit: contain; }
.action-btn.chi {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: #fff;
}
/* 弃牌高亮 */
.discard-tile.highlight {
  box-shadow: 0 0 8px rgba(212,175,55,0.7), 0 0 16px rgba(212,175,55,0.3);
  border-color: var(--gold);
  animation: tile-glow 1s ease-in-out infinite alternate;
}
@keyframes tile-glow {
  from { box-shadow: 0 0 6px rgba(212,175,55,0.4); }
  to   { box-shadow: 0 0 14px rgba(212,175,55,0.8), 0 0 20px rgba(212,175,55,0.3); }
}

/* 补花特效 */
.flower-effect {
  position: absolute; top: 35%; left: 50%;
  transform: translateX(-50%);
  font-size: 36px; font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(212,175,55,0.7), 0 2px 6px rgba(0,0,0,0.5);
  z-index: 100; pointer-events: none;
  animation: flower-float 1.5s ease-out forwards;
  letter-spacing: 6px;
}
@keyframes flower-float {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.7); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(-16px) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(1); }
}

/* 补花飞行动画 */
.flower-fly {
  position: absolute;
  width: 32px; height: 42px;
  z-index: 150; pointer-events: none;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(212,175,55,0.8), 0 0 4px rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
}
.flower-fly .meld-img {
  width: 100%; height: 100%;
  border-radius: 3px;
}
.flower-fly-me {
  animation: flower-fly-my 380ms ease-in-out forwards;
}
@keyframes flower-fly-my {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fly-dx)), calc(-50% + var(--fly-dy))) scale(0.8); }
}
.flower-fly-opp {
  animation: flower-fly-opp 360ms ease-out forwards;
}
@keyframes flower-fly-opp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* 碰/杠/吃/胡 飘字特效 */
.action-effect {
  position: absolute; top: 30%; left: 50%;
  transform: translateX(-50%);
  font-size: 56px; font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.6), 0 3px 8px rgba(0,0,0,0.7);
  z-index: 120; pointer-events: none;
  animation: action-pop 1.2s ease-out forwards;
  letter-spacing: 12px;
}
.action-hu {
  font-size: 72px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.9), 0 0 60px rgba(255,50,50,0.5), 0 3px 8px rgba(0,0,0,0.7);
  letter-spacing: 16px;
}
@keyframes action-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  20%  { opacity: 1; transform: translateX(-50%) scale(1.3); }
  40%  { opacity: 1; transform: translateX(-50%) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(1.0); }
}

/* 骰子动画 */
.dice-overlay {
  position: absolute; inset: 0; z-index: 150;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  animation: dice-fade 2.5s ease forwards;
}
@keyframes dice-fade {
  0%   { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.dice-box {
  display: flex; gap: 24px;
}
.die {
  width: 72px; height: 72px;
  border-radius: 14px;
  background: linear-gradient(145deg, #faf6eb, #e8e0c8);
  border: 2px solid #c0b898;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: #1a1a1a;
  transition: transform 0.3s;
}
.die.rolling {
  animation: dice-shake 0.15s linear infinite;
}
@keyframes dice-shake {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(12deg) scale(1.05); }
  50%  { transform: rotate(-8deg) scale(0.95); }
  75%  { transform: rotate(6deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}
.dice-label {
  margin-top: 16px;
  font-size: 20px; font-weight: 700;
  color: var(--text-main);
  letter-spacing: 3px;
  min-height: 28px;
}
.dice-label.treasure {
  color: var(--gold);
  font-size: 26px; font-weight: 900;
  text-shadow: 0 0 16px rgba(212,175,55,0.6), 0 2px 4px rgba(0,0,0,0.4);
  animation: treasure-glow 0.8s ease-in-out infinite alternate;
}
@keyframes treasure-glow {
  from { text-shadow: 0 0 12px rgba(212,175,55,0.4); }
  to   { text-shadow: 0 0 24px rgba(212,175,55,0.8), 0 0 40px rgba(212,175,55,0.3); }
}

/* ===== 创建好友房参数面板（对齐哈灵，横屏弹窗）===== */
.create-room-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65);
}
.create-room-panel {
  width: 92%; max-width: 720px; max-height: 88vh;
  background: var(--bg-card); border: 1.5px solid var(--border-gold);
  border-radius: 14px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.create-room-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--border-gold);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}
.create-room-title {
  font-size: 18px; font-weight: 700; color: var(--gold); letter-spacing: 2px;
}
.create-room-close {
  background: none; border: none; color: var(--text-dim); font-size: 22px;
  cursor: pointer; padding: 0 4px; font-family: inherit;
  -webkit-appearance: none;
}
.create-room-close:active { color: var(--gold); }
.create-room-body { padding: 12px 18px; display: flex; flex-direction: column; gap: 12px; }
.create-room-row { display: flex; align-items: flex-start; gap: 12px; }
.create-room-label {
  width: 54px; flex-shrink: 0; padding-top: 6px;
  font-size: 13px; color: var(--text-dim); font-weight: 600;
}
.create-room-options { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.cr-opt, .cr-check {
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--border-gold); background: var(--bg-panel);
  color: var(--text-main); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  -webkit-appearance: none; transition: background .15s, border-color .15s;
}
.cr-opt:active, .cr-check:active { transform: scale(0.97); }
.cr-opt.cr-active {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border-color: var(--gold-light); color: #1a1a1a;
}
.cr-check.cr-checked {
  background: rgba(46,204,113,0.18); border-color: #2ECC71; color: #2ECC71;
}
.cr-disabled {
  opacity: 0.42; cursor: not-allowed; pointer-events: none;
  filter: grayscale(0.7);
  position: relative; overflow: visible;
}
/* "即将开放"角标：贴灰显选项右上角，提示功能没做完而非坏了 */
.cr-soon {
  position: absolute; top: -7px; right: -6px;
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 8px;
  background: linear-gradient(135deg, #8a6d1a, #b89020);
  color: #fff8e0; letter-spacing: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  white-space: nowrap; pointer-events: none;
  opacity: 1; filter: none;
}
.create-room-footer {
  padding: 14px 18px; border-top: 1px solid var(--border-gold);
  display: flex; justify-content: center;
  position: sticky; bottom: 0; background: var(--bg-card);
}
.create-room-confirm {
  padding: 12px 56px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #E67E22, #F39C12);
  color: #fff; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer; letter-spacing: 3px;
  box-shadow: 0 4px 16px rgba(243,156,18,0.3);
  -webkit-appearance: none;
}
.create-room-confirm:active { transform: scale(0.97); }

/* ===== 多局连打：结算扩展 ===== */
.settle-round-tag {
  margin-left: auto; align-self: center;
  font-size: 14px; font-weight: 700; color: var(--gold-light);
  background: rgba(212,175,55,0.12); border: 1px solid var(--border-gold);
  border-radius: 16px; padding: 4px 14px; letter-spacing: 1px;
}
.settle-next-hint {
  font-size: 16px; font-weight: 700; color: var(--gold-light);
  letter-spacing: 2px; padding: 12px 0;
}
/* 总成绩排名 */
.settle-rank {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(212,175,55,0.06); border: 1px solid var(--border-gold);
  border-radius: 10px;
}
.settle-rank-title {
  font-size: 14px; font-weight: 700; color: var(--gold);
  letter-spacing: 2px; margin-bottom: 8px;
}
.settle-rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.settle-rank-row:last-child { border-bottom: none; }
.settle-rank-row.top {
  background: linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03));
  border-left: 3px solid var(--gold); border-radius: 4px;
}
.settle-rank-no {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-dim);
}
.settle-rank-row.top .settle-rank-no { color: var(--gold); }
.settle-rank-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1A5C35, #0D3B20);
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--gold); font-weight: 700;
}
.settle-rank-name { flex: 1; font-size: 13px; font-weight: 600; }
.settle-rank-score { font-size: 16px; font-weight: 700; text-align: right; }