/* =========================================================
 * m3k8w5q2x9n6_qipu.css —— 雅趣残棋「查看棋谱」页样式
 * 与站内视觉语言保持一致: 棕木色系 / 白色圆角面板 / 药丸按钮
 * ========================================================= */
html, body { margin: 0; padding: 0; }
body {
  background: #e4c999;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  -webkit-text-size-adjust: none;
}
#qqwrap { width: 424px; margin: 0 auto; min-height: 100vh; padding-bottom: 24px; box-sizing: border-box; }

.qq-head {
  height: 44px; line-height: 44px; margin: 8px 10px 4px;
  background: #642913; color: #fff; font-size: 17px; text-align: center;
  border-radius: 8px; letter-spacing: 3px;
}

.qq-panel {
  margin: 10px; background: #fff; border: 1px solid #d3b589;
  border-radius: 8px; padding: 12px; box-sizing: border-box;
}
.qq-ptitle { font-size: 15px; color: #56240f; font-weight: bold; margin-bottom: 6px; }
.qq-pdesc { font-size: 12px; color: #998866; line-height: 18px; margin-bottom: 10px; }

.qq-status { min-height: 16px; line-height: 16px; font-size: 12px; color: #8a4b2a; margin: 6px 0; text-align: center; }
.qq-status.qq-err { color: #c62828; }
.qq-status.qq-warn { color: #c77d00; }

input.qq-in {
  width: 100%; height: 40px; line-height: 40px;
  border: 1px solid #c8ad83; border-radius: 6px;
  font-size: 16px; padding: 0 10px; box-sizing: border-box;
  outline: none; margin-bottom: 4px; color: #333; background: #fffef8;
}
input.qq-in:focus { border-color: #44a306; }

.qq-btn {
  display: block; width: 100%; height: 42px; line-height: 42px;
  border: 0; border-radius: 30px; background: #44a306; color: #fff;
  font-size: 16px; margin-top: 8px; cursor: pointer; letter-spacing: 2px;
}
.qq-btn:disabled { opacity: .55; }
.qq-btn:active { background: #3b8f05; }

.qq-btn2 {
  display: block; width: 100%; height: 42px; line-height: 42px;
  border: 0; border-radius: 30px; background: #642913; color: #fff;
  font-size: 16px; margin-top: 8px; cursor: pointer; letter-spacing: 2px;
}
.qq-btn2:active { background: #552110; }

.qq-mini {
  display: inline-block; height: 26px; line-height: 24px; padding: 0 12px;
  border: 1px solid #804d2d; border-radius: 13px; background: #fff;
  color: #804d2d; font-size: 12px; margin-left: 6px; cursor: pointer;
}
.qq-mini:active { background: #f3e2c3; }

/* ---------- 查看/预览 ---------- */
.qq-titlebar { position: relative; padding-right: 72px; }
#qq-title-txt { font-size: 16px; color: #56240f; font-weight: bold; line-height: 22px; word-break: break-all; }
#qq-title-input {
  display: none; width: 100%; height: 36px; font-size: 15px;
  border: 1px solid #c8ad83; border-radius: 6px; padding: 0 8px;
  box-sizing: border-box; color: #333; background: #fffef8; outline: none;
}
#qq-title-edit, #qq-title-save { position: absolute; right: 8px; top: 14px; display: none; }
.qq-meta { font-size: 12px; color: #8a6a4a; margin-top: 5px; line-height: 16px; word-break: break-all; }

.qq-board { width: 383px; margin: 8px auto 0; }
.qq-desk {
  position: relative; width: 377px; height: 420px;
  border: 1px solid #804d2d; padding: 1px; margin: 0 auto;
  background: #f2ddb0;
}
.qq-desk img.board { position: absolute; left: 1px; top: 1px; width: 377px; height: 420px; z-index: 1; }
#qq-pieces { position: absolute; left: 1px; top: 1px; width: 377px; height: 420px; z-index: 5; }
.qq-piece { position: absolute; width: 42px; height: 42px; }
.qq-piece img { display: block; width: 43px; height: 43px; }

.qq-controls { margin: 8px 10px 0; }
.qq-ctl-row { display: flex; margin-bottom: 6px; }
.qq-ctl-row button {
  flex: 1; height: 34px; line-height: 32px; margin: 0 3px;
  border: 1px solid #804d2d; border-radius: 14px; background: #fff;
  color: #5a3a22; font-size: 13px; cursor: pointer; padding: 0;
  white-space: nowrap; overflow: hidden;
}
.qq-ctl-row button:active { background: #f3e2c3; }
.qq-ctl-row button:first-child { margin-left: 0; }
.qq-ctl-row button:last-child { margin-right: 0; }

.qq-movelist { height: 132px; overflow-y: auto; overflow-x: hidden; padding: 2px 4px; }
.qq-movelist::-webkit-scrollbar { width: 0; height: 0; }
.qq-mvrow { line-height: 22px; font-size: 13.5px; white-space: nowrap; }
.qq-mnum { display: inline-block; width: 30px; text-align: right; color: #998866; margin-right: 6px; }
.qq-mv { display: inline-block; min-width: 74px; padding: 0 4px; color: #3a2a1a; }
.qq-mv.qq-mv-cur { background: #ffefc2; color: #a03a00; font-weight: bold; border-radius: 4px; }

.qq-src { margin: 6px 12px 0; font-size: 12px; color: #8a6a4a; line-height: 18px; text-align: center; }
.qq-src a { color: #804d2d; }

/* ---------- 我的棋谱 ---------- */
.qq-mine-row { display: flex; align-items: center; height: 38px; line-height: 38px; border-bottom: 1px solid #f0e2c8; }
.qq-mine-row:last-child { border-bottom: 0; }
.qq-mine-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #3a2a1a; }
.qq-mine-d { font-size: 11px; color: #aa9977; margin-right: 6px; }

/* ---------- 分享弹层 ---------- */
#qq-sharemask {
  display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(98, 84, 84, .95); z-index: 50;
}
.qq-sharebox { width: 300px; margin: 0 auto; position: relative; top: 26%; background: #fff; border-radius: 8px; overflow: hidden; }
.qq-sharebox .qq-shtitle { height: 46px; line-height: 46px; background: #642913; color: #fff; text-align: center; font-size: 16px; letter-spacing: 2px; }
.qq-sharebox .qq-shbody { padding: 12px; }
#qq-share-url { width: 100%; height: 38px; font-size: 12px; border: 1px solid #c8ad83; border-radius: 6px; padding: 0 8px; box-sizing: border-box; color: #666; background: #fffef8; outline: none; }
#qq-share-tip { min-height: 16px; font-size: 12px; color: #44a306; text-align: center; margin: 6px 0 2px; }
.qq-sharebox .qq-btn { margin-top: 2px; }
.qq-sharebox .qq-btn2 { margin-top: 8px; }

/* ---------- 库选择(主库/用户库) ---------- */
.qq-kind { display: flex; margin: 2px 0 8px; }
.qq-kind-btn {
  flex: 1; height: 34px; line-height: 32px; margin: 0 3px;
  border: 1px solid #d8c6a8; border-radius: 14px; background: #f7f2e8;
  color: #998866; font-size: 13.5px; cursor: pointer; padding: 0;
  text-align: center;
}
.qq-kind-btn:first-child { margin-left: 0; }
.qq-kind-btn:last-child { margin-right: 0; }
.qq-kind-btn:active { opacity: .85; }
.qq-kind-cur {
  background: #44a306; color: #fff; border-color: #44a306;
  font-weight: bold; box-shadow: 0 2px 6px rgba(68, 163, 6, .3);
}
.qq-kind-cur::before { content: "✓ "; }

/* ---------- 窄屏 ---------- */
@media (max-width: 423px) {
  #qqwrap { width: 100%; }
  .qq-board { width: 100%; }
  .qq-desk { transform-origin: top center; }
}