/* =====================================================
   Cờ Tướng - Giao diện
   Palette: gỗ ngà (#E8D5A8) / đường kẻ mực (#3A2E1F)
            đỏ son (#C8302E) / đen mực (#1C1A17)
            nhấn ngọc (#1F6E5C) cho trạng thái
   Font: chữ quân dùng serif có chân (Noto Serif), giao diện dùng sans.
   ===================================================== */

:root{
  --board-wood:   #E8D5A8;
  --board-wood-2: #DFC795;
  --line-ink:     #3A2E1F;
  --red-piece:    #C8302E;
  --black-piece:  #1C1A17;
  --piece-face:   #F3E7CC;
  --jade:         #1F6E5C;
  --jade-soft:    #E3F0EC;
  --paper:        #FBF6EC;
  --shadow:       rgba(40,30,15,.28);
  --hl-move:      rgba(31,110,92,.45);
  --hl-from:      rgba(200,48,46,.35);
  --check:        #E04A2F;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  background:
     radial-gradient(circle at 30% 10%, #2c2620, #1a1612 70%);
  color:#2a241c;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ct-wrap{
  width:100%;
  max-width:1040px;
  padding:20px 16px 60px;
  display:grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:28px;
}
@media (max-width:880px){
  .ct-wrap{ grid-template-columns:1fr; }
}

/* ---------- Tiêu đề ---------- */
.ct-head{
  grid-column:1 / -1;
  display:flex;
  align-items:baseline;
  gap:16px;
  color:var(--paper);
  border-bottom:1px solid rgba(243,231,204,.18);
  padding-bottom:14px;
}
.ct-head h1{
  font-family:"Noto Serif",Georgia,serif;
  font-weight:700;
  font-size:30px;
  letter-spacing:.04em;
  margin:0;
}
.ct-head .ct-han{
  color:var(--red-piece);
  font-size:34px;
  font-family:"Noto Serif SC","Noto Serif",serif;
}
.ct-head .ct-sub{
  font-size:13px;
  color:rgba(243,231,204,.55);
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- Bàn cờ ---------- */
.ct-board-panel{ display:flex; flex-direction:column; align-items:center; }

.ct-board{
  position:relative;
  width:100%;
  max-width:560px;
  aspect-ratio: 9 / 10;
  background:
    linear-gradient(135deg,var(--board-wood),var(--board-wood-2));
  border-radius:6px;
  box-shadow:
    0 18px 40px var(--shadow),
    inset 0 0 0 2px rgba(58,46,31,.5);
  padding: calc(100% / 18);   /* lề = nửa ô để quân nằm trên giao điểm mép */
  touch-action:manipulation;
  user-select:none;
}
.ct-grid{ position:absolute; inset:calc(100%/18); }
.ct-grid svg{ width:100%; height:100%; display:block; overflow:visible; }

/* quân cờ đặt trên giao điểm */
.ct-piece{
  position:absolute;
  width:calc(100% / 9 * 0.9);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:"Noto Serif SC","Noto Serif",serif;
  font-weight:700;
  cursor:pointer;
  background:
    radial-gradient(circle at 35% 30%, #fff8e8, var(--piece-face) 60%, #d8c49a);
  box-shadow:
     0 3px 6px var(--shadow),
     inset 0 0 0 2px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
  z-index:2;
}
.ct-piece .glyph{
  font-size: clamp(16px, 4.4vw, 30px);
  line-height:1;
  pointer-events:none;
}
.ct-piece.red   { color:var(--red-piece); }
.ct-piece.red   .glyph{ text-shadow:0 1px 0 rgba(255,255,255,.4); }
.ct-piece.black { color:var(--black-piece); }
.ct-piece::after{ /* viền vòng quân */
  content:""; position:absolute; inset:8%;
  border-radius:50%;
  border:1.5px solid currentColor;
  opacity:.55;
}
.ct-piece.red.selected,
.ct-piece.black.selected{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 3px var(--jade), 0 6px 12px var(--shadow);
}
.ct-piece.in-check{
  box-shadow:0 0 0 3px var(--check), 0 0 16px var(--check);
  animation:pulse .8s ease-in-out infinite alternate;
}
@keyframes pulse{ to{ box-shadow:0 0 0 4px var(--check),0 0 22px var(--check);} }

/* chấm gợi ý nước đi */
.ct-hint{
  position:absolute;
  width:calc(100% / 9 * 0.32);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--hl-move);
  z-index:1;
  cursor:pointer;
  pointer-events:auto;
}
.ct-hint.capture{
  width:calc(100% / 9 * 0.82);
  background:transparent;
  border:3px solid var(--hl-move);
}
.ct-from-mark{
  position:absolute;
  width:calc(100% / 9 * 0.9);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--hl-from);
  z-index:1;
}

/* ---------- Bảng điều khiển ---------- */
.ct-side{ display:flex; flex-direction:column; gap:16px; }

.ct-card{
  background:var(--paper);
  border-radius:10px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.ct-card h2{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#8a7a5c; margin:0 0 12px;
  font-weight:700;
}

.ct-turn{
  display:flex; align-items:center; gap:12px;
  font-family:"Noto Serif",serif; font-size:18px; font-weight:700;
}
.ct-turn .dot{
  width:18px; height:18px; border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
}
.ct-turn .dot.r{ background:var(--red-piece); }
.ct-turn .dot.b{ background:var(--black-piece); }

.ct-status{
  font-size:14px; color:var(--jade); font-weight:600; min-height:20px;
}
.ct-status.check{ color:var(--check); }
.ct-status.over { color:#b8860b; font-size:16px; }

.ct-btn{
  appearance:none; border:none; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:14px;
  padding:11px 14px; border-radius:8px;
  background:var(--line-ink); color:var(--paper);
  transition:transform .1s, background .15s;
  width:100%;
}
.ct-btn:hover{ background:#52412c; }
.ct-btn:active{ transform:translateY(1px); }
.ct-btn.jade{ background:var(--jade); }
.ct-btn.jade:hover{ background:#1a5b4c; }
.ct-btn.ghost{
  background:transparent; color:var(--line-ink);
  box-shadow:inset 0 0 0 1.5px rgba(58,46,31,.3);
}
.ct-btn-row{ display:flex; gap:8px; }

.ct-level{ display:flex; gap:6px; }
.ct-level button{
  flex:1; padding:8px 0; border-radius:6px; cursor:pointer;
  border:1.5px solid rgba(58,46,31,.25); background:transparent;
  font-family:inherit; font-weight:600; font-size:13px; color:var(--line-ink);
}
.ct-level button.active{ background:var(--jade); color:#fff; border-color:var(--jade); }

/* lịch sử nước đi */
.ct-moves{ max-height:280px; overflow-y:auto; font-size:13px; }
.ct-moves table{ width:100%; border-collapse:collapse; }
.ct-moves td{ padding:4px 6px; border-bottom:1px solid rgba(0,0,0,.06); }
.ct-moves td.no{ color:#aa9a7c; width:32px; }
.ct-moves .cap{ color:var(--red-piece); }

/* toast */
.ct-toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--line-ink); color:var(--paper);
  padding:12px 22px; border-radius:30px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:.25s; z-index:50;
}
.ct-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.ct-mode-tag{
  display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--jade-soft); color:var(--jade); padding:3px 10px; border-radius:20px;
  font-weight:700;
}