* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #1f2429;
  color: #eee;
  user-select: none;
}
#app { display: flex; flex-direction: column; height: 100%; width: 100%; }

/* 棋盘区域：置顶，占满宽度 */
#boardWrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d3c46;
  background-image: radial-gradient(circle at 20% 20%, #344a56, #223039);
}
#board { touch-action: none; cursor: pointer; display: block; }

/* 申请下棋按钮：位于楚河汉界框内（位置由JS计算），倒计时显示在按钮右方 */
#applyOverlay {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  z-index: 20;
}
#btnApply {
  border: none;
  border-radius: 14px;
  background: #c0392b;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  padding: 14px 34px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  opacity: .6;
}
#btnApply:active { opacity: .5; transform: scale(.96); }
#btnApply:disabled { background: #555; color: #999; opacity: .6; }
#btnApply {
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

/* 棋盘下方信息栏 */
#infoBar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 5px 8px;
  background: #1c2126;
  border-top: 1px solid #3a424a;
  font-size: 13px;
  color: #ccd;
}
.ibItem { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
#nameCell {
  cursor: pointer;
  font-weight: 700;
  color: #f3b16a;
  border-bottom: 1px dashed #f3b16a;
}
#redClockCell { color: #e02424; min-width: 44px; }
#qiCell, #diamondCell { color: #8cf; }

/* 底部面板 */
#bottomPanel {
  height: clamp(180px, 34vh, 240px);
  display: flex;
  background: #24292e;
  border-top: 1px solid #3a424a;
}

/* 左半：功能按钮 + 状态信息 */
#leftCol {
  width: 44%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  min-width: 0;
}
#btnGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.btn {
  border: none;
  border-radius: 10px;
  background: #3a434c;
  color: #eee;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.btn:active { background: #4a5560; transform: scale(.96); }
.btn:disabled { background: #2c3238; color: #667; }
.btn.ok { background: #2e7d4f; }
.btn.signed { background: #2c3238; color: #889; pointer-events: none; }
#enginePanel .panel { max-width: 520px; }
#engineInfoBox p { margin: 6px 0; font-size: 13px; line-height: 1.6; color: #ddd; }
#engineInfoBox a { color: #6db3f2; word-break: break-all; }
#skinGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.skinItem {
  border: 2px solid #3a434c;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  background: #232a30;
  transition: border-color .15s;
}
.skinItem:hover { border-color: #5b6570; }
.skinItem.active { border-color: #2e7d4f; }
.skinItem.locked { opacity: .72; }
.skinPreview {
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 6px;
  border: 1px solid rgba(0,0,0,.15);
}
.spBox {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid;
}
.skinName { font-size: 14px; font-weight: 600; color: #eee; margin-bottom: 2px; }
.skinState { font-size: 12px; color: #8a94a0; }
.skinItem.active .skinState { color: #35c17a; }
.btn.small { height: 38px; font-size: 15px; padding: 0 14px; }

#statusBox {
  background: #1c2126;
  border-radius: 8px;
  padding: 5px 8px;
}
.infoLine { font-size: 12px; color: #aab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }

/* 右半：聊天窗口（紧跟棋盘右下方） */
#chatBox {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #3a424a;
}
#chatTabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid #3a424a;
  background: #232a30;
}
#chatTabs .tab {
  flex: 1;
  border: none;
  background: transparent;
  color: #9aa;
  padding: 7px 0;
  font-size: 13px;
  cursor: pointer;
}
#chatTabs .tab.active {
  color: #fff;
  background: #2c343b;
  box-shadow: inset 0 -2px 0 #4a90d9;
}
#chatTabs .tab:active { background: #2c343b; }
#uploadPanel2 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 12px;
}
#favPanel2 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 12px;
}
#uploadPanel2.hidden, #favPanel2.hidden, #rankPanel2.hidden { display: none !important; }
#rankPanel2 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 12px;
}
#rankList div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 2px;
  border-bottom: 1px solid #2c343b;
  line-height: 1.4;
}
#rankList .rk { width: 22px; font-weight: 700; color: #999; }
#rankList .rk1 { color: #e9a420; }
#rankList .rk2 { color: #c0c0c0; }
#rankList .rk3 { color: #cd7f32; }
#rankList .rn { flex: 1; color: #6ab0f3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rankList .rl { color: #9a9; font-size: 11px; }
#rankList .rq { color: #e9a420; font-weight: 700; }
#uploadList div, #favList div {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid #2c343b;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
#uploadList div:hover, #favList div:hover { background: #26303a; }
#uploadList .ulName, #favList .ulName {
  color: #6ab0f3;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
#uploadList .ulTime, #favList .ulTime { color: #778; font-size: 11px; margin-right: 8px; flex-shrink: 0; }
#uploadList .ulStatus, #favList .ulStatus { font-weight: 700; flex-shrink: 0; }
#uploadList .st0, #favList .st0 { color: #f3b16a; }   /* 未破解 */
#uploadList .st1, #favList .st1 { color: #6be08a; }   /* 已破解 */
#uploadList .st2, #favList .st2 { color: #999; }      /* 已跳过 */
#favList .favOp {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: #3a434c;
  color: #eee;
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 6px;
  cursor: pointer;
}
#favList .favOp:hover { background: #4a5560; }
#favList .favOp.del { background: #5a3033; color: #ff9a9a; }
#favList .favOp.del:hover { background: #6e3a3e; }
#chatMsgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 12px;
  word-break: break-word;
}
#chatMsgs div { margin-bottom: 3px; line-height: 1.35; }
.cm .nm { color: #6ab0f3; font-weight: 600; margin-right: 4px; }
.cm .tx { color: #ddd; }
.sm { color: #9a9; }
.chatMe .nm { color: #f3b16a; }
#chatInputRow {
  display: flex;
  border-top: 1px solid #3a424a;
  flex: 0 0 auto;
}
#chatInput {
  flex: 1;
  border: none;
  outline: none;
  background: #1c2126;
  color: #eee;
  padding: 8px;
  font-size: 13px;
  min-width: 0;
}
#btnSend {
  border: none;
  background: #2e7d4f;
  color: #fff;
  padding: 0 12px;
  font-size: 14px;
}

/* 摆棋面板：底部弹出，不遮棋盘，方便点击棋盘摆放棋子 */
#setupPanel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: auto;
  background: rgba(0,0,0,.62);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 10px 12px;
  z-index: 30;
}
#setupPanel .panel { max-width: 480px; max-height: 60vh; overflow-y: auto; }
#setupPanel #palette { flex-wrap: wrap; justify-content: center; gap: 4px; padding-bottom: 2px; }
#setupPanel .palItem { width: 30px; height: 30px; font-size: 15px; border-width: 1px; }
#setupPanel .palItem.sel { outline: 2px solid #4a90d9; }
#setupPanel.hidden { display: none !important; }

/* 遮罩 / 面板 */
#bidRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 10px;
}
#bidRow .btn { width: 44px; font-size: 22px; }
#bidValue { font-size: 28px; font-weight: 700; color: #e9a420; min-width: 48px; text-align: center; }
#bidBalance { color: #e9a420; }
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 30;
}
.overlay.hidden { display: none; }
.hidden { display: none !important; }
.panel {
  width: 86%;
  max-width: 460px;
  background: #2a3037;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.panel h3 { margin: 0 0 6px; font-size: 16px; }
.panel .hint { margin: 0 0 8px; font-size: 12px; color: #999; line-height: 1.5; white-space: normal; word-break: break-word; }
#renamePanel .panel { max-width: 420px; }
#palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.palItem {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid #555;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  background: #f2d89e; cursor: pointer;
}
.palItem.red { color: #c0392b; }
.palItem.black { color: #222; }
.palItem.sel { outline: 3px solid #4a90d9; }
.panelBtns { display: flex; gap: 8px; justify-content: flex-end; }
textarea#uploadText {
  width: 100%; height: 130px;
  background: #1c2126; color: #eee; border: 1px solid #3a424a;
  border-radius: 8px; padding: 8px; font-size: 12px; resize: none;
}
#uploadFile { margin-top: 8px; font-size: 12px; width: 100%; }
#setupFenText {
  width: 100%;
  background: #1c2126; color: #8cf;
  border: 1px solid #3a424a; border-radius: 8px;
  padding: 6px 8px; font-size: 11px; margin-bottom: 10px;
  word-break: break-all;
}
#renameInput {
  width: 100%;
  background: #1c2126; color: #eee;
  border: 1px solid #3a424a; border-radius: 8px;
  padding: 8px; font-size: 16px; margin-bottom: 12px;
}

/* 收藏编辑弹窗 */
.favEditPanelBox .favField {
  margin-bottom: 12px;
}
.favEditPanelBox .favLabel {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: #aab;
  font-weight: 600;
}
.favEditPanelBox #favNameInput {
  width: 100%;
  background: #1c2126; color: #eee;
  border: 1px solid #3a424a; border-radius: 8px;
  padding: 8px; font-size: 14px;
}
.favEditPanelBox #favNameInput:focus, .favEditPanelBox #favNoteInput:focus {
  border-color: #4a90d9; outline: none;
}
.favEditPanelBox #favNoteInput {
  width: 100%;
  background: #1c2126; color: #eee;
  border: 1px solid #3a424a; border-radius: 8px;
  padding: 8px; font-size: 13px; resize: vertical;
  min-height: 72px;
}
.favEditPanelBox .favCount {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #778;
  margin-top: 3px;
}
.favEditPanelBox .favFenRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.favEditPanelBox #favFenHint {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #667;
  word-break: break-all;
  background: #1c2126;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0;
}
.favEditPanelBox #favFenCopy {
  flex-shrink: 0;
  height: 26px;
  font-size: 12px;
  padding: 0 10px;
}
.favEditPanelBox .favExportRow {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.18);
  text-align: center;
}
.favEditPanelBox #favExportBtn {
  background: #4a5a70;
}
.favEditPanelBox #favExportBtn:hover { background: #5a6c85; }

/* 横幅 */
#banner {
  position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.78);
  border: 2px solid #c0392b;
  color: #ffd; font-size: 24px; font-weight: 800;
  padding: 14px 30px; border-radius: 12px;
  z-index: 40;
  transition: opacity .4s;
}
#banner.hidden { opacity: 0; pointer-events: none; }
#toast {
  position: fixed; bottom: 24vh; left: 50%; transform: translateX(-50%);
  background: rgba(30,30,30,.92); color: #fff;
  padding: 8px 16px; border-radius: 8px; font-size: 14px;
  z-index: 50; transition: opacity .3s;
}
#toast.hidden { opacity: 0; pointer-events: none; }