:root {
  --bg: #efe3c8;
  --panel: #fffaf0;
  --paper: #e8d5a3;
  --paper-light: #f3e4bb;
  --wood: #8b5a2b;
  --wood-dark: #5c3a18;
  --ink: #2b2018;
  --red: #ae2b26;
  --red-deep: #7a1a1e;
  --gold: #c9a04d;
  --gold-bright: #f0c060;
  --line: #6b4a24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 50% -10%, #fbf3de 0%, var(--bg) 55%, #e3d3ab 100%);
  color: var(--ink);
  min-height: 100vh;
}

#app {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

header h1 {
  margin: 0 0 8px;
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 10px;
  color: var(--red-deep);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4), 2px 3px 6px rgba(120,60,20,0.25);
}

.status-bar {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #e3d2a1;
  font-size: 13px;
  color: #6b5c3f;
}

.panel.hidden { display: none; }
.hidden { display: none; }

.lobby-card {
  max-width: 360px;
  margin: 40px auto;
  background: var(--panel);
  border: 1px solid #d9c48d;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(92,58,24,0.12);
  text-align: center;
}

.lobby-card label {
  display: block;
  text-align: left;
  font-size: 13px;
  margin-bottom: 6px;
  color: #7a6a4a;
}

.lobby-card input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d8c79a;
  font-size: 15px;
  margin-bottom: 12px;
  background: #fff;
}

.lobby-row {
  display: flex;
  gap: 8px;
}

.lobby-row input { flex: 1; }

.divider {
  margin: 16px 0;
  color: #b5a67c;
  font-size: 12px;
}

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--wood-dark);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.1s ease, background 0.15s ease;
}

.btn:hover { background: #f5ecd8; }
.btn:active { transform: scale(0.97); }

.btn.primary {
  background: var(--wood-dark);
  color: #fff;
  border-color: var(--wood-dark);
  width: 100%;
}

.btn.primary:hover { background: #45280f; }

.btn.small { padding: 8px 12px; font-size: 13px; }

.btn.danger {
  border-color: var(--red-deep);
  color: var(--red-deep);
}
.btn.danger:hover { background: #fbe4e2; }

.action-row {
  display: flex;
  gap: 8px;
}
.action-row .btn { flex: 1; }

.room-code {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--red);
}

.hint { color: #8a7a58; font-size: 13px; }

.game-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.board-wrap {
  background: linear-gradient(155deg, var(--wood), #6e451f 60%, var(--wood-dark));
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(60,36,12,0.35), inset 0 0 0 1px rgba(255,220,160,0.15);
}

.board-inner {
  position: relative;
  width: 528px;
  height: 584px;
  border-radius: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(120,80,30,0.05) 0px, rgba(120,80,30,0.05) 2px, transparent 2px, transparent 7px),
    linear-gradient(160deg, var(--paper-light), var(--paper) 55%, #dcc48d 100%);
  box-shadow: inset 0 0 26px rgba(90,55,20,0.35);
}

.board-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.piece-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.point {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.move-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright) 0%, rgba(240,192,96,0.5) 60%, transparent 75%);
  z-index: 4;
  pointer-events: none;
  animation: dotPulse 1.3s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

.capture-ring {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--red);
  box-shadow: 0 0 10px rgba(174,43,38,0.6);
  z-index: 4;
  pointer-events: none;
  animation: ringPulse 1.1s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.last-move-mark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(174,43,38,0.8);
}

.piece {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: left 0.28s cubic-bezier(.34,1.1,.4,1), top 0.28s cubic-bezier(.34,1.1,.4,1),
    box-shadow 0.2s ease, filter 0.2s ease;
  z-index: 5;
  user-select: none;
}

.piece .face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 24px;
  background: radial-gradient(circle at 32% 28%, #fbeecb, #ecd6a0 55%, #d9bc7e 100%);
  box-shadow:
    0 3px 5px rgba(40,25,10,0.45),
    inset 0 2px 3px rgba(255,255,255,0.7),
    inset 0 -3px 5px rgba(90,60,20,0.35);
}

.piece.red .face {
  color: var(--red);
  border: 2px solid var(--red);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.piece.black .face {
  color: var(--ink);
  border: 2px solid var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.piece.mine:hover .face {
  filter: brightness(1.08);
  box-shadow:
    0 4px 8px rgba(40,25,10,0.5),
    inset 0 2px 3px rgba(255,255,255,0.8),
    inset 0 -3px 5px rgba(90,60,20,0.35),
    0 0 0 3px rgba(201,160,77,0.35);
}

.piece.selected .face {
  animation: selGlow 1.1s ease-in-out infinite;
}

@keyframes selGlow {
  0%, 100% { box-shadow: 0 3px 5px rgba(40,25,10,0.45), inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -3px 5px rgba(90,60,20,0.35), 0 0 0 3px rgba(240,192,96,0.55), 0 0 14px rgba(240,192,96,0.6); }
  50% { box-shadow: 0 3px 5px rgba(40,25,10,0.45), inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -3px 5px rgba(90,60,20,0.35), 0 0 0 5px rgba(240,192,96,0.85), 0 0 20px rgba(240,192,96,0.9); }
}

.piece.in-check .face {
  animation: checkGlow 0.7s ease-in-out infinite;
}

@keyframes checkGlow {
  0%, 100% { box-shadow: 0 3px 5px rgba(40,25,10,0.45), inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -3px 5px rgba(90,60,20,0.35), 0 0 0 3px rgba(174,43,38,0.6), 0 0 16px rgba(174,43,38,0.7); }
  50% { box-shadow: 0 3px 5px rgba(40,25,10,0.45), inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -3px 5px rgba(90,60,20,0.35), 0 0 0 6px rgba(174,43,38,0.9), 0 0 26px rgba(174,43,38,1); }
}

.piece.captured {
  animation: captureOut 0.32s ease-in forwards;
  pointer-events: none;
}

@keyframes captureOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(35deg); }
}

.board-inner.shake { animation: boardShake 0.4s; }

@keyframes boardShake {
  10%, 90% { transform: translate(-1px, -1px); }
  20%, 80% { transform: translate(2px, 1px); }
  30%, 50%, 70% { transform: translate(-4px, 3px); }
  40%, 60% { transform: translate(4px, -3px); }
}

.banner {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  opacity: 0;
  font-family: "Ma Shan Zheng", serif;
  font-weight: 400;
  font-size: clamp(30px, 8vw, 56px);
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,0.5), 0 0 20px currentColor;
  letter-spacing: 4px;
  z-index: 7;
}

.banner.show {
  animation: bannerPop 1.3s cubic-bezier(.2,.9,.3,1) forwards;
}

@keyframes bannerPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(2deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(0deg); }
}

.side-panel {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.players {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-tag {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid #d9c48d;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-tag .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid;
}

.player-tag .dot.red { background: #f6e4c9; border-color: var(--red); }
.player-tag .dot.black { background: #f6e4c9; border-color: var(--ink); }

.turn-info {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  background: #fff3d6;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #e6d8b8;
  transition: background 0.3s ease, color 0.3s ease;
}

.turn-info.turn-red { background: #fbe1de; color: var(--red-deep); }
.turn-info.turn-black { background: #e6e0d3; color: var(--ink); }

.chat-box {
  height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid #d9c48d;
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-box .msg { line-height: 1.4; word-break: break-word; }
.chat-box .msg .who { font-weight: 600; color: var(--wood-dark); }
.chat-box .msg.system { color: #a08d64; font-style: italic; }

.chat-input-row {
  display: flex;
  gap: 6px;
}

.chat-input-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d8c79a;
  font-size: 13px;
}

.lobby-msg {
  min-height: 18px;
  color: var(--red);
  font-size: 13px;
  margin: 4px 0 0;
}

.board-scroll {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .side-panel { width: 100%; max-width: 528px; }
}