:root {
  color-scheme: light;
  --page: #f4f6f3;
  --surface: #ffffff;
  --surface-muted: #eef1ed;
  --ink: #202521;
  --muted: #687168;
  --line: #d7ddd7;
  --board: #bdcb98;
  --board-line: #344d38;
  --accent: #c84932;
  --accent-dark: #9f3323;
  --green: #24734f;
  --wolf: #252a2e;
  --wolf-rim: #b84d3b;
  --sheep: #fffdf7;
  --sheep-rim: #34577a;
  --focus: #1476d4;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--page);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--page);
}

button {
  font: inherit;
  letter-spacing: 0;
}

button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
  outline-offset: 2px;
}

.topbar {
  min-height: 64px;
  padding: 10px max(18px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand-block {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--wolf);
  border: 2px solid var(--wolf-rim);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
}

.brand-block h1,
.brand-block p {
  margin: 0;
}

.brand-block h1 {
  font-size: 20px;
  line-height: 1.2;
}

.brand-block p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.engine-state {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.engine-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9ba29b;
}

.engine-state.is-online .engine-dot {
  background: #24a36a;
  box-shadow: 0 0 0 4px rgb(36 163 106 / 13%);
}

.engine-state.is-offline .engine-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(200 73 50 / 13%);
}

.game-shell {
  width: min(1180px, 100%);
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  background: var(--surface);
}

.game-stage {
  min-width: 0;
  padding: 18px 28px 26px;
}

.match-toolbar {
  min-height: 48px;
  display: grid;
  grid-template-columns: 190px 1fr 44px;
  align-items: center;
  gap: 16px;
}

.side-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.side-choice {
  min-height: 38px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}

.side-choice.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(28 39 30 / 14%);
}

.side-choice:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.match-stats {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
}

.match-stats div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 7px;
}

.match-stats span {
  color: var(--muted);
  font-size: 12px;
}

.match-stats strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 22px;
}

.turn-banner {
  min-height: 58px;
  margin: 12px 0 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface-muted);
  border-left: 4px solid var(--green);
}

.turn-banner.is-error {
  border-left-color: var(--accent);
}

.turn-marker,
.player-piece {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-weight: 800;
}

.turn-marker {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.turn-marker.wolf,
.player-piece.wolf {
  color: #fff;
  background: var(--wolf);
  border: 2px solid var(--wolf-rim);
}

.turn-marker.sheep,
.player-piece.sheep {
  color: #2e4c67;
  background: var(--sheep);
  border: 2px solid var(--sheep-rim);
}

.turn-banner > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.turn-banner strong {
  font-size: 15px;
}

.turn-banner span:not(.turn-marker) {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.retry-button {
  min-height: 34px;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent-dark);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.board-area {
  display: grid;
  place-items: center;
}

.board {
  position: relative;
  width: min(100%, 620px, calc(100vh - 245px));
  min-width: 280px;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--board);
  border: 2px solid var(--board-line);
  border-radius: 6px;
  box-shadow: 0 14px 30px rgb(34 50 36 / 16%);
  touch-action: manipulation;
  user-select: none;
}

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

.board-lines line {
  stroke: var(--board-line);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.board-cell {
  position: absolute;
  z-index: 2;
  width: 16%;
  aspect-ratio: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.board-cell.is-selectable,
.board-cell.is-target {
  cursor: pointer;
}

.board-cell.is-selected::before {
  content: "";
  position: absolute;
  inset: 3%;
  border: 3px solid var(--focus);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(20 118 212 / 15%);
}

.board-cell.is-last::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 3px solid rgb(200 73 50 / 68%);
  border-radius: 50%;
}

.piece {
  position: absolute;
  inset: 15%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(13px, 3.2cqi, 22px);
  font-weight: 850;
  box-shadow: 0 5px 10px rgb(27 39 28 / 24%);
  transition: transform 140ms ease;
}

.is-selectable:hover .piece,
.is-selected .piece {
  transform: translateY(-3px);
}

.piece.wolf {
  color: #fff;
  background: var(--wolf);
  border: 3px solid var(--wolf-rim);
}

.piece.sheep {
  color: #2d506e;
  background: var(--sheep);
  border: 3px solid var(--sheep-rim);
}

.target-dot {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: #f8f9f1;
  border: 3px solid var(--green);
  box-shadow: 0 0 0 5px rgb(255 255 255 / 55%);
}

.target-dot.capture {
  inset: 25%;
  background: rgb(200 73 50 / 18%);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgb(255 255 255 / 60%);
}

.action-bar {
  width: min(100%, 620px);
  min-height: 50px;
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
}

.command-button {
  min-height: 46px;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
}

.command-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.command-button.primary {
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
}

.command-button.secondary {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}

.command-button.danger {
  color: var(--accent-dark);
  background: #fff;
  border: 1px solid rgb(200 73 50 / 45%);
}

.match-panel {
  min-width: 0;
  padding: 24px 22px;
  background: #f8faf7;
  border-left: 1px solid var(--line);
}

.players {
  display: grid;
  gap: 8px;
}

.player-row {
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.player-row.is-current {
  background: var(--surface);
  border-color: var(--line);
}

.player-piece {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.player-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.player-row strong {
  font-size: 14px;
}

.player-row > div span {
  color: var(--muted);
  font-size: 12px;
}

.turn-label {
  display: none;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
}

.player-row.is-current .turn-label {
  display: inline;
}

.history-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2 {
  margin: 0;
  font-size: 15px;
}

.section-heading span {
  color: var(--muted);
  font-size: 12px;
}

.move-history {
  max-height: calc(100vh - 295px);
  margin: 12px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  scrollbar-width: thin;
}

.move-history li {
  min-height: 38px;
  padding: 9px 4px;
  display: grid;
  grid-template-columns: 34px 36px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.move-history .move-number,
.move-history .move-side {
  color: var(--muted);
}

.move-history .empty-history {
  display: block;
  color: var(--muted);
  border-bottom: 0;
}

.result-dialog {
  width: min(360px, calc(100vw - 32px));
  padding: 26px;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgb(20 28 22 / 32%);
}

.result-dialog::backdrop {
  background: rgb(24 31 26 / 55%);
}

.result-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 850;
}

.result-dialog h2 {
  margin: 0;
  font-size: 22px;
}

.result-dialog p {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.result-dialog form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 820px) {
  .game-shell {
    display: block;
  }

  .game-stage {
    padding: 14px 16px 18px;
  }

  .board {
    width: min(100%, 600px);
  }

  .match-panel {
    padding: 18px 16px 28px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .players {
    grid-template-columns: 1fr 1fr;
  }

  .move-history {
    max-height: 260px;
  }
}

@media (max-width: 520px) {
  .topbar {
    min-height: 58px;
    padding: 8px 14px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 13px;
  }

  .brand-block h1 {
    font-size: 17px;
  }

  .brand-block p {
    display: none;
  }

  .engine-state {
    font-size: 12px;
  }

  .game-stage {
    padding: 10px 10px 16px;
  }

  .match-toolbar {
    grid-template-columns: minmax(142px, 1fr) auto 42px;
    gap: 8px;
  }

  .side-choice {
    min-height: 36px;
  }

  .match-stats {
    gap: 10px;
  }

  .match-stats div {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
  }

  .match-stats strong {
    font-size: 16px;
  }

  .icon-button {
    width: 42px;
    height: 42px;
  }

  .turn-banner {
    min-height: 52px;
    margin: 8px 0;
    padding: 6px 9px;
  }

  .turn-marker {
    width: 34px;
    height: 34px;
  }

  .board {
    min-width: 0;
    width: 100%;
    box-shadow: 0 9px 22px rgb(34 50 36 / 14%);
  }

  .piece {
    font-size: clamp(12px, 4.8vw, 18px);
  }

  .action-bar {
    margin-top: 9px;
    gap: 7px;
  }

  .command-button {
    min-height: 44px;
    padding-inline: 8px;
  }

  .match-panel {
    padding: 16px 10px 24px;
  }

  .player-row {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 6px;
  }

  .player-piece {
    width: 32px;
    height: 32px;
  }

  .turn-label {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Three-step start screen and the dark game-room presentation. */
[hidden] { display: none !important; }

body {
  background: #171512;
  color: #f4efe6;
}

.setup-screen,
.game-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgb(72 51 34 / 22%), transparent 42%),
    #171512;
}

.setup-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.corner-actions {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  gap: 10px;
  z-index: 4;
}

.round-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(244 239 230 / 15%);
  border-radius: 50%;
  color: #ddd4c7;
  background: rgb(255 255 255 / 7%);
  cursor: pointer;
  font-size: 21px;
}

.round-button:hover:not(:disabled) { background: rgb(255 255 255 / 13%); }
.round-button.small { width: 36px; height: 36px; font-size: 18px; }

.setup-main {
  width: min(760px, calc(100% - 34px));
  margin: auto;
  padding: 48px 0 28px;
}

.game-logo { text-align: center; }
.game-logo h1 { margin: 0; color: #f1e8db; font-family: Georgia, "Songti SC", serif; font-size: clamp(38px, 6vw, 62px); font-weight: 600; letter-spacing: .12em; }
.game-logo p { margin: 9px 0 0; color: #bd9c78; font-size: 15px; letter-spacing: .2em; }

.wizard { width: min(640px, 100%); margin: 58px auto 0; text-align: center; }
.step-count { margin: 0 0 12px; color: #bda990; font-size: 13px; letter-spacing: .08em; }
.wizard h2 { margin: 0 0 34px; color: #f4efe6; font-family: Georgia, "Songti SC", serif; font-size: clamp(28px, 4vw, 38px); font-weight: 500; }
.wizard-step { min-height: 250px; }
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.option-stack { display: grid; gap: 14px; min-height: 264px; }
#setup-difficulty-options { min-height: auto; }
#setup-ai-model, #game-ai-model {
  width: 100%; min-height: 44px; padding: 8px 12px;
  font: inherit; color: #23442c; background: #f9fcf6;
  border: 1px solid #cddbc7; border-radius: 10px;
}

.choice-card { border: 1px solid transparent; border-radius: 18px; color: #f1e8db; background: #292623; cursor: pointer; text-align: left; transition: .16s ease; }
.choice-card:hover { background: #322e2a; transform: translateY(-2px); }
.choice-card.is-selected { border-color: #e68000; background: #362719; box-shadow: 0 0 0 1px rgb(230 128 0 / 16%); }
.side-card { min-height: 248px; padding: 34px 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.side-card strong { margin-top: 19px; font-size: 24px; }
.choice-card small { display: block; margin-top: 8px; color: #ac9e8e; font-size: 14px; line-height: 1.55; }
.choice-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #4a4641; font-size: 30px; font-weight: 800; }
.choice-icon.wolf { background: #a5322d; }
.choice-icon.sheep { color: #39332d; background: #ddd3c4; }
.choice-icon.accent { background: #e68000; }
.choice-icon.neutral { color: #d8d0c5; }
.row-card { min-height: 82px; padding: 14px 20px; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; }
.row-card .choice-icon { width: 48px; height: 48px; font-size: 20px; }
.row-card strong { display: block; font-size: 20px; }
.row-card small { margin-top: 3px; font-size: 13px; }
.wizard-actions { margin-top: 30px; display: flex; justify-content: center; gap: 12px; }
.setup-button { min-width: 180px; min-height: 58px; padding: 12px 25px; border: 0; border-radius: 9px; cursor: pointer; font-size: 19px; font-weight: 700; }
.setup-button.primary { color: #fff7eb; background: #e68000; }
.setup-button.primary:hover { background: #f18c05; }
.setup-button.secondary { min-width: 102px; color: #dfd5c8; background: transparent; border: 1px solid rgb(244 239 230 / 24%); }
.continue-button { margin: 18px auto 0; display: block; border: 0; color: #c4ad90; background: transparent; cursor: pointer; font-size: 14px; }
.setup-footer { margin: auto auto 22px; text-align: center; color: #8e8375; font-size: 13px; }
.setup-footer p { margin: 0 0 7px; }
.setup-footer button { padding: 0; border: 0; color: #a3927f; background: transparent; cursor: pointer; text-decoration: underline; }

.game-screen { padding-bottom: 28px; }
.game-header { width: min(1180px, calc(100% - 34px)); margin: 0 auto; min-height: 70px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; border-bottom: 1px solid rgb(244 239 230 / 11%); }
.compact-logo { display: grid; gap: 2px; }
.compact-logo strong { font-family: Georgia, "Songti SC", serif; font-size: 23px; letter-spacing: .08em; }
.compact-logo span { color: #ac9277; font-size: 10px; letter-spacing: .18em; }
.game-header-actions { display: flex; align-items: center; gap: 14px; }
.engine-state { color: #ae9f8f; }
.engine-state.is-online { color: #d2c4b5; }
.engine-state.is-online .engine-dot { background: #e68000; box-shadow: 0 0 0 4px rgb(230 128 0 / 14%); }
.engine-state.is-offline .engine-dot { background: #c84932; }

.play-shell { width: min(1080px, calc(100% - 34px)); margin: 26px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 30px; }
.game-stage { min-width: 0; padding: 0; background: transparent; }
.versus-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: 12px; }
.player-card { min-width: 0; display: flex; align-items: center; gap: 10px; color: #f0e6d9; }
.player-card.computer { justify-content: flex-end; text-align: right; }
.player-card > div { display: grid; gap: 2px; }
.player-card strong { font-size: 16px; }
.player-card span:not(.player-token) { color: #a99886; font-size: 12px; }
.player-token { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; }
.player-token.wolf { color: white; background: #302d2a; border: 2px solid #a5322d; }
.player-token.sheep { color: #473d31; background: #e8dfd2; border: 2px solid #c9bca9; }
.turn-center { display: grid; gap: 2px; min-width: 100px; text-align: center; }
.turn-center strong { color: #e68000; font-size: 14px; }
.turn-center span { color: #aa9a89; font-size: 11px; }
.turn-banner { display: none; }
.board-wrap { display: grid; place-items: center; }
.board { width: min(100%, 610px, calc(100vh - 250px)); min-width: 300px; background: #d9b780; border-color: #68472b; border-radius: 10px; box-shadow: 0 15px 35px rgb(0 0 0 / 30%); }
.board-lines line { stroke: #6f5033; stroke-width: .8; }
.board-cell { width: 17%; }
.piece.wolf { color: #fff2e8; background: #302725; border-color: #a5322d; }
.piece.sheep { color: #352f29; background: #f4eadc; border-color: #c7baa8; }
.target-dot { background: #ede5d6; border-color: #e68000; }
.target-dot.capture { background: rgb(165 50 45 / 24%); border-color: #a5322d; }
.game-stats { width: min(100%, 610px); margin: 11px auto 0; display: flex; justify-content: center; gap: 26px; color: #a99886; font-size: 12px; }
.game-stats strong { margin-left: 4px; color: #eadfd1; font-size: 15px; }
.action-bar { width: min(100%, 610px); margin-top: 11px; }
.command-button { min-height: 44px; border-radius: 7px; }
.command-button.primary { background: #e68000; border-color: #e68000; }
.command-button.secondary { color: #ddd1c1; background: transparent; border-color: rgb(244 239 230 / 20%); }
.command-button.danger { color: #e4a29a; background: transparent; border-color: rgb(200 73 50 / 55%); }
.match-panel { min-width: 0; padding: 18px 0; color: #e9dfd2; background: transparent; border-left: 1px solid rgb(244 239 230 / 12%); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 20px; padding-bottom: 14px; border-bottom: 1px solid rgb(244 239 230 / 12%); }
.panel-heading div { display: grid; gap: 5px; }
.panel-heading span { color: #a99886; font-size: 12px; }
.panel-heading strong { font-size: 13px; }
.move-history { max-height: 520px; margin: 0; padding: 0 0 0 20px; color: #d9cdbf; }
.move-history li { grid-template-columns: 30px 30px 1fr; min-height: 36px; border-color: rgb(244 239 230 / 10%); }
.move-history .move-number, .move-history .move-side { color: #a99886; }
.move-history .empty-history { display: block; padding-top: 16px; color: #8e8375; }

.modal-card { width: min(420px, calc(100vw - 30px)); padding: 24px; color: #f1e8db; background: #292623; border: 1px solid rgb(244 239 230 / 18%); border-radius: 12px; box-shadow: 0 24px 70px #0009; }
.modal-card::backdrop { background: #0009; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; }
.modal-heading h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-weight: 500; }
.modal-close { border: 0; color: #c9b9a7; background: transparent; cursor: pointer; font-size: 26px; }
.modal-card li { margin: 12px 0; color: #c0b2a2; line-height: 1.55; }
.result-dialog { text-align: center; }
.result-mark { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; color: white; background: #e68000; border-radius: 50%; font-size: 24px; font-weight: 850; }
.result-dialog h2 { margin: 0; font-family: Georgia, "Songti SC", serif; }
.result-dialog p { color: #bcae9e; }
.result-dialog form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 760px) {
  .corner-actions { top: 12px; right: 12px; }
  .setup-main { padding-top: 62px; }
  .wizard { margin-top: 42px; }
  .side-grid { grid-template-columns: 1fr; gap: 12px; }
  .side-card { min-height: 160px; padding: 20px; }
  .side-card strong { margin-top: 10px; font-size: 20px; }
  .choice-icon { width: 54px; height: 54px; font-size: 24px; }
  .play-shell { grid-template-columns: 1fr; gap: 18px; margin-top: 15px; }
  .game-header { width: calc(100% - 20px); min-height: 60px; grid-template-columns: 38px 1fr auto; gap: 10px; }
  .game-header .round-button { width: 38px; height: 38px; }
  .compact-logo strong { font-size: 18px; }
  .compact-logo span { font-size: 8px; }
  .game-header-actions { gap: 7px; }
  .game-header-actions .engine-state { font-size: 11px; }
  .game-header-actions .round-button { display: none; }
  .versus-row { gap: 7px; }
  .player-card strong { font-size: 13px; }
  .player-card span:not(.player-token) { font-size: 10px; }
  .turn-center { min-width: 72px; }
  .turn-center strong { font-size: 12px; }
  .board { width: 100%; min-width: 0; }
  .match-panel { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgb(244 239 230 / 12%); }
  .panel-heading { padding-left: 0; }
  .move-history { padding-left: 0; max-height: 230px; }
}

@media (max-width: 420px) {
  .setup-main { width: calc(100% - 24px); }
  .game-logo h1 { font-size: 34px; letter-spacing: .08em; }
  .wizard h2 { margin-bottom: 24px; }
  .row-card { min-height: 70px; padding: 10px 13px; grid-template-columns: 46px 1fr; gap: 11px; }
  .row-card .choice-icon { width: 40px; height: 40px; font-size: 17px; }
  .row-card strong { font-size: 17px; }
  .row-card small { font-size: 12px; }
  .setup-button { min-width: 160px; min-height: 52px; font-size: 17px; }
  .play-shell { width: calc(100% - 20px); }
  .player-token { width: 28px; height: 28px; font-size: 11px; }
  .versus-row { grid-template-columns: 1fr auto 1fr; }
  .player-card.computer { text-align: right; }
  .turn-center { min-width: 58px; }
  .turn-center span { display: none; }
  .game-stats { gap: 14px; }
}

/* The layout stays inspired by the reference, while the palette returns to the
   original light-green game table and the board becomes a selectable skin. */
body { background: #f4f6f3; color: #202521; }
.setup-screen, .game-screen {
  background: radial-gradient(circle at 50% 0%, rgb(211 224 194 / 45%), transparent 44%), #f4f6f3;
  color: #202521;
}
.setup-screen { overflow: auto; }
.corner-actions { top: 18px; right: 24px; }
.round-button { color: #344d38; background: rgb(255 255 255 / 82%); border-color: #c8d2c5; }
.round-button:hover:not(:disabled) { background: #fff; }
.game-logo h1 { color: #202521; }
.game-logo p { color: #54715a; }
.step-count { color: #58705c; }
.wizard h2 { color: #202521; }
.choice-card { color: #202521; background: #fff; border-color: #d7ddd7; box-shadow: 0 8px 18px rgb(50 74 53 / 8%); }
.choice-card:hover { background: #fbfdf9; }
.choice-card.is-selected { border-color: #24734f; background: #edf5e9; box-shadow: 0 0 0 1px rgb(36 115 79 / 16%); }
.choice-card small { color: #687168; }
.choice-icon { color: #fff; background: #879787; }
.choice-icon.wolf { background: #252a2e; border: 3px solid #b84d3b; }
.choice-icon.sheep { color: #2e4c67; background: #fffdf7; border: 3px solid #34577a; }
.choice-icon.accent { background: #24734f; }
.choice-icon.neutral { color: #31563b; background: #e8efe5; }
.setup-button.primary { color: #fff; background: #24734f; }
.setup-button.primary:hover { background: #1d6242; }
.setup-button.secondary { color: #31563b; border-color: #b8c6b7; }
.continue-button { color: #24734f; }
.setup-footer { color: #687168; }
.setup-footer button { color: #24734f; }
.game-header { border-bottom-color: #d7ddd7; }
.compact-logo strong { color: #202521; }
.compact-logo span { color: #54715a; }
.engine-state, .engine-state.is-online { color: #506455; }
.engine-state.is-online .engine-dot { background: #24734f; box-shadow: 0 0 0 4px rgb(36 115 79 / 14%); }
.play-shell { color: #202521; }
.player-card { color: #202521; }
.player-card span:not(.player-token) { color: #687168; }
.player-token.wolf { color: #fff; background: #252a2e; border-color: #b84d3b; }
.player-token.sheep { color: #2e4c67; background: #fffdf7; border-color: #34577a; }
.turn-center strong { color: #24734f; }
.turn-center span { color: #687168; }
.board { background: #bdcb98; border-color: #34577a; box-shadow: 0 14px 30px rgb(34 50 36 / 16%); }
.board-lines line { stroke: #34577a; }
.piece.wolf { color: #fff; background: #252a2e; border-color: #b84d3b; }
.piece.sheep { color: #2e4c67; background: #fffdf7; border-color: #34577a; }
.target-dot { background: #f8f9f1; border-color: #24734f; }
.target-dot.capture { background: rgb(200 73 50 / 18%); border-color: #c84932; }
.game-stats { color: #687168; }
.game-stats strong { color: #202521; }
.command-button.primary { background: #24734f; border-color: #24734f; }
.command-button.secondary { color: #202521; background: #fff; border-color: #c8d2c5; }
.command-button.danger { color: #9f3323; background: #fff; border-color: rgb(200 73 50 / 45%); }
.match-panel { color: #202521; background: #f8faf7; border-left-color: #d7ddd7; }
.panel-heading { border-bottom-color: #d7ddd7; }
.panel-heading span, .move-history .move-number, .move-history .move-side { color: #687168; }
.move-history { color: #202521; }
.move-history li { border-color: #d7ddd7; }
.modal-card { color: #202521; background: #fff; border-color: #d7ddd7; box-shadow: 0 24px 70px rgb(20 28 22 / 32%); }
.modal-card::backdrop { background: rgb(24 31 26 / 42%); }
.modal-close { color: #506455; }
.modal-card li, .result-dialog p { color: #687168; }
.result-mark { background: #24734f; }
.style-preview { font-size: 24px !important; }
.board-style-options { min-height: 0; max-height: 390px; overflow: auto; padding: 2px 4px 2px 0; }

/* Board skins: same legal points and geometry, different table and piece
   materials, so the game still feels like the requested rule set. */
.board.style-xiangqi { background: #d5a66d; border-color: #6c4328; }
.style-xiangqi .board-lines line { stroke: #70482d; }
.board.style-xiangqi::before { content: "楚河　　　汉界"; position: absolute; z-index: 1; inset: 45% 0 auto; color: rgb(117 68 38 / 75%); text-align: center; font-family: "KaiTi", serif; font-size: clamp(14px, 3vw, 22px); letter-spacing: .45em; pointer-events: none; }
.style-xiangqi .piece { color: #fffaf0; background: radial-gradient(circle at 35% 28%, #d35c4e, #9d211f 72%); border-color: #f2d2a6; box-shadow: 0 5px 10px rgb(89 49 24 / 35%); }
.style-xiangqi .piece.sheep { color: #382d22; background: radial-gradient(circle at 35% 28%, #fffdf4, #e8d3ae 75%); border-color: #8b5b34; }
.board.style-go { background: #c99559; border-color: #68472b; }
.style-go .board-lines line { stroke: #68472b; }
.style-go .piece { inset: 10%; font-size: clamp(11px, 2.6cqi, 18px); border: 0; }
.style-go .piece.wolf { color: #fff; background: radial-gradient(circle at 32% 24%, #666, #090909 68%); box-shadow: 1px 3px 7px #38251699, inset -3px -4px 5px #000b; }
.style-go .piece.sheep { color: #3d352a; background: radial-gradient(circle at 32% 24%, #fff, #cfc7b8 72%); box-shadow: 1px 3px 7px #60462888, inset -3px -4px 5px #887c6a55; }
.board.style-rustic { background: #9caf7b; border-color: #4e6344; }
.style-rustic .board-lines line { stroke: #4e6344; }
.style-rustic .piece { border-width: 0; box-shadow: 3px 5px 8px rgb(38 49 34 / 38%), inset -4px -5px 7px rgb(0 0 0 / 22%), inset 3px 2px 5px rgb(255 255 255 / 22%); }
.style-rustic .piece.wolf { inset: 8%; color: #fff; background: #222; border-radius: 48% 54% 44% 51%; transform: rotate(-4deg); }
.style-rustic .piece.sheep { color: #354331; background: #eee9dc; border-radius: 53% 46% 51% 43%; transform: rotate(3deg); }
.board.style-chess { background: repeating-conic-gradient(#d7b27a 0 25%, #8a5d39 0 50%) 0 / 40% 40%; border-color: #5f3e28; }
.style-chess .board-lines line { stroke: #4d311f; opacity: .28; }
.style-chess .piece { inset: 9%; border-radius: 38% 38% 48% 48%; font-family: Georgia, "Songti SC", serif; font-size: clamp(15px, 3.6cqi, 26px); text-shadow: 0 2px 1px rgb(0 0 0 / 45%); box-shadow: 0 7px 8px rgb(34 22 12 / 45%), inset 2px 2px 3px rgb(255 255 255 / 28%); }
.style-chess .piece.wolf { color: #f6e8d1; background: linear-gradient(145deg, #564637, #171310); border-color: #241b15; }
.style-chess .piece.sheep { color: #3c2d20; background: linear-gradient(145deg, #fff7e5, #bda47f); border-color: #73583b; }
.style-xiangqi .target-dot, .style-go .target-dot, .style-rustic .target-dot, .style-chess .target-dot { border-color: #24734f; }

/* Japanese shogi-inspired skin: warm kiri wood and pentagonal pieces. */
.board.style-shogi { background: linear-gradient(135deg, #d8a866, #b9783f 48%, #d6a262); border-color: #744321; box-shadow: 0 15px 35px rgb(86 47 20 / 28%), inset 0 0 0 5px rgb(255 223 163 / 16%); }
.style-shogi .board-lines line { stroke: #70421f; opacity: .68; }
.style-shogi .piece { inset: 8%; border: 2px solid #855326; border-radius: 50% 50% 42% 42% / 58% 58% 38% 38%; clip-path: polygon(50% 0%, 92% 24%, 82% 88%, 50% 100%, 18% 88%, 8% 24%); font-family: "Yu Mincho", "Kaiti SC", serif; font-size: clamp(14px, 3.2cqi, 24px); font-weight: 800; box-shadow: 0 6px 7px rgb(65 33 13 / 38%), inset 2px 2px 3px rgb(255 236 185 / 35%); }
.style-shogi .piece.wolf { color: #4b1b11; background: linear-gradient(145deg, #ffe4a5, #c98539); border-color: #8b4b1f; }
.style-shogi .piece.sheep { color: #46301e; background: linear-gradient(145deg, #fff1c7, #d99c51); border-color: #99602b; }
.style-shogi .target-dot { border-color: #7b3f20; background: #f7deb0; }

/* Larger desktop table and a practical side settings rail. */
.play-shell { width: min(1260px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; }
.board { width: min(100%, 700px, calc(100vh - 205px)); }
.game-stats, .action-bar { width: min(100%, 700px); }
.match-panel { padding: 0 0 18px 22px; background: #f8faf7; border-left: 1px solid #d7ddd7; }
.game-settings-panel { padding: 18px 18px 14px 0; border-bottom: 1px solid #d7ddd7; }
.settings-heading { padding-left: 0; border-bottom: 0; padding-bottom: 12px; }
.settings-group { margin-top: 12px; }
.settings-label { display: block; margin-bottom: 7px; color: #687168; font-size: 12px; }
.settings-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.settings-difficulty-options { grid-template-columns: repeat(5, 1fr); }
.settings-options button { min-height: 34px; border: 1px solid #c8d2c5; border-radius: 6px; color: #31563b; background: #fff; cursor: pointer; font-size: 12px; }
.settings-options button:hover { background: #edf5e9; }
.settings-options button.is-selected { color: #fff; background: #24734f; border-color: #24734f; }
.history-panel { padding-top: 18px; }
.history-panel .panel-heading { padding-left: 0; }
.history-panel .move-history { padding-left: 0; }

@media (max-width: 760px) {
  .board-style-options { max-height: none; overflow: visible; }
  .match-panel { border-left: 0; }
}

@media (max-width: 1050px) and (min-width: 761px) {
  .settings-difficulty-options { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 761px) {
  .play-shell { min-height: calc(100vh - 112px); }
  .board-wrap { min-height: 650px; }
  .board { width: min(100%, 720px, calc(100vh - 190px)); }
}

@media (max-width: 760px) {
  .play-shell { width: calc(100% - 20px); grid-template-columns: 1fr; gap: 18px; }
  .board { width: 100%; min-width: 0; }
  .game-stats, .action-bar { width: 100%; }
  .match-panel { padding: 14px 0 0; border-left: 0; border-top: 1px solid #d7ddd7; }
}