:root,
[data-preview="classic"] {
  --board-surface: #ead4ad;
  --board-frame: #d7bb90;
  --board-line: #826948;
  --board-river: #96784e;
  --board-texture: repeating-linear-gradient(96deg, #fff5 0 2px, transparent 3px 17px), linear-gradient(145deg, #f7e6c7, #e8cfa3 80%);
  --piece-surface: radial-gradient(circle at 34% 24%, #fff9e9, #ead1a2 78%);
  --piece-edge: #b99665;
  --piece-inner: #fff7dc;
  --piece-ink: #354438;
  --piece-red: #ad4333;
  --board-shadow: #6b4c2b29;
}
:root[data-board-theme="jade"],
[data-preview="jade"] {
  --board-surface: #c5dacb;
  --board-frame: #89ab97;
  --board-line: #477366;
  --board-river: #527d6e;
  --board-texture: radial-gradient(circle at 20% 20%, #eff8e799, transparent 34%), repeating-linear-gradient(115deg, #ffffff18 0 3px, transparent 3px 20px), linear-gradient(145deg, #dce9ce, #b8d3c1);
  --piece-surface: radial-gradient(circle at 34% 24%, #fffff2, #e2ecdb 78%);
  --piece-edge: #8bad95;
  --piece-inner: #faffed;
  --piece-ink: #285948;
  --piece-red: #af5347;
  --board-shadow: #345c4c36;
}
:root[data-board-theme="night"],
[data-preview="night"] {
  --board-surface: #293747;
  --board-frame: #415269;
  --board-line: #9fb6bb;
  --board-river: #b7cbd1;
  --board-texture: radial-gradient(circle at 30% -20%, #607b9066, transparent 48%), linear-gradient(155deg, #344859, #1f2b3d);
  --piece-surface: radial-gradient(circle at 34% 24%, #fffef4, #d6d9d6 78%);
  --piece-edge: #aeb9bf;
  --piece-inner: #fffef6;
  --piece-ink: #213a50;
  --piece-red: #ba4148;
  --board-shadow: #14213360;
}
:root[data-board-theme="porcelain"],
[data-preview="porcelain"] {
  --board-surface: #dbe9f2;
  --board-frame: #a8c5d8;
  --board-line: #5682a5;
  --board-river: #668fac;
  --board-texture: radial-gradient(circle at 82% 9%, #ffffffc5, transparent 38%), repeating-linear-gradient(0deg, #ffffff2d 0 1px, transparent 1px 15px), linear-gradient(145deg, #eff6f6, #d1e4f0);
  --piece-surface: radial-gradient(circle at 34% 24%, #ffffff, #e3edf5 82%);
  --piece-edge: #a4bed4;
  --piece-inner: #ffffff;
  --piece-ink: #315e82;
  --piece-red: #b95458;
  --board-shadow: #355c7834;
}
:root[data-board-theme="blossom"],
[data-preview="blossom"] {
  --board-surface: #f2dce0;
  --board-frame: #d8b3b9;
  --board-line: #a77782;
  --board-river: #aa7886;
  --board-texture: radial-gradient(circle at 18% 18%, #fff5efb3, transparent 35%), radial-gradient(circle at 82% 78%, #eab7c059, transparent 43%), linear-gradient(145deg, #f7e6df, #edced5);
  --piece-surface: radial-gradient(circle at 34% 24%, #fffdf7, #f5e4da 80%);
  --piece-edge: #caabb0;
  --piece-inner: #fffcf6;
  --piece-ink: #554555;
  --piece-red: #b34763;
  --board-shadow: #8d536336;
}

.board {
  background-color: var(--board-surface);
  background-image: var(--board-texture);
  border: 7px solid var(--board-frame);
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px #ffffff65, 0 12px 32px var(--board-shadow);
  transition: background-color .28s, border-color .28s, box-shadow .28s;
}
.board-svg g:first-child { stroke: var(--board-line); }
.board-svg g:nth-child(2), .board-svg g:nth-child(3) { fill: var(--board-river); }
.piece, .online-piece {
  background: var(--piece-surface);
  border-color: var(--piece-edge);
  color: var(--piece-ink);
  box-shadow: 0 3px 3px var(--board-shadow), 0 7px 13px #152b2520, inset 0 0 0 3px var(--piece-inner), inset 0 0 0 4px var(--piece-edge);
  -webkit-font-smoothing: antialiased;
}
.piece.red, .online-piece.red { color: var(--piece-red); }
.online-piece.black { color: var(--piece-ink); }
.grid-cell.selected .piece { box-shadow: 0 0 0 3px var(--piece-red), 0 7px 14px var(--board-shadow), inset 0 0 0 3px var(--piece-inner); }
.grid-cell.last:before { border-color: var(--board-line); border-radius: 10px; opacity: .62; }
.grid-cell.possible:after { background: var(--board-line); }
.grid-cell.possible:has(.piece):after { background: transparent; border-color: var(--piece-red); }
.board-caption { color: var(--board-river); opacity: .8; }
.piece-motion { will-change: transform; }

.skin-title { margin: 22px 0 11px; font-size: 12px; font-weight: 650; color: #536454; }
.skin-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skin-choice {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-width: 0; padding: 9px; text-align: left; border: 1px solid #e1e4dd;
  border-radius: 17px; background: #fffefa; cursor: pointer;
  box-shadow: 0 2px 7px #2534220a; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.skin-choice:hover { transform: translateY(-2px); box-shadow: 0 9px 21px #2534221a; }
.skin-choice.active { border-color: #789769; box-shadow: 0 0 0 2px #78976942, 0 6px 20px #25342219; }
.skin-choice strong { margin: 5px 5px 0; font-size: 12px; color: #34493a; }
.skin-choice small { margin: 0 5px 5px; font-size: 10px; color: #8b968a; }
.skin-swatch {
  display: flex; align-items: center; justify-content: space-around; gap: 4px;
  height: 72px; overflow: hidden; border: 4px solid var(--board-frame);
  border-radius: 10px; background: var(--board-texture), var(--board-surface);
  color: var(--board-river); position: relative;
}
.skin-swatch:before { content: ''; position: absolute; inset: 9px; opacity: .5; background: linear-gradient(var(--board-line), var(--board-line)) center/100% 1px no-repeat, linear-gradient(90deg, var(--board-line), var(--board-line)) center/1px 100% no-repeat; }
.skin-swatch i { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--piece-edge); background: var(--piece-surface); color: var(--piece-red); font: 21px 'Songti SC', serif; box-shadow: 0 3px 7px var(--board-shadow); }
.skin-swatch i:last-child { color: var(--piece-ink); }
.skin-swatch em { position: relative; z-index: 1; font: 12px 'Songti SC', serif; letter-spacing: 2px; white-space: nowrap; }
.skin-choice.active:after { content: '已选'; align-self: flex-end; margin: -22px 5px 4px; color: #57804f; font-size: 10px; }
.online-theme-btn { border: 1px solid #d8e2d6; background: #f8faf6; border-radius: 11px; padding: 7px 11px; font-size: 11px; color: #50694f; cursor: pointer; white-space: nowrap; }
.online-theme-btn:hover { background: #edf3eb; }
.play-card, .panel, .coach-card { border-radius: 19px; box-shadow: 0 9px 30px #35453710; }
.primary, .secondary, .segmented, .online-clock { border-radius: 12px; }
.segmented button { border-radius: 9px; }
.settings-btn { padding: 7px 10px; border-radius: 11px; transition: background .18s; }
.settings-btn:hover { background: #e8ede5; }
.topbar, .online-header { background: #fffefaeb; backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
.primary { box-shadow: 0 4px 10px #455a4024; transition: transform .18s, box-shadow .18s, background .18s; }
.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 16px #455a4033; }
@media (max-width: 560px) {
  .skin-choices { gap: 7px; }
  .skin-choice { padding: 6px; border-radius: 12px; }
  .skin-swatch { height: 60px; }
  .skin-swatch i { width: 27px; height: 27px; font-size: 17px; }
  .skin-swatch em { font-size: 9px; letter-spacing: 0; }
  .online-game-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .board, .skin-choice { transition: none; }
}