#panel:has(.xiangqi-game) {width: min(850px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);}
.xiangqi-game {color: #423123;}
.xiangqi-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0;}
.xiangqi-game button:not([data-square]), .xiangqi-game select, .xiangqi-game input {font: inherit; border: 1px solid #a7875d; border-radius: 8px; background: #fff7e7; color: #513621; padding: 8px 12px;}
.xiangqi-game button:not([data-square]) {cursor: pointer; min-height: 42px; box-shadow: 0 2px 0 #ac8a58;}
.xiangqi-game button:not([data-square]) {border-width: 2px; font-weight: 700; min-height: 44px;}
.xiangqi-game button:not([data-square]):hover:enabled {background: #f0dcb5;}
.xiangqi-game button:not([data-square]):active:enabled {transform: translateY(2px); box-shadow: none;}
.xiangqi-game button[data-xq='start'] {background: #356b59; border-color: #244e40; color: #fff; box-shadow: 0 3px 0 #244e40;}
.xiangqi-game button[data-xq='start']:hover:enabled {background: #244e40;}
.xiangqi-game button[aria-pressed='true']:not([data-square]) {background: #704329; color: #fff6e4;}
.xiangqi-game button:disabled {cursor: default; opacity: .55;}
.xiangqi-game button:focus-visible, .xiangqi-game select:focus-visible, .xiangqi-game input:focus-visible {outline: 3px solid #267d76; outline-offset: 2px;}
.xiangqi-actions label {display: flex; align-items: center; gap: 6px;}
.xiangqi-actions input {width: 7em;}
.xiangqi-layout {display: grid; grid-template-columns: minmax(0, 460px) minmax(160px, 1fr); gap: 20px; align-items: start;}
.xiangqi-board {position: relative; width: 100%; aspect-ratio: 9 / 10; background: linear-gradient(130deg, #f9dfa2, #e8bf7e 55%, #f4d99f); border: 5px solid #795136; border-radius: 9px; box-shadow: inset 0 0 20px #93683955, 0 6px 16px #42312325; box-sizing: border-box;}
.xiangqi-board svg {position: absolute; inset: 0; width: 100%; height: 100%; stroke: #785436; stroke-width: 1.4; pointer-events: none;}
.xiangqi-board svg text {stroke: none; fill: #795136; font: 22px serif; text-anchor: middle;}
.xiangqi-board button[data-square] {position: absolute; width: 11.1112%; height: 10%; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; opacity: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent;}
.xiangqi-board button span {display: grid; place-items: center; width: 84%; aspect-ratio: 1; box-sizing: border-box; border-radius: 50%; font: bold clamp(19px, 3.8vw, 32px) 'Noto Serif TC', 'Microsoft JhengHei', serif;}
.xiangqi-board .occupied span {background: radial-gradient(circle at 38% 28%, #fff0cb, #e9c584); border: 2px solid currentColor; outline: 2px solid #d7ae70; box-shadow: 1px 3px 3px #65442366, inset 0 0 0 2px #fae0ab;}
.xiangqi-board .red {color: #ac2926;}
.xiangqi-board .black {color: #263535;}
.xiangqi-board .last {background: #fff8cf66; border-radius: 8px;}
.xiangqi-board .selected span {outline: 4px solid #237d76; transform: translateY(-2px);}
.xiangqi-board .legal:not(.occupied) span::after {content: ''; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #237d76bb;}
.xiangqi-board .legal.occupied span {outline: 4px dashed #237d76;}
.xiangqi-status {background: #704329; color: #fff5d9; font-weight: 700; border-radius: 9px; padding: 10px 14px; margin: 12px 0;}
.xiangqi-feedback {color: #a12b25; font-weight: 600;}
.xiangqi-guide {font-size: 14px; line-height: 1.65;}
.xiangqi-guide h3 {margin-bottom: 4px;}
.xiangqi-guide summary {cursor: pointer; font-weight: 700;}
.xiangqi-players {font-weight: 700;}
.xiangqi-game [hidden] {display: none !important;}
@media (max-width: 600px) {
    .xiangqi-layout {grid-template-columns: minmax(0, 1fr); gap: 8px;}
    .xiangqi-board {max-width: 450px; margin: 0 auto;}
    .xiangqi-guide {font-size: 13px;}
    .xiangqi-guide p {margin: 8px 0;}
    .xiangqi-game button:not([data-square]), .xiangqi-game select, .xiangqi-game input {padding: 7px 9px; font-size: 13px;}
}