/* ============================================================
   琉璃跳棋 · 明亮清新主题
   ============================================================ */
:root {
  --bg-1: #fdf8ee;
  --bg-2: #f8ecd9;
  --ink: #4a3b2a;
  --ink-soft: #8a7a63;
  --card: rgba(255, 255, 255, 0.82);
  --card-border: rgba(255, 255, 255, 0.9);
  --shadow-soft: 0 10px 30px rgba(122, 90, 50, 0.14);
  --accent: #ff8a5c;
  --accent-2: #ffb86b;

  /* 玩家糖果色（浅/中/深） */
  --red-1: #ffb3c1; --red-2: #f4526b; --red-3: #b72242;
  --orange-1: #ffd0a0; --orange-2: #ff9636; --orange-3: #d96a0c;
  --green-1: #a5f5c8; --green-2: #34d399; --green-3: #0b9266;
  --cyan-1: #b4f3ff; --cyan-2: #22d3ee; --cyan-3: #0695b5;
  --blue-1: #bcd6ff; --blue-2: #60a5fa; --blue-3: #2f66d8;
  --purple-1: #dfc8ff; --purple-2: #a78bfa; --purple-3: #7449d8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 85% -10%, #fff6e6 0%, transparent 60%),
    radial-gradient(1000px 700px at -10% 100%, #fdeef2 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 背景光斑 ---------------- */
.bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.55;
  animation: blobFloat 18s ease-in-out infinite alternate;
}
.blob-1 { width: 460px; height: 460px; background: #ffd9c4; top: -120px; left: -80px; }
.blob-2 { width: 380px; height: 380px; background: #d4f0e2; bottom: -100px; right: 8%; animation-delay: -6s; }
.blob-3 { width: 300px; height: 300px; background: #e3dcff; top: 30%; right: -100px; animation-delay: -11s; }
.blob-4 { width: 260px; height: 260px; background: #ffe3ec; bottom: 10%; left: -60px; animation-delay: -3s; }
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.12); }
}

/* ---------------- 屏幕切换 ---------------- */
.screen {
  position: relative; z-index: 1;
  display: none; height: 100%;
  flex-direction: column;
}
.screen.active { display: flex; animation: screenIn 0.45s ease both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ==================== 开始界面 ==================== */
#screen-start { align-items: center; justify-content: center; overflow-y: auto; }
.start-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 30px 20px 40px; }

.title-wrap { text-align: center; position: relative; }
.title-marbles { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.marble {
  width: 22px; height: 22px; border-radius: 50%;
  animation: marbleBounce 2.6s ease-in-out infinite;
}
.marble:nth-child(2) { animation-delay: 0.12s; }
.marble:nth-child(3) { animation-delay: 0.24s; }
.marble:nth-child(4) { animation-delay: 0.36s; }
.marble:nth-child(5) { animation-delay: 0.48s; }
.marble:nth-child(6) { animation-delay: 0.6s; }
@keyframes marbleBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  45% { transform: translateY(-4px); }
}
.m-red    { background: radial-gradient(circle at 32% 28%, #fff 0%, #fff9 14%, transparent 30%), radial-gradient(circle at 50% 42%, var(--red-1), var(--red-2) 60%, var(--red-3)); box-shadow: 0 3px 6px rgba(120,40,40,.25); }
.m-orange { background: radial-gradient(circle at 32% 28%, #fff 0%, #fff9 14%, transparent 30%), radial-gradient(circle at 50% 42%, var(--orange-1), var(--orange-2) 60%, var(--orange-3)); box-shadow: 0 3px 6px rgba(140,80,20,.25); }
.m-green  { background: radial-gradient(circle at 32% 28%, #fff 0%, #fff9 14%, transparent 30%), radial-gradient(circle at 50% 42%, var(--green-1), var(--green-2) 60%, var(--green-3)); box-shadow: 0 3px 6px rgba(20,100,60,.25); }
.m-cyan   { background: radial-gradient(circle at 32% 28%, #fff 0%, #fff9 14%, transparent 30%), radial-gradient(circle at 50% 42%, var(--cyan-1), var(--cyan-2) 60%, var(--cyan-3)); box-shadow: 0 3px 6px rgba(10,90,110,.25); }
.m-blue   { background: radial-gradient(circle at 32% 28%, #fff 0%, #fff9 14%, transparent 30%), radial-gradient(circle at 50% 42%, var(--blue-1), var(--blue-2) 60%, var(--blue-3)); box-shadow: 0 3px 6px rgba(30,60,140,.25); }
.m-purple { background: radial-gradient(circle at 32% 28%, #fff 0%, #fff9 14%, transparent 30%), radial-gradient(circle at 50% 42%, var(--purple-1), var(--purple-2) 60%, var(--purple-3)); box-shadow: 0 3px 6px rgba(80,40,150,.25); }

.title {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900; letter-spacing: 0.12em;
  background: linear-gradient(120deg, #e2603f 10%, #f2a03c 40%, #47b98a 70%, #3f8fd6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(255,255,255,.9)) drop-shadow(0 8px 16px rgba(160,110,60,.25));
}
.subtitle {
  margin-top: 8px; font-size: 13px; letter-spacing: 0.42em;
  color: var(--ink-soft); text-transform: uppercase;
}

/* 模式卡片 */
.mode-cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 150px; padding: 18px 14px 16px;
  background: var(--card); border: 2px solid var(--card-border);
  border-radius: 22px; cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s, border-color 0.25s;
  font-family: inherit; color: var(--ink);
}
.mode-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 40px rgba(122,90,50,.2); }
.mode-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,138,92,.22), 0 16px 36px rgba(200,110,60,.28);
  transform: translateY(-6px) scale(1.03);
}
.mode-star { width: 84px; height: 92px; }
.mode-star svg { width: 100%; height: 100%; }
.mode-name { font-size: 20px; font-weight: 800; letter-spacing: 0.08em; }
.mode-desc { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.2em; }

/* 座位设置 */
.seat-config {
  display: flex; flex-direction: column; gap: 10px;
  width: min(480px, 92vw);
  background: var(--card); border: 2px solid var(--card-border);
  border-radius: 22px; padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.seat-config h3 { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.2em; margin-bottom: 4px; font-weight: 600; }
.seat-row { display: flex; align-items: center; gap: 12px; }
.seat-balls { display: flex; gap: 4px; flex: none; width: 34px; justify-content: center; }
.seat-balls .mini-ball { width: 19px; height: 19px; }
.seat-ball { width: 30px; height: 30px; flex: none; }
.seat-name {
  flex: 1; min-width: 0;
  border: none; background: rgba(255,255,255,.7);
  border-radius: 10px; padding: 8px 12px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: inherit; outline: none;
  box-shadow: inset 0 1px 3px rgba(120,90,50,.12);
  transition: box-shadow .2s;
}
.seat-name:focus { box-shadow: inset 0 1px 3px rgba(120,90,50,.12), 0 0 0 3px rgba(255,138,92,.25); }
.seg-toggle {
  display: flex; background: #f3e8d5; border-radius: 999px; padding: 3px;
  box-shadow: inset 0 1px 4px rgba(120,90,50,.15);
}
.seg-toggle button {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  padding: 5px 14px; border-radius: 999px; transition: all .2s;
}
.seg-toggle button.on {
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 6px rgba(120,90,50,.2);
}
.seg-toggle button.on.human { color: #0b8a62; }
.seg-toggle button.on.ai { color: #c05621; }

.start-actions { display: flex; gap: 14px; align-items: center; }

/* ---------------- 按钮 ---------------- */
.btn {
  border: none; cursor: pointer; font-family: inherit;
  border-radius: 999px; font-weight: 700; color: var(--ink);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s;
}
.btn:active { transform: scale(0.95); }
.btn-primary {
  background: linear-gradient(135deg, #ff9a62, #ff7e4d 55%, #f4623a);
  color: #fff; font-size: 16px; padding: 13px 42px;
  box-shadow: 0 8px 20px rgba(230,110,60,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(230,110,60,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-big { font-size: 18px; padding: 15px 58px; letter-spacing: 0.14em; }
.btn-ghost {
  background: rgba(255,255,255,.75); color: var(--ink);
  border: 1.5px solid rgba(180,150,110,.35);
  font-size: 14px; padding: 10px 22px;
  box-shadow: 0 4px 12px rgba(120,90,50,.12);
}
.btn-ghost:hover { background: #fff; transform: translateY(-2px); }
.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* ==================== 游戏界面 ==================== */
#screen-game { padding: 0; }
.game-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px;
  position: relative; z-index: 10;   /* 顶栏永远在棋盘之上，防止被溢出的棋盘 SVG 遮挡吞点击 */
}
.top-left, .top-right { display: flex; gap: 8px; flex: 1; }
.top-right { justify-content: flex-end; }

.turn-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.85);
  border-radius: 999px; padding: 8px 22px;
  box-shadow: var(--shadow-soft);
  font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
  transition: box-shadow .3s;
}
.turn-banner.flash { animation: bannerFlash .5s ease; }
@keyframes bannerFlash {
  0% { transform: scale(0.9); opacity: .4; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.mini-ball {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.5) 12%, transparent 26%),
    radial-gradient(circle at 50% 42%, var(--c1), var(--c2) 58%, var(--c3));
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.2), 0 2px 5px rgba(90,60,20,.25);
}
.turn-balls { display: flex; align-items: center; gap: 5px; }
.turn-balls .mini-ball { width: 20px; height: 20px; }

/* 统帅模式开关 */
.special-toggle {
  display: flex; align-items: center; gap: 12px;
  width: min(480px, 92vw);
  background: var(--card); border: 2px solid var(--card-border);
  border-radius: 18px; padding: 13px 18px;
  box-shadow: var(--shadow-soft);
  cursor: pointer; user-select: none;
  transition: opacity .25s, border-color .25s;
}
.special-toggle.disabled { opacity: 0.45; pointer-events: none; }
.special-toggle input { display: none; }
.toggle-track {
  flex: none; width: 46px; height: 26px; border-radius: 99px;
  background: #ecdcc2; position: relative;
  box-shadow: inset 0 2px 5px rgba(120,90,50,.25);
  transition: background .25s;
}
.toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(145deg, #fff, #f4e6cf);
  box-shadow: 0 2px 5px rgba(120,90,50,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.special-toggle input:checked + .toggle-track { background: linear-gradient(135deg, #ffb46b, #ff8a5c); }
.special-toggle input:checked + .toggle-track .toggle-knob { transform: translateX(20px); }
.toggle-hard input:checked + .toggle-track { background: linear-gradient(135deg, #ff8a8a, #f4526b); }
.toggle-text { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.toggle-text b { color: #c65d21; font-size: 14px; letter-spacing: .05em; }
.toggle-hard .toggle-text b { color: #c0392b; }

.game-main {
  flex: 1; display: flex; align-items: stretch; justify-content: center;
  gap: 16px; padding: 0 18px 16px; min-height: 0;
}
.board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
/* min-height:0 防止 board-wrap 被棋盘布局尺寸撑开，否则 fitBoard 拿到的容器尺寸恒等于棋盘尺寸，scale 恒为 1 导致棋盘溢出遮挡顶栏 */
.board-scale { position: relative; transform-origin: center center; }

.layer { position: absolute; inset: 0; pointer-events: none; }
#pieces-layer { z-index: 3; }
#hints-layer { z-index: 4; }
#board-svg { position: absolute; inset: 0; z-index: 1; }

/* ---------------- 棋子（玻璃球） ---------------- */
.piece {
  position: absolute; left: 0; top: 0;
  width: var(--size); height: var(--size);
  margin-left: calc(var(--size) / -2); margin-top: calc(var(--size) / -2);
  pointer-events: auto; cursor: default;
  will-change: transform;
  z-index: 2;
}
.piece.own { cursor: pointer; }
.piece.own:hover .ball { filter: brightness(1.08) saturate(1.1); }
.piece.moving { z-index: 9; }

.pshadow {
  position: absolute; left: 12%; right: 12%; top: 14%; bottom: -4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 62%, rgba(60,35,10,.4) 0%, rgba(60,35,10,.18) 45%, transparent 72%);
  transform: translateY(6%);
}
.ball {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 6%, rgba(255,255,255,.28) 13%, transparent 26%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 12%, transparent 28%),
    radial-gradient(circle at 50% 115%, var(--c1) 0%, transparent 55%),
    radial-gradient(circle at 44% 40%, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow:
    inset -4px -6px 9px rgba(0,0,0,.25),
    inset 3px 4px 7px rgba(255,255,255,.5),
    0 3px 6px rgba(90,55,20,.22);
  will-change: transform;
}
.ball::after {
  content: ""; position: absolute; left: 13%; top: 55%; width: 24%; height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 32%, rgba(255,255,255,.65), transparent 72%);
  transform: rotate(-22deg); filter: blur(1px);
}
.ball::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 55% 88%, rgba(255,255,255,.28) 0%, transparent 32%);
}

/* 玻璃球配色 */
.pc-red    { --c1: var(--red-1);    --c2: var(--red-2);    --c3: var(--red-3); }
.pc-orange { --c1: var(--orange-1); --c2: var(--orange-2); --c3: var(--orange-3); }
.pc-green  { --c1: var(--green-1);  --c2: var(--green-2);  --c3: var(--green-3); }
.pc-cyan   { --c1: var(--cyan-1);   --c2: var(--cyan-2);   --c3: var(--cyan-3); }
.pc-blue   { --c1: var(--blue-1);   --c2: var(--blue-2);   --c3: var(--blue-3); }
.pc-purple { --c1: var(--purple-1); --c2: var(--purple-2); --c3: var(--purple-3); }

/* 选中棋子：呼吸光环 */
.piece.selected { z-index: 6; }
.piece.selected .ball { animation: selectedPulse 1.1s ease-in-out infinite; }
@keyframes selectedPulse {
  0%, 100% { box-shadow: inset -4px -6px 9px rgba(0,0,0,.25), inset 3px 4px 7px rgba(255,255,255,.5), 0 3px 6px rgba(90,55,20,.22), 0 0 0 0 rgba(255,255,255,.75), 0 0 14px 2px var(--c2); }
  50% { box-shadow: inset -4px -6px 9px rgba(0,0,0,.25), inset 3px 4px 7px rgba(255,255,255,.5), 0 3px 6px rgba(90,55,20,.22), 0 0 0 7px rgba(255,255,255,0), 0 0 22px 6px var(--c2); }
}
.piece.selected::before {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%;
  border: 2.5px dashed rgba(255,255,255,.85);
  animation: spin 3.2s linear infinite;
  filter: drop-shadow(0 0 4px var(--c2));
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 开局弹入 */
.piece.entrance { animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes popIn {
  0% { transform: var(--tp) scale(0); opacity: 0; }
  70% { transform: var(--tp) scale(1.12); opacity: 1; }
  100% { transform: var(--tp) scale(1); }
}

/* 落地挤压 */
.piece.landing .ball { animation: squash .18s ease-out; }
@keyframes squash {
  0% { transform: scale(1); }
  40% { transform: scale(1.14, 0.82); }
  75% { transform: scale(0.96, 1.05); }
  100% { transform: scale(1); }
}

/* 胜利棋子闪耀 */
.piece.winner .ball { animation: winnerShine 1.6s ease-in-out infinite; }
@keyframes winnerShine {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.3); }
}

/* ---------------- 落点提示 ---------------- */
.hint {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; pointer-events: auto; cursor: pointer;
}
.hint.step::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #b9834e 78%);
  box-shadow: 0 0 0 2.5px rgba(255,255,255,.85), 0 2px 6px rgba(90,55,20,.35);
  animation: hintPulse 1.2s ease-in-out infinite;
}
.hint.jump::before {
  content: ""; position: absolute; inset: 1px; border-radius: 50%;
  border: 3.5px solid var(--c2);
  background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.9), rgba(255,255,255,.12) 60%);
  box-shadow: 0 0 10px var(--c2), inset 0 0 6px rgba(255,255,255,.6);
  animation: hintPulse 1.2s ease-in-out infinite;
}
.hint.far::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 3px dashed #d99a2b;
  background: radial-gradient(circle at 40% 34%, rgba(255,235,180,.95), rgba(255,215,130,.15) 62%);
  box-shadow: 0 0 14px rgba(217,154,43,.8), inset 0 0 8px rgba(255,240,200,.7);
  animation: hintPulse 0.9s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.22); opacity: 1; }
}
.hint:hover { transform: scale(1.3); }

/* 最近一步路径微光 */
.trail {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,140,.55), transparent 65%);
  animation: trailFade 1.6s ease-out both;
}
@keyframes trailFade { to { opacity: 0; transform: scale(1.7); } }

/* 困难模式：不可下点位反馈 */
.nope {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; pointer-events: none;
  border: 3px solid #e74c3c;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #e74c3c; line-height: 1;
  box-shadow: 0 0 12px rgba(231, 76, 60, .55);
  animation: nopeFade .55s ease-out both;
}
@keyframes nopeFade {
  0% { transform: scale(.5); opacity: 1; }
  30% { transform: scale(1.15); }
  100% { transform: scale(1.45); opacity: 0; }
}

/* 困难模式徽章 */
.hard-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: #fff; background: linear-gradient(135deg, #f4526b, #c0392b);
  border-radius: 7px; padding: 2px 8px;
  box-shadow: 0 2px 6px rgba(192, 57, 43, .4);
  animation: chipGlow 2s ease-in-out infinite;
}
@keyframes chipGlow {
  0%, 100% { box-shadow: 0 2px 6px rgba(192, 57, 43, .4); }
  50% { box-shadow: 0 2px 12px rgba(231, 76, 60, .75); }
}

/* ---------------- 侧栏玩家面板 ---------------- */
.panel {
  width: 240px; flex: none;
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0; overflow-y: auto;
}
.p-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 2px solid var(--card-border);
  border-radius: 18px; padding: 10px 13px;
  box-shadow: 0 6px 16px rgba(122,90,50,.1);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.p-card.current {
  border-color: var(--c2);
  transform: translateX(-4px) scale(1.02);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--c2) 30%, transparent);
}
.p-card.done { border-color: #9fc48f; }
.p-card.done .p-count { color: #0b8a62; }
.p-balls { display: flex; gap: 4px; flex: none; }
.p-ball {
  width: 27px; height: 27px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.5) 12%, transparent 26%),
    radial-gradient(circle at 50% 42%, var(--c1), var(--c2) 58%, var(--c3));
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.2), 0 3px 6px rgba(90,60,20,.25);
}
.p-info { flex: 1; min-width: 0; }
.p-name {
  font-size: 14px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge-ai {
  font-size: 10px; font-weight: 700; color: #c05621;
  background: #fdeadd; border-radius: 6px; padding: 1px 6px;
  margin-left: 5px; vertical-align: 1px; letter-spacing: .08em;
}
.badge-done {
  font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #52b788, #2d9368);
  border-radius: 6px; padding: 1px 6px; margin-left: 5px; letter-spacing: .08em;
}
.p-bar {
  margin-top: 6px; height: 8px; border-radius: 99px;
  background: #f0e4cd; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(120,90,50,.15);
}
.p-bar i {
  display: block; height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  transition: width .6s cubic-bezier(.3,1.2,.4,1);
}
.p-count { font-size: 13px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------------- 弹窗 ---------------- */
.modal, .overlay-win {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(70,50,25,.35);
  backdrop-filter: blur(6px);
}
.hidden { display: none !important; }
.modal-card, .win-card {
  position: relative;
  background: linear-gradient(165deg, #fffdf7, #fdf3e0);
  border-radius: 26px; padding: 30px 34px;
  box-shadow: 0 24px 70px rgba(80,50,20,.35);
  text-align: center;
  animation: cardPop .4s cubic-bezier(.3,1.5,.5,1) both;
  max-width: min(480px, 92vw);
}
@keyframes cardPop {
  from { transform: scale(.8) translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal-card h2 { margin-bottom: 16px; letter-spacing: .1em; }
.rules-list { text-align: left; list-style: none; margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.rules-list li {
  background: rgba(255,255,255,.75); border-radius: 12px;
  padding: 10px 14px; font-size: 14px; line-height: 1.65;
  box-shadow: 0 2px 8px rgba(120,90,50,.08);
}
.rules-list b { color: #c65d21; }
.modal-close {
  position: absolute; top: 10px; right: 14px;
  border: none; background: transparent; font-size: 26px;
  color: var(--ink-soft); cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--ink); }

/* 胜利 */
.win-card { padding: 40px 50px 34px; }
.win-balls { display: flex; gap: 10px; justify-content: center; margin: 0 auto 18px; }
.win-ball {
  width: 74px; height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 6%, rgba(255,255,255,.28) 13%, transparent 26%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 12%, transparent 28%),
    radial-gradient(circle at 50% 115%, var(--c1) 0%, transparent 55%),
    radial-gradient(circle at 44% 40%, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow:
    inset -6px -9px 14px rgba(0,0,0,.25),
    inset 5px 6px 10px rgba(255,255,255,.5),
    0 14px 34px color-mix(in srgb, var(--c2) 55%, transparent);
  animation: winFloat 2.4s ease-in-out infinite;
}
@keyframes winFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
.win-title { font-size: 30px; font-weight: 900; letter-spacing: .1em; margin-bottom: 8px; }
.win-sub { color: var(--ink-soft); font-size: 14px; letter-spacing: .18em; margin-bottom: 26px; }
.win-actions { display: flex; gap: 12px; justify-content: center; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  z-index: 60;
  background: rgba(64,48,28,.92); color: #fff8ec;
  padding: 11px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .06em;
  box-shadow: 0 10px 26px rgba(60,40,15,.35);
  animation: toastIn .3s cubic-bezier(.3,1.4,.5,1) both;
  pointer-events: none;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------------- 彩带 ---------------- */
#confetti {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 860px) {
  .game-main { flex-direction: column; align-items: center; }
  .panel {
    width: min(560px, 96vw);
    flex-direction: row; flex-wrap: wrap; justify-content: center;
  }
  .p-card { flex: 1; min-width: 200px; }
  .p-card.current { transform: none; }
  .game-top { flex-wrap: wrap; }
}

/* ============================================================
   飞行棋 · 彩虹飞行棋
   ============================================================ */

/* 黄色（飞行棋专用） */
:root {
  --yellow-1: #ffe9a8; --yellow-2: #fbbf24; --yellow-3: #d99706;
}
.pc-yellow { --c1: var(--yellow-1); --c2: var(--yellow-2); --c3: var(--yellow-3); }

/* ---------------- 游戏选择标签 ---------------- */
.game-tabs {
  display: flex; gap: 6px;
  background: rgba(255,255,255,.6);
  border: 2px solid var(--card-border);
  border-radius: 999px; padding: 5px;
  box-shadow: var(--shadow-soft);
}
.game-tab {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 800; letter-spacing: .08em;
  color: var(--ink-soft);
  background: transparent; border-radius: 999px;
  padding: 9px 30px;
  transition: all .22s;
}
.game-tab:hover { color: var(--ink); }
.game-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #ffb46b, #ff8a5c);
  box-shadow: 0 5px 14px rgba(230,110,60,.4);
}

/* 飞行棋模式卡片小图 */
.mode-ludo { width: 84px; height: 84px; }
.mode-ludo svg { width: 100%; height: 100%; }

/* ---------------- 飞机 ---------------- */
#ludo-layer { z-index: 3; }
.plane {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: auto; cursor: default;
  will-change: transform;
  z-index: 2;
}
.plane svg { width: 100%; height: 100%; overflow: visible; }
.plane svg path.body {
  fill: var(--c2);
  stroke: var(--c3);
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(50,30,10,.35));
}
.plane svg circle.glint { fill: rgba(255,255,255,.75); }
.plane.moving { z-index: 9; }
.plane.own { cursor: pointer; }
.plane.own:hover svg path.body { filter: drop-shadow(0 2px 3px rgba(50,30,10,.35)) brightness(1.12) saturate(1.15); }

/* 可选飞机：呼吸光环 */
.plane.movable { cursor: pointer; z-index: 6; }
.plane.movable::before {
  content: ""; position: absolute; inset: -30%;
  border-radius: 50%;
  border: 2.5px dashed rgba(255,255,255,.9);
  animation: spin 3.2s linear infinite;
  filter: drop-shadow(0 0 4px var(--c2));
}
.plane.movable::after {
  content: ""; position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, var(--c2) 66%, transparent 76%);
  opacity: .9;
  animation: planePulse 1s ease-in-out infinite;
}
@keyframes planePulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.28); opacity: .95; }
}

/* 落点预览光圈 */
.ludo-target {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; pointer-events: none;
  border: 3px dashed var(--c2);
  background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.85), rgba(255,255,255,.1) 62%);
  box-shadow: 0 0 12px var(--c2);
  animation: hintPulse 1s ease-in-out infinite;
  z-index: 4;
}

/* 飞机飞行拖尾 */
.plane.fly-trail::after {
  content: ""; position: absolute; inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c2) 45%, transparent) 0%, transparent 70%);
  animation: trailFade 0.7s ease-out both;
}

/* 到达终点闪光 */
.goal-burst {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffd166 35%, transparent 70%);
  animation: goalBurst .8s ease-out both;
  z-index: 8;
}
@keyframes goalBurst {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* 被撞飞机闪烁 */
.plane.hit svg path.body { animation: hitFlash .5s ease-in-out 3; }
@keyframes hitFlash {
  0%, 100% { fill: var(--c2); }
  50% { fill: #ff5252; }
}

/* 胜利飞机闪耀（复用 winner 思路） */
.plane.winner svg path.body { animation: winnerShine 1.6s ease-in-out infinite; }

/* ---------------- 骰子 ---------------- */
#ludo-dice {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;          /* 容器不拦截点击，避免遮住棋盘中部的飞机 */
}
.dice-scene {
  width: 62px; height: 62px;
  perspective: 420px;
  cursor: pointer;
  pointer-events: auto;
}
.dice-cube {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(24deg);
}
.dice-face {
  position: absolute; inset: 0;
  border-radius: 12px;
  background: linear-gradient(150deg, #fffdf7, #f4e8d0);
  border: 2px solid #e8d5b0;
  box-shadow: inset 0 0 8px rgba(200,170,110,.35);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
}
.pip {
  width: 82%; height: 82%;
  border-radius: 50%; place-self: center;
  background: radial-gradient(circle at 36% 30%, #fff 0%, #fff 8%, #c05621 40%, #8a3a10 100%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(255,255,255,.6);
}
.pip.tl { grid-area: 1 / 1; } .pip.tc { grid-area: 1 / 2; } .pip.tr { grid-area: 1 / 3; }
.pip.ml { grid-area: 2 / 1; } .pip.c  { grid-area: 2 / 2; } .pip.mr { grid-area: 2 / 3; }
.pip.bl { grid-area: 3 / 1; } .pip.bc { grid-area: 3 / 2; } .pip.br { grid-area: 3 / 3; }

/* 骰子六面空间定位（62px 立方） */
.df1 { transform: translateZ(31px); }
.df6 { transform: rotateY(180deg) translateZ(31px); }
.df2 { transform: rotateY(90deg) translateZ(31px); }
.df5 { transform: rotateY(-90deg) translateZ(31px); }
.df3 { transform: rotateX(90deg) translateZ(31px); }
.df4 { transform: rotateX(-90deg) translateZ(31px); }

/* 骰子待掷提示 */
#ludo-dice.ready .dice-scene { animation: diceReady 1.2s ease-in-out infinite; }
@keyframes diceReady {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 4px 8px rgba(120,80,30,.3)); }
  50% { transform: translateY(-6px); filter: drop-shadow(0 10px 14px rgba(120,80,30,.4)); }
}
.dice-tip {
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  color: #fff;
  background: rgba(64,48,28,.85);
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* 航线虚线流动（SVG） */
.fly-path {
  stroke-dasharray: 7 7;
  animation: flyDash 1.2s linear infinite;
}
@keyframes flyDash {
  to { stroke-dashoffset: -28; }
}

/* ---------------- 飞行棋面板 ---------------- */
.l-fleet { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.pl-badge {
  width: 20px; height: 20px; display: inline-flex;
  border-radius: 6px; align-items: center; justify-content: center;
  background: #f0e4cd;
}
.pl-badge svg { width: 16px; height: 16px; }
.pl-badge.base svg path { fill: #c9b18a; stroke: #a8895d; }
.pl-badge.track svg path, .pl-badge.home svg path { fill: var(--c2); stroke: var(--c3); }
.pl-badge.done { background: linear-gradient(135deg, #ffe9a8, #fbbf24); }
.pl-badge.done svg path { fill: #fff; stroke: #d99706; }