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

body {
  font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
  background:linear-gradient(135deg,#f5f0e8 0%,#ede4d3 100%);
  min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px;
}

#app { display:flex; flex-direction:column; align-items:center; gap:18px; user-select:none; }
#header { text-align:center; }
#header h1 { font-size:30px; color:#4a3520; letter-spacing:6px; font-weight:700; }
#info { margin-top:6px; font-size:20px; color:#5c3a21; }
#turn-display { font-weight:bold; padding:2px 8px; border-radius:4px; transition:color .3s; }
#engine-status { margin-top:4px; font-size:13px; color:#2e7d32; letter-spacing:1px; }

#board-wrapper { display:flex; justify-content:center; align-items:center; }
#board {
  position:relative; background:#e8c882; border:3px solid #6b4226; border-radius:6px;
  box-shadow:2px 2px 8px rgba(0,0,0,.2), inset 0 0 20px rgba(0,0,0,.05);
}

.board-line { background:#5c3a21; pointer-events:none; position:absolute; }
.river-text {
  position:absolute; pointer-events:none; font-family:'KaiTi','STKaiti','Noto Serif SC',serif;
  color:#5c3a21; font-size:26px; letter-spacing:30px; display:flex; justify-content:center; align-items:center;
}

.piece {
  position:absolute; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:bold; font-family:'KaiTi','STKaiti','SimSun','Noto Serif SC',serif;
  cursor:pointer; z-index:10; border:2px solid;
  box-shadow:1px 1px 4px rgba(0,0,0,.25), inset 0 0 6px rgba(255,255,0,.15);
  background:radial-gradient(circle at 36% 36%,#fff8e7,#dcc48a 70%,#c9ad72);
  transition:box-shadow .15s; touch-action:manipulation;
}
.piece:hover { box-shadow:2px 2px 8px rgba(0,0,0,.35), inset 0 0 6px rgba(255,255,0,.15); }
.piece-r { color:#b22222; border-color:#b22222; }
.piece-b { color:#1a1a2e; border-color:#1a1a2e; }

#controls { display:flex; gap:20px; margin-top:4px; flex-wrap:wrap; justify-content:center; }
#controls button {
  padding:10px 32px; font-size:17px; font-family:inherit; border:2px solid #6b4226;
  background:#e8c882; color:#4a3520; border-radius:8px; cursor:pointer;
  transition:all .2s ease; letter-spacing:2px; font-weight:600; touch-action:manipulation;
}
#controls button:hover { background:#d4b06a; box-shadow:0 2px 8px rgba(0,0,0,.12); }
#controls button:active { transform:scale(.97); }

.piece-selected { box-shadow:0 0 12px 4px rgba(255,215,0,.85), 0 0 4px rgba(255,215,0,.5)!important; }

.move-indicator { position:absolute; pointer-events:none; z-index:5; border-radius:50%; transform:translate(-50%,-50%); }
.move-indicator-dot { width:14px; height:14px; background:rgba(0,180,0,.55); }
.move-indicator-capture { width:44px; height:44px; background:rgba(255,0,0,.15); border:3px solid rgba(255,0,0,.45); }

.last-move-marker {
  position:absolute; pointer-events:none; z-index:4; width:52px; height:52px;
  box-sizing:border-box; transform:translate(-50%,-50%); border-radius:6px;
}
.last-move-r { border:3px solid rgba(230,170,20,.9); box-shadow:0 0 6px rgba(230,170,20,.5); }
.last-move-b { border:3px solid rgba(30,90,200,.85); box-shadow:0 0 6px rgba(30,90,200,.45); }

:fullscreen { background:linear-gradient(135deg,#f5f0e8 0%,#ede4d3 100%); }
:-webkit-full-screen { background:linear-gradient(135deg,#f5f0e8 0%,#ede4d3 100%); }

@media (max-width:660px) {
  #board { transform:scale(.65); transform-origin:top center; }
  #header h1 { font-size:22px; }
  #info { font-size:16px; }
  #controls button { padding:8px 20px; font-size:14px; }
}