:root {
  --font: "Be Vietnam Pro", Arial, sans-serif;
  --han: "Noto Serif TC", "KaiTi", "STKaiti", "SimSun", serif;
  --ink: #3b2412;
  --line: #5b3a1c;
  --red: #b8231a;
  --black: #1f1f1f;
  --cream: #fff8ea;
  --accent: #c8501e;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 210, 150, 0.25), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #5a3520, #3b2214 60%, #2a170d);
  font-family: var(--font);
  color: var(--cream);
}
button {
  font-family: var(--font);
  cursor: pointer;
}

.wrap {
  width: min(1060px, 100%);
  margin: 0 auto;
  padding: 14px 14px 22px;
}
.top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.back {
  color: #f6dcb6;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}
.top h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.top .sub {
  font-family: var(--han);
  font-size: 22px;
  color: #e9b46f;
}

.layout {
  display: grid;
  grid-template-columns: auto 300px;
  gap: 18px;
  align-items: start;
  justify-content: center;
}
.board-col {
  width: min(560px, calc(100vw - 28px), calc((100vh - 170px) * 580 / 640));
  width: min(560px, calc(100vw - 28px), calc((100dvh - 170px) * 580 / 640));
  min-width: 280px;
  display: grid;
  gap: 8px;
}

/* ---------- Thanh người chơi ---------- */
.player {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px 0 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
.player.active {
  background: rgba(255, 196, 120, 0.16);
  box-shadow: inset 0 0 0 2px #e9a24f;
}
.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4dc, #efd09a 50%, #cf9b55);
  box-shadow:
    inset 0 0 0 2px #f8e6c2,
    inset 0 0 0 3.5px currentColor,
    0 2px 3px rgba(0, 0, 0, 0.4);
  font: 900 21px var(--han);
}
.avatar.red {
  color: var(--red);
}
.avatar.black {
  color: var(--black);
}
.pinfo {
  min-width: 0;
  flex: 1;
  display: grid;
}
.pname {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcap {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  min-height: 16px;
}
.pcap span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0d29a;
  font: 900 10px/1 var(--han);
}
.pcap .red {
  color: var(--red);
}
.pcap .black {
  color: var(--black);
}
.pcap.vi span {
  font: 800 8px/1 var(--font);
}
.pturn {
  font-size: 12px;
  font-weight: 700;
  color: #ffd08a;
  opacity: 0;
  transition: opacity 0.2s;
}
.player.active .pturn {
  opacity: 1;
}

/* ---------- Bàn cờ ---------- */
.board-frame {
  padding: 2.4%;
  border-radius: 10px;
  background: linear-gradient(145deg, #8a5a2e, #6a4120 40%, #4f2f15);
  box-shadow:
    inset 0 0 0 2px rgba(255, 220, 170, 0.25),
    0 18px 40px rgba(0, 0, 0, 0.5);
}
.board {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 580 / 640;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.25), transparent 60%),
    repeating-linear-gradient(
      88deg,
      rgba(150, 95, 40, 0.07) 0 3px,
      transparent 3px 11px,
      rgba(150, 95, 40, 0.05) 11px 13px,
      transparent 13px 23px
    ),
    linear-gradient(180deg, #f1d39b, #e6bf7f);
  box-shadow: inset 0 0 22px rgba(120, 70, 20, 0.35);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
#grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#grid line,
#grid rect,
#grid path {
  stroke: var(--line);
  fill: none;
  stroke-linecap: square;
}
#grid text.river {
  font: 900 34px var(--han);
  fill: #6b4423;
  opacity: 0.75;
}
#grid text.lbl {
  font: 700 15px var(--font);
  fill: #7a5330;
}
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Quân cờ ---------- */
.pc {
  position: absolute;
  width: 9.4cqw;
  height: 9.4cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 30%, #fff7e4, #f3d7a3 42%, #dcac68 85%, #c8914d);
  box-shadow:
    inset 0 0 0 0.45cqw #f9e9c8,
    inset 0 0 0 0.75cqw currentColor,
    inset 0 -0.6cqw 0.9cqw rgba(110, 60, 15, 0.35),
    0 0.55cqw 0 #9b6a32,
    0 0.9cqw 1.3cqw rgba(0, 0, 0, 0.45);
  font: 900 5.6cqw/1 var(--han);
  transition:
    left 0.26s cubic-bezier(0.3, 0.7, 0.3, 1),
    top 0.26s cubic-bezier(0.3, 0.7, 0.3, 1),
    transform 0.15s,
    opacity 0.25s;
  z-index: 1;
}
.pc.red {
  color: var(--red);
}
.pc.black {
  color: var(--black);
}
.pc span {
  margin-top: -0.3cqw;
}
.pc.vi {
  font: 800 2.35cqw/1 var(--font);
  letter-spacing: -0.02em;
}
.pc.vi span {
  margin-top: 0;
}
.pc.sel {
  transform: translate(-50%, -58%) scale(1.06);
  box-shadow:
    inset 0 0 0 0.45cqw #f9e9c8,
    inset 0 0 0 0.75cqw currentColor,
    inset 0 -0.6cqw 0.9cqw rgba(110, 60, 15, 0.35),
    0 0 0 0.5cqw #ffd36b,
    0 1.6cqw 2cqw rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.pc.moving {
  z-index: 4;
}
.pc.dead {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.25);
}
.pc.checked {
  animation: checkPulse 0.8s ease-in-out infinite alternate;
}
@keyframes checkPulse {
  to {
    box-shadow:
      inset 0 0 0 0.45cqw #f9e9c8,
      inset 0 0 0 0.75cqw currentColor,
      0 0 0 0.6cqw rgba(230, 40, 20, 0.85),
      0 0 3cqw rgba(255, 40, 20, 0.9);
  }
}

/* ---------- Dấu trên bàn ---------- */
.mk {
  position: absolute;
  transform: translate(-50%, -50%);
}
.mk.dot {
  width: 2.7cqw;
  height: 2.7cqw;
  border-radius: 50%;
  background: rgba(40, 140, 60, 0.75);
  box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.45);
}
.mk.cap {
  width: 10.6cqw;
  height: 10.6cqw;
  border-radius: 50%;
  border: 0.6cqw solid rgba(210, 40, 20, 0.8);
  z-index: 2;
}
.mk.last {
  width: 10.4cqw;
  height: 10.4cqw;
  background:
    linear-gradient(#2f7de0, #2f7de0) top left / 2.6cqw 0.55cqw,
    linear-gradient(#2f7de0, #2f7de0) top left / 0.55cqw 2.6cqw,
    linear-gradient(#2f7de0, #2f7de0) top right / 2.6cqw 0.55cqw,
    linear-gradient(#2f7de0, #2f7de0) top right / 0.55cqw 2.6cqw,
    linear-gradient(#2f7de0, #2f7de0) bottom left / 2.6cqw 0.55cqw,
    linear-gradient(#2f7de0, #2f7de0) bottom left / 0.55cqw 2.6cqw,
    linear-gradient(#2f7de0, #2f7de0) bottom right / 2.6cqw 0.55cqw,
    linear-gradient(#2f7de0, #2f7de0) bottom right / 0.55cqw 2.6cqw;
  background-repeat: no-repeat;
  opacity: 0.85;
}
.mk.hint {
  width: 10.8cqw;
  height: 10.8cqw;
  border-radius: 50%;
  border: 0.7cqw dashed #16a34a;
  animation: spin 3s linear infinite;
  z-index: 2;
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.banner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  padding: 1.6cqw 5cqw;
  border-radius: 2cqw;
  background: rgba(150, 20, 10, 0.92);
  color: #fff;
  font: 800 6.5cqw var(--font);
  letter-spacing: 0.04em;
  transform: translate(-50%, -50%);
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.45);
  animation: bannerIn 1.1s ease forwards;
}
@keyframes bannerIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  18%,
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* ---------- Kết quả ---------- */
.result {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(40, 20, 8, 0.45);
  animation: fade 0.3s;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.result-card {
  width: min(78%, 330px);
  padding: 22px 20px 18px;
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  box-shadow:
    0 0 0 4px #c98a45,
    0 20px 40px rgba(0, 0, 0, 0.45);
  animation: pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes pop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
}
.result-ico {
  font-size: 46px;
  line-height: 1;
}
.result-card h2 {
  margin: 8px 0 4px;
  font-size: 26px;
  font-weight: 800;
}
.result-card p {
  margin: 0 0 14px;
  color: #7a5a3c;
  font-weight: 600;
}
.result-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ---------- Bảng điều khiển ---------- */
.panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 244, 225, 0.96);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #3b2412;
  color: #fff3dc;
  font-weight: 700;
  font-size: 14px;
}
.status .dot {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.status .dot.red {
  background: #e0392b;
}
.status .dot.black {
  background: #111;
}
.status.thinking .dot {
  animation: blink 0.7s ease-in-out infinite alternate;
}
@keyframes blink {
  to {
    opacity: 0.25;
  }
}
.status.check {
  background: #9b1c12;
}
.group {
  display: grid;
  gap: 6px;
}
.group label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a7650;
}
.seg {
  display: flex;
  padding: 3px;
  border-radius: 10px;
  background: #ead6b5;
}
.seg button {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b4a2b;
  font-weight: 700;
  font-size: 13px;
}
.seg button.on {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #ead6b5;
  color: #5a3a1c;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 0 #c9a77a;
}
.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: none;
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn.primary {
  background: linear-gradient(#e2643a, #c2401b);
  color: #fff;
  box-shadow: 0 2px 0 #8d2c10;
}
.moves h3 {
  margin: 4px 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #9a7650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.moves ol {
  height: 190px;
  margin: 0;
  padding: 6px 8px 6px 34px;
  overflow-y: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ead6b5;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.moves li {
  padding: 2px 0;
  color: #b49a7c;
}
.moves li span {
  display: inline-block;
  width: 46%;
  font-weight: 700;
}
.moves li .r {
  color: var(--red);
}
.moves li .b {
  color: var(--black);
}
.moves li.empty {
  list-style: none;
  margin-left: -26px;
  color: #b49a7c;
  font-weight: 600;
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .board-col {
    width: min(560px, calc(100vw - 20px));
  }
  .panel {
    width: min(560px, 100%);
  }
  .moves ol {
    height: 140px;
  }
}
@media (max-width: 480px) {
  .wrap {
    padding: 10px 10px 18px;
  }
  .top h1 {
    font-size: 21px;
  }
}