/* style.css — 珍珑棋局 */

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

html,body { width:100%; background:#1a1a2e; }

body {
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color:#e0d5c1; display:flex; justify-content:center;
}

#app {
  width:100vw; max-width:560px; text-align:center;
  padding-top:4px; padding-bottom:8px;
}

/* 标题 */
h1 { font-size:clamp(16px,5vw,26px); color:#d4a574; letter-spacing:1px; }
.subtitle { font-size:clamp(9px,2vw,11px); color:#8a7a6a; margin:2px 0 3px 0; }

/* 状态栏 */
#status-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 8px; background:#16213e; border-radius:4px;
  margin:0 4px 3px 4px; font-size:clamp(10px,2.5vw,13px);
}
#turn-indicator { font-weight:bold; }
#turn-indicator .dot-black { color:#c0392b; text-shadow:0 0 2px #fff, 0 0 2px #fff; }
#turn-indicator .dot-white { color:#27ae60; text-shadow:0 0 2px #fff, 0 0 2px #fff; }
.turn-black { color:#f0f0f0; } .turn-white { color:#f0f0f0; }
#move-count { color:#8a8a8a; font-size:0.9em; }
#captures-info { font-size:0.8em; color:#8a7a6a; }
#captures-info b { color:#d4a574; }

/* 棋盘 — 自然流 */
#board-container {
  position:relative; margin:3px auto;
  min-height:200px;
}

#board-canvas {
  display:block; margin:0 auto;
  background:#dcb35c; box-shadow:0 2px 10px rgba(0,0,0,0.4);
}

/* AI遮罩 */
#thinking-overlay {
  position:absolute; top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.55); display:flex; flex-direction:column;
  align-items:center; justify-content:center; border-radius:3px;
  color:#d4a574; font-size:13px; gap:6px;
}
#thinking-overlay.hidden { display:none; }
.spinner {
  width:24px; height:24px; border:2px solid rgba(212,165,116,0.3);
  border-top-color:#d4a574; border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* 按钮 */
#controls { margin:3px 0 3px 0; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
/* 对局 ID 条 — 紧贴棋盘左下角 */
#game-id-bar {
  display:flex; align-items:center; justify-content:flex-start; gap:6px;
  font-size:clamp(10px,2.5vw,12px); color:#8a7a6a;
  margin:2px auto 0 auto; max-width:560px; padding-left:2px; box-sizing:border-box;
}
#game-id-bar b { color:#6a9fd8; font-family:monospace; letter-spacing:0.5px; }
.btn-mini { padding:1px 8px; font-size:10px; border-radius:4px; cursor:pointer; }
button {
  padding:6px 14px; border:none; border-radius:5px;
  font-size:clamp(12px,3vw,14px); cursor:pointer; font-family:inherit; line-height:1.2;
}
button:disabled { opacity:0.35; cursor:not-allowed; }
button:active { transform:scale(0.96); }
.btn-primary { background:#d4a574; color:#1a1a2e; font-weight:bold; }
.btn-primary:hover:not(:disabled) { background:#c4925a; }
.btn-secondary { background:#2a2a4a; color:#e0d5c1; border:1px solid #444; }
.btn-secondary:hover:not(:disabled) { background:#3a3a5a; }

/* 对阵 */
#match-info {
  display:flex; justify-content:center; align-items:center; gap:6px;
  font-size:clamp(10px,2vw,12px); color:#8a7a6a;
}
.player-card {
  display:flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:4px; background:#16213e; border:2px solid transparent;
}
.player-card.active { border-color:#d4a574; }
.stone { width:12px; height:12px; border-radius:50%; display:inline-block; flex-shrink:0; }
.black-stone { background:radial-gradient(circle at 35% 35%, #ff6b6b, #c0392b); box-shadow:1px 1px 2px rgba(0,0,0,0.5); }
.white-stone { background:radial-gradient(circle at 35% 35%, #7bed9f, #27ae60); box-shadow:1px 1px 2px rgba(0,0,0,0.3); }

/* 设置区 */
#settings {
  display:flex; flex-direction:column; gap:4px;
  margin:2px 0 4px 0; align-items:center;
}
.setting-group {
  display:flex; align-items:center; gap:8px; font-size:clamp(10px,2.5vw,12px); color:#8a7a6a;
}
.setting-label { white-space:nowrap; }
.seg { display:flex; background:#16213e; border-radius:5px; overflow:hidden; }
.seg-btn {
  background:transparent; border:none; color:#e0d5c1;
  padding:4px 10px; font-size:clamp(10px,2.5vw,12px); cursor:pointer; font-family:inherit;
}
.seg-btn.active { background:#d4a574; color:#1a1a2e; font-weight:bold; }
.seg-btn:hover:not(.active) { background:#2a2a4a; }

/* 消息 */
#message-bar { font-size:10px; color:#8a7a6a; min-height:14px; }
#message-bar.error { color:#e74c3c; }

/* 复盘控制栏 */
#replay-bar {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:2px auto 0 auto; max-width:560px; padding:4px 8px;
  background:#16213e; border-radius:4px; font-size:clamp(11px,2.5vw,13px);
}
#replay-bar.hidden { display:none; }
#replay-step-info { color:#d4a574; font-weight:bold; min-width:60px; text-align:center; }
#replay-bar .btn-mini { padding:2px 10px; font-size:clamp(11px,2.5vw,13px); }

/* 复盘模式棋盘点位标签 */
#replay-move-label {
  position:absolute; top:2px; right:2px;
  background:rgba(0,0,0,0.6); color:#d4a574;
  padding:1px 5px; border-radius:3px; font-size:10px; z-index:5;
}

/* 结果弹窗 */
#result-overlay {
  position:fixed; top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:100;
}
#result-box {
  background:#16213e; padding:18px 28px; border-radius:10px; text-align:center; border:2px solid #d4a574;
}
#result-box h2 { font-size:18px; color:#d4a574; margin-bottom:4px; }
#result-box p { color:#8a7a6a; font-size:11px; }
#result-box button { margin-top:8px; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.ai-thinking-anim { animation:pulse 0.8s ease-in-out 1; }