/* ==========================================================================
   暗兽棋界面样式 —— 承接门户水墨设计系统，与标准斗兽棋(dsq.css)同源变量
   棋子三态：己方暗子(盖着但自己认得) / 对方暗子(纯背面) / 明子(翻开)。
   6×6 盘面，宽屏定宽、窄屏随容器缩放，格子恒正方形。
   ========================================================================== */

.dk { display: grid; gap: 14px; }

/* ---------- 工具条 ---------- */
.dk-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.dk-seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
.dk-btn {
  appearance: none;
  border: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.dk-btn + .dk-btn { border-left: 1px solid var(--rule); }
.dk-btn:hover { color: var(--ink); background: var(--paper-2); }
.dk-btn.is-on { background: var(--ink); color: var(--paper); }
.dk-btn:disabled { opacity: .45; cursor: default; }
.dk-acts { display: inline-flex; gap: 8px; margin-left: auto; }
.dk-acts .dk-btn { border: 1px solid var(--rule-2); border-radius: var(--radius); }

/* ---------- 状态行 ---------- */
.dk-status {
  font-size: 15px;
  color: var(--ink-2);
  min-height: 1.75em;
  padding: 8px 12px;
  background: var(--paper-2);
  border-left: 3px solid var(--cinnabar);
  border-radius: var(--radius);
}

/* ---------- 布阵面板 ---------- */
.dk-place { display: grid; gap: 10px; padding: 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.dk-place.is-gone { display: none; }
.dk-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-tray-piece {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cinnabar);
  background: #FDF6F3;
  border: 1.5px solid var(--cinnabar);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dk-tray-piece:hover { transform: translateY(-1px); }
.dk-tray-piece.is-pick { box-shadow: 0 0 0 3px rgba(176, 57, 46, .35); }
.dk-tray-piece.is-done { opacity: .28; pointer-events: none; }
.dk-placebar { display: flex; align-items: center; gap: 12px; }
.dk-timer { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-2); }
.dk-timer.is-low { color: var(--cinnabar); font-weight: 600; }
.dk-btn--go { border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.dk-btn--go:hover { background: var(--ink-2); color: var(--paper); }
.dk-hint { font-size: 13px; color: var(--ink-3); }

/* ---------- 棋盘 ---------- */
.dk-field { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-start; }
.dk-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: min(100%, 402px);
  border: 1px solid var(--rule-2);
  background: var(--rule-2);
  gap: 1px;
  touch-action: manipulation;
}
.dk-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0;
  background: var(--paper);
  font: inherit; cursor: pointer;
}
.dk-cell.is-frozen { cursor: default; }
/* 布阵阶段：可放置的己方半场空格 */
.dk-cell.is-slot { background: #F4ECE7; }
.dk-cell.is-slot::after {
  content: ""; position: absolute; inset: 22%;
  border: 1px dashed rgba(176, 57, 46, .4); border-radius: 6px;
}

/* 半区底色（红下蓝上）在布阵时轻提示归属 */
.dk-cell.dh-blue { background: #F5F8FA; }
.dk-cell.dh-red { background: #FBF4F2; }
.dk-cell.dh-blue.is-slot { background: #F1E7E3; }

/* ---------- 棋子三态 ---------- */
.dk-piece {
  display: flex; align-items: center; justify-content: center;
  width: 80%; height: 80%;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: clamp(15px, 6vw, 25px);
  line-height: 1;
  user-select: none;
}
/* 明子 */
.dk-piece.dk-up.p-red { color: var(--cinnabar); background: #FDF6F3; border: 1.5px solid var(--cinnabar); box-shadow: 0 1px 3px rgba(26, 26, 24, .18); }
.dk-piece.dk-up.p-blue { color: var(--azurite); background: #F4F8FA; border: 1.5px solid var(--azurite); box-shadow: 0 1px 3px rgba(26, 26, 24, .18); }
/* 己方暗子：盖着，自己认得（淡显真身 + 角标"盖"） */
.dk-piece.dk-own-down { color: var(--ink-3); background: #F0EAE1; border: 1.5px dashed rgba(120, 110, 95, .6); }
.dk-piece.dk-own-down .who-face { opacity: .5; }
/* 对方暗子：纯背面，不给身份 */
.dk-piece.dk-back { color: rgba(247, 243, 235, .8); background: radial-gradient(circle at 40% 35%, #4a5560, #2f3a44 70%); border: 1.5px solid #2a333b; }
.dk-piece.dk-back::after { content: "兽"; font-size: clamp(13px, 5vw, 20px); opacity: .35; }

/* 角标 */
.dk-mark { position: absolute; top: 3px; right: 5px; font-size: 10px; line-height: 1; opacity: .6; letter-spacing: 0; }
.dk-mark--down { color: var(--ink-3); }

/* ---------- 选中 / 可走 / 可吃 / 上一步 ---------- */
.dk-cell.is-sel { background: #EFDCD5; }
.dk-cell.is-move::before {
  content: ""; width: 22%; height: 22%; border-radius: 50%; background: rgba(26, 26, 24, .28);
}
.dk-cell.is-cap .dk-piece { outline: 3px solid rgba(176, 57, 46, .55); outline-offset: 2px; }
.dk-cell.is-cap-unknown::before {
  content: "?"; position: absolute; top: 4px; left: 6px; font-size: 12px; color: var(--cinnabar); font-weight: 700;
}
.dk-cell.is-cap-unknown .dk-piece { outline: 3px dashed rgba(176, 57, 46, .5); outline-offset: 2px; }
.dk-cell.is-last { background: #EDE7DA; }

/* 翻开/吃子的瞬时提示 */
@keyframes dk-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.dk-cell.is-flash .dk-piece { animation: dk-pop .34s ease; }

/* ---------- 侧栏 ---------- */
.dk-side { display: flex; flex-direction: column; gap: 10px; min-width: 150px; font-size: 14px; color: var(--ink-2); }
.dk-side h3 { font-size: 14px; color: var(--ink-3); font-weight: 500; letter-spacing: .12em; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.dk-side p { display: flex; gap: 8px; }
.dk-side .who { flex: none; width: 5em; }
.dk-side .who--red { color: var(--cinnabar); }
.dk-side .who--blue { color: var(--azurite); }
.dk-deadlist { letter-spacing: .2em; min-height: 1.5em; }

/* ---------- 规则折叠 ---------- */
.dk-rules { border-top: 1px solid var(--rule); padding-top: 10px; font-size: 14px; color: var(--ink-2); }
.dk-rules summary { cursor: pointer; color: var(--azurite); }
.dk-rules ul { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 4px; }
.dk-nojs { color: var(--cinnabar); }

.is-hidden { display: none !important; }

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  .dk-bar { gap: 8px; }
  .dk-seg { flex: 1; }
  .dk-btn { flex: 1; padding: 8px 8px; font-size: 13px; }
  .dk-acts { margin-left: 0; width: 100%; }
  .dk-acts .dk-btn { flex: 1; }
  .dk-field { flex-direction: column; align-items: stretch; }
  .dk-board { width: 100%; max-width: 402px; }
  .dk-side { width: 100%; }
}