/* 水墨珍藏 · 样式 —— 色彩沿用 Qt 版：纸 #f2eee3 / 墨 #45483f / 印泥红 #a14639 */
:root {
  --paper: #f2eee3;
  --paper-deep: #eae0ca;
  --paper-inner: #f3e9d3;
  --ink: #45483f;
  --ink-soft: #6c665b;
  --ink-faint: #99917f;
  --seal: #a04639;
  --seal-deep: #8d423a;
  --line: #cfc7b6;
  --green: #5e8a69;
  --serif: "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #ebe7db;
  font-family: var(--serif);
  overflow: hidden;
}

body { display: flex; align-items: center; justify-content: center; }

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 1120 / 820));
  aspect-ratio: 1120 / 820;
  user-select: none;
  -webkit-user-select: none;
}

#board { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }

/* ---- 控件通用 ---- */
.ctl, .mini {
  font-family: var(--serif);
  background: #eee9dd;
  border: 1px solid #cfc7b7;
  border-radius: 7px;
  color: #52504a;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ctl:hover, .mini:hover { background: #e3ddcf; border-color: #9c9180; }
.ctl:disabled, .mini:disabled { color: #b6aea0; background: #f1ede4; border-color: #ddd5c6; cursor: default; }

select.ctl, input.ctl {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2399917f' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-left: 10px;
  cursor: pointer;
}
input.ctl { cursor: text; }

button.ctl { font-size: 13px; }
.btn-primary {
  background: var(--seal-deep);
  border: 0;
  border-radius: 8px;
  color: #fff6e7;
  font-size: 14px;
}
.btn-primary:hover { background: #a55549; }

/* 绝对定位由 app.js layout() 按比例摆放 */
#modeBox, #sideBox, #levelBox, #btnNew, #btnUndo, #btnHint, #btnPause, #btnHelp, #btnFlip, #moveList, #listTitle, #onlinePanel, #chatBox { position: absolute; }

#btnNew.btn-primary { background: var(--seal-deep); border: 0; color: #fff6e7; font-size: 14px; border-radius: 8px; }
#btnNew.btn-primary:hover { background: #a55549; }

.side-title {
  color: #948b78;
  font-size: 10px;
  letter-spacing: 1px;
  pointer-events: none;
}

/* ---- 棋谱 ---- */
#moveList {
  list-style: none;
  margin: 0; padding: 0 4px 0 0;
  overflow-y: auto;
  color: #6c665b;
  font-size: 12px;
  scrollbar-width: thin;
  scrollbar-color: #cfc7b6 transparent;
}
#moveList li { padding: 7px 2px; border-bottom: 1px solid #e4ddcf; white-space: nowrap; }
#moveList li .no { color: #a89f8c; margin-right: 6px; }
#moveList li.latest { color: #3f433b; }
#moveList li .cap { color: var(--seal); }

/* ---- 在线面板 ---- */
#onlinePanel { color: #58544b; }
.op-title { color: #99917f; font-size: 10px; letter-spacing: 1px; margin-bottom: 8px; }
.room-code {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 10px;
  color: #3f433b;
  cursor: pointer;
  padding: 2px 0 4px;
}
.room-code:hover { color: var(--seal); }
.room-hint { font-size: 10px; color: #9a9281; margin-bottom: 12px; }
.op-players { border-top: 1px solid #d9d2c2; border-bottom: 1px solid #d9d2c2; padding: 9px 0; }
.op-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.op-row .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255,249,233,.6); }
.dot.red { background: var(--seal); }
.dot.black { background: var(--ink); }
.op-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.op-row .st { margin-left: auto; font-size: 10px; color: #9a9281; }
.op-row.turn .st { color: var(--seal); }
.op-row.turn .nm { color: #3f433b; font-weight: bold; }
.op-row.off .st { color: #b08900; }
.op-actions { display: flex; gap: 7px; margin-top: 12px; }
.op-actions .mini { flex: 1; font-size: 12px; padding: 7px 0; }
.op-spect { margin-top: 10px; font-size: 10px; color: #9a9281; }

/* ---- 聊天 ---- */
#chatBox { display: flex; flex-direction: column; gap: 5px; }
#chatLog {
  flex: 1;
  overflow-y: auto;
  font-size: 11px;
  color: #6c665b;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: #cfc7b6 transparent;
  min-height: 0;
}
#chatLog .who { color: var(--seal); }
#chatLog .sys { color: #a09580; font-style: italic; }
.chat-row { display: flex; gap: 5px; }
.chat-row input { flex: 1; font-size: 12px; padding: 0 8px; border-radius: 6px; }
.chat-row .mini { font-size: 12px; padding: 0 10px; }

/* ---- 覆盖层（大厅 / 说明） ---- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(63, 67, 59, .35);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 40;
}
.dialog {
  position: relative;
  width: min(420px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper-inner);
  border: 1px solid #d5c9b3;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(63, 67, 59, .35);
  padding: 30px 34px 26px;
  color: #4d4940;
}
.dlg-seal {
  position: absolute; top: -16px; left: 26px;
  width: 38px; height: 38px;
  background: var(--seal-deep);
  border-radius: 6px;
  color: #f9eedb;
  font-size: 19px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(141, 66, 58, .4);
}
.dialog h2 { margin: 4px 0 2px; font-size: 21px; color: #3f433b; letter-spacing: 2px; }
.dlg-sub { font-size: 11px; color: #898675; margin-bottom: 18px; }
.fld { display: block; font-size: 12px; color: #898675; margin-bottom: 14px; }
.fld input {
  display: block; width: 100%; margin-top: 6px;
  font-family: var(--serif); font-size: 14px; color: #4d4940;
  background: #faf5e8; border: 1px solid #cec6b6; border-radius: 6px; padding: 9px 10px;
}
.fld input:focus, input.ctl:focus { outline: none; border-color: #9c9180; }
.lob-row { display: flex; gap: 8px; }
.lob-row .ctl { flex: 1; }
.lob-row button { flex: none; padding: 0 16px; font-size: 13px; border-radius: 7px; }
.dlg-or { text-align: center; color: #a89f8c; font-size: 11px; margin: 13px 0; }
.dlg-status { min-height: 16px; font-size: 12px; color: var(--seal); margin-top: 10px; text-align: center; }
.lob-rooms { margin-top: 8px; max-height: 150px; overflow-y: auto; }
.lob-rooms .lr-title { font-size: 10px; color: #99917f; margin: 6px 0; letter-spacing: 1px; }
.lob-room {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-bottom: 1px solid #e4ddcf; font-size: 12px; color: #6c665b;
}
.lob-room .code { font-weight: bold; letter-spacing: 2px; color: #3f433b; }
.lob-room .seat { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lob-room button { flex: none; font-size: 11px; padding: 4px 10px; }
.dlg-close {
  display: block; margin: 18px auto 0;
  font-family: var(--serif); font-size: 12px;
  background: none; border: 1px solid #cfc7b6; border-radius: 7px;
  color: #898675; padding: 8px 22px; cursor: pointer;
}
.dlg-close:hover { color: #4d4940; border-color: #9c9180; }

.help-body p { font-size: 13px; line-height: 1.85; color: #58544b; margin: 0 0 10px; }

/* ---- 提示条 ---- */
#toast {
  position: fixed; left: 50%; top: 26px; transform: translateX(-50%);
  background: rgba(63, 67, 59, .92);
  color: #f3e9d3;
  font-size: 13px; letter-spacing: 1px;
  border-radius: 8px;
  padding: 10px 22px;
  z-index: 60;
  transition: opacity .3s;
  pointer-events: none;
}

.hide { display: none !important; }

@media (max-width: 720px) {
  #stage { width: 100vw; height: 100vh; aspect-ratio: auto; }
}