/* ===== Skin: 霓虹会所 (default huzhan-like) ===== */
#app, #app[data-skin="neonclub"] {
  --bg: #081428;
  --lobby-bg: radial-gradient(ellipse 90% 70% at 50% 20%, #1e3a7a 0%, #0a1638 50%, #050b1c 100%);
  --orb-a: rgba(80, 140, 255, 0.35);
  --orb-b: rgba(180, 90, 255, 0.22);
  --pattern: rgba(120, 180, 255, 0.05);
  --text: #e8f0ff;
  --text-dim: rgba(220, 235, 255, 0.62);
  --accent: #f0c75e;
  --accent-deep: #c9921a;
  --accent-soft: rgba(80, 140, 255, 0.2);
  --title-hi: #fff6c8;
  --title-glow: rgba(90, 150, 255, 0.4);
  --btn-hi: #ffe08a;
  --btn-text: #1a1208;
  --btn-shadow: #7a5a08;
  --panel: rgba(255, 255, 255, 0.08);
  --line: rgba(120, 180, 255, 0.2);
  --line-strong: rgba(120, 180, 255, 0.42);
  --modal-bg: linear-gradient(165deg, #1a3268 0%, #0a142e 100%);
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #1e4d8c 0%, #12305e 42%, #081428 100%);
  --felt-rim: rgba(240, 199, 94, 0.4);
  --felt-inner: rgba(120, 180, 255, 0.15);
  --card-back-rim: #f0c75e;
  --card-back-glyph: transparent;
  --chip-face: repeating-conic-gradient(#2563eb 0 30deg, #f7ecd4 0 60deg);
  --chip-ring: #f7ecd4;
  --chip-inset: #1e3a8a;
  --avatar-hi: #60a5fa;
  --avatar-lo: #1d4ed8;
  --danger: #ef4444;
  --win-glow: rgba(96, 165, 250, 0.5);
}

/* ===== Skin: 朱砂金箔 ===== */
#app[data-skin="cinnabar"] {
  --bg: #120508;
  --lobby-bg: radial-gradient(ellipse 90% 70% at 50% 20%, #4a1218 0%, #1a0508 45%, #080204 100%);
  --orb-a: rgba(196, 48, 54, 0.45);
  --orb-b: rgba(212, 160, 23, 0.28);
  --pattern: rgba(212, 160, 23, 0.05);
  --text: #f7ecd8;
  --text-dim: rgba(247, 236, 216, 0.62);
  --accent: #e0b34a;
  --accent-deep: #a67c12;
  --accent-soft: rgba(224, 179, 74, 0.18);
  --title-hi: #fff3c4;
  --title-glow: rgba(224, 179, 74, 0.4);
  --btn-hi: #f5d76e;
  --btn-text: #2a1208;
  --btn-shadow: #6b4a08;
  --panel: rgba(255, 255, 255, 0.06);
  --line: rgba(224, 179, 74, 0.18);
  --line-strong: rgba(224, 179, 74, 0.4);
  --modal-bg: linear-gradient(165deg, #3a1418 0%, #160608 100%);
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #5c1a22 0%, #2e0c12 42%, #140508 100%);
  --felt-rim: rgba(224, 179, 74, 0.35);
  --felt-inner: rgba(224, 179, 74, 0.12);
  --card-back: linear-gradient(145deg, #8b1c24 0%, #4a0e14 100%);
  --card-back-rim: #d4a017;
  --card-back-glyph: #f0c75e;
  --chip-face: repeating-conic-gradient(#b91c1c 0 30deg, #f7ecd4 0 60deg);
  --chip-ring: #f7ecd4;
  --chip-inset: #7f1d1d;
  --avatar-hi: #e85d4c;
  --avatar-lo: #8b1c24;
  --danger: #dc2626;
  --win-glow: rgba(240, 199, 94, 0.55);
}

/* ===== Skin: 墨玉 ===== */
#app[data-skin="obsidian"] {
  --bg: #07090c;
  --lobby-bg: radial-gradient(ellipse 90% 70% at 50% 20%, #1a2430 0%, #0a0e14 50%, #040508 100%);
  --orb-a: rgba(100, 140, 180, 0.3);
  --orb-b: rgba(212, 185, 120, 0.22);
  --pattern: rgba(200, 180, 130, 0.04);
  --text: #e8e4d8;
  --text-dim: rgba(232, 228, 216, 0.58);
  --accent: #d4b978;
  --accent-deep: #8a7340;
  --accent-soft: rgba(212, 185, 120, 0.16);
  --title-hi: #f5ecd0;
  --title-glow: rgba(212, 185, 120, 0.35);
  --btn-hi: #e8d5a0;
  --btn-text: #1a1610;
  --btn-shadow: #5c4c28;
  --panel: rgba(255, 255, 255, 0.05);
  --line: rgba(212, 185, 120, 0.16);
  --line-strong: rgba(212, 185, 120, 0.38);
  --modal-bg: linear-gradient(165deg, #1c2430 0%, #0a0e14 100%);
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #243040 0%, #121820 45%, #070a0e 100%);
  --felt-rim: rgba(212, 185, 120, 0.3);
  --felt-inner: rgba(212, 185, 120, 0.1);
  --card-back: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  --card-back-rim: #d4b978;
  --card-back-glyph: #e8d5a0;
  --chip-face: repeating-conic-gradient(#334155 0 30deg, #e8e4d8 0 60deg);
  --chip-ring: #e8e4d8;
  --chip-inset: #1e293b;
  --avatar-hi: #64748b;
  --avatar-lo: #1e293b;
  --danger: #ef4444;
  --win-glow: rgba(212, 185, 120, 0.5);
}

/* ===== Skin: 青瓷 ===== */
#app[data-skin="celadon"] {
  --bg: #061410;
  --lobby-bg: radial-gradient(ellipse 90% 70% at 50% 20%, #0f3d34 0%, #07221c 48%, #031210 100%);
  --orb-a: rgba(45, 160, 130, 0.35);
  --orb-b: rgba(200, 170, 90, 0.22);
  --pattern: rgba(120, 200, 170, 0.05);
  --text: #e4f2ec;
  --text-dim: rgba(228, 242, 236, 0.6);
  --accent: #c9a84c;
  --accent-deep: #8a6f20;
  --accent-soft: rgba(201, 168, 76, 0.16);
  --title-hi: #f0e2b0;
  --title-glow: rgba(80, 200, 160, 0.3);
  --btn-hi: #e4c86a;
  --btn-text: #0a1f18;
  --btn-shadow: #5c4a10;
  --panel: rgba(255, 255, 255, 0.06);
  --line: rgba(100, 190, 160, 0.2);
  --line-strong: rgba(201, 168, 76, 0.4);
  --modal-bg: linear-gradient(165deg, #0f332c 0%, #061a15 100%);
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #157a64 0%, #0a3d32 42%, #041e18 100%);
  --felt-rim: rgba(201, 168, 76, 0.32);
  --felt-inner: rgba(120, 220, 180, 0.12);
  --card-back: linear-gradient(145deg, #0f766e 0%, #115e59 100%);
  --card-back-rim: #c9a84c;
  --card-back-glyph: #f0e2b0;
  --chip-face: repeating-conic-gradient(#0f766e 0 30deg, #e4f2ec 0 60deg);
  --chip-ring: #e4f2ec;
  --chip-inset: #115e59;
  --avatar-hi: #2dd4bf;
  --avatar-lo: #0f766e;
  --danger: #f43f5e;
  --win-glow: rgba(45, 212, 191, 0.4);
}

/* ===== Skin: 红漆 ===== */
#app[data-skin="lacquer"] {
  --bg: #1a0404;
  --lobby-bg: radial-gradient(ellipse 90% 70% at 50% 20%, #7a1010 0%, #3a0606 42%, #120202 100%);
  --orb-a: rgba(220, 40, 40, 0.5);
  --orb-b: rgba(255, 200, 80, 0.25);
  --pattern: rgba(255, 200, 100, 0.06);
  --text: #ffe8c8;
  --text-dim: rgba(255, 232, 200, 0.65);
  --accent: #ffc94a;
  --accent-deep: #c48a00;
  --accent-soft: rgba(255, 201, 74, 0.2);
  --title-hi: #fff5d0;
  --title-glow: rgba(255, 80, 60, 0.35);
  --btn-hi: #ffd76a;
  --btn-text: #3a0a0a;
  --btn-shadow: #8a5a00;
  --panel: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 201, 74, 0.22);
  --line-strong: rgba(255, 201, 74, 0.45);
  --modal-bg: linear-gradient(165deg, #5c1010 0%, #220404 100%);
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #9a1818 0%, #4a0808 40%, #1a0404 100%);
  --felt-rim: rgba(255, 201, 74, 0.4);
  --felt-inner: rgba(255, 120, 100, 0.15);
  --card-back: linear-gradient(145deg, #dc2626 0%, #7f1d1d 100%);
  --card-back-rim: #ffc94a;
  --card-back-glyph: #fff5d0;
  --chip-face: repeating-conic-gradient(#dc2626 0 30deg, #fff5d0 0 60deg);
  --chip-ring: #fff5d0;
  --chip-inset: #7f1d1d;
  --avatar-hi: #fb7185;
  --avatar-lo: #be123c;
  --danger: #ef4444;
  --win-glow: rgba(255, 201, 74, 0.55);
}

.swatch-cinnabar {
  background: linear-gradient(135deg, #5c1a22, #e0b34a 60%, #2e0c12);
}
.swatch-obsidian {
  background: linear-gradient(135deg, #1e293b, #d4b978 60%, #0f172a);
}
.swatch-celadon {
  background: linear-gradient(135deg, #0f766e, #c9a84c 60%, #041e18);
}
.swatch-lacquer {
  background: linear-gradient(135deg, #9a1818, #ffc94a 55%, #1a0404);
}
.swatch-neonclub {
  background: linear-gradient(135deg, #1e3a7a, #f0c75e 50%, #7c3aed);
}
.swatch-royal {
  background: linear-gradient(135deg, #3b0764, #fbbf24 55%, #1e1b4b);
}
.swatch-aurora {
  background: linear-gradient(135deg, #0ea5e9, #a78bfa 50%, #022c43);
}
.swatch-sakura {
  background: linear-gradient(135deg, #831843, #f9a8d4 50%, #4c0519);
}

#app[data-skin="royal"] {
  --bg: #14081f;
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #5b21b6 0%, #2e1065 45%, #14081f 100%);
  --felt-rim: rgba(251, 191, 36, 0.45);
  --felt-inner: rgba(196, 181, 253, 0.15);
  --accent: #fbbf24;
  --accent-deep: #d97706;
  --accent-soft: rgba(251, 191, 36, 0.18);
  --title-hi: #fef3c7;
  --title-glow: rgba(167, 139, 250, 0.4);
  --btn-hi: #fde68a;
  --btn-text: #1e1030;
  --btn-shadow: #92400e;
  --panel: rgba(255, 255, 255, 0.07);
  --line: rgba(196, 181, 253, 0.22);
  --line-strong: rgba(251, 191, 36, 0.4);
  --modal-bg: linear-gradient(165deg, #3b0764 0%, #14081f 100%);
  --text: #f5f3ff;
  --text-dim: rgba(237, 233, 254, 0.65);
  --avatar-hi: #c4b5fd;
  --avatar-lo: #6d28d9;
  --chip-face: repeating-conic-gradient(#7c3aed 0 30deg, #fef3c7 0 60deg);
  --chip-ring: #fef3c7;
  --chip-inset: #5b21b6;
  --card-back-rim: #fbbf24;
  --win-glow: rgba(251, 191, 36, 0.5);
  --danger: #f43f5e;
}

#app[data-skin="aurora"] {
  --bg: #031525;
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #0369a1 0%, #0c4a6e 42%, #031525 100%);
  --felt-rim: rgba(125, 211, 252, 0.4);
  --felt-inner: rgba(167, 139, 250, 0.15);
  --accent: #7dd3fc;
  --accent-deep: #0284c7;
  --accent-soft: rgba(125, 211, 252, 0.18);
  --title-hi: #e0f2fe;
  --title-glow: rgba(56, 189, 248, 0.4);
  --btn-hi: #bae6fd;
  --btn-text: #0c4a6e;
  --btn-shadow: #0369a1;
  --panel: rgba(255, 255, 255, 0.07);
  --line: rgba(125, 211, 252, 0.22);
  --line-strong: rgba(125, 211, 252, 0.42);
  --modal-bg: linear-gradient(165deg, #0c4a6e 0%, #031525 100%);
  --text: #e0f2fe;
  --text-dim: rgba(186, 230, 253, 0.65);
  --avatar-hi: #38bdf8;
  --avatar-lo: #0369a1;
  --chip-face: repeating-conic-gradient(#0284c7 0 30deg, #e0f2fe 0 60deg);
  --chip-ring: #e0f2fe;
  --chip-inset: #075985;
  --card-back-rim: #7dd3fc;
  --win-glow: rgba(56, 189, 248, 0.45);
  --danger: #fb7185;
}

#app[data-skin="sakura"] {
  --bg: #1a0812;
  --felt: radial-gradient(ellipse 75% 55% at 50% 40%, #9d174d 0%, #4a0720 42%, #1a0812 100%);
  --felt-rim: rgba(249, 168, 212, 0.4);
  --felt-inner: rgba(251, 113, 133, 0.15);
  --accent: #f9a8d4;
  --accent-deep: #db2777;
  --accent-soft: rgba(249, 168, 212, 0.18);
  --title-hi: #fce7f3;
  --title-glow: rgba(244, 114, 182, 0.4);
  --btn-hi: #fbcfe8;
  --btn-text: #4a0720;
  --btn-shadow: #9d174d;
  --panel: rgba(255, 255, 255, 0.07);
  --line: rgba(249, 168, 212, 0.22);
  --line-strong: rgba(249, 168, 212, 0.42);
  --modal-bg: linear-gradient(165deg, #831843 0%, #1a0812 100%);
  --text: #fce7f3;
  --text-dim: rgba(251, 207, 232, 0.65);
  --avatar-hi: #f472b6;
  --avatar-lo: #be185d;
  --chip-face: repeating-conic-gradient(#db2777 0 30deg, #fce7f3 0 60deg);
  --chip-ring: #fce7f3;
  --chip-inset: #9d174d;
  --card-back-rim: #f9a8d4;
  --win-glow: rgba(244, 114, 182, 0.45);
  --danger: #fb7185;
}

/* Card backs — beauty images */
.swatch-cb-beauty {
  background: url("../assets/card-back-beauty.png") center / cover no-repeat;
}
.swatch-cb-moon {
  background: url("../assets/card-back-moon.png") center / cover no-repeat;
}
.swatch-cb-jade {
  background: url("../assets/card-back-jade.png") center / cover no-repeat;
}

#app[data-cardback="beauty"] {
  --card-back-image: url("../assets/card-back-beauty.png");
}
#app[data-cardback="moon"] {
  --card-back-image: url("../assets/card-back-moon.png");
}
#app[data-cardback="jade"] {
  --card-back-image: url("../assets/card-back-jade.png");
}