/* ==========================================
   涓崕妫嬬墝 - 鍥芥疆绾㈤噾涓婚锛堢Щ鍔ㄧ閫傞厤锛?   ========================================== */

/* 閲嶇疆鍜屽熀纭€鏍峰紡 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* 鈥斺€?鍥芥疆绾㈤噾 璁捐浠ょ墝 鈥斺€?*/
  --lacquer-900: #1f0707;
  --lacquer-800: #3a0f0f;
  --lacquer-700: #5c1717;
  --lacquer-600: #7a1d1d;
  --vermilion: #c8312a;
  --vermilion-light: #e8503f;
  --vermilion-deep: #a01f1a;
  --gold-100: #fbe6b0;
  --gold-300: #f1d089;
  --gold-500: #e0b757;
  --gold-700: #b8893b;
  --cream: #f7ecd6;
  --cream-dim: #cdbb98;
  --jade: #2f7d63;
  --jade-deep: #1c5645;
  --ink: #160606;

  /* 鈥斺€?璇箟鑹诧紙閲嶅畾鍚戝埌鍥芥疆璋冩€э級鈥斺€?*/
  --primary: #c8312a;
  --primary-dark: #a01f1a;
  --secondary: #b8893b;
  --success: #2f7d63;
  --warning: #e0b757;
  --danger: #c0392b;
  --dark: #2a0c0c;
  --darker: #1a0808;
  --light: #f7ecd6;
  --white: #fbe6b0;
  --gold: #e0b757;

  /* 鈥斺€?楹诲皢鐗岃儗缁熶竴浠ょ墝锛堥搧寰嬶細妗岄潰鎵€鏈夌墝鑳岄潰鈥斺€旀墜鐗屾墸鑳?鐗屽/鍙戠墝闅愯棌鐗?娌崇墝鈥斺€?       鍙噯寮曠敤涓嬪垪鍙橀噺锛岀姝㈠啀鏁ｈ惤纭紪鐮佽壊鍊硷紝鍚﹀垯浼氬嚭鐜颁袱绉嶇墝鑳岄鑹诧級 鈥斺€?*/
  --tile-back-c1: #1f9a55;          /* 鐗岃儗寰勫悜娓愬彉 路 楂樺厜 */
  --tile-back-c2: #0f7a40;          /* 鐗岃儗寰勫悜娓愬彉 路 涓 */
  --tile-back-c3: #0a5a2c;          /* 鐗岃儗寰勫悜娓愬彉 路 娣卞簳 */
  --tile-back-edge: #e0b757;        /* 鐗岃儗閲戣竟 */
  --tile-back-edge-rgb: 224, 183, 87; /* 渚?rgba() 浣跨敤鐨勫崐閫忔槑閲戯紙= --tile-back-edge锛?*/
  --tile-back-dia1: #f0d27a;        /* 鑿卞舰绾规笎鍙?路 浜?*/
  --tile-back-dia2: #bd8a1f;        /* 鑿卞舰绾规笎鍙?路 鏆?*/
  --tile-back-sh1: #0c6a36;         /* 鍘氬害闃村奖 1 */
  --tile-back-sh2: #0a5429;         /* 鍘氬害闃村奖 2 */
  --tile-back-sh3: #073d1d;         /* 鍘氬害闃村奖 3 */
  --tile-back-sh4: #052e15;         /* 鍘氬害闃村奖 4 */

  --gradient-primary: linear-gradient(135deg, #c8312a 0%, #e8503f 100%);
  --gradient-gold: linear-gradient(135deg, #f1d089 0%, #e0b757 100%);
  --gradient-dark: linear-gradient(160deg, #3a0f0f 0%, #160606 100%);
  --gradient-lacquer: radial-gradient(120% 80% at 50% -10%, #3a1414 0%, #1a0808 55%, #0c0404 100%);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  --font-display: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  --font-serif: 'Noto Serif SC', serif;
  --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-sans);
  background: var(--gradient-lacquer);
  color: var(--cream);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* 绁ヤ簯鏆楃汗锛堥潪鐗屾椤甸潰閫氱敤锛?*/
.main-page::before,
.auth-page::before,
.game-page::before,
.room-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.10;
  background-image:
    radial-gradient(circle at 20% 30%, var(--gold-300) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, var(--gold-300) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, var(--gold-300) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 60%, var(--gold-300) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 85%, var(--gold-300) 0 2px, transparent 3px);
  background-size: 120px 120px, 160px 160px, 140px 140px, 180px 180px, 150px 150px;
}

/* 椤甸潰瀹瑰櫒 */
.page {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  background: var(--gradient-lacquer);
  z-index: 0;
}

.page.active {
  display: flex;
  flex-direction: column;
}

/* ==========================================
   鐧诲綍/娉ㄥ唽椤甸潰
   ========================================== */
.auth-page {
  background: var(--gradient-dark);
  justify-content: center;
  align-items: center;
  padding: 20px;
  padding-top: calc(20px + var(--safe-area-top));
  padding-bottom: calc(20px + var(--safe-area-bottom));
}

.auth-container {
  width: 100%;
  max-width: 400px;
  animation: slideUp 0.5s ease-out;
  position: relative;
  z-index: 1;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo鍖哄煙锛堝嵃绔狅級 */
.logo-section {
  text-align: center;
  margin-bottom: 36px;
}

.logo-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  background: linear-gradient(145deg, var(--vermilion), var(--lacquer-700));
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--gold-100);
  border: 1.5px solid var(--gold-500);
  box-shadow: inset 0 0 0 2px rgba(251,230,176,0.3), var(--shadow-lg);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.logo-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--gold-100);
  letter-spacing: 2px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin-bottom: 8px;
}

.logo-subtitle {
  font-size: 14px;
  color: var(--cream-dim);
}

/* 琛ㄥ崟鍗＄墖 */
.auth-card {
  background: linear-gradient(165deg, rgba(74,20,20,0.92), rgba(42,12,12,0.92));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  border: 1px solid rgba(224,183,87,0.4);
  box-shadow: var(--shadow-lg);
}

.auth-tabs {
  display: flex;
  background: rgba(0,0,0,0.35);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream-dim);
  transition: all 0.3s ease;
  cursor: pointer;
}

.auth-tab.active {
  background: var(--gradient-primary);
  color: var(--gold-100);
  box-shadow: var(--shadow-sm);
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  color: var(--cream-dim);
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(224,183,87,0.25);
  border-radius: var(--radius-md);
  color: var(--cream);
  font-size: 16px;
  font-family: var(--font-sans);
  transition: all 0.3s ease;
  -webkit-appearance: none;
}

.form-input:focus {
  outline: none;
  border-color: var(--gold-500);
  background: rgba(0,0,0,0.45);
  box-shadow: 0 0 0 3px rgba(224,183,87,0.2);
}

.form-input::placeholder {
  color: rgba(205,187,152,0.5);
}

/* 鎸夐挳鏍峰紡 */
.btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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

.btn-primary {
  background: var(--gradient-primary);
  color: var(--gold-100);
  border: 1px solid var(--gold-500);
  box-shadow: 0 4px 15px rgba(200,49,42,0.4);
}

.btn-primary:active {
  box-shadow: 0 2px 8px rgba(200,49,42,0.3);
}

.btn-gold {
  background: var(--gradient-gold);
  color: var(--lacquer-900);
  border: 1px solid var(--gold-700);
  box-shadow: 0 4px 15px rgba(224,183,87,0.3);
}
/* 杞埌鑷繁鍑虹墝鏃讹紝閲戣壊鈥滃嚭鐗屸€濇寜閽寔缁剦鍐诧紝鏄庣‘鎻愮ず鍙搷浣?*/
#discard-btn {
  animation: goldPulse 1.5s ease-in-out infinite;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 12px 18px;
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(224,183,87,0.35), 0 0 0 0 rgba(224,183,87,0.0); }
  50%      { box-shadow: 0 6px 24px rgba(224,183,87,0.75), 0 0 0 4px rgba(224,183,87,0.18); }
}

.btn-danger {
  background: linear-gradient(135deg, #e0413c 0%, #a01f1a 100%);
  color: var(--gold-100);
  border: 1px solid var(--gold-500);
  box-shadow: 0 4px 15px rgba(200,49,42,0.4);
}

.btn-success {
  background: linear-gradient(135deg, #3a9078 0%, #1c5645 100%);
  color: var(--gold-100);
  border: 1px solid var(--gold-500);
  box-shadow: 0 4px 15px rgba(47,125,99,0.35);
}

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

/* 鍒涘缓鎴块棿 - 娓告垙浜烘暟閫夋嫨 */
.player-count-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pc-option {
  flex: 1;
  min-width: 64px;
  padding: 12px 0;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(224,183,87,0.3);
  background: rgba(0,0,0,0.3);
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pc-option.selected {
  border-color: var(--gold-500);
  background: rgba(224,183,87,0.18);
  color: var(--gold-100);
  box-shadow: 0 2px 10px rgba(224,183,87,0.3);
}

/* ==========================================
   涓婚〉闈?   ========================================== */
.main-page {
  background: var(--gradient-lacquer);
}

/* 椤堕儴瀵艰埅鏍?*/
.app-header {
  background: rgba(26,8,8,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-area-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(224,183,87,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 鍗扮珷 logo */
.app-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, var(--vermilion), var(--lacquer-700));
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--gold-100);
  border: 1.5px solid var(--gold-500);
  box-shadow: inset 0 0 0 2px rgba(251,230,176,0.3);
}

.app-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 900;
  color: var(--gold-100);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 #000;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 璧勬簮灞曠ず */
.resource-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(224,183,87,0.4);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-100);
  cursor: pointer;
  transition: all 0.3s ease;
}

.resource-pill:active {
  transform: scale(0.95);
  background: rgba(0,0,0,0.45);
}

.resource-icon {
  font-size: 16px;
}

.resource-gold {
  color: var(--gold-300);
}

.resource-card {
  color: var(--gold-300);
}

/* 鐢ㄦ埛淇℃伅 */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vermilion), var(--lacquer-700));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-100);
  border: 2px solid var(--gold-500);
}

/* 涓昏鍐呭鍖?*/
.main-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(80px + var(--safe-area-bottom));
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* Hero 妯箙 */
.hero-banner {
  position: relative;
  border-radius: 20px;
  padding: 18px 18px 16px;
  margin: 16px 16px 4px;
  background:
    radial-gradient(120% 120% at 90% 0%, rgba(224,183,87,0.35), transparent 55%),
    linear-gradient(135deg, var(--lacquer-600), var(--vermilion));
  border: 1px solid var(--gold-500);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-banner h1 {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--gold-100);
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.hero-banner p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--cream-dim);
}

.hero-banner .lantern {
  position: absolute;
  right: 14px;
  top: 8px;
  font-size: 38px;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.hero-banner .tag {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(251,230,176,0.4);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-100);
}

/* ==========================================
   娓告垙鍒嗙被閫夋嫨锛堥椤碉級
   ========================================== */
.categories-section {
  padding: 20px 16px 4px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.category-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(224,183,87,0.34);
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-card:active {
  transform: scale(0.96);
  border-color: var(--gold-500);
}

.category-card:active::before {
  opacity: 0.1;
}

.category-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  position: relative;
  z-index: 1;
  background: rgba(224,183,87,0.15);
  border: 1px solid rgba(224,183,87,0.3);
  transition: all 0.3s ease;
}

.category-card[data-category="card"] .category-icon {
  background: rgba(232,80,63,0.2);
}
.category-card[data-category="majiang"] .category-icon {
  background: rgba(224,183,87,0.2);
}
.category-card[data-category="dai"] .category-icon {
  background: rgba(200,49,42,0.2);
}
.category-card[data-category="slot"] .category-icon {
  background: rgba(184,137,59,0.2);
}

.category-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.category-desc {
  font-size: 12px;
  color: var(--cream-dim);
  position: relative;
  z-index: 1;
}

.category-count {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(224,183,87,0.3);
  border-radius: 12px;
  font-size: 11px;
  color: var(--gold-300);
  position: relative;
  z-index: 1;
}

/* ==========================================
   娓告垙瀛愰〉闈紙閫夋嫨鍏蜂綋鐜╂硶锛?   ========================================== */
.game-page {
  background: var(--gradient-lacquer);
}

.game-header {
  background: rgba(26,8,8,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-area-top));
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(224,183,87,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.game-header-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(224,183,87,0.15);
  border: 1px solid rgba(224,183,87,0.3);
}

.game-header-info {
  flex: 1;
}

.game-header-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-100);
  line-height: 1.2;
}

.game-header-main {
  flex: 1;
  text-align: center;
  font-size: 21px;
  letter-spacing: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.game-header-desc {
  font-size: 12px;
  color: var(--cream-dim);
}

.game-header-spacer {
  width: 44px;
}

.game-types-section {
  padding: 20px 16px;
}

.game-type-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-type-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(224,183,87,0.3);
}

.game-type-card:active {
  transform: scale(0.98);
  background: rgba(224,183,87,0.1);
  border-color: var(--gold-500);
}

.game-type-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  background: rgba(224,183,87,0.15);
  border: 1px solid rgba(224,183,87,0.3);
}

.game-type-icon-img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(224,183,87,0.55);
  box-sizing: border-box;
}

.game-type-info {
  flex: 1;
  min-width: 0;
}

.game-type-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
}

.game-type-desc {
  font-size: 13px;
  color: var(--cream-dim);
  margin-bottom: 6px;
}

.game-type-players {
  font-size: 12px;
  color: rgba(205,187,152,0.7);
  display: flex;
  align-items: center;
  gap: 4px;
}

.game-type-arrow {
  font-size: 24px;
  color: rgba(224,183,87,0.5);
  flex-shrink: 0;
}

/* 娓告垙鍗＄墖缃戞牸 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.game-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(224,183,87,0.3);
  position: relative;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-card:active {
  transform: scale(0.96);
  border-color: var(--gold-500);
}

.game-card:active::before {
  opacity: 0.1;
}

.game-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  background: rgba(224,183,87,0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(224,183,87,0.3);
}

.game-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.game-desc {
  font-size: 12px;
  color: var(--cream-dim);
  position: relative;
  z-index: 1;
}

/* 鍒嗙被鏍囩 */
.game-categories {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.game-categories::-webkit-scrollbar {
  display: none;
}

.category-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(224,183,87,0.25);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-dim);
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-tab.active {
  background: var(--gradient-primary);
  color: var(--gold-100);
  border-color: var(--gold-500);
}

/* 娓告垙閫夋嫨鍖哄煙 */
.games-section {
  padding: 20px 16px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(var(--gold-300), var(--gold-700));
  border-radius: 2px;
}

/* ==========================================
   鎴戠殑鎴块棿
   ========================================== */
.my-rooms {
  padding: 0 16px 20px;
}

.room-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(224,183,87,0.3);
}

.room-card:active {
  transform: scale(0.98);
  background: rgba(224,183,87,0.1);
  border-color: var(--gold-500);
}

/* 鎴块棿鍒楄〃涓殑"鍔犲叆鎴块棿"鍏ュ彛锛堝師棣栭〉蹇嵎鎿嶄綔鏍忓凡绉婚櫎锛屽叆鍙ｇЩ鍏ユ澶勶級 */
.join-room-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(224,183,87,0.12), rgba(0,0,0,0.2));
  border: 1px dashed rgba(224,183,87,0.6);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.join-room-entry:active {
  transform: scale(0.98);
  background: rgba(224,183,87,0.2);
}
.join-room-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(224,183,87,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.join-room-text {
  flex: 1;
}
.join-room-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}
.join-room-sub {
  font-size: 12px;
  color: var(--cream-dim);
  margin-top: 2px;
}
.join-room-arrow {
  font-size: 22px;
  color: var(--gold-500);
}

.room-info {
  flex: 1;
}

.room-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
}

.room-meta {
  font-size: 12px;
  color: var(--cream-dim);
  display: flex;
  gap: 12px;
}

.room-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.room-status.waiting {
  background: rgba(47,125,99,0.25);
  color: #7fe3c0;
  border: 1px solid rgba(47,125,99,0.5);
}

.room-status.playing {
  background: rgba(184,137,59,0.25);
  color: var(--gold-300);
  border: 1px solid rgba(184,137,59,0.5);
}

/* ==========================================
   蹇嵎鎿嶄綔
   ========================================== */
.quick-actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 20px;
}

.quick-btn {
  flex: 1;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border: 1px solid rgba(224,183,87,0.3);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-btn:active {
  transform: scale(0.96);
  background: rgba(224,183,87,0.1);
}

.quick-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.quick-text {
  font-size: 13px;
  color: var(--cream-dim);
}

/* ==========================================
   搴曢儴瀵艰埅鏍?   ========================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(26,8,8,0.3), rgba(15,5,5,0.96));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px 0;
  padding-bottom: calc(8px + var(--safe-area-bottom));
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(224,183,87,0.3);
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon {
  font-size: 22px;
  color: var(--cream-dim);
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 11px;
  color: var(--cream-dim);
  transition: all 0.3s ease;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: var(--gold-300);
}

.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 6px rgba(224,183,87,0.5));
}

.nav-item:active {
  transform: scale(0.9);
}

/* ==========================================
   寮圭獥鏍峰紡
   ========================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: 100%;
  max-width: 500px;
  background: linear-gradient(165deg, #4a1414 0%, #2a0c0c 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px;
  padding-bottom: calc(20px + var(--safe-area-bottom));
  border-top: 1px solid var(--gold-500);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 85vh;
  overflow-y: auto;
}

.modal.show .modal-content {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 900;
  color: var(--gold-100);
}

/* 涓汉璧勬枡寮圭獥 */
.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), #b8860b);
  color: #2a0c0c;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-idline {
  flex: 1;
}
.profile-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--cream);
}
.profile-username {
  font-size: 13px;
  color: var(--cream-dim);
  margin-top: 3px;
}
.profile-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.profile-stat {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(224,183,87,0.25);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
}
.profile-stat-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-100);
}
.profile-stat-label {
  font-size: 12px;
  color: var(--cream-dim);
  margin-top: 4px;
}
.profile-rows {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--cream-dim);
}
.profile-row b {
  color: var(--cream);
  font-weight: 600;
}
.profile-history-row {
  cursor: pointer;
  margin-top: 4px;
  padding: 12px 4px;
  border-radius: 12px;
  background: rgba(224,183,87,0.06);
  border: 1px solid rgba(224,183,87,0.18);
  transition: background 0.2s;
}
.profile-history-row:active { background: rgba(224,183,87,0.14); }
.profile-history-go { color: var(--gold-100, #f5d273) !important; font-size: 13px; }

/* ==========================================
   鐗屽眬璁板綍锛堟垬缁╋級
   ========================================== */
.history-list { min-height: 140px; }
.history-empty {
  text-align: center; color: var(--cream-dim); padding: 40px 0;
  font-size: 14px; line-height: 2;
}
.history-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.history-card:active { background: rgba(224,183,87,0.1); border-color: rgba(224,183,87,0.4); }
.history-card-top { display: flex; align-items: center; justify-content: space-between; }
.history-card-name { font-size: 15px; font-weight: 700; color: var(--cream); }
.history-badge {
  font-size: 11px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--gold-100, #f5d273); color: var(--gold-100, #f5d273);
}
.history-badge.finished { border-color: rgba(255,255,255,0.3); color: var(--cream-dim); }
.history-card-meta { display: flex; gap: 12px; font-size: 12px; color: var(--cream-dim); margin-top: 6px; flex-wrap: wrap; }
.history-card-rule { font-size: 12px; color: #a89b7a; margin-top: 6px; line-height: 1.6; }
.history-card-scores { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.1); }
.history-card-score { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cream-dim); }
.history-card-score .hs-name { color: var(--cream); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-card-score .hs-val { font-weight: 700; }
.history-card-score .hs-val.me { color: var(--gold-100, #f5d273); }
.hs-pos { font-weight: 700; }
.hs-neg { color: #7ed957; }

/* 鍗曞満璇︽儏 */
.history-detail-head {
  background: rgba(224,183,87,0.07);
  border: 1px solid rgba(224,183,87,0.2);
  border-radius: 14px; padding: 14px;
  margin-bottom: 14px;
}
.hd-rule { font-size: 14px; color: var(--cream); line-height: 1.7; }
.hd-meta { font-size: 12px; color: var(--cream-dim); margin-top: 6px; }
/* 馃弫 鏁村満杈撹耽姹囨€伙紙绾靛悜鍒楄〃锛屾寜鎬诲垎闄嶅簭锛岃耽瀹惰楂樹寒锛?*/
.hd-final-title {
  font-size: 13px; font-weight: 700; color: var(--gold-100, #f5d273);
  margin-bottom: 6px;
}
.hd-final {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(224,183,87,0.25);
}
.hd-final-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--cream-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 6px 10px;
}
.hd-final-item.winner {
  background: rgba(224,183,87,0.14);
  border-color: rgba(224,183,87,0.4);
}
.hd-final-item .hd-final-name { color: var(--cream); font-weight: 600; }
.hd-final-item b { font-weight: 700; }
.hd-final-item b.me { color: var(--gold-100, #f5d273); }
.hd-final-item b.pos { color: #ff8a8a; }
.hd-final-item b.neg { color: #7ed957; }

.history-round {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.hr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hr-no { font-size: 13px; font-weight: 700; color: var(--gold-100, #f5d273); }
.hr-type { font-size: 13px; color: var(--cream); font-weight: 600; }
.hr-win { font-size: 13px; color: var(--cream-dim); }
.hr-fan { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--cream); }
.hr-fan.capped { color: #ffb054; }
.hr-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hr-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(224,183,87,0.12); color: var(--gold-100, #f5d273);
}
.hr-scores { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.08); }
.hr-score { font-size: 12px; color: var(--cream-dim); display: flex; gap: 4px; align-items: center; }
.hr-score b { font-weight: 700; }
.hr-score b.me { color: var(--gold-100, #f5d273); }
.hr-score b.neg { color: #7ed957; }
.hr-score b.pos { color: #ff8a8a; }
/* 鏈眬鍚庣疮璁¤建杩?*/
.hr-cum {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 11px; color: var(--cream-dim); line-height: 1.7;
}
.hr-cum b.pos { color: #ff8a8a; }
.hr-cum b.neg { color: #7ed957; }

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(224,183,87,0.3);
  color: var(--gold-100);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   鎴块棿椤甸潰
   ========================================== */
.room-page {
  background: var(--gradient-lacquer);
}

.room-header {
  background: rgba(26,8,8,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-area-top));
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(224,183,87,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(224,183,87,0.3);
  color: var(--gold-100);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 游戏子页顶栏返回：鎏金圆角按钮 + 实心箭头 */
#game-page-back {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #f6e6ae;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 45%),
    linear-gradient(180deg, #f4d888 0%, #e3b45c 45%, #c9933b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 3px 8px rgba(0,0,0,0.35);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
#game-page-back svg {
  width: 21px;
  height: 21px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(255,240,190,0.6));
}
#game-page-back:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(212,164,66,0.5);
}
#game-page-back:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.room-title {
  flex: 1;
  text-align: center;
}

.room-code {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-100);
}

.room-type {
  font-size: 12px;
  color: var(--cream-dim);
}

/* 鐜╁鍖哄煙 */
.players-section {
  padding: 20px 16px;
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.player-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.player-card.self {
  border-color: var(--gold-500);
  background: rgba(224,183,87,0.12);
}

.player-card.ready {
  border-color: var(--jade);
}

.player-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vermilion), var(--lacquer-700));
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--gold-100);
  border: 1.5px solid var(--gold-500);
}

.player-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-status {
  font-size: 12px;
  color: var(--cream-dim);
}

.player-status.ready {
  color: #7fe3c0;
}

/* 鎴块棿鎿嶄綔 */
.room-actions {
  padding: 0 16px 20px;
  display: flex;
  gap: 10px;
}

.room-actions .btn {
  flex: 1;
  padding: 14px;
  font-size: 15px;
}

/* ==========================================
   绌虹姸鎬?   ========================================== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--cream-dim);
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 15px;
}

/* ==========================================
   閫氱煡鏍峰紡
   ========================================== */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  z-index: 999;
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 90%;
  text-align: center;
  border: 1px solid var(--gold-500);
  color: var(--gold-100);
  background: rgba(26,8,8,0.92);
}

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

.toast.success {
  background: linear-gradient(135deg, #2f7d63, #1c5645);
  color: var(--gold-100);
  border-color: rgba(127,227,192,0.5);
}

.toast.error {
  background: linear-gradient(135deg, #c8312a, #a01f1a);
  color: var(--gold-100);
  border-color: var(--gold-500);
}

.toast.info {
  background: linear-gradient(135deg, #b8893b, #8a5a12);
  color: var(--lacquer-900);
  border-color: var(--gold-300);
}

/* ==========================================
   鍝嶅簲寮忛€傞厤
   ========================================== */
@media (min-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .players-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================
   鍔ㄧ敾鏁堟灉
   ========================================== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-bounce {
  animation: bounce 1s ease-in-out;
}

/* ==========================================
   婊氬姩鏉＄編鍖?   ========================================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(224,183,87,0.4);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(224,183,87,0.6);
}

/* ==========================================
   楹诲皢娓告垙椤甸潰鏍峰紡锛堢俊缈犵墝妗?+ 鍥芥疆閲戣竟锛?   ========================================== */
.game-table-page {
  /* 娣辫壊鏈ㄧ汗澶栧湀锛岃缈＄繝妗岄潰鏇磋仛鐒︺€佹洿鏈?瀹炴湪楹诲皢妗?璐ㄦ劅 */
  background:
    radial-gradient(135% 105% at 50% 16%, #2d1d11 0%, #1a0f08 56%, #0b0502 100%);
}

.game-table-page .game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(224,183,87,0.3);
}

.game-table-page .game-header-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-room-code {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-100);
  text-shadow: 0 1px 2px #000;
}

.game-status {
  font-size: 12px;
  color: var(--gold-300);
  font-weight: 700;
}

.game-main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  padding: 10px;
}

/* 瀵规墜鍖哄煙 */
.opponents-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  flex: 0 0 auto;
}

.opponents-section.centered {
  justify-content: center;
}

.opponent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.28);
  border-radius: 12px;
  min-width: 64px;
  border: 1px solid rgba(224,183,87,0.35);
}

.opponent-avatar {
  font-size: 22px;
}

.opponent-name {
  font-size: 11px;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.opponent-cards-count {
  font-size: 10px;
  color: var(--gold-100);
  background: rgba(0,0,0,0.35);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(224,183,87,0.4);
}

.opponent.active {
  border: 2px solid var(--gold-500);
  box-shadow: 0 0 12px rgba(224,183,87,0.5);
}

/* 鐗屾鍖哄煙锛氭埅鍥惧悓蹇冨竷灞€锛堝ご鍍?>鎵嬬墝->娌?>鐗屽->楠板瓙锛?*/
.table-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: relative;
  padding: 6px;
  overflow: hidden;
}

.table-layout-v2 {
  position: relative;
  width: min(100%, calc(100vh - 190px));
  aspect-ratio: 1 / 1;
  margin: auto;
  --avatar-depth: 56px;
  --hand-depth: 58px;   /* 鍔犻珮锛氫负鎵嬬墝"鎻愯捣"鐣欏嚭椤堕儴鍙鍖猴紝閬垮厤琚鍒?*/
  --river-depth: 26px;
  --core-gap: 3px;
  /* 缈＄繝姣涘憿妗岄潰 + 瀹炴湪妗屾部 + 鐑噾鍐呭祵 + 涓績鏆楀奖 + 钀藉湴鎶曞奖 */
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 46%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.03) 0deg 5deg, rgba(0,0,0,0.03) 5deg 10deg),
    radial-gradient(circle at 50% 45%, #21bd72 0%, #0e8c4d 54%, #075a31 100%);
  box-shadow:
    inset 0 0 0 8px #7a5230,
    inset 0 0 0 10px rgba(224,183,87,0.38),
    inset 0 0 62px rgba(0,0,0,0.55),
    0 18px 44px rgba(0,0,0,0.65);
}

/* 鍥涜鐜╁淇℃伅鑺墖锛堝渾褰㈤噾杈癸級锛氬ご鍍?+ 鏄电О / 搴勫鍐?/ 鍥炲悎鑴夊啿 */
.avatar-node {
  position: absolute;
  z-index: 10;
  width: auto;
  min-width: 48px;
  max-width: 76px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 9px 6px;
  background: linear-gradient(165deg, rgba(36,54,46,0.96), rgba(8,16,12,0.96));
  border: 1.5px solid rgba(224,183,87,0.55);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--cream);
  text-align: center;
}
.avatar-node.active {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(224,183,87,0.28), 0 0 26px 6px rgba(224,183,87,0.7);
  animation: seatPulse 1.4s ease-in-out infinite;
}
/* 搴勫閲戝啝 */
.avatar-node.dealer::after {
  content: '搴?;
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-gold, linear-gradient(135deg,#f3d27a,#bd8a1f));
  color: var(--lacquer-900, #2a0d0a);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  border: 1px solid var(--gold-700, #bd8a1f);
  z-index: 2;
}
.avatar-face { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.avatar-name { font-size: 11px; font-weight: 700; color: var(--gold-100); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-count, .avatar-score { display: none !important; }

.avatar-top    { top: 8px; left: 50%; transform: translateX(-50%); }
.avatar-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.avatar-left   { left: 8px; top: 50%; transform: translateY(-50%); }
.avatar-right  { right: 8px; top: 50%; transform: translateY(-50%); }

/* 鍥涜竟鎵嬬墝锛堢豢鑹叉锛?*/
.hand-strip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hand-top, .hand-bottom { height: var(--hand-depth); }
.hand-top { flex-direction: row; }
.hand-bottom { flex-direction: row; align-items: center; justify-content: center; padding: 0; width: calc(100% - 2 * (var(--avatar-depth) + var(--core-gap))); max-width: 100%; }
.hand-left, .hand-right { width: var(--hand-depth); flex-direction: column; }

.hand-top    { top: calc(var(--avatar-depth) + var(--core-gap)); left: 50%; transform: translateX(-50%); }
.hand-bottom { bottom: calc(var(--avatar-depth) + var(--core-gap)); left: 50%; transform: translateX(-50%); }
.hand-left   { left: calc(var(--avatar-depth) + var(--core-gap)); top: 50%; transform: translateY(-50%); }
.hand-right  { right: calc(var(--avatar-depth) + var(--core-gap)); top: 50%; transform: translateY(-50%); }

/* 鍥涙潯娌筹紙榛勮壊妗嗭級 */
.river {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
  border: 1px solid rgba(224,183,87,0.12);
  overflow: hidden;
}
.river-top, .river-bottom {
  height: var(--river-depth);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.river-left, .river-right {
  width: var(--river-depth);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.river-top    { top: calc(var(--avatar-depth) + var(--hand-depth) + var(--core-gap) * 2); left: 50%; transform: translateX(-50%); }
.river-bottom { bottom: calc(var(--avatar-depth) + var(--hand-depth) + var(--core-gap) * 2); left: 50%; transform: translateX(-50%); }
.river-left   { left: calc(var(--avatar-depth) + var(--hand-depth) + var(--core-gap) * 2); top: 50%; transform: translateY(-50%); }
.river-right  { right: calc(var(--avatar-depth) + var(--hand-depth) + var(--core-gap) * 2); top: 50%; transform: translateY(-50%); }

.river .discard-card {
  width: 18px;
  height: 25px;
  border-radius: 3px;
  box-shadow: 1px 1px 0 #d9c79a, 2px 2px 0 #c9b585, 0 2px 4px rgba(0,0,0,0.35);
}

/* 涓ぎ鐗屽锛堢孩鑹叉锛?*/
.tile-wall {
  position: absolute;
  top: calc(var(--avatar-depth) + var(--hand-depth) + var(--river-depth) + var(--core-gap) * 3);
  bottom: calc(var(--avatar-depth) + var(--hand-depth) + var(--river-depth) + var(--core-gap) * 3);
  left: calc(var(--avatar-depth) + var(--hand-depth) + var(--river-depth) + var(--core-gap) * 3);
  right: calc(var(--avatar-depth) + var(--hand-depth) + var(--river-depth) + var(--core-gap) * 3);
  z-index: 3;
  pointer-events: none;
}

/* 涓ぎ楠板瓙涓庝俊鎭?*/
.table-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  padding: 10px 18px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.28), rgba(0,0,0,0) 70%);
}
.dice-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dice-cups {
  display: flex;
  gap: 8px;
}
.dice-cups .dice {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #fdf6e3;
  color: #7a1f1f;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--gold-700), 0 2px 5px rgba(0,0,0,0.3);
}
.dice-result { font-size: 12px; color: var(--gold-100); min-height: 16px; text-shadow: 0 1px 2px #000; }
.wall-info {
  font-size: 11px;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

/* 鏆傛椂淇濈暀鏃х粨鏋勪絾闅愯棌锛岄伩鍏嶄緷璧栧畠鐨?JS 鎶ラ敊 */
.discard-area, .table-layout { display: none !important; }
.opponents-section { display: none !important; }

.discard-card {
  width: 28px;
  height: 38px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #fffdf6 0%, #f6efdd 60%, #ece2c8 100%);
  border: 1px solid #d8c79a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    1px 1px 0 #d9c79a, 2px 3px 0 #c9b585, 3px 5px 0 #b8a372,
    0 4px 8px rgba(0,0,0,0.35);
}

.discard-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 鍒氭墦鍑虹殑閭ｄ竴寮狅紙姣忔潯娌崇殑鏈€鍚庝竴寮狅級锛氱儷閲戦珮鍏夛紝璁?璋佸垰鍑轰粈涔?涓€鐩簡鐒?*/
.river .discard-card:last-child {
  box-shadow:
    0 0 0 2px rgba(224,183,87,0.95),
    1px 1px 0 #d9c79a, 2px 3px 0 #c9b585, 3px 5px 0 #b8a372,
    0 6px 12px rgba(0,0,0,0.45);
}

/* 鍥涜竟娌崇墝鎸夆€滆杈圭帺瀹惰瑙掆€濇棆杞細
   鑷繁(bottom)0掳銆佸瀹?top)180掳銆佸乏瀹堕『鏃堕拡90掳銆佸彸瀹堕€嗘椂閽?0掳 */
.river-bottom .discard-card { transform: rotate(0deg); }
.river-top    .discard-card { transform: rotate(180deg); }
.river-left   .discard-card { transform: rotate(90deg); }
.river-right  .discard-card { transform: rotate(-90deg); }

.game-message {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-300);
  text-align: center;
  min-height: 24px;
  animation: pulse 1s ease-in-out infinite;
  text-shadow: 0 1px 3px #000;
}

/* 鎵嬬墝鍖哄煙 */
.hand-section {
  padding: 0;
  width: 100%;
}

.table-layout .hand-section {
  background: transparent;
  border: none;
  box-shadow: none;
}

.hand-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 8px;
}

.player-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-100);
}

.player-scores {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-300);
}

.hand-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; /* 鎵嬬墝鏁翠綋灞呬腑锛屼笉鍐嶅亸宸?*/
  align-items: flex-end;   /* 鐗岄潬搴曪紝椤堕儴鐣?鎻愯捣"绌洪棿锛屾彁璧锋椂涓嶅啀琚鍒?*/
  gap: 0;                  /* 鐗岄潰鐩稿垏鎸ㄧ潃锛屼笉閬尅 */
  overflow-x: auto;
  width: 100%;
  padding: 24px 4px 0;     /* 椤堕儴 24px = 鎻愯捣鍙鍖猴紙浣嶄簬 clip 鍐咃紝鎻愯捣鐨勭墝椤堕儴涓嶄涪澶憋級 */
  min-height: 0;
  touch-action: pan-x;     /* 妯悜婊戝姩婊氬姩鎵嬬墝锛涚旱鍚戞墜鍔夸氦缁欐嫋鎷藉嚭鐗?*/
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none; /* 绉诲姩绔殣钘忔粴鍔ㄦ潯锛屼繚鎸佹闈㈢鍙粴鍔?*/
  -ms-overflow-style: none;
}
.hand-cards::-webkit-scrollbar { display: none; }

.hand-bottom .hand-card {
  width: 24px;
  height: 34px;
  flex-shrink: 0;
  margin: 0; /* 鐗岄潰鐩稿垏锛屾棤闂磋窛 */
}
.hand-bottom .hand-card:last-child { margin-right: 0; }

/* 鍒氭懜璧风殑鐗岋細鏀惧埌鏈€鍙充晶銆佺鎵嬬墝绾?15rpx锛屼粎鍔犱寒鎻忚竟锛堜笉鍐?鎻愯捣"锛岄伩鍏嶉《閮ㄨ瑁佸垏锛?*/
.hand-cards .drawn-tile {
  margin-left: 12px;
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 0 2px var(--gold-300, #f3d27a),
    0 6px 12px rgba(224,183,87,0.45),
    0 0 16px rgba(224,183,87,0.35);
}
.hand-cards .drawn-tile.selected {
  box-shadow:
    0 0 0 2px var(--gold-100, #fbe6b0),
    0 8px 16px rgba(224,183,87,0.6),
    0 0 22px rgba(224,183,87,0.5);
}

/* 鑷繁鐨勪寒鐗屼笌鍒嗘暟娴湪鎵嬬墝鏉′笂鏂癸紝閬垮厤鎸ゅ崰鎵嬬墝绌洪棿 */
.hand-bottom .self-melds {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  margin: 0;
  background: rgba(0,0,0,0.45);
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid rgba(224,183,87,0.35);
  max-width: 60vw;
  z-index: 6;
}
.hand-bottom .self-melds .meld-tile {
  width: 16px;
  height: 22px;
}

.hand-bottom .hand-info {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  padding: 3px 8px;
  height: auto;
  justify-content: flex-start;
  gap: 8px;
  background: rgba(0,0,0,0.45);
  border-radius: 8px;
  border: 1px solid rgba(224,183,87,0.35);
  width: auto;
  z-index: 6;
}
.hand-bottom .player-name,
.hand-bottom .player-scores {
  font-size: 10px;
  line-height: 1;
}

/* 瀵规墜鎵嬬墝鏉?*/
.opponent-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.opponent-hand-h { flex-direction: row; }
.opponent-hand-v { flex-direction: column; }

.op-hand-card {
  position: relative;
  flex-shrink: 0;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 42%, var(--tile-back-c1) 0%, var(--tile-back-c2) 55%, var(--tile-back-c3) 100%);
  border: 1px solid var(--tile-back-edge);
  box-shadow: 1px 1px 0 var(--tile-back-sh1), 2px 2px 0 var(--tile-back-sh2), 2px 3px 4px rgba(0,0,0,0.35);
}
.op-hand-card::before {
  content: ''; position: absolute; inset: 1px;
  border: 1px solid rgba(var(--tile-back-edge-rgb), 0.5); border-radius: 2px;
}
.op-hand-card::after {
  content: ''; position: absolute; left: 50%; top: 48%;
  width: 46%; height: 46%; transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--tile-back-dia1), var(--tile-back-dia2));
  border-radius: 1px;
}
.op-hand-card.h { width: 18px; height: 25px; margin-right: -10px; }
.op-hand-card.h:last-child { margin-right: 0; }
.op-hand-card.v { width: 14px; height: 20px; margin-bottom: -10px; }
.op-hand-card.v:last-child { margin-bottom: 0; }

.hand-card {
  width: 42px;
  height: 58px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, border-color .18s ease;
  background: linear-gradient(160deg, #fffdf6 0%, #f6efdd 55%, #ece2c8 100%);
  border: 1px solid #d8c79a;
  /* 鍘氬害鎰燂細鍙充笂楂樺厜 + 鍙充笅閫愬眰鍔犳繁鐨勭‖闃村奖妯℃嫙楹诲皢鐗屼晶杈?*/
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    1px 1px 0 #d9c79a, 2px 3px 0 #c9b585, 3px 5px 0 #b8a372,
    0 7px 12px rgba(0,0,0,0.42);
}

.hand-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-500);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}

.hand-card.selected {
  transform: translateY(-14px);
  border-color: var(--gold-500);
  box-shadow:
    0 0 0 2px var(--gold-100, #fbe6b0),
    0 10px 20px rgba(224,183,87,0.55),
    0 14px 22px rgba(0,0,0,0.4);
}

/* 鎷栨嫿鍑虹墝锛氳窡闅忔墜鎸囨彁璧凤紱杈惧埌鍑虹墝闃堝€兼椂"armed"楂樹寒锛屾澗鎵嬪嵆鎵撳嚭 */
.hand-card.dragging {
  cursor: grabbing;
  transition: none !important;
}
.hand-card.dragging-armed {
  box-shadow:
    0 0 0 2px var(--gold-100, #fbe6b0),
    0 12px 22px rgba(224,183,87,0.7),
    0 0 26px rgba(255,210,120,0.75);
}

/* 鍙戠墝鍔ㄧ敾涓殑鐗岃儗 + 缁熶竴楹诲皢鐗岃儗闈㈡牱寮?*/
.hand-card.back {
  background: radial-gradient(circle at 50% 42%, var(--tile-back-c1) 0%, var(--tile-back-c2) 55%, var(--tile-back-c3) 100%);
  border: 1.5px solid var(--tile-back-edge);
  position: relative;
  cursor: default;
  box-shadow: 1px 1px 0 var(--tile-back-sh1), 2px 3px 0 var(--tile-back-sh2), 3px 5px 0 var(--tile-back-sh3), 0 6px 10px rgba(0,0,0,0.4);
}
.hand-card.back::before {
  content: ''; position: absolute; inset: 2px;
  border: 1px solid rgba(var(--tile-back-edge-rgb), 0.55); border-radius: 4px;
}
.hand-card.back::after {
  content: ''; position: absolute; left: 50%; top: 48%;
  width: 46%; height: 46%; transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--tile-back-dia1), var(--tile-back-dia2));
  box-shadow: 0 0 4px rgba(var(--tile-back-edge-rgb), 0.7); border-radius: 2px;
}

/* 缂洪棬绂佺敤鐗岋紙杞埌涓旈渶鍏堟墦缂洪棬鐗屾椂锛屽叾瀹冭姳鑹蹭笉鍙€夛級 */
.hand-card.disabled {
  filter: grayscale(0.7) brightness(0.6);
  cursor: not-allowed;
  opacity: 0.55;
}
.hand-card.disabled:hover {
  transform: none;
  border-color: #cbb98c;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.4);
}

.hand-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 鎿嶄綔鎸夐挳锛氬眳涓嵂涓告爮锛岃涔夊寲閰嶈壊 + 寰氦浜?*/
.game-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 10px;
}

.game-actions .btn {
  min-width: 78px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.game-actions .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.game-actions .btn:active {
  transform: translateY(1px) scale(.97);
}

/* 杩?/ 鍙栨秷锛氫綆璋冩殫鑹?*/
.game-actions #pass-btn {
  background: rgba(0,0,0,0.4);
  color: var(--cream);
  border: 1px solid rgba(224,183,87,0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* 鏉狅細姗欓噾 */
.game-actions #gang-btn {
  background: linear-gradient(135deg, #ffb13d 0%, #e9801a 100%);
  color: #3a2200;
  border: 1px solid #ffd28a;
  box-shadow: 0 4px 14px rgba(233,128,26,0.4);
}

/* 纰帮細钃濋潚锛屼笌"鑳?鐨勭孩鏄庣‘鍖哄垎 */
.game-actions #peng-btn {
  background: linear-gradient(135deg, #3aa7ff 0%, #1c6fce 100%);
  color: #fff;
  border: 1px solid #bfe0ff;
  box-shadow: 0 4px 14px rgba(31,111,206,0.4);
}

/* 鑳★細绾㈤噾楂樹寒 + 鍛煎惛鍏夋檿锛屽己璋?鍙儭" */
.game-actions .btn-success {
  background: linear-gradient(135deg, #ff7a59 0%, var(--vermilion, #c8332a) 100%);
  color: var(--gold-100);
  border: 1px solid var(--gold-500);
  box-shadow: 0 6px 18px rgba(200,49,42,0.5), 0 0 16px rgba(255,120,90,0.45);
  animation: winGlow 1.1s ease-in-out infinite;
}
@keyframes winGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(200,49,42,0.5), 0 0 12px rgba(255,120,90,0.35); }
  50%      { box-shadow: 0 6px 18px rgba(200,49,42,0.6), 0 0 26px rgba(255,120,90,0.7); }
}

/* 纰版潬鍝嶅簲绐楀彛鎻愮ず */
.claim-banner {
  text-align: center;
  padding: 8px 12px;
  margin: 0 12px 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}
.claim-banner.active {
  background: rgba(255,71,87,0.18);
  color: #ff6b81;
  border: 1px solid rgba(255,71,87,0.5);
  animation: claimPulse 1s ease-in-out infinite;
}
.claim-banner.waiting {
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}
@keyframes claimPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 浜墝锛堢/鏉狅級 */
.self-melds, .opponent-melds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 4px 0;
}
.meld-group {
  display: flex;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 6px;
  background: rgba(224,183,87,0.15);
  border: 1px solid rgba(224,183,87,0.4);
}
.meld-tile {
  width: 22px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4ecd8;
  border: 1px solid #cdbb8a;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #1e272e;
  position: relative;
  box-shadow: 1px 1px 0 #d9c79a, 2px 2px 0 #c9b585, 0 3px 6px rgba(0,0,0,0.35);
}
.meld-tile img { width: 100%; height: 100%; object-fit: contain; }
.opponent-melds { gap: 4px; margin: 2px 0; }
.opponent-melds .meld-tile { width: 16px; height: 22px; font-size: 10px; }

/* 缁撶畻寮圭獥 */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.result-content {
  background: linear-gradient(165deg, #4a1414 0%, #2a0c0c 100%);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  max-width: 280px;
  width: 90%;
  border: 2px solid var(--gold-500);
  box-shadow: var(--shadow-lg);
}

.result-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 900;
  color: var(--gold-100);
  margin-bottom: 16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* 缁撶畻寮圭獥锛氱暘鏁?/ 鐣瀷鏄庣粏 */
.result-fan {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(233, 154, 45, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 4px;
}

.result-fan-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--gold-100);
  margin-bottom: 8px;
}

.result-fan-total b {
  font-size: 20px;
  color: var(--gold);
  font-weight: 800;
}

.result-fan-total i {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.result-fan-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.result-fan-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px 9px;
}

.result-fan-item b {
  color: var(--gold);
  font-weight: 700;
}

.result-scores {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.result-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.result-player-score {
  font-size: 18px;
  font-weight: 700;
  color: #7fe3c0;
}

.result-player-score.negative {
  color: var(--vermilion-light);
}

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

/* 鍝嶅簲寮忛€傞厤 */
@media (max-width: 375px) {
  .hand-card {
    width: 36px;
    height: 50px;
  }
  .discard-card {
    width: 24px;
    height: 32px;
  }
  .mt-bottom .hand-card { width: 32px; height: 44px; }
  .river .discard-card { width: 18px; height: 25px; }
  .op-hand-card.h { width: 20px; height: 27px; margin-right: -6px; }
  .op-hand-card.v { width: 16px; height: 21px; margin-bottom: -6px; }
  .table-layout {
    grid-template-columns: 42px 1fr 42px;
    grid-template-rows: 40px 1fr minmax(96px, auto);
  }
}

/* ==========================================
   寮哄埗妯睆閬僵锛堜粎楹诲皢绫伙紝绔栧睆鏄剧ず锛?   ========================================== */
.orientation-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: radial-gradient(120% 80% at 50% -10%, #3a1414 0%, #1a0808 55%, #0c0404 100%);
  text-align: center;
  padding: 24px;
}

body.force-landscape .orientation-lock {
  display: flex;
}

/* 澶ц窗绛変笉闇€瑕佹í灞忕殑娓告垙锛屽己鍒剁Щ闄ら伄缃╋紙鍙屼繚闄╋級 */
body:not(.force-landscape) .orientation-lock {
  display: none !important;
}

.orientation-lock .rotate-phone {
  font-size: 72px;
  animation: rotateHint 1.8s ease-in-out infinite;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

.orientation-lock .orientation-text {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-100);
  line-height: 1.5;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* 鐗屾椤?瑙ｆ暎"鎸夐挳 */
#dissolve-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-100);
  border: 1px solid var(--gold-500);
  flex-shrink: 0;
}

/* ==========================================
   娓告垙鍐呰В鏁ｆ姇绁ㄥ脊绐?   ========================================== */
#dissolve-vote-modal {
  z-index: 1300;
}

.dissolve-voters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.dissolve-voter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  border: 1px solid rgba(224,183,87,0.3);
  border-radius: var(--radius-md);
}

.dissolve-voter .dv-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
}

.dissolve-voter .dv-tag {
  font-size: 11px;
  color: var(--gold-300);
  margin-left: 6px;
}

.dissolve-voter .dv-vote {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.dv-vote.agree {
  color: #7fe3c0;
  background: rgba(47,125,99,0.25);
  border: 1px solid rgba(47,125,99,0.5);
}

.dv-vote.refuse {
  color: var(--vermilion-light);
  background: rgba(200,49,42,0.22);
  border: 1px solid rgba(200,49,42,0.5);
}

.dv-vote.pending {
  color: var(--cream-dim);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(224,183,87,0.25);
}

.dissolve-timer-wrap {
  position: relative;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(224,183,87,0.3);
  overflow: hidden;
  margin-bottom: 16px;
}

.dissolve-timer-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--vermilion), var(--gold-500));
  transition: width 1s linear;
}

.dissolve-timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-100);
  text-shadow: 0 1px 2px #000;
}

.dissolve-actions {
  display: flex;
  gap: 10px;
}

/* 绔栧睆涓嬮殣钘忛伄缃╁唴涓嶉渶瑕佺殑婊氬姩锛堜繚鎸佸眳涓級 */
@media (orientation: landscape) {
  body.force-landscape .orientation-lock {
    display: none;
  }
}

/* ===== 寮€灞€娴佺▼锛氭幏楠板瓙閬僵 ===== */
.dice-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 6, 6, 0.82);
  backdrop-filter: blur(3px);
}
.dice-panel {
  background: linear-gradient(160deg, #5a1414, #7a1f1f);
  border: 1px solid var(--gold-700, #8a6d2f);
  border-radius: 16px;
  padding: 28px 34px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  min-width: 240px;
}
.dice-title {
  color: var(--gold-100);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 2px;
}
.dice-cups {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 14px;
}
.dice {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fdf6e3;
  color: #7a1f1f;
  font-size: 34px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2px var(--gold-700, #8a6d2f), 0 4px 10px rgba(0,0,0,0.4);
}
.dice-result {
  color: var(--cream);
  font-size: 14px;
  min-height: 20px;
  margin-bottom: 8px;
}
.dice-wait {
  color: var(--gold-100);
  font-size: 14px;
  margin-bottom: 8px;
}
.dice-roll {
  margin-top: 6px;
  font-size: 17px;
  padding: 12px 28px;
}

/* ===== 寮€灞€娴佺▼锛氬畾缂哄脊绐?===== */
.dingque-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 2px;
}
.dingque-btn {
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  padding: 10px 0;
  min-width: 64px;
  background: linear-gradient(160deg, #fdf6e3, #efe2bf);
  color: #7a1f1f;
  border: 2px solid var(--gold-500);
  border-radius: 10px;
}
.dingque-btn:active {
  transform: scale(0.96);
}
.dingque-wait {
  text-align: center;
  color: var(--gold-100);
  font-size: 13px;
  margin-top: 10px;
}

/* 瀹氱己寮圭獥锛氳儗鏅€忔槑銆佺揣璐存墜鐗屼笂鏂癸紝渚夸簬鏌ョ湅鎵嬬墝鐗屽瀷鍐冲畾缂哄摢闂?*/
#dingque-modal {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
  justify-content: center;
  padding-bottom: 92px;
}
#dingque-modal .modal-content {
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  max-width: 280px;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 16px;
}

/* ===== 鐗屾椤靛睍寮€鑿滃崟 ===== */
.table-menu {
  position: absolute;
  top: calc(56px + var(--safe-area-top, 0px));
  left: 12px;
  z-index: 150;
  min-width: 160px;
  background: linear-gradient(165deg, #4a1414 0%, #2a0c0c 100%);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.table-menu-item {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(224,183,87,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-menu-item:last-child {
  border-bottom: none;
}
.table-menu-item:active,
.table-menu-item:hover {
  background: rgba(224,183,87,0.15);
}
.table-menu-item.danger {
  color: #ff9a94;
}
.table-menu-item.danger:active,
.table-menu-item.danger:hover {
  background: rgba(200,49,42,0.25);
}

/* ===== 鐗屾椤电瓑寰呴潰鏉?===== */
.table-waiting-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 48, 38, 0.85);
  backdrop-filter: blur(4px);
}
.table-waiting-panel .twp-inner {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, #4a1414 0%, #2a0c0c 100%);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
}
.table-waiting-panel .twp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.table-waiting-panel .twp-header h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-100);
}
.table-waiting-panel .twp-players {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.twp-player {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  border-radius: var(--radius-md);
  padding: 16px 10px;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.twp-player.self {
  border-color: var(--gold-500);
  background: rgba(224,183,87,0.12);
}
.twp-player.ready {
  border-color: var(--jade);
}
.twp-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vermilion), var(--lacquer-700));
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--gold-100);
  border: 1.5px solid var(--gold-500);
}
.twp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.twp-player-status {
  font-size: 12px;
  color: var(--cream-dim);
}
.twp-player-status.ready {
  color: #7fe3c0;
}
.table-waiting-panel .twp-actions {
  display: flex;
  gap: 12px;
}
.table-waiting-panel .twp-actions .btn {
  flex: 1;
  padding: 14px;
  font-size: 15px;
}

/* ===== 杞鎴夸富寮圭獥 ===== */
.transfer-owner-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.transfer-owner-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  border: 1px solid rgba(224,183,87,0.3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.transfer-owner-item:active {
  background: rgba(224,183,87,0.12);
  border-color: var(--gold-500);
}
.transfer-owner-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}

/* ===== 瀵瑰眬鍔ㄧ敾锛氭懜鐗?/ 鍑虹墝 / 纰版潬 / 鑳★紙鐪熷疄鎰?3D锛?===== */
/* 閫忚锛氳鐗岀殑 rotateX/translateZ 鍛堢幇"绔嬭捣鏉ョ炕鍔?鐨勭珛浣撴劅 */
.game-main { perspective: 1400px; }
.hand-cards, .discard-cross, .river, .self-melds, .opponent-melds { transform-style: preserve-3d; }

/* 鎽哥墝锛氫粠鐗屽(涓嬫柟)缈昏捣锛屽甫 3D 鍊炬枩钀藉叆鎵嬩腑 */
@keyframes tileDrawIn {
  0%   { transform: translateY(46px) translateZ(-40px) rotateX(42deg) scale(0.78); opacity: 0; }
  55%  { transform: translateY(-6px) translateZ(0) rotateX(-6deg) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}

/* 鍑虹墝锛氫粠鍑虹墝鏂规柟浣?鎶?鍚戠墝娌筹紝钀芥寰脊 + 闃村奖灞曞紑 */
@keyframes tileDiscardFly {
  0% {
    transform: translate(var(--dx,0), var(--dy,0)) translateZ(22px) rotateX(var(--drx,0)) rotateZ(var(--drz,0)) scale(1.18);
    opacity: 0.15;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  55% {
    transform: translate(0,0) translateZ(0) rotateX(0) rotateZ(0) scale(1.06);
    opacity: 1;
    box-shadow: 0 6px 10px rgba(0,0,0,0.42);
  }
  78%  { transform: translate(0,-4px) rotateZ(var(--final-rot,0)) scale(1.0); }
  100% { transform: translate(0,0) rotateZ(var(--final-rot,0)) scale(1); opacity: 1; }
}

/* 纰?鏉犱寒鐗岋細浠庣墝娌宠"鎶?鍒颁寒鐗屽尯锛屽甫鏃嬭浆缂╂斁鍥炲脊 */
@keyframes meldPop {
  0%   { transform: translateY(-26px) translateZ(20px) rotate(-9deg) scale(0.5); opacity: 0; }
  55%  { transform: translateY(4px) rotate(4deg) scale(1.14); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}

/* 鍙戠墝锛氱墝浠庣墝澧欐柟鍚戞粦鍏ュ苟缈绘 */
@keyframes tileDealIn {
  0%   { transform: translateY(30px) translateZ(-20px) rotateX(30deg) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) translateZ(0) rotateX(0) scale(1); opacity: 1; }
}

@keyframes seatPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,183,87,0); }
  50%     { box-shadow: 0 0 18px 3px rgba(224,183,87,0.7); }
}

.hand-card.anim-draw { animation: tileDrawIn 0.42s cubic-bezier(.22,.9,.3,1) both; }
.discard-card.anim-discard { animation: tileDiscardFly 0.52s cubic-bezier(.2,.8,.3,1.12) both; }
.meld-group.anim-meld { animation: meldPop 0.36s cubic-bezier(.2,.8,.3,1.12) both; }
.hand-card.deal-in { animation: tileDealIn 0.3s ease-out both; }

/* 鍑虹墝鏂逛綅锛氬喅瀹氭姏鍑鸿捣鐐癸紙鐩稿鐗屾渤涓績锛夛紝璁?璋佹墦鐨?涓€鐩簡鐒?*/
.discard-card.from-bottom { --dx:0px;     --dy:78px;  --drx:40deg;  --drz:-8deg;  --final-rot:0deg;   }
.discard-card.from-top    { --dx:0px;     --dy:-78px; --drx:-40deg; --drz:8deg;   --final-rot:180deg; }
.discard-card.from-left   { --dx:-108px;  --dy:0px;   --drx:0deg;   --drz:13deg;  --final-rot:90deg;  }
.discard-card.from-right  { --dx:108px;   --dy:0px;   --drx:0deg;   --drz:-13deg; --final-rot:-90deg; }

/* 閫変腑鐨勭墝锛氱珛浣撴姮璧?+ 閲戣壊鎶曞奖锛屽己鍖?鎴戣鎵撹繖寮?鐨勫弽棣?*/
.hand-card.selected {
  transform: translateY(-15px) translateZ(12px);
  border-color: var(--gold-500);
  box-shadow: 0 10px 18px rgba(0,0,0,0.5), 0 0 14px rgba(224,183,87,0.55);
}

/* 褰撳墠鍥炲悎鐜╁楂樹寒 */
.opponent-box.active {
  border-color: var(--gold-500);
  animation: seatPulse 1.4s ease-in-out infinite;
}
.hand-section.active { border-color: var(--gold-500); box-shadow: 0 0 18px 2px rgba(224,183,87,0.45); }

/* 鍥炲悎鎻愮ず妯箙 */
.turn-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 6px 18px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: rgba(224,183,87,0.16); color: var(--gold-500);
  border: 1px solid rgba(224,183,87,0.4); z-index: 30; pointer-events: none;
  transition: opacity 0.2s ease;
}
.turn-banner.my-turn { background: rgba(80,200,120,0.18); color: #6ee7a0; border-color: rgba(80,200,120,0.4); }

/* ===== 鍙鐢?3D 楹诲皢鐗岀粍浠讹紙鐗屽銆佺墝鑳岄€氱敤锛?===== */
.tile {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #f4ecd8;
  border: 1px solid #cdbb8a;
  box-shadow: 1px 1px 0 #d9c79a, 2px 3px 0 #c9b585, 3px 5px 0 #b8a372, 0 5px 9px rgba(0,0,0,0.4);
}
/* 鐗岃儗闈細澧ㄧ豢搴?+ 鐑噾杈规 + 閲戣壊鑿卞舰绾?*/
.tile.back {
  background: radial-gradient(circle at 50% 42%, var(--tile-back-c1) 0%, var(--tile-back-c2) 55%, var(--tile-back-c3) 100%);
  border: 1.5px solid var(--tile-back-edge);
  box-shadow: 1px 1px 0 var(--tile-back-sh1), 2px 3px 0 var(--tile-back-sh2), 3px 5px 0 var(--tile-back-sh3), 0 5px 9px rgba(0,0,0,0.45);
}
.tile.back::before {
  content: ''; position: absolute; inset: 2px;
  border: 1px solid rgba(var(--tile-back-edge-rgb), 0.55); border-radius: 3px;
}
.tile.back::after {
  content: ''; position: absolute; left: 50%; top: 48%;
  width: 46%; height: 46%; transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--tile-back-dia1), var(--tile-back-dia2));
  box-shadow: 0 0 4px rgba(var(--tile-back-edge-rgb), 0.7); border-radius: 2px;
}

/* ===== 鍥涢潰鐗屽锛堜笢/鍗?瑗?鍖楋級 ===== */
/* 鐗屽鍚勮竟鎸夆€滆杈圭帺瀹惰瑙掆€濇憜鏀撅細
   bottom(鑷繁)0掳銆乼op(瀵瑰)180掳銆乴eft(宸﹀)椤烘椂閽?0掳銆乺ight(鍙冲)閫嗘椂閽?0掳銆?   宸﹀彸澧欏洜姝ゅ彉涓衡€滅珫鍚戝爢鍙犵殑妯墝鈥濓紝涓庣湡瀹炵墝妗屼竴鑷淬€?*/
.tile-wall {
  pointer-events: none; z-index: 1;
  --wt-w: 24px;   /* 鐗屽鍗曠墝瀹?= 鎵嬬墝澶у皬锛?4px锛?*/
  --wt-h: 34px;   /* 鐗屽鍗曠墝楂?= 鎵嬬墝澶у皬锛?4px锛?*/
  --group-gap: 6px; /* 鍚屼竴鐗岀粍鍐呬袱鐗屼箣闂寸殑娓呮櫚缂濋殭锛岄伩鍏嶁€滈噸鍙犳劅鈥?*/
}
.tile-wall:empty { display: none; }
.wall-side {
  position: absolute;
  display: flex; gap: 3px; padding: 3px;   /* 鐗岀粍涓庣墝缁勪箣闂寸暀 3px锛岀粷涓嶉敊浣?閲嶅悎 */
  border-radius: 6px;
  transition: box-shadow .3s ease;
}
/* 鍚勮竟鍐嶅悜鍐呮敹 9px锛屼笌娌崇墝鍖烘媺寮€闂磋窛锛屼繚璇佸純鐗屾湁鍏呰冻钀界偣 */
.wall-bottom { bottom: 9px; left: 50%; transform: translateX(-50%); flex-direction: row; }
.wall-top    { top: 9px;    left: 50%; transform: translateX(-50%); flex-direction: row; }
.wall-left   { left: 9px;   top: 50%;  transform: translateY(-50%);  flex-direction: column; }
.wall-right  { right: 9px;  top: 50%;  transform: translateY(-50%);  flex-direction: column; }

/* 鍗曠粍 = 涓ゅ紶鐪熷疄楹诲皢鐗岋紱缁勫唴鐣?--group-gap 娓呮櫚缂濋殭锛岀粷涓嶉噸鍙?*/
.tile-wall-stack {
  width: var(--wt-w, 24px);
  height: calc(var(--wt-h, 34px) * 2 + var(--group-gap, 6px));
  position: relative;
}
.tile-wall-stack .tile.back {
  position: absolute;
  width: var(--wt-w, 24px);
  height: var(--wt-h, 34px);
  border-radius: 3px;
  /* 缁熶竴鐗岃儗棰滆壊浠ょ墝锛堝ⅷ缁匡級锛屼笌 .tile.back/.hand-card.back/.op-hand-card 瀹屽叏涓€鑷?*/
  background: radial-gradient(circle at 50% 42%, var(--tile-back-c1) 0%, var(--tile-back-c2) 55%, var(--tile-back-c3) 100%);
  border: 1px solid var(--tile-back-edge);
}
.tile-wall-stack .tile.back::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44%; height: 44%; transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--tile-back-dia1), var(--tile-back-dia2));
  box-shadow: 0 0 4px rgba(var(--tile-back-edge-rgb), 0.7); border-radius: 2px;
}
/* 搴曠墝璐村簳銆侀《鐗岃创椤讹紝涓棿鐣?--group-gap 缂濋殭 -> 娓呮櫚涓ゆ灇锛屼簰涓嶉伄鎸?*/
.tile-wall-stack .tw-lo { bottom: 0; left: 0; z-index: 1; }
.tile-wall-stack .tw-hi { top: 0;    left: 0; z-index: 2; }
/* 鍘氬害闃村奖锛岃惀閫?涓ゅ骇鐗?鐨勭珛浣撴劅锛涢《鐗屾弿杈规敹绱э紝閬垮厤妗ユ帴缂濋殭鏄惧緱閲嶅彔 */
.tile-wall-stack .tw-lo {
  box-shadow:
    0 1px 0 var(--tile-back-sh1), 0 2px 0 var(--tile-back-sh2),
    0 3px 0 var(--tile-back-sh3), 0 4px 0 var(--tile-back-sh4),
    0 5px 5px rgba(0,0,0,0.45);
}
.tile-wall-stack .tw-hi {
  box-shadow:
    0 0 0 1px rgba(224,183,87,0.2), 0 4px 6px rgba(0,0,0,0.5);
}

/* 鍚勮竟鐗屽鎸夎杈圭帺瀹惰瑙掓棆杞?*/
.wall-bottom .tile.back { transform: rotate(0deg); }
.wall-top    .tile.back { transform: rotate(180deg); }
.wall-left   .tile.back { transform: rotate(90deg); }
.wall-right  .tile.back { transform: rotate(-90deg); }

/* ===== 宸﹀彸澧欙細鏃嬭浆鍚庡崟鐗屽憟鈥滄í鏀锯€濓紝缁勫唴鏀逛负绔栧悜鍫嗗彔锛堜袱鐗屼笂涓嬬暀 --group-gap 缂濓級 ===== */
.wall-left .tile-wall-stack,
.wall-right .tile-wall-stack {
  width: var(--wt-h, 34px);                              /* 鏃嬭浆鍚庤瑙夊搴?= 鍘熺墝楂?*/
  height: calc(var(--wt-w, 24px) * 2 + var(--group-gap, 6px)); /* 鏃嬭浆鍚庤瑙夐珮搴?= 涓ょ墝瀹?缂?*/
}
.wall-left .tile-wall-stack .tile.back,
.wall-right .tile-wall-stack .tile.back {
  left: 50%;
  margin-left: calc(var(--wt-w, 24px) / -2); /* 灞呬腑 24px 鐨勫厓绱犳湰浣?*/
}
/* 宸?鍙冲锛氶《鐗?tw-hi)鍦ㄤ笂銆佸簳鐗?tw-lo)鍦ㄤ笅锛屾寜鈥滆瑙夐珮搴︹€濆畾浣嶏紝閬垮厤閲嶅彔 */
.wall-left .tw-hi,
.wall-right .tw-hi {
  top: calc(var(--wt-w, 24px) / 2 - var(--wt-h, 34px) / 2);
  bottom: auto;
}
.wall-left .tw-lo,
.wall-right .tw-lo {
  bottom: calc(var(--wt-w, 24px) / 2 - var(--wt-h, 34px) / 2);
  top: auto;
}
/* 宸叉懜璧扮殑缁勶細娣″嚭淇濈暀鍗犱綅锛屼娇鐗屽鍛堢幇"琚悆鎺?鐨勭己鍙?*/
.tile-wall-stack.taken { opacity: 0; }

/* 鏂瑰悜鏍囩锛堜笢/鍗?瑗?鍖楋級 */
.wall-dir {
  position: absolute;
  font-size: 9px; font-weight: 700; color: #f0d27a;
  background: rgba(10,40,22,0.7); padding: 0 3px; border-radius: 4px;
  border: 1px solid rgba(224,183,87,0.4);
}
.wall-bottom .wall-dir, .wall-top .wall-dir { bottom: -2px; left: 50%; transform: translate(-50%,100%); }
.wall-left .wall-dir { left: -2px; top: 50%; transform: translate(-100%,-50%); }
.wall-right .wall-dir { right: -2px; top: 50%; transform: translate(100%,-50%); }

/* 璧风墝鐐癸細鍘熺偣涓€渚ч珮浜?+ "璧?瀛楀窘鏍?*/
.wall-side.draw-origin {
  box-shadow: 0 0 0 2px rgba(224,183,87,0.6), 0 0 10px rgba(224,183,87,0.4);
}
.wall-side.draw-origin::after {
  content: '璧?; position: absolute; top: -2px; left: 50%;
  transform: translate(-50%,-100%);
  font-size: 10px; font-weight: 700; color: #1a1208;
  background: linear-gradient(135deg, #f0d27a, #bd8a1f);
  padding: 1px 5px; border-radius: 6px;
}
/* 褰撳墠鍗冲皢鎽哥墝鐨勯偅涓€缁勶細鑴夊啿楂樹寒 */
.tile-wall-stack.draw-now .tile.back {
  box-shadow:
    0 0 0 2px #ffe27a, 0 0 9px #ffd84d,
    0 1px 0 var(--tile-back-sh1), 0 2px 0 var(--tile-back-sh2), 0 3px 0 var(--tile-back-sh3);
  animation: wallPulse 1.1s ease-in-out infinite;
}
@keyframes wallPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}

/* 灏忓睆锛氱墝澧欑暐缂╋紝閬垮厤婧㈠嚭灞忓箷 */
@media (max-width: 380px) {
  .tile-wall { --wt-w: 20px; --wt-h: 28px; }
  .wall-dir { font-size: 8px; }
}

/* ==========================================
   2 浜哄眬涓撳睘绱у噾甯冨眬锛?players-2锛?   璁捐渚濇嵁锛氬蹇呮孩鍑猴紝4 浜哄眬琚?.table-section 瑁佹垚鏁村湀妗嗭紱
   2 浜哄眬鍒欐妸 .tile-wall 瑁佸埌涓ぎ box锛屽乏鍙冲涓嶅啀鈥滈€氬ぉ鈥濓紝涓ぎ鏇村紑闃斻€?   4 浜哄眬锛堟棤 .players-2 绫伙級澶栬瀹屽叏涓嶅彉銆?   ========================================== */
.table-layout-v2.players-2 {
  --avatar-depth: 48px;   /* 澶村儚灞傜暐鏀?*/
  --hand-depth: 58px;     /* 鎵嬬墝娣卞害淇濇寔涓嶅彉锛岄伩鍏?34px 鎵嬬墝琚鍒?*/
  --river-depth: 24px;    /* 娌崇墝甯︾暐鏀?*/
  --core-gap: 2px;        /* 灞傞棿璺濇敹绱?*/
  --wt-w: 18px;           /* 鐗屽鍗曠墝瀹界缉鑷?75% */
  --wt-h: 24px;           /* 鐗屽鍗曠墝楂樼缉鑷崇害 70% */
  --group-gap: 4px;       /* 缁勫唴缂濋殭鎸夋瘮渚嬬缉灏?*/
}

/* 鍏抽敭锛氭妸澧欒鍒囧埌涓ぎ box 鍐咃紝宸﹀彸澧?灞呬腑鐭々锛屽交搴曟秷闄も€滈€氬ぉ鈥?*/
.players-2 .tile-wall { overflow: hidden; }

/* 鐗岀粍涔嬮棿缂濋殭鍚屾鏀剁揣 */
.players-2 .wall-side { gap: 2px; padding: 2px; }

/* 2 浜哄眬宸﹀彸鏃犵帺瀹讹紝绌烘渤鏀剁獎锛屽噺灏戜袱渚х┖娲炴劅 */
.players-2 .river-left,
.players-2 .river-right { width: 8px; }

/* ===================== 老虎机（水果王子 / 水浒传）原生页面 ===================== */
.slot-page {
  display: none;
  flex-direction: column;
  background: linear-gradient(160deg, #2b1055 0%, #44107a 45%, #7b2ff7 100%);
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.slot-page.active { display: flex; }

.slot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.slot-header-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffd86b;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
}
.slot-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 0;
  gap: 14px;
}

.slot-balance-bar {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 216, 107, 0.4);
  border-radius: 14px;
}
.slot-balance-label { color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.slot-balance-value { color: #ffd86b; font-size: 18px; font-weight: 800; }
.slot-balance-value b { font-size: 22px; }

.slot-machine {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: radial-gradient(circle at 50% 0%, #3a1f6e 0%, #1a0b33 100%);
  border: 3px solid #ffd86b;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(123, 47, 247, 0.4);
  overflow: hidden;
}
.slot-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.slot-reel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 8px 6px;
  flex: 1;
}
.slot-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  min-height: 56px;
  background: linear-gradient(180deg, #fffdf5 0%, #f3e6c4 100%);
  border-radius: 10px;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s;
}
.slot-cell.wild {
  background: linear-gradient(180deg, #ffe9a8 0%, #ffb347 100%);
  box-shadow: 0 0 12px rgba(255, 179, 71, 0.8);
}
.slot-cell.scatter {
  background: linear-gradient(180deg, #b3f0ff 0%, #4fc3f7 100%);
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.8);
}
.slot-cell.win {
  animation: slotWinPulse 0.5s ease-in-out infinite alternate;
  outline: 3px solid #ff3b6b;
}
@keyframes slotWinPulse {
  from { transform: scale(1); box-shadow: 0 0 8px rgba(255, 59, 107, 0.6); }
  to { transform: scale(1.08); box-shadow: 0 0 22px rgba(255, 59, 107, 1); }
}
.slot-grid.slot-spinning .slot-cell {
  animation: slotSpinBlur 0.25s linear infinite;
}
@keyframes slotSpinBlur {
  0% { transform: translateY(-6px); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0.7; }
}

.slot-win-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.slot-win-amount {
  font-size: 32px;
  font-weight: 900;
  color: #ffd86b;
  opacity: 0;
}
.slot-win-amount:not(:empty) {
  animation: slotWinPop 0.6s ease-out;
  opacity: 1;
}
@keyframes slotWinPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.slot-win-lines { font-size: 14px; color: #fff; margin-top: 4px; }

.slot-message {
  width: 100%;
  max-width: 480px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  min-height: 20px;
}
.slot-message.win { color: #ffd86b; font-weight: 700; font-size: 16px; }
.slot-message.lose { color: #ff7b7b; font-weight: 700; }

.slot-controls {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.slot-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slot-ctrl-label { color: rgba(255, 255, 255, 0.8); font-size: 14px; }
.slot-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 4px 6px;
}
.slot-step {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd86b 0%, #ff9f43 100%);
  color: #3a1f6e;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.slot-step:active { transform: scale(0.92); }
.slot-step-val {
  min-width: 34px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #ffd86b;
}
.slot-total {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.slot-total b { color: #ffd86b; font-size: 18px; }
.slot-spin {
  width: 80%;
  max-width: 300px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  padding: 14px;
  background: linear-gradient(180deg, #ff5e62 0%, #ff2a4d 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(255, 42, 77, 0.5);
}
.slot-spin:disabled {
  opacity: 0.55;
  background: linear-gradient(180deg, #888 0%, #555 100%);
  box-shadow: none;
  cursor: not-allowed;
}

/* ===================== 老虎机 · 新中式茶馆版（水果王子）覆盖层 =====================
   与斗地主同源：暖木金墙 + 绿呢牌桌 + 描金水果格 + 赔率图例；保留原 DOM/类名 */
.slot-page,
.slot-page * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.slot-page {
  position: relative;
  background:
    radial-gradient(130% 95% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 55%),
    radial-gradient(120% 110% at 50% 110%, rgba(120, 60, 10, 0.45), transparent 60%),
    linear-gradient(170deg, #f6dda6 0%, #ecc98a 42%, #dfae63 100%);
}
.slot-page::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: .26;
  background:
    linear-gradient(90deg, rgba(120, 60, 10, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 60, 10, .10) 1px, transparent 1px);
  background-size: 68px 46px, 34px 23px;
  background-position: 0 0, 17px 12px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 100%);
}
.slot-header {
  background: linear-gradient(180deg, rgba(96, 48, 8, 0.92), rgba(78, 38, 6, 0.95));
  border-bottom: 3px solid #c9893a;
  box-shadow: 0 3px 12px rgba(70, 32, 4, .4);
}
.slot-header .back-btn {
  color: #ffe9b0; font-weight: 800;
  background: linear-gradient(180deg, #fff3d0, #e8b964);
  border: 2px solid #b8871a; border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.slot-header-title { color: #ffe9b0; -webkit-text-stroke: 1px #7a3c0a; text-shadow: 0 2px 3px rgba(60,26,2,.7); }

.slot-balance-bar {
  background: linear-gradient(180deg, rgba(96, 48, 8, .85), rgba(78, 38, 6, .92));
  border: 2px solid #c9893a;
  color: #ffe9b0;
}
.slot-balance-label { color: #e8c98a; }
.slot-balance-value { color: #ffd76a; }
.slot-balance-value b { color: #ffd76a; }

/* 赔率表图例 */
.slot-legend {
  width: 100%; max-width: 480px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(96,48,8,.78), rgba(78,38,6,.85));
  border: 2px solid #c9893a;
  box-shadow: 0 4px 12px rgba(70,32,4,.35);
}
.slot-legend-chip {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 6px;
  border-radius: 12px;
  background: linear-gradient(165deg, #fffdf4 0%, #f3e6c4 100%);
  border: 2px solid rgba(224, 168, 79, .8);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.slot-legend-chip.high { background: linear-gradient(180deg, #ffd76a, #e6a22e); border-color: #b8871a; }
.slot-legend-chip .sl-fig { font-size: 16px; line-height: 1; }
.slot-legend-chip .sl-name { font-size: 12px; font-weight: 800; color: #5a2e0a; }
.slot-legend-chip .sl-val { font-size: 12px; font-weight: 900; color: #c22a26; }
.slot-legend-chip.high .sl-val { color: #8a1608; }

/* 牌桌：绿呢 + 描金框 */
.slot-machine {
  max-width: 480px;
  background:
    radial-gradient(circle at 50% 30%, rgba(180, 240, 150, .08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #2f9c3f 0%, #1f7d30 55%, #145a22 100%);
  border: 3px solid #8a5a22;
  box-shadow: inset 0 0 40px rgba(0, 40, 10, .5), 0 12px 30px rgba(60, 30, 4, .45);
}
.slot-reel {
  background: rgba(0, 40, 10, .32);
  border: 1px solid rgba(224, 168, 79, .35);
  border-radius: 12px;
}
.slot-cell {
  position: relative;
  background: linear-gradient(180deg, #fffdf4 0%, #f3e6c4 100%);
  border: 2px solid rgba(224, 168, 79, .55);
  border-radius: 10px;
  box-shadow: inset 0 -3px 5px rgba(0, 40, 10, .2);
}
.slot-cell.big {
  border-color: #e0a84f;
  box-shadow: 0 0 12px rgba(224, 168, 79, .55), inset 0 -3px 5px rgba(120, 60, 10, .2);
}
.slot-cell.small { border-color: rgba(180, 200, 120, .5); }
.slot-cell .fig { font-size: 26px; line-height: 1.2; filter: drop-shadow(0 1px 1px rgba(120,60,10,.25)); }
.slot-cell .tag {
  position: absolute; right: 3px; bottom: 2px;
  font-size: 9px; font-weight: 800; line-height: 1.3;
  padding: 0 3px; border-radius: 6px;
  background: #c22a26; color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.slot-cell.wild { background: linear-gradient(180deg, #ffe9a8, #ffb347); border-color: #c98a3a; }
.slot-cell.scatter { background: linear-gradient(180deg, #b3f0ff, #4fc3f7); border-color: #3a8ac0; }
.slot-cell.win { animation: slotWinPulseGold .45s ease-in-out infinite alternate; }
@keyframes slotWinPulseGold {
  from { transform: scale(1); box-shadow: 0 0 8px rgba(255, 201, 71, .6); }
  to { transform: scale(1.07); box-shadow: 0 0 22px rgba(255, 201, 71, 1); }
}

.slot-message { color: #5a2e0a; font-weight: 600; }
.slot-message.win { color: #c22a26; }
.slot-message.lose { color: #b0301d; font-weight: 800; }

.slot-ctrl-label { color: #5a2e0a; font-weight: 700; }
.slot-stepper { background: linear-gradient(180deg, rgba(96,48,8,.8), rgba(78,38,6,.85)); border: 2px solid #c9893a; border-radius: 14px; }
.slot-step { background: linear-gradient(180deg, #ffd76a, #e6a22e); border: none; border-bottom: 3px solid #b8871a; color: #4d2500; border-radius: 10px; }
.slot-step-val { color: #ffe9b0; }
.slot-total { color: #5a2e0a; font-weight: 600; }
.slot-total b { color: #c22a26; }

.slot-spin {
  background:
    radial-gradient(120% 150% at 50% -20%, rgba(255, 255, 255, .6), transparent 42%),
    linear-gradient(180deg, #ff6b52 0%, #e83a2a 55%, #c12616 100%);
  border-bottom: 5px solid #8f1508;
  border-radius: 34px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(120, 25, 8, .45);
  letter-spacing: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.slot-spin:disabled {
  opacity: .55;
  background: linear-gradient(180deg, #9aa7b3, #7a848f);
  border-bottom-color: #5c646d;
  box-shadow: none;
}
.slot-button-base:disabled { cursor: not-allowed; }