/* ==========================================================================
   game.css — 棋盘与棋子渲染层
   规范依据：设计方案 9.1（DOM + 内联 SVG）、7.7（资产策略）、3.3（触摸面积）
   ========================================================================== */

.board {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  touch-action: manipulation;
}

/* ==========================================================================
   飞行棋（Ludo）— 15 × 15 十字棋盘

   结构说明：棋盘格（.ludo-grid）、虚线（.ludo-flylines）、棋子（.ludo-layer）
   三层使用同一个 inset（6px），因此「格子坐标」与「棋子百分比坐标」严格对齐。
   ========================================================================== */

.ludo-grid,
.ludo-flylines,
.ludo-layer {
  position: absolute;
  inset: 6px;
}

.ludo-grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  z-index: 1;
}

/* ---- 跑道格：格与格之间保留间距，避免手指落在边界时的歧义（3.3）
       底色按 蓝 → 绿 → 红 → 黄 循环（--cell-tint 由 ludo.js 计算） ---- */
.ludo-cell {
  position: relative;
  margin: 3px;
  border-radius: 7px;
  background: var(--cell-tint, #F6F7FB);
  box-shadow: inset 0 0 0 1px var(--border);
  display: grid;
  place-items: center;
}

/* 调试用格子编号（DEBUG_SHOW_CELL_NO 打开时才有内容） */
.cell-no {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #1C1D24;
  opacity: .8;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cell-no.small {
  font-size: 12px;
  opacity: .55;
}

.ludo-cell svg {
  width: 58%;
  height: 58%;
  color: var(--cell-color, #C9CBD8);
  opacity: .55;
  transform: rotate(var(--arrow-rot, 0deg));
}

/* 起点格：底色加重 + 出场方向箭头 */
.ludo-cell.is-start {
  background: var(--cell-tint);
  box-shadow: inset 0 0 0 2px var(--cell-color);
}

.ludo-cell.is-start svg {
  opacity: .95;
}

/* 虚线飞跃起点格 */
.ludo-cell.is-fly {
  box-shadow: inset 0 0 0 2px rgba(28, 29, 36, .28);
}

.ludo-cell.is-start.is-fly {
  box-shadow: inset 0 0 0 2px var(--cell-color), inset 0 0 0 4px rgba(255, 255, 255, .85);
}

/* ---- 营地（基地） ---- */
.ludo-base {
  position: relative;
  margin: 6px;
  border-radius: 22px;
  background: var(--base-tint);
  box-shadow: inset 0 0 0 2px var(--base-color);
}

.ludo-base::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .74);
}

/* 未参与阵营：不占版面、不抢视觉（FR-LU-02） */
.ludo-base.is-idle {
  background: #F6F7FB;
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.ludo-base.is-idle::after {
  display: none;
}

/* ---- 终点跑道：各阵营 6 格，末格即中央终点 ---- */
.ludo-home {
  position: relative;
  margin: 3px;
  border-radius: 7px;
  background: var(--home-tint);
  box-shadow: inset 0 0 0 1.5px var(--home-color);
  display: grid;
  place-items: center;
}

/* ---- 中央终点区：四色三角 ---- */
.ludo-center {
  grid-area: 7 / 7 / 10 / 10;
  padding: 3px;
}

.ludo-center svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- 虚线飞跃 ---- */
.ludo-flylines {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  z-index: 2;
  pointer-events: none;
}

.ludo-flylines line {
  stroke-width: .12;
  stroke-dasharray: .3 .26;
  stroke-linecap: round;
}

/* ---- 棋子层 ---- */
.ludo-layer {
  z-index: 3;
  pointer-events: none;
}

/* 营地机位（与棋子共用坐标） */
.ludo-slot {
  position: absolute;
  width: 8.4%;
  height: 8.4%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 2px var(--base-color);
  opacity: .6;
}

/* ---- 棋子 ---- */
.piece {
  position: absolute;
  width: 5%;
  height: 5%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: left var(--dur-step) linear, top var(--dur-step) linear;
  will-change: left, top;
  pointer-events: none;
}

.piece svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(16, 17, 26, .22));
}

/* 命中热区：保证尽量大的有效触摸面积（FR-GLB-05） */
.piece-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 196%;
  height: 196%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}

/* 选中态：--hint-selected 描边 */
.piece.is-selected::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 2.5px solid var(--hint-selected);
}

/* 走法提示开启时：可移动的飞机高亮（蓝系） */
.piece.is-moveable::after {
  content: "";
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  border: 3px solid var(--hint-move);
  animation: hint-pulse 1.1s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* 走法提示关闭时：不出现任何走法高亮（FR-SHELL-15） */
.no-hint .piece.is-moveable::after {
  display: none;
}

/* 被撞回基地（7.6 吃子消失 300ms） */
.piece.is-bumped {
  transition: left 260ms var(--ease-out), top 260ms var(--ease-out);
  z-index: 9;
}

.piece.is-bumped svg {
  animation: bumped-out var(--dur-capture) var(--ease-out) 1;
}

@keyframes bumped-out {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: .25; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* 飞跃 / 起飞：强调「跳了一段」 */
.piece.is-flying {
  z-index: 10;
  transition: left 260ms var(--ease-out), top 260ms var(--ease-out);
}

.piece.is-flying svg {
  animation: fly-pop 260ms var(--ease-out);
}

@keyframes fly-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 抵达终点的棋子缩小聚拢在中央三角内 */
.piece.is-goal {
  width: 3.1%;
  height: 3.1%;
  z-index: 7;
}

/* ==========================================================================
   骰子与游戏控件
   ========================================================================== */

.dice {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  cursor: pointer;
}

.dice svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(16, 17, 26, .14));
}

.dice.is-rolling svg {
  animation: dice-roll 340ms linear infinite;
}

@keyframes dice-roll {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.roll-btn {
  min-height: 56px;
  min-width: 152px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-control);
  background: var(--c-ludo);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-shadow: 0 6px 16px rgba(91, 141, 239, .32);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out);
}

.roll-btn:active {
  transform: scale(.97);
}

.roll-btn[disabled] {
  background: #C9CDDA;
  box-shadow: none;
  cursor: default;
}

/* ==========================================================================
   人数 / 规则变体选择（开局前设置）
   ========================================================================== */

.choice-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.choice {
  flex: 1 1 0;
  min-height: 64px;
  padding: var(--sp-2);
  border-radius: var(--radius-control);
  background: var(--surface-subtle);
  box-shadow: inset 0 0 0 2px transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
  color: var(--text-primary);
  transition: box-shadow var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out);
}

.choice[aria-pressed="true"] {
  background: rgba(91, 141, 239, .12);
  box-shadow: inset 0 0 0 2px var(--c-ludo);
  color: #2F5FA8;
}

.choice .seats {
  display: flex;
  gap: 4px;
}

.choice .seat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.choice small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}