.xiangqi-game { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.xiangqi-game__topbar, .xiangqi-game__stats, .xiangqi-game__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.xiangqi-game__topbar { justify-content: space-between; margin-bottom: 1rem; }
.xiangqi-game__topbar h2, .xiangqi-game__topbar p { margin: 0; }
.xiangqi-game__topbar p, .xiangqi-game__hint { color: var(--muted); font-size: .86rem; }
.xiangqi-stat { min-width: 4.6rem; padding: .42rem .58rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.xiangqi-stat span { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.xiangqi-stat strong { display: block; font-size: .96rem; }
.xiangqi-game__message { display: flex; align-items: center; min-height: 3rem; margin-bottom: .85rem; padding: .7rem .85rem; border: 1px solid #d8e5dc; border-radius: var(--radius); background: #f4faf6; color: #294a3b; font-weight: 750; }
.xiangqi-game__message.is-check { border-color: #e3ba77; background: #fff7e7; color: #784c12; }
.xiangqi-game__message.is-win { border-color: #96c5ac; background: #edf9f2; color: #17583f; }
.xiangqi-game__message.is-loss { border-color: #dfc4c1; background: #fff5f4; color: #7c342f; }
.xiangqi-game__message.is-draw { border-color: #bdc6ce; background: #f4f6f8; color: #43515d; }
.xiangqi-game__board-wrap { padding: clamp(.4rem, 1.5vw, .8rem); border-radius: var(--radius); background: #3a2416; }
.xiangqi-game__board { position: relative; width: min(100%, 590px); aspect-ratio: 635 / 706; margin: 0 auto; overflow: hidden; border: clamp(5px, 1.2vw, 10px) solid #704323; border-radius: 4px; background: #d7a45d; box-shadow: inset 0 0 0 1px rgba(63,33,12,.6), 0 9px 20px rgba(0,0,0,.22); }
.xiangqi-board-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .96; }
.xiangqi-intersections { position: absolute; inset: 0; }
.xiangqi-intersection { position: absolute; z-index: 2; display: grid; place-items: center; left: calc(5% + var(--x) * 11.25%); top: calc(5% + var(--y) * 10%); width: clamp(30px, 10%, 58px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.xiangqi-intersection:not(:disabled) { cursor: pointer; }
.xiangqi-intersection:focus-visible { outline: 4px solid #f7e7a9; outline-offset: 2px; }
.xiangqi-piece { display: none; place-items: center; width: 94%; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; background-color: #e7c688; background-repeat: no-repeat; background-size: 400% 100%; box-shadow: inset 0 0 0 2px rgba(255,248,222,.48), 0 3px 5px rgba(44,24,10,.42); color: #2c2a24; transition: transform 120ms ease, box-shadow 120ms ease; }
.piece-type-1 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/general.svg"); }
.piece-type-2 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/advisor.svg"); }
.piece-type-3 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/elephant.svg"); }
.piece-type-4 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/horse.svg"); }
.piece-type-5 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/chariot.svg"); }
.piece-type-6 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/cannon.svg"); }
.piece-type-7 { background-image: url("/assets/games/xiangqi/vendor/wikimedia/soldier.svg"); }
.is-english .xiangqi-piece { background-image: none; font: 800 clamp(1rem, 4.5vw, 2rem)/1 ui-sans-serif, system-ui, sans-serif; }
.is-english .xiangqi-piece::after { content: ""; }
.is-english .piece-type-1::after { content: "G"; }
.is-english .piece-type-2::after { content: "A"; }
.is-english .piece-type-3::after { content: "E"; }
.is-english .piece-type-4::after { content: "H"; }
.is-english .piece-type-5::after { content: "R"; }
.is-english .piece-type-6::after { content: "C"; }
.is-english .piece-type-7::after { content: "S"; }
.has-piece .xiangqi-piece { display: grid; }
.is-red .xiangqi-piece { color: #a32722; background-position: 0% center; }
.is-black .xiangqi-piece { color: #222c2b; background-position: 66.667% center; }
.is-selected .xiangqi-piece { transform: scale(1.08); box-shadow: 0 0 0 4px #1d7558, 0 4px 7px rgba(44,24,10,.46); }
.xiangqi-intersection.is-legal::after { content: ""; position: absolute; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #176b50; box-shadow: 0 0 0 3px rgba(244,250,246,.72); }
.xiangqi-intersection.is-capture::after { width: 84%; background: transparent; border: 4px solid #1d7558; box-sizing: border-box; }
.xiangqi-intersection.is-last-from::before, .xiangqi-intersection.is-last-to::before { content: ""; position: absolute; inset: 7%; border: 3px solid #e7b72d; border-radius: 50%; }
.xiangqi-intersection.is-check .xiangqi-piece { box-shadow: 0 0 0 4px #c93d35, 0 0 14px rgba(201,61,53,.6); }
.xiangqi-game__controls { margin-top: 1rem; align-items: end; }
.xiangqi-game__controls label { display: grid; gap: .2rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.xiangqi-game__controls select, .xiangqi-control { min-height: 2.55rem; padding: .52rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; }
.xiangqi-control { cursor: pointer; }
.xiangqi-control--primary { border-color: var(--jade); background: var(--jade); color: #fff; }
.xiangqi-control:disabled { cursor: not-allowed; opacity: .5; }
.xiangqi-game__hint { margin: .75rem 0 0; }
.xiangqi-piece-legend__key { margin: -.3rem 0 .55rem; color: var(--muted); font-size: .86rem; }
.xiangqi-piece-legend { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.xiangqi-piece-legend li { display: grid; grid-template-columns: 3.65rem minmax(0, 1fr); gap: .65rem; align-items: center; }
.xiangqi-piece-pair { display: flex; align-items: center; gap: .2rem; }
.xiangqi-piece-pair .xiangqi-piece { display: grid; width: 1.7rem; flex: 0 0 1.7rem; }
.xiangqi-piece-pair .xiangqi-piece.is-red { color: #a32722; background-position: 0% center; }
.xiangqi-piece-pair .xiangqi-piece.is-black { color: #222c2b; background-position: 66.667% center; }
@media (max-width: 560px) { .xiangqi-game { padding: .65rem; } .xiangqi-game__board-wrap { padding: .3rem; } .xiangqi-game__stats { gap: .3rem; } .xiangqi-stat { min-width: 4rem; } .xiangqi-game__controls { gap: .5rem; } .xiangqi-game__controls label { flex: 1 1 28%; } .xiangqi-game__controls select { width: 100%; } .xiangqi-control { flex: 1; } .xiangqi-game__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .xiangqi-piece { transition: none; } }