/* ========================================================
   找朋友 主题系统
   3 套主题：经典绿毡 (default) / 午夜蓝 / 皇家红
   ======================================================== */

:root {
  /* --- 全局 --- */
  --bg-body: #0d2b10;
  --bg-lobby: #141820;
  --text-color: #fff;
  --font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* --- 大厅卡片 --- */
  --lobby-card-bg-from: rgba(20,24,36,0.97);
  --lobby-card-bg-to: rgba(12,15,24,0.97);
  --lobby-card-border: rgba(80,100,140,0.4);
  --lobby-card-hover-border: rgba(120,160,220,0.7);

  /* --- 牌桌 --- */
  --table-border: #5a3010;
  --table-border-outer: #3a1e06;
  --felt-center: #2d7a3a;
  --felt-mid: #1a5228;
  --felt-edge: #0e3a1c;
  --felt-corner: #092915;
  --felt-texture-color: rgba(255,255,255,0.012);

  /* --- 面板：庄家方 (金色) --- */
  --pz-bg-from: rgba(35,17,0,0.97);
  --pz-bg-to: rgba(18,8,0,0.97);
  --pz-border: rgba(255,200,60,0.6);
  --pz-header-bg: rgba(255,180,30,0.15);
  --pz-header-border: rgba(255,200,60,0.3);
  --pz-title: #f5d840;
  --pz-key: #b8922a;
  --pz-val: #f5d840;
  --pz-score: #ffe060;

  /* --- 面板：闲家方 (蓝色) --- */
  --px-bg-from: rgba(0,12,35,0.97);
  --px-bg-to: rgba(0,5,20,0.97);
  --px-border: rgba(50,160,255,0.7);
  --px-header-bg: rgba(30,110,255,0.2);
  --px-header-border: rgba(50,160,255,0.35);
  --px-title: #50c8ff;
  --px-label: #5a9ccc;
  --px-val: #50c8ff;

  /* --- 面板：旁观者 (紫色) --- */
  --ps-bg-from: rgba(25,8,40,0.97);
  --ps-bg-to: rgba(12,4,22,0.97);
  --ps-border: rgba(160,80,220,0.6);
  --ps-header-bg: rgba(120,50,180,0.2);
  --ps-header-border: rgba(160,80,220,0.3);
  --ps-title: #c080f0;
  --ps-label: #9060b0;
  --ps-val: #d0a0f0;
  --ps-val-me: #e0c0ff;

  /* --- 面板：控制 (绿色) --- */
  --pc-bg-from: rgba(0,22,4,0.97);
  --pc-bg-to: rgba(0,12,2,0.97);
  --pc-border: rgba(60,200,80,0.55);
  --pc-header-bg: rgba(30,120,40,0.25);
  --pc-header-border: rgba(60,200,80,0.3);
  --pc-title: #48e060;
  --pc-label: #2e8840;
  --pc-val: #60d870;
  --pc-highlight: #80f090;
  --pc-slider-track: rgba(60,200,80,0.25);
  --pc-slider-thumb: #48e060;
  --pc-sep: rgba(60,200,80,0.2);
  --pc-select-border: rgba(60,200,80,0.4);
  --pc-select-text: #60d870;

  /* --- 面板：定制 (橙色主题) --- */
  --pcust-bg-from: rgba(25,14,2,0.97);
  --pcust-bg-to: rgba(14,8,1,0.97);
  --pcust-border: rgba(220,150,50,0.5);
  --pcust-header-bg: rgba(180,100,20,0.2);
  --pcust-header-border: rgba(220,150,50,0.3);
  --pcust-title: #e0a030;

  /* --- 座位 --- */
  --seat-border: rgba(255,255,255,0.25);
  --seat-bg: rgba(0,0,0,0.45);
  --seat-text: #ccc;
  --seat-name: #fff;
  --seat-count: #aaa;
  --seat-level: #f0d060;
  --seat-current: #f0d060;
  --seat-current-glow1: rgba(240,208,96,0.4);
  --seat-current-glow2: rgba(240,208,96,0.3);
  --seat-current-glow3: rgba(240,208,96,0.7);
  --seat-current-glow4: rgba(240,208,96,0.45);
  --seat-current-glow5: rgba(240,208,96,0.25);
  --seat-empty-border: rgba(255,255,255,0.3);
  --seat-empty-bg: rgba(0,0,0,0.25);
  --seat-empty-hover-border: rgba(100,220,100,0.7);
  --seat-empty-hover-bg: rgba(0,80,0,0.3);
  --seat-empty-hover-glow: rgba(100,220,100,0.3);

  /* --- 徽章 --- */
  --badge-z: #c8900d;
  --badge-f: #1a80c4;
  --badge-liang: #9b3fbf;
  --badge-host: #27ae60;

  /* --- 牌面 --- */
  --card-bg: #fff;
  --card-border: #ccc;
  --card-selected-border: #e8a020;
  --card-trump-bg: #fffde4;
  --card-trump-border: #c8900d;
  --card-red: #cc0000;
  --card-black: #111;
  --card-rj-bg: #fffde4;
  --card-bj-bg: #fffde4;
  --card-bj-color: #333;
  --mc-bg: #fff;
  --mc-border: #bbb;
  --mc-text: #111;

  /* --- 按钮 --- */
  --btn-primary-bg: #e8a020;
  --btn-primary-text: #333;
  --btn-primary-hover: #f0b030;
  --btn-secondary-bg: #555;
  --btn-secondary-text: #fff;
  --btn-success-bg: #27ae60;
  --btn-danger-bg: #c0392b;

  /* --- 弹窗 --- */
  --modal-bg: #1e5630;
  --modal-border: rgba(255,255,255,0.15);
  --modal-title: #f0d060;
  --modal-text: #ccc;
  --overlay-bg: rgba(0,0,0,0.72);
  --lobby-bg: rgba(0,0,0,0.85);
  --lobby-box-bg: #1b4f28;
  --lobby-input-bg: rgba(255,255,255,0.12);
  --lobby-input-border: #555;
  --lobby-input-focus: #f0d060;
  --lobby-subtitle: #888;

  /* --- 结算 --- */
  --result-box-bg: #1b4f28;
  --result-title: #f0d060;
  --result-th-bg: rgba(0,0,0,0.4);
  --result-th-text: #f0d060;

  /* --- Toast / Deal --- */
  --toast-bg: rgba(0,0,0,0.85);
  --toast-text: #fff;
  --deal-overlay-bg: rgba(0,40,10,0.93);
  --deal-text: #f0d060;
  --deal-bar-bg: rgba(255,255,255,0.18);
  --deal-fill: #e8a020;

  /* --- 连接状态 --- */
  --conn-ok: #6c6;
  --conn-ok-bg: rgba(0,80,0,0.4);
  --conn-fail: #c66;
  --conn-fail-bg: rgba(80,0,0,0.4);

  /* --- 高亮/通用 --- */
  --highlight: #f0d060;
  --error-color: #e74c3c;
  --separator: rgba(255,255,255,0.08);
  --hand-area-bg: rgba(0,0,0,0.9);

  /* --- 亮主弹窗 --- */
  --count-btn-border: #666;
  --count-btn-text: #bbb;
  --count-btn-sel-bg: #e8a020;
  --count-btn-sel-text: #333;
  --suit-btn-bg: rgba(255,255,255,0.12);
  --suit-btn-hover-border: #f0d060;
  --suit-btn-red: #ff4040;
  --suit-btn-black: #fff;

  /* --- AI 状态 --- */
  --ai-status-text: #6c6;
  --ai-status-bg: rgba(0,80,0,0.5);

  /* --- 座位切换按钮 --- */
  --seat-toggle-border: rgba(255,255,255,0.3);
  --seat-toggle-bg: rgba(0,0,0,0.5);
  --seat-toggle-text: #aaa;
  --seat-toggle-hover-bg: rgba(255,255,255,0.15);
}

/* ========================================================
   午夜蓝 Midnight Blue
   ======================================================== */
body.theme-midnight {
  --bg-body: #0a1628;
  --bg-lobby: #0e1018;
  --lobby-card-bg-from: rgba(14,18,30,0.97);
  --lobby-card-bg-to: rgba(8,10,20,0.97);
  --lobby-card-border: rgba(60,120,200,0.3);
  --lobby-card-hover-border: rgba(79,195,247,0.6);
  --table-border: #2a4a6a;
  --table-border-outer: #1a3050;
  --felt-center: #1a4a6a;
  --felt-mid: #133a54;
  --felt-edge: #0c2840;
  --felt-corner: #081c30;
  --felt-texture-color: rgba(100,180,255,0.012);

  --pz-bg-from: rgba(30,20,5,0.97);
  --pz-bg-to: rgba(15,10,2,0.97);
  --pz-border: rgba(220,180,60,0.5);
  --pz-header-bg: rgba(200,160,30,0.12);
  --pz-header-border: rgba(220,180,60,0.25);
  --pz-title: #e0c840;
  --pz-key: #a08030;
  --pz-val: #e0c840;
  --pz-score: #f0d860;

  --px-bg-from: rgba(5,15,40,0.97);
  --px-bg-to: rgba(2,8,25,0.97);
  --px-border: rgba(80,180,255,0.6);
  --px-header-bg: rgba(40,120,255,0.15);
  --px-header-border: rgba(80,180,255,0.3);
  --px-title: #70d0ff;
  --px-label: #5aa0d0;
  --px-val: #70d0ff;

  --ps-bg-from: rgba(15,8,35,0.97);
  --ps-bg-to: rgba(8,4,20,0.97);
  --ps-border: rgba(130,80,200,0.5);
  --ps-header-bg: rgba(100,50,170,0.15);
  --ps-title: #b080e0;
  --ps-label: #8060a0;
  --ps-val: #c0a0e0;

  --pc-bg-from: rgba(5,12,25,0.97);
  --pc-bg-to: rgba(3,8,18,0.97);
  --pc-border: rgba(60,160,255,0.45);
  --pc-header-bg: rgba(30,100,200,0.2);
  --pc-header-border: rgba(60,160,255,0.25);
  --pc-title: #4fc3f7;
  --pc-label: #2a7ab0;
  --pc-val: #60b8e8;
  --pc-highlight: #80d0ff;
  --pc-slider-track: rgba(60,160,255,0.25);
  --pc-slider-thumb: #4fc3f7;
  --pc-sep: rgba(60,160,255,0.2);
  --pc-select-border: rgba(60,160,255,0.4);
  --pc-select-text: #60b8e8;

  --seat-level: #4fc3f7;
  --seat-current: #4fc3f7;
  --seat-current-glow1: rgba(79,195,247,0.4);
  --seat-current-glow2: rgba(79,195,247,0.3);
  --seat-current-glow3: rgba(79,195,247,0.7);
  --seat-current-glow4: rgba(79,195,247,0.45);
  --seat-current-glow5: rgba(79,195,247,0.25);
  --seat-empty-hover-border: rgba(80,180,255,0.7);
  --seat-empty-hover-bg: rgba(0,40,80,0.3);
  --seat-empty-hover-glow: rgba(80,180,255,0.3);

  --card-selected-border: #4fc3f7;
  --card-trump-bg: #e8f0ff;
  --card-trump-border: #4a80b0;

  --btn-primary-bg: #4fc3f7;
  --btn-primary-text: #0a1628;
  --btn-primary-hover: #70d4ff;
  --btn-success-bg: #2196f3;

  --modal-bg: #152840;
  --modal-title: #4fc3f7;
  --modal-border: rgba(80,180,255,0.2);
  --lobby-box-bg: #152840;
  --lobby-input-focus: #4fc3f7;

  --result-box-bg: #152840;
  --result-title: #4fc3f7;
  --result-th-text: #4fc3f7;

  --deal-overlay-bg: rgba(10,20,50,0.93);
  --deal-text: #4fc3f7;
  --deal-fill: #4fc3f7;

  --highlight: #4fc3f7;
  --hand-area-bg: rgba(5,10,25,0.9);

  --count-btn-sel-bg: #4fc3f7;
  --count-btn-sel-text: #0a1628;
  --suit-btn-hover-border: #4fc3f7;

  --badge-z: #b08010;
  --badge-host: #2196f3;

  --conn-ok: #4fc3f7;
  --conn-ok-bg: rgba(0,40,80,0.4);

  --ai-status-text: #4fc3f7;
  --ai-status-bg: rgba(0,40,80,0.5);

  --pcust-bg-from: rgba(15,12,25,0.97);
  --pcust-bg-to: rgba(8,6,15,0.97);
  --pcust-border: rgba(100,160,255,0.4);
  --pcust-header-bg: rgba(50,100,200,0.15);
  --pcust-header-border: rgba(100,160,255,0.25);
  --pcust-title: #70b0e8;
}

/* ========================================================
   皇家红 Royal Crimson
   ======================================================== */
body.theme-crimson {
  --bg-body: #1a0a0a;
  --bg-lobby: #161010;
  --lobby-card-bg-from: rgba(28,14,14,0.97);
  --lobby-card-bg-to: rgba(18,8,8,0.97);
  --lobby-card-border: rgba(180,80,80,0.3);
  --lobby-card-hover-border: rgba(255,144,64,0.6);
  --table-border: #6a3030;
  --table-border-outer: #4a1a1a;
  --felt-center: #5a2020;
  --felt-mid: #401818;
  --felt-edge: #2a0e0e;
  --felt-corner: #1e0808;
  --felt-texture-color: rgba(255,150,150,0.012);

  --pz-bg-from: rgba(40,18,5,0.97);
  --pz-bg-to: rgba(22,10,3,0.97);
  --pz-border: rgba(255,180,60,0.5);
  --pz-header-bg: rgba(240,160,30,0.12);
  --pz-title: #f0c840;
  --pz-key: #b08828;
  --pz-val: #f0c840;
  --pz-score: #ffd860;

  --px-bg-from: rgba(20,8,15,0.97);
  --px-bg-to: rgba(12,4,10,0.97);
  --px-border: rgba(220,140,180,0.5);
  --px-header-bg: rgba(180,80,140,0.15);
  --px-header-border: rgba(220,140,180,0.3);
  --px-title: #e0a0c0;
  --px-label: #b080a0;
  --px-val: #e0a0c0;

  --ps-bg-from: rgba(20,8,30,0.97);
  --ps-bg-to: rgba(12,4,18,0.97);
  --ps-border: rgba(180,80,200,0.5);
  --ps-header-bg: rgba(140,50,170,0.15);
  --ps-title: #d090f0;
  --ps-label: #a070b0;
  --ps-val: #d0a8e8;

  --pc-bg-from: rgba(22,6,6,0.97);
  --pc-bg-to: rgba(14,4,4,0.97);
  --pc-border: rgba(220,80,80,0.45);
  --pc-header-bg: rgba(160,40,40,0.2);
  --pc-header-border: rgba(220,80,80,0.25);
  --pc-title: #f06060;
  --pc-label: #a04040;
  --pc-val: #e07070;
  --pc-highlight: #ff9090;
  --pc-slider-track: rgba(220,80,80,0.25);
  --pc-slider-thumb: #f06060;
  --pc-sep: rgba(220,80,80,0.2);
  --pc-select-border: rgba(220,80,80,0.4);
  --pc-select-text: #e07070;

  --seat-level: #ff9040;
  --seat-current: #ff9040;
  --seat-current-glow1: rgba(255,144,64,0.4);
  --seat-current-glow2: rgba(255,144,64,0.3);
  --seat-current-glow3: rgba(255,144,64,0.7);
  --seat-current-glow4: rgba(255,144,64,0.45);
  --seat-current-glow5: rgba(255,144,64,0.25);
  --seat-empty-hover-border: rgba(255,120,80,0.7);
  --seat-empty-hover-bg: rgba(80,20,0,0.3);
  --seat-empty-hover-glow: rgba(255,120,80,0.3);

  --card-selected-border: #ff9040;
  --card-trump-bg: #fff4e8;
  --card-trump-border: #b07030;

  --btn-primary-bg: #ff9040;
  --btn-primary-text: #1a0a0a;
  --btn-primary-hover: #ffa060;
  --btn-success-bg: #e06030;

  --modal-bg: #2a1218;
  --modal-title: #ff9040;
  --modal-border: rgba(220,80,80,0.2);
  --lobby-box-bg: #2a1218;
  --lobby-input-focus: #ff9040;

  --result-box-bg: #2a1218;
  --result-title: #ff9040;
  --result-th-text: #ff9040;

  --deal-overlay-bg: rgba(40,10,10,0.93);
  --deal-text: #ff9040;
  --deal-fill: #ff9040;

  --highlight: #ff9040;
  --hand-area-bg: rgba(20,5,5,0.9);

  --count-btn-sel-bg: #ff9040;
  --count-btn-sel-text: #1a0a0a;
  --suit-btn-hover-border: #ff9040;

  --badge-z: #c07020;
  --badge-host: #e06030;

  --conn-ok: #e07070;
  --conn-ok-bg: rgba(80,20,0,0.4);

  --ai-status-text: #e07070;
  --ai-status-bg: rgba(80,20,0,0.5);

  --pcust-bg-from: rgba(25,10,5,0.97);
  --pcust-bg-to: rgba(15,6,3,0.97);
  --pcust-border: rgba(220,120,60,0.4);
  --pcust-header-bg: rgba(180,70,30,0.15);
  --pcust-header-border: rgba(220,120,60,0.25);
  --pcust-title: #e08040;
}