* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  background: #0d141c; color: #e8eef5; overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

.app { height: 100%; display: flex; flex-direction: column; }

/* ---------- 顶栏 (所有提示都在这里, 绝不遮挡棋盘) ---------- */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; background: linear-gradient(180deg,#1b2836,#141d28);
  border-bottom: 1px solid #2b3d50; box-shadow: 0 2px 10px rgba(0,0,0,.35); z-index: 5;
}
.brand { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.brand b { font-size: 19px; letter-spacing: 2px; color: #ffd98a; }
.brand em { font-style: normal; font-size: 12px; color: #7fd4ff; border: 1px solid #2f6b8a; border-radius: 4px; padding: 0 4px; }
.brand .sub { font-size: 12px; color: #7d90a4; }

.turnbox {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #0f1922; border: 1px solid #2b3d50; border-radius: 999px; padding: 4px 14px 4px 10px; font-size: 14px;
}
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.dot.red { background: #ff5a48; box-shadow: 0 0 10px #ff5a48; }
.dot.black { background: #cfd8e3; box-shadow: 0 0 10px #98a8bb; }

.msg {
  flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.3;
  padding: 7px 14px; border-radius: 8px; border: 1px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg.info  { background: #142230; border-color: #27455c; color: #b9d4e8; }
.msg.good  { background: #12291d; border-color: #2b6b45; color: #90e6b4; }
.msg.warn  { background: #2e2410; border-color: #7a5c17; color: #ffd98a; }
.msg.error { background: #33161a; border-color: #8a2b34; color: #ff9c9c; }
@keyframes popin { from { transform: translateY(-5px) scale(.99); opacity: .25; } to { transform: none; opacity: 1; } }
.msg.pop { animation: popin .22s ease-out; }

/* ---------- 主体 ---------- */
.main { flex: 1 1 auto; display: flex; min-height: 0; }
.stage { flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; background: #0b1119; }
.stage canvas.gl { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage canvas.gl:active { cursor: grabbing; }
.loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #86a0b8; font-size: 15px; text-align: center; }

/* ---------- 右侧面板 ---------- */
.panel {
  flex: 0 0 288px; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: #111a24; border-left: 1px solid #263647; overflow-y: auto;
}
.sect { font-size: 12px; color: #6f889f; letter-spacing: 2px; margin-top: 2px; }

.players { display: flex; flex-direction: column; gap: 8px; }
.pl { border: 1px solid #26374a; border-radius: 10px; padding: 8px 10px; background: #0f1922; transition: .2s; }
.pl .row { display: flex; justify-content: space-between; align-items: center; }
.pl .nm { font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.pl.red .nm { color: #ff7a68; }
.pl.black .nm { color: #d5dee9; }
.pl .tm { font-family: Consolas, monospace; font-size: 15px; color: #8fa8bd; }
.pl .lbl { font-size: 11px; color: #5d7488; margin-top: 4px; }
.pl.active { border-color: #ffce5c; box-shadow: 0 0 0 1px #ffce5c55, 0 0 16px #ffce5c22; background: #16222e; }
.caps { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; min-height: 20px; }
.caps .empty { color: #46586b; font-size: 12px; }
.cap { font-style: normal; font-size: 12px; width: 21px; height: 21px; line-height: 19px; text-align: center; border-radius: 50%; border: 1px solid; background: #e9d5aa; }
.cap.r { color: #b02418; border-color: #b02418; }
.cap.b { color: #1d1d1d; border-color: #333; }

.btns { display: flex; flex-wrap: wrap; gap: 7px; }
.btn {
  flex: 1 1 calc(50% - 4px); min-width: 0; cursor: pointer;
  padding: 9px 6px; font-size: 14px; font-family: inherit; letter-spacing: 1px;
  color: #dce8f4; background: #1b2a39; border: 1px solid #33495e; border-radius: 8px; transition: .15s;
}
.btn:hover:not(:disabled) { background: #24374a; border-color: #4a6b88; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: none; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.wide { flex: 1 1 100%; }
.btn.sm { font-size: 12.5px; padding: 7px 4px; letter-spacing: 0; }
.btn.go { background: linear-gradient(180deg,#c9432f,#9d2b1d); border-color: #e2705c; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 4px; }
.btn.go:hover:not(:disabled) { background: linear-gradient(180deg,#dc5540,#b1341f); }
.btn.tg.on { background: #17342a; border-color: #35785a; color: #93e9bd; }
.btn.armed { background: #7a2020; border-color: #ff7d6b; color: #ffd9d2; animation: blink .9s infinite; }
@keyframes blink { 50% { opacity: .55; } }

.result { display: none; }
.result.show { display: block; padding: 10px 12px; border-radius: 10px; text-align: center; border: 1px solid; animation: popin .3s ease-out; }
.result .rt { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.result .rs { font-size: 11.5px; opacity: .78; margin-top: 4px; }
.result.red { background: #33161a; border-color: #a33b32; color: #ffb0a4; }
.result.black { background: #1b2430; border-color: #6d8098; color: #dbe6f2; }
.result.draw { background: #22301c; border-color: #5d7a45; color: #cbe6a8; }

.moves { flex: 1 1 auto; min-height: 96px; max-height: 34vh; overflow-y: auto; background: #0d1620; border: 1px solid #23364a; border-radius: 8px; padding: 6px; font-size: 13.5px; }
.moves .empty { color: #46586b; text-align: center; padding: 10px 0; }
.moves .mv { display: flex; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.moves .mv:nth-child(odd) { background: #101c27; }
.moves .mv.last { background: #1a2c1f; }
.moves .no { width: 30px; color: #5d7488; text-align: right; }
.moves .r { flex: 1; color: #ff8f7d; letter-spacing: 1px; }
.moves .b { flex: 1; color: #cddaea; letter-spacing: 1px; }

.tips { font-size: 11.5px; color: #5f778e; line-height: 1.7; border-top: 1px dashed #26374a; padding-top: 8px; }

/* ---------- 窄屏 / 手机 ---------- */
@media (max-width: 900px) {
  .main { flex-direction: column; }
  .stage { flex: 1 1 auto; min-height: 52vh; }
  .panel { flex: 0 0 auto; max-height: 44vh; border-left: none; border-top: 1px solid #263647; }
  .players { flex-direction: row; }
  .players .pl { flex: 1; }
  .brand .sub { display: none; }
  .moves { max-height: 22vh; }
}
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 6px 10px; }
  .msg { flex: 1 1 100%; white-space: normal; font-size: 13.5px; }
}


/* ---------- 对局设置 ---------- */
.opts { display: flex; flex-direction: column; gap: 7px; }
.opt-row { display: flex; align-items: center; gap: 8px; }
.opt-row .ol { flex: 0 0 34px; font-size: 12.5px; color: #7d95ac; letter-spacing: 1px; }
.seg { flex: 1 1 auto; display: flex; background: #0d1620; border: 1px solid #2a3d51; border-radius: 8px; padding: 2px; gap: 2px; }
.seg button {
  flex: 1; cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 6px 2px;
  color: #9fb4c8; background: transparent; border: none; border-radius: 6px; transition: .15s; white-space: nowrap;
}
.seg button:hover { background: #1b2a39; color: #dce8f4; }
.seg button.on { background: linear-gradient(180deg,#2d6b8f,#1f4d68); color: #fff; box-shadow: 0 1px 6px #0006; }
.hintline { font-size: 11.5px; color: #6f889f; line-height: 1.55; padding: 2px 2px 0; }

/* ---------- 每步限时倒计时 ---------- */
#moveTimer {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
  background: #0d1620; border: 1px solid #2a3d51; color: #9fb4c8;
  transition: color .2s, border-color .2s, background .2s;
}
#moveTimer.danger { color: #ffa94d; border-color: #7a4a1d; background: #1d1409; }

/* ---------- 电脑思考面板 ---------- */
.aibox { background: #0d1620; border: 1px solid #23364a; border-radius: 9px; padding: 9px 11px; }
.aibox.busy { border-color: #3f7ea8; box-shadow: 0 0 0 1px #3f7ea855, 0 0 14px #3f7ea822; }
.ai-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #a9c6dd; }
.ai-title b { font-weight: 600; }
.spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #2c4459; border-top-color: #5fb6ea; display: inline-block; flex: 0 0 auto; }
.aibox.busy .spin { animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.ai-info { font-size: 11.8px; color: #7f9ab2; line-height: 1.65; margin-top: 4px; min-height: 16px; }
.ai-info b { color: #7fd4ff; font-weight: 700; }

.btn.pulse:not(:disabled) { animation: btnpulse 1.6s ease-in-out infinite; }
@keyframes btnpulse { 50% { box-shadow: 0 0 0 3px #e2705c33, 0 0 18px #e2705c44; } }

.ai-eng { font-size: 11.5px; color: #6f889f; margin-top: 3px; }
.engbadge { color: #8fa8bd; }
.engbadge.strong { color: #ffd98a; font-weight: 700; }