/* 华容道专属样式（公共组件、变量见 ../../style.css）
   复用护眼童趣主题：暖色底、降饱和柔和配色、大圆角 */

#app {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: 760px;
}

#sidebar {
  background: var(--panel);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.actions { display: flex; flex-direction: column; gap: 8px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-row .btn { padding: 10px 8px; }

/* 已辅助时最佳栏灰显 */
.stat-value.muted { color: var(--primary); opacity: 0.4; }

/* 主区 */
#play-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px 52px;
  min-height: 480px;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* 棋盘：4 列 × 5 行，容器定位基准
   无 padding，子元素百分比相对 content-box 精确对齐 */
.board {
  position: relative;
  width: min(320px, 86vw);
  aspect-ratio: 4 / 5;
  background: #e6dcc4;
  border-radius: 14px;
  box-shadow: inset 0 2px 8px rgba(140, 100, 40, 0.12);
  /* 不设 overflow:hidden，让方向箭头（负偏移）可见；棋子本身不超出棋盘 */
  overflow: visible;
}

/* 背景格：绝对定位，每格 25%×20%，JS 设置 left/top/width/height
   内缩 1px 留缝，不用 border 避免对齐偏差 */
.cell {
  position: absolute;
  background: #f0e9d6;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 出口区域高亮虚线边框（底部中间两格） */
.board::before {
  content: '';
  position: absolute;
  left: calc(25% + 2px);
  bottom: 2px;
  width: calc(50% - 4px);
  height: calc(20% - 3px);
  border: 2px dashed var(--primary);
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
  animation: exitPulse 2.2s ease-in-out infinite;
}
@keyframes exitPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

/* 出口标签（带引线箭头） */
.board::after {
  content: '出口 ↑';
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 0;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 棋子：绝对定位，top/left/width/height 全百分比
   --r/--c = 左上格坐标，--w/--h = 宽高格数
   每格=25%宽×20%高，内缩 1px 留缝（与背景格统一） */
.piece {
  position: absolute;
  top: calc(var(--r) * 20% + 1px);
  left: calc(var(--c) * 25% + 1px);
  width: calc(var(--w) * 25% - 2px);
  height: calc(var(--h) * 20% - 2px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: top 0.18s ease, left 0.18s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

/* 棋子内部留缝：用 padding 让文字区域小一点，视觉上看起来有格间间距 */
.piece-label {
  pointer-events: none;
  padding: 3px;
}
.piece-boss {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  font-size: 22px;
  border: 2px solid #f1c40f;
}
/* 关羽：青绿 */
.piece-guan {
  background: linear-gradient(135deg, #16a085, #1abc9c);
  font-size: 18px;
}
/* 四将：蓝紫 */
.piece-general {
  background: linear-gradient(135deg, #34495e, #4a6fa5);
  font-size: 16px;
}
/* 兵：棕灰 */
.piece-soldier {
  background: linear-gradient(135deg, #7f8c8d, #95a5a6);
  font-size: 18px;
}

/* 选中态 */
.piece.selected {
  outline: 3px solid #f1c40f;
  outline-offset: 2px;
  z-index: 3;
}

/* 提示高亮 */
.piece.hint {
  animation: hintPulse 1s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 0 0 0 rgba(241, 196, 15, 0.6); }
  50% { box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 0 0 8px rgba(241, 196, 15, 0); }
}

/* 方向箭头容器 */
.piece-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-areas:
    ".  up   ."
    "left .  right"
    ". down  .";
}
.arrow {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 4;
}
.arrow-up { top: -34px; left: 50%; transform: translateX(-50%); }
.arrow-down { bottom: -34px; left: 50%; transform: translateX(-50%); }
.arrow-left { left: -34px; top: 50%; transform: translateY(-50%); }
.arrow-right { right: -34px; top: 50%; transform: translateY(-50%); }

/* 胜利态：棋盘边框高亮 */
.board.solved {
  box-shadow: inset 0 2px 8px rgba(140, 100, 40, 0.12), 0 0 0 3px #f1c40f;
}

@media (hover: hover) {
  .piece:hover { filter: brightness(1.08); }
  .arrow:hover { background: #fff; }
}

@media (max-width: 600px) {
  #app { grid-template-columns: 1fr; max-width: 100%; }
  #sidebar { order: 1; }
  #play-area { order: 2; min-height: auto; padding: 12px 12px 40px; }
  /* 棋盘居中且不过宽 */
  .board { width: min(300px, 82vw); }
  /* 统计栏紧凑 */
  .stat { padding: 6px 10px; }
  .stat-label, .stat-value { font-size: 13px; }
  /* 按钮不折行 */
  .btn { font-size: 14px; padding: 8px; }
  .title { font-size: 22px; }
}