/* ============================================================
   Checkmate: Learn Chess, Play Chess — course styles
   Works alongside learn.css (buttons, wrap, breadcrumb, etc.)
   ============================================================ */

/* ---------- board ---------- */
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(92vw, 460px);
  aspect-ratio: 1 / 1;
  margin: 12px auto;
  border: 3px solid #2e2013;
  border-radius: 8px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* wooden frame */
  box-shadow: 0 12px 32px rgba(0,0,0,.35),
    inset 0 0 0 7px #6b4a2f,
    inset 0 0 0 9px #2e2013,
    inset 0 0 24px rgba(0,0,0,.35);
  background: linear-gradient(135deg, #7a5738, #5d3f26);
  padding: 9px;
  box-sizing: border-box;
}
.chess-board.small { width: min(92vw, 320px); }
.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: default;
}
button.sq { cursor: pointer; }
.sq.light {
  background: linear-gradient(135deg, #f4e0b8 0%, #ecd2a2 60%, #e6c795 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(120,72,32,.15);
}
.sq.dark {
  background: linear-gradient(135deg, #8f5cd0 0%, #6f3fa9 60%, #5a328a 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 2px rgba(20,8,35,.35);
}
.sq.sel { outline: 3px solid #2f7d4f; outline-offset: -3px; }
.sq.last { box-shadow: inset 0 0 0 100px rgba(255,213,128,.5), inset 0 1px 1px rgba(255,255,255,.4); }
.sq.check { box-shadow: inset 0 0 0 100px rgba(224,102,102,.55), inset 0 1px 1px rgba(255,255,255,.3); }
.sq.tap-mark { outline: 3px solid #2f7d4f; outline-offset: -3px; }
.pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.pc img {
  width: 88%;
  height: 88%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)) drop-shadow(0 4px 4px rgba(0,0,0,.15));
}
/* light rim on dark pieces so they read clearly against the purple squares */
.pc.b img {
  filter: drop-shadow(0 0 2px rgba(255,242,214,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.pc-inline { height: 1.5em; width: 1.5em; vertical-align: -0.35em; }
.cap-img { height: 24px; width: 24px; vertical-align: middle; margin: 0 1px; }
.promo-btn img { width: 44px; height: 44px; }
.move-dot, .cap-ring { pointer-events: none; position: absolute; z-index: 2; }
.move-dot {
  width: 28%; height: 28%; border-radius: 50%;
  background: rgba(47, 125, 79, 0.55);
}
.cap-ring {
  width: 92%; height: 92%; border-radius: 50%;
  border: 4px solid rgba(47, 125, 79, 0.7);
}
.coord {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.75;
  pointer-events: none;
}
.coord.rank { top: 2px; left: 3px; }
.coord.file { bottom: 2px; right: 4px; }
.sq.light .coord { color: #b58863; }
.sq.dark .coord { color: #f0d9b5; }

/* ---------- diagrams ---------- */
.diagram { margin: 16px 0; }
.diagram .chess-board { width: min(92vw, 380px); margin: 8px auto; }
.diagram-cap { text-align: center; font-size: 0.9em; color: #666; font-style: italic; }

/* ---------- lesson ---------- */
.chess-lesson .lesson-head { margin: 8px 0 4px; }
.lesson-num {
  display: inline-block;
  background: #2f7d4f; color: #fff;
  font-size: 0.8em; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  letter-spacing: 0.05em;
}
.chess-lesson h1 { margin: 8px 0 2px; }
.chess-lesson .unit { color: #777; margin-top: 0; }
.stage-dots { display: flex; align-items: center; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.sdot {
  font-size: 0.82em; font-weight: 600;
  padding: 5px 12px; border-radius: 16px;
  background: #eee; color: #888;
}
.sdot.now { background: #2f7d4f; color: #fff; }
.sdot.done { background: #d9ead3; color: #2f7d4f; }
.sdot-sep { color: #bbb; }
.teach h3 { margin-top: 1.4em; color: #2f7d4f; }
.teach ol, .teach ul { padding-left: 1.4em; }
.teach li { margin-bottom: 0.4em; }
.key {
  background: #fef9e7; border-left: 4px solid #d4a017;
  padding: 12px 16px; margin: 18px 0; border-radius: 0 8px 8px 0;
}
.values { border-collapse: collapse; margin: 12px 0; }
.values th, .values td { border: 1px solid #ddd; padding: 6px 14px; text-align: left; }
.values th { background: #f5f5f5; }
.verse-box {
  background: #f7f3ea; border: 1px solid #e2d9c3;
  border-radius: 10px; padding: 14px 18px; margin: 16px 0;
}
.verse-text { font-style: italic; margin: 0 0 6px; }
.verse-ref { margin: 0; font-size: 0.85em; color: #8a7a5a; font-weight: 600; }
.lesson-nav { margin: 22px 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- exercises ---------- */
.exercise { margin: 8px 0 20px; }
.ex-count { color: #888; font-size: 0.85em; }
.ex-prompt { font-size: 1.08em; }
.ex-feedback { min-height: 1.6em; font-weight: 600; margin: 10px 0; }
.ex-feedback.good { color: #2f7d4f; }
.ex-feedback.bad { color: #b3402e; }
.ex-nav { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- quiz ---------- */
.quiz-intro { color: #666; }
.q { background: #fafafa; border: 1px solid #eee; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.q-text { margin-top: 0; }
.choice {
  display: block; padding: 9px 12px; margin: 6px 0;
  border: 1px solid #ddd; border-radius: 8px; cursor: pointer;
  background: #fff;
}
.choice input { margin-right: 8px; }
.choice.right { border-color: #2f7d4f; background: #e9f5ee; }
.choice.wrong { border-color: #b3402e; background: #fbeae7; }
.q-why { font-size: 0.92em; color: #555; margin-bottom: 0; }
.score-card { text-align: center; background: #f7f3ea; border-radius: 12px; padding: 22px; margin: 18px 0; }
.score-stars .star { font-size: 2.2em; }
.star { color: #ddd; }
.star.on { color: #e8a812; text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.nice { font-weight: 600; }

/* ---------- landing ---------- */
.chess-landing .kicker { color: #2f7d4f; font-weight: 700; letter-spacing: 0.06em; font-size: 0.85em; }
.chess-landing h1 { margin: 6px 0; }
.chess-landing .sub { color: #555; max-width: 640px; }
.landing-stats { display: flex; gap: 14px; margin: 16px 0; flex-wrap: wrap; }
.lstat { background: #f7f3ea; border-radius: 10px; padding: 12px 20px; text-align: center; }
.lstat strong { display: block; font-size: 1.4em; color: #2f7d4f; }
.lstat span { font-size: 0.82em; color: #777; }
.play-card { background: #1f3d2b; color: #fff; border-radius: 14px; padding: 22px; margin: 20px 0; }
.play-card h2 { margin-top: 0; color: #ffd766; }
.play-card p { color: #d9e8dc; }
.play-opts { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.play-opts label { display: flex; flex-direction: column; font-size: 0.85em; gap: 4px; }
.play-opts select { padding: 9px 12px; border-radius: 8px; border: 0; font-size: 1em; }
.lesson-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lcard {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 12px 16px; text-decoration: none; color: inherit;
}
.lcard:hover { border-color: #2f7d4f; }
.lcard.done { background: #f4faf5; }
.lnum {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  background: #2f7d4f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.lcard.done .lnum { background: #d9ead3; color: #2f7d4f; }
.lbody { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lunit { font-size: 0.82em; color: #888; }
.lstars .star { font-size: 1em; }
.lgo { color: #2f7d4f; font-weight: 700; white-space: nowrap; }

/* ---------- play mode ---------- */
.play-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0; }
.play-bar label { display: flex; flex-direction: column; font-size: 0.8em; gap: 3px; color: #555; }
.play-bar select { padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; }
.btn-sm { padding: 8px 14px; font-size: 0.9em; }
.play-main { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.play-board-wrap { flex: 0 1 auto; }
.play-board-wrap .chess-board { margin: 0; }
.status { font-weight: 700; min-height: 1.6em; margin: 10px 0; }
.play-side { flex: 1 1 220px; min-width: 220px; max-width: 320px; }
.play-side h3 { margin: 0 0 6px; font-size: 1em; color: #555; }
.move-list {
  max-height: 300px; overflow-y: auto;
  background: #fafafa; border: 1px solid #eee; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 14px;
}
.move-list .empty { color: #999; font-size: 0.9em; }
.moves { list-style: none; padding: 0; margin: 0; }
.moves li { padding: 3px 0; border-bottom: 1px dotted #eee; font-size: 0.95em; }
.mn { color: #999; display: inline-block; width: 2em; }
.captured { font-size: 1.3em; }
.cap-label { font-size: 0.7em; color: #777; }
.hint-line { color: #2f7d4f; font-weight: 600; min-height: 1.4em; }
.game-modal, .promo-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.game-modal-box, .promo-box {
  background: #fff; border-radius: 14px; padding: 28px;
  max-width: 90vw; text-align: center;
}
.promo-box p { margin-top: 0; font-weight: 700; }
.promo-btn {
  font-size: 2.4em; padding: 8px 16px; margin: 4px;
  border: 2px solid #2f7d4f; border-radius: 10px; background: #fff; cursor: pointer;
}
.promo-btn:hover { background: #e9f5ee; }

@media (max-width: 640px) {
  .play-main { flex-direction: column; }
  .play-side { max-width: none; width: 100%; }
  .move-list { max-height: 180px; }
}