/* ═══════════════════════════════════════════
   动物大作战 · 多主题支持
   ═══════════════════════════════════════════ */

/* ─── 全局变量（森林 — 默认） ─── */
:root, [data-theme="forest"] {
  --bg-dark: #1a2a1a;
  --bg-card: rgba(30, 48, 28, 0.88);
  --bg-elevated: rgba(42, 62, 38, 0.92);
  --green-leaf: #4caf50;
  --green-moss: #6a9c5a;
  --brown-wood: #8b6914;
  --brown-dark: #5a3e0a;
  --gold-sun: #ffd700;
  --sky-blue: #87ceeb;
  --warm-orange: #ff8c42;
  --text: #fff8e7;
  --text-dim: #9ab090;
  --radius: 14px;
  --shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  --glow-green: 0 0 20px rgba(76, 175, 80, 0.25);
  --glow-gold: 0 0 20px rgba(255, 215, 0, 0.25);
  --accent: #4caf50;
  --font-main: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'ZCOOL KuaiLe', 'Nunito', sans-serif;
  --bg-gradient: radial-gradient(ellipse at 20% 80%, rgba(76, 175, 80, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(255, 215, 0, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, #1e301c 0%, #152515 100%);
  --bg-pattern: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(76, 175, 80, 0.025) 80px, rgba(76, 175, 80, 0.025) 81px);
  --bg-sun: radial-gradient(ellipse, rgba(255, 215, 0, 0.04) 0%, transparent 70%);
  --particles: "🍃","🌿","☘️","🍀";
  --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ─── 竹林风格 ─── */
[data-theme="bamboo"] {
  --bg-dark: #0a1a24;
  --bg-card: rgba(15, 35, 45, 0.88);
  --bg-elevated: rgba(25, 45, 55, 0.92);
  --green-leaf: #00bcd4;
  --green-moss: #4dd0e1;
  --brown-wood: #78909c;
  --brown-dark: #546e7a;
  --gold-sun: #80deea;
  --sky-blue: #4dd0e1;
  --warm-orange: #ffab40;
  --text: #e0f7fa;
  --text-dim: #80cbc4;
  --glow-green: 0 0 20px rgba(0, 188, 212, 0.25);
  --glow-gold: 0 0 20px rgba(128, 222, 234, 0.25);
  --accent: #00bcd4;
  --bg-gradient: radial-gradient(ellipse at 30% 70%, rgba(0, 188, 212, 0.07) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 30%, rgba(128, 222, 234, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, #0e2a38 0%, #081b24 100%);
  --bg-pattern: repeating-linear-gradient(180deg, transparent, transparent 60px, rgba(0, 188, 212, 0.03) 60px, rgba(0, 188, 212, 0.03) 61px),
                repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(0, 188, 212, 0.02) 80px, rgba(0, 188, 212, 0.02) 81px);
  --bg-sun: radial-gradient(ellipse, rgba(128, 222, 234, 0.04) 0%, transparent 70%);
  --overlay-bg: rgba(0, 0, 0, 0.65);
}

/* ─── 花园风格 ─── */
[data-theme="garden"] {
  --bg-dark: #1a1423;
  --bg-card: rgba(48, 25, 50, 0.88);
  --bg-elevated: rgba(58, 35, 60, 0.92);
  --green-leaf: #ff4081;
  --green-moss: #f48fb1;
  --brown-wood: #8d6e63;
  --brown-dark: #5d4037;
  --gold-sun: #ffab00;
  --sky-blue: #ce93d8;
  --warm-orange: #ff6f00;
  --text: #fce4ec;
  --text-dim: #c9a9be;
  --glow-green: 0 0 20px rgba(255, 64, 129, 0.25);
  --glow-gold: 0 0 20px rgba(255, 171, 0, 0.25);
  --accent: #ff4081;
  --font-title: 'ZCOOL KuaiLe', 'Nunito', sans-serif;
  --bg-gradient: radial-gradient(ellipse at 20% 80%, rgba(255, 64, 129, 0.07) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(255, 171, 0, 0.05) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, #2d1a2e 0%, #1e1423 100%);
  --bg-pattern: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255, 64, 129, 0.025) 80px, rgba(255, 64, 129, 0.025) 81px);
  --bg-sun: radial-gradient(ellipse, rgba(255, 171, 0, 0.05) 0%, transparent 70%);
  --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ─── 水墨风格 ─── */
[data-theme="ink"] {
  --bg-dark: #0a0a0c;
  --bg-card: rgba(25, 25, 30, 0.9);
  --bg-elevated: rgba(35, 35, 40, 0.92);
  --green-leaf: #9e9e9e;
  --green-moss: #757575;
  --brown-wood: #616161;
  --brown-dark: #424242;
  --gold-sun: #e0e0e0;
  --sky-blue: #b0bec5;
  --warm-orange: #bdbdbd;
  --text: #eceff1;
  --text-dim: #78909c;
  --glow-green: 0 0 20px rgba(158, 158, 158, 0.2);
  --glow-gold: 0 0 20px rgba(224, 224, 224, 0.2);
  --accent: #9e9e9e;
  --font-main: 'Noto Serif SC', 'Nunito', serif;
  --font-title: 'Ma Shan Zheng', 'ZCOOL KuaiLe', cursive;
  --bg-gradient: radial-gradient(ellipse at 40% 60%, rgba(158, 158, 158, 0.04) 0%, transparent 40%),
                radial-gradient(ellipse at 60% 40%, rgba(200, 200, 200, 0.03) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 50%, #121216 0%, #08080a 100%);
  --bg-pattern: none;
  --bg-sun: radial-gradient(ellipse, rgba(224, 224, 224, 0.03) 0%, transparent 60%);
  --overlay-bg: rgba(0, 0, 0, 0.8);
}

/* ─── 多巴胺风格 ─── */
[data-theme="dopamine"] {
  --bg-dark: #1a0a2e;
  --bg-card: rgba(50, 20, 65, 0.88);
  --bg-elevated: rgba(60, 30, 75, 0.92);
  --green-leaf: #ff2d78;
  --green-moss: #7c3aed;
  --brown-wood: #f59e0b;
  --brown-dark: #ef4444;
  --gold-sun: #10b981;
  --sky-blue: #06b6d4;
  --warm-orange: #f97316;
  --text: #f8fafc;
  --text-dim: #a78bfa;
  --glow-green: 0 0 20px rgba(255, 45, 120, 0.3);
  --glow-gold: 0 0 20px rgba(16, 185, 129, 0.3);
  --accent: #ff2d78;
  --font-main: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'ZCOOL KuaiLe', 'Nunito', sans-serif;
  --bg-gradient: radial-gradient(ellipse at 20% 80%, rgba(255, 45, 120, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 40%),
                radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, #2d1a4e 0%, #1a0a2e 100%);
  --bg-pattern: repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(255, 45, 120, 0.035) 40px, rgba(255, 45, 120, 0.035) 41px),
                repeating-linear-gradient(120deg, transparent, transparent 40px, rgba(6, 182, 212, 0.025) 40px, rgba(6, 182, 212, 0.025) 41px);
  --bg-sun: radial-gradient(ellipse, rgba(16, 185, 129, 0.06) 0%, transparent 60%);
  --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ─── 通用重置 ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-main);
  background: var(--bg-dark);
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.6s ease, color 0.6s ease;
}

/* ─── 主题背景 ─── */
.bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--bg-gradient);
  transition: background 0.8s ease;
}
.bg::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bg-pattern);
  pointer-events: none;
  transition: background 0.8s ease;
}
.bg::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60vw; height: 40vh;
  background: var(--bg-sun);
  pointer-events: none;
  animation: sunGlow 6s ease-in-out infinite alternate;
  transition: background 0.8s ease;
}
@keyframes sunGlow {
  0% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* ─── 水墨特色：山峦背景 ─── */
[data-theme="ink"] .bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 30% at 10% 85%, rgba(100,100,110,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 100% 25% at 30% 88%, rgba(120,120,130,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 80% 20% at 60% 90%, rgba(80,80,90,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 140% 25% at 85% 85%, rgba(100,100,110,0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* ─── 飘落粒子（主题特有） ─── */
.particle {
  position: absolute; pointer-events: none; opacity: 0.4;
  animation: particleFall linear infinite; font-size: 14px;
}
@keyframes particleFall {
  0% { transform: translateY(-5vh) rotate(0deg) scale(0.8); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translateY(105vh) rotate(720deg) scale(1.2); opacity: 0; }
}

/* ─── 水墨特色：雾气动画 ─── */
[data-theme="ink"] .bg .mist {
  position: absolute;
  bottom: 0; left: -10%; width: 120%; height: 40%;
  background: linear-gradient(0deg, rgba(150,150,160,0.02) 0%, transparent 100%);
  pointer-events: none;
  animation: mistDrift 12s ease-in-out infinite alternate;
}
@keyframes mistDrift {
  0% { transform: translateX(0) scaleY(1); opacity: 0.5; }
  50% { transform: translateX(5%) scaleY(1.1); opacity: 0.8; }
  100% { transform: translateX(-3%) scaleY(0.95); opacity: 0.6; }
}

/* ─── 静音按钮（右下角，低调） ─── */
.mute-btn {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 80;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: var(--text-dim); opacity: 0.35;
  transition: all 0.3s ease;
}
.mute-btn:hover {
  opacity: 0.7;
  border-color: rgba(255,255,255,0.1);
  color: var(--text);
  transform: scale(1.1);
}

/* ─── 页面 ─── */
.page {
  display: none; position: fixed; inset: 0;
  flex-direction: column; align-items: center; justify-content: center;
  z-index: 1; overflow-x: hidden;
}
.page.active { display: flex; }
#lobby { justify-content: flex-start; padding-top: 10vh; }
.lobby-wrap { text-align: center; animation: fadeUp 0.6s ease; position: relative; }

/* ─── LOGO ─── */
.logo { display: inline-block; }
.logo h1 {
  font-size: 2.8rem; font-weight: 900; font-family: var(--font-title);
  background: linear-gradient(135deg, var(--green-leaf), var(--brown-wood));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.3; letter-spacing: 0.05em;
  filter: drop-shadow(0 2px 20px rgba(76, 175, 80, 0.3));
}
.tagline { color: var(--text-dim); margin-top: 1rem; font-size: 0.95rem; letter-spacing: 0.03em; }

.lobby-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.4rem;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.lobby-actions .btn {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.05rem;
  text-align: center;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ─── 主题按钮（在大厅下方） ─── */


/* ═══════════ 按钮 ─── 主题适配 ═══════════ */
.btn {
  font-family: var(--font-main); font-weight: 700; border: none;
  border-radius: var(--radius); cursor: pointer; transition: all 0.25s ease;
  padding: 0.85rem 2rem; font-size: 1rem; position: relative; overflow: hidden;
  letter-spacing: 0.03em;
}
.btn:active { transform: scale(0.95); }
.btn.primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent) 3%, transparent);
}
.btn.primary:hover {
  box-shadow: 0 0 35px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent) 5%, transparent);
  border-color: var(--accent); transform: translateY(-2px);
}
.btn.secondary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-sun) 15%, transparent), color-mix(in srgb, var(--gold-sun) 6%, transparent));
  color: var(--gold-sun); border: 1.5px solid color-mix(in srgb, var(--gold-sun) 20%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--gold-sun) 8%, transparent);
}
.btn.secondary:hover {
  box-shadow: 0 0 35px color-mix(in srgb, var(--gold-sun) 20%, transparent);
  border-color: var(--gold-sun); transform: translateY(-2px);
}
.btn.outline {
  background: transparent; color: var(--text-dim);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}
.btn.outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 12%, transparent); }
.btn.danger {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warm-orange) 15%, transparent), color-mix(in srgb, var(--warm-orange) 8%, transparent));
  color: var(--warm-orange); border: 1.5px solid color-mix(in srgb, var(--warm-orange) 30%, transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--warm-orange) 10%, transparent);
}
.btn.danger:hover { box-shadow: 0 0 30px color-mix(in srgb, var(--warm-orange) 25%, transparent); border-color: var(--warm-orange); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--text-dim); padding: 0.5rem 1rem; }
.btn.ghost:hover { color: var(--accent); }
.btn.small { padding: 0.5rem 1.2rem; font-size: 0.85rem; }
.btn.disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none !important; }
.btn.disabled:hover { transform: none !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: none !important; }

/* ═══════════ 房间列表 ═══════════ */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 560px; padding: 1.5rem;
}
.page-header h2 { font-size: 1.3rem; color: var(--accent); }

.rooms-grid {
  display: flex; flex-direction: column; gap: 0.75rem;
  width: 100%; max-width: 560px; padding: 0 1.5rem;
  height: 60vh; overflow-y: auto;
}
.room-card {
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--bg-card); border: 1.5px solid color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius); padding: 1rem 1.5rem;
  cursor: pointer; transition: all 0.25s ease; animation: fadeUp 0.3s ease;
  backdrop-filter: blur(8px);
}
.room-card:hover { border-color: var(--accent); box-shadow: 0 0 25px color-mix(in srgb, var(--accent) 10%, transparent); transform: translateX(4px); }
.room-card.disabled { opacity: 0.3; cursor: not-allowed; }
.room-card.disabled:hover { border-color: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: none; transform: none; }
.room-num { font-size: 1.5rem; font-weight: 800; color: var(--gold-sun); min-width: 3rem; }
.room-status { flex: 1; font-size: 0.9rem; }
.room-players { font-size: 0.85rem; color: var(--text-dim); background: rgba(255,255,255,0.04); padding: 0.2rem 0.8rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); }
.empty-hint { text-align: center; color: var(--text-dim); padding: 3rem; font-size: 0.95rem; }
.rooms-grid::-webkit-scrollbar { width: 4px; }
.rooms-grid::-webkit-scrollbar-track { background: transparent; }
.rooms-grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

/* ═══════════ 游戏页 ═══════════ */
.game-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 520px; padding: 0.6rem 0.5rem;
}
.player-side { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.player-side.right { flex-direction: row-reverse; }
.piece-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #2d3a28, #1a2818);
  border: 2px solid rgba(139, 105, 20, 0.35);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), inset 0 0 8px rgba(76,175,80,0.05);
}
.player-side.right .piece-icon { border-color: rgba(255, 215, 0, 0.35); box-shadow: 0 2px 10px rgba(0,0,0,0.3), inset 0 0 8px rgba(255,215,0,0.05); }
.pinfo { display: flex; flex-direction: column; gap: 0.1rem; }
.pinfo.right-align { text-align: right; align-items: flex-end; }
.p-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 700; }
.p-name { font-size: 0.95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
.center-section { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.score-big {
  font-size: 1.4rem; font-weight: 800; color: var(--gold-sun); letter-spacing: 0.1em;
  text-shadow: 0 0 15px color-mix(in srgb, var(--gold-sun) 25%, transparent);
  background: color-mix(in srgb, var(--gold-sun) 6%, transparent);
  padding: 0.15rem 1rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--gold-sun) 10%, transparent);
}
.turn-badge {
  display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.9rem;
  border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  transition: all 0.3s ease;
}
.turn-badge.my-turn {
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 15%, transparent);
  animation: badgePulse 2s ease-in-out infinite;
}
.turn-badge.opp-turn {
  background: color-mix(in srgb, var(--gold-sun) 12%, transparent); color: var(--gold-sun);
  border: 1px solid color-mix(in srgb, var(--gold-sun) 12%, transparent);
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent); }
  50% { box-shadow: 0 0 25px color-mix(in srgb, var(--accent) 30%, transparent); }
}

/* ─── 棋盘容器 ─── */
.board-wrap {
  background: var(--bg-card); border-radius: var(--radius); padding: 0.6rem;
  box-shadow: var(--shadow), 0 0 20px color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--brown-wood) 20%, transparent);
  position: relative; backdrop-filter: blur(8px);
  max-width: 100%; overflow: hidden;
}
.board-wrap::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent, color-mix(in srgb, var(--gold-sun) 20%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.board-wrap canvas {
  display: block; border-radius: 10px; cursor: pointer; touch-action: manipulation;
  max-width: 100%; height: auto; -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 1;
}
.game-actions { display: flex; gap: 0.8rem; margin-top: 1rem; justify-content: center; }

/* ═══════════ 模态框 ═══════════ */
.modal { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; }
.modal.active { display: flex; }

#gameOverModal { align-items: flex-end; padding-bottom: 1rem; }
#gameOverModal .modal-overlay { background: rgba(0, 0, 0, 0.25); pointer-events: none; }
#gameOverModal .modal-box {
  margin-bottom: 0; animation: fadeUp 0.3s ease;
  padding: 0.8rem 1.2rem; width: auto; max-width: 95%; border-radius: 14px;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: center;
}
#gameOverModal .modal-actions { margin-top: 0; gap: 0.5rem; }
#gameOverModal .modal-actions .btn { font-size: 0.8rem; padding: 0.4rem 1rem; }
#gameOverModal .over-box h3,
#gameOverModal .over-box p,
#gameOverModal .over-box span { margin: 0; }

.modal-overlay { position: absolute; inset: 0; background: var(--overlay-bg); }
.modal-box {
  position: relative; background: var(--bg-card);
  border: 1.5px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 20px;
  padding: 2rem 2.5rem; width: 90%; max-width: 380px; text-align: center;
  box-shadow: var(--shadow); animation: fadeUp 0.3s ease;
}
.modal-box::before {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent, color-mix(in srgb, var(--gold-sun) 15%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.modal-box h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--accent); }
.modal-desc { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.2rem; line-height: 1.5; }
.modal-box input {
  width: 100%; padding: 0.9rem 1.5rem;
  min-height: 48px;
  font-size: 0.95rem;
  border: 1.5px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4); color: var(--accent);
  font-family: 'Nunito', monospace; font-size: 1.4rem; text-align: center;
  letter-spacing: 0.5em; outline: none; transition: all 0.25s;
  caret-color: var(--accent);
}
.modal-box input:focus { border-color: var(--accent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent); }
.modal-box input::placeholder { letter-spacing: 0; color: rgba(255,255,255,0.15); }
.err-msg { color: var(--warm-orange); font-size: 0.85rem; min-height: 1.5rem; margin-top: 0.5rem; }
.modal-actions { display: flex; gap: 0.8rem; margin-top: 1.2rem; justify-content: center; }

/* ─── 主题选择器 ─── */
.theme-modal-box {
  max-width: 280px;
}
.theme-options {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-top: 0.5rem;
}
.theme-option {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(0,0,0,0.15);
}
.theme-option:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateX(4px);
}
.theme-option.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 10%, transparent);
}
.theme-icon { font-size: 1.5rem; flex-shrink: 0; width: 2rem; text-align: center; }
.theme-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.theme-option.active .theme-name { color: var(--accent); }

/* ═══════════ 等待卡片 ═══════════ */
#waitingInfo {
  display: flex; align-items: center; justify-content: center; flex: 1;
  width: 100%; padding: 1rem;
}
.waiting-card {
  background: var(--bg-card); border: 1.5px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 20px; padding: 2.5rem 2rem; text-align: center;
  box-shadow: var(--shadow); max-width: 280px; width: 100%;
  animation: fadeUp 0.5s ease; position: relative;
}
.waiting-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent, color-mix(in srgb, var(--gold-sun) 15%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.waiting-spinner { font-size: 3rem; animation: gentleBob 2s ease-in-out infinite; margin-bottom: 0.5rem; }
.waiting-card h3 { font-size: 1.3rem; color: var(--accent); font-weight: 700; margin-bottom: 1.5rem; }
.room-code-row { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; }
.room-code-box { background: rgba(0, 0, 0, 0.3); border-radius: 14px; padding: 0.8rem 1.2rem; min-width: 100px; border: 1.5px solid color-mix(in srgb, var(--accent) 10%, transparent); }
.rc-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.3rem; }
.rc-value { font-size: 1.6rem; font-weight: 800; color: var(--gold-sun); letter-spacing: 0.15em; font-family: 'Nunito', monospace; }
.waiting-tip { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.5rem; }
.waiting-dots { display: flex; gap: 6px; justify-content: center; margin-top: 1.2rem; }
.waiting-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dotBounce 1.4s ease-in-out infinite; }
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.2; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes gentleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ─── 动画 ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -20px); } }

/* ─── Toast ─── */
.toast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 200;
  background: var(--bg-elevated); color: var(--accent);
  padding: 0.7rem 1.5rem; border-radius: 14px; font-size: 0.95rem; font-weight: 700;
  box-shadow: var(--shadow); border: 1.5px solid color-mix(in srgb, var(--accent) 12%, transparent);
  white-space: nowrap; pointer-events: none; opacity: 0;
  animation: toastOut 0.3s ease forwards; backdrop-filter: blur(8px);
  transition: background 0.6s ease, color 0.6s ease;
}
.toast.show { opacity: 1; animation: toastIn 0.3s ease forwards; }

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 540px) {
  #lobby { padding-top: 6vh; }
  .logo h1 { font-size: 2rem; }
  .tagline { font-size: 0.85rem; }
  .lobby-actions {  gap: 1rem; max-width: 280px; margin-top: 1.8rem; }
  .lobby-actions .btn { font-size: 0.9rem; padding: 0.8rem 1rem; }
  .btn-ai::after { font-size: 0.7rem; }
  .game-header { max-width: 100%; padding: 0.4rem 0.2rem; }
  .piece-icon { width: 36px; height: 36px; font-size: 1.3rem; }
  .p-name { font-size: 0.85rem; max-width: 60px; }
  .score-big { font-size: 1.1rem; }
  .turn-badge { font-size: 0.65rem; padding: 0.25rem 0.6rem; }
  .board-wrap { padding: 0.4rem; }
  .board-wrap canvas { touch-action: none; }
  .game-actions { gap: 0.5rem; }
  .game-actions .btn { font-size: 0.8rem; padding: 0.4rem 0.9rem; }
  .modal-box { padding: 1.5rem; }
  .modal-box h3 { font-size: 1.3rem; }
  .room-num { font-size: 1.1rem; min-width: 2.2rem; }
}
@media (max-width: 414px) {
  #game { justify-content: flex-start; padding-top: env(safe-area-inset-top,8px); overflow-y: auto; }
  .game-header { flex-wrap: nowrap; gap: 0.2rem; }
  .piece-icon { width: 32px; height: 32px; font-size: 1.1rem; }
  .p-name { font-size: 0.75rem; max-width: 50px; }
  .score-big { font-size: 0.95rem; padding: 0.1rem 0.6rem; }
  .turn-badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
  .modal-box input { font-size: 1rem; padding: 0.7rem; }
  .room-card { padding: 0.7rem 1rem; gap: 0.8rem; }
  .rooms-grid { padding: 0 0.8rem; }
  .page-header { padding: 1rem 0.8rem; }
}
@media (max-width: 370px) {
  .logo h1 { font-size: 1.5rem; }
  .btn { font-size: 0.85rem; padding: 0.6rem 1rem; }
  .piece-icon { width: 28px; height: 28px; font-size: 1rem; }
  .p-name { font-size: 0.7rem; max-width: 40px; }
  .score-big { font-size: 0.85rem; padding: 0.1rem 0.3rem; }
  .modal-box h3 { font-size: 1.1rem; }
  .modal-box { padding: 1rem; }
}
@supports (padding: max(0px)) {
  .page.game { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .page.game { justify-content: flex-start; padding-top: 4px; overflow-y: auto; }
  .game-header { padding: 0.3rem; }
  .game-actions { margin-top: 0.4rem; }
}

.difficulty-options { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }