#xiangqiCanvas {
  display: block;
  width: min(100%, 480px);
  height: auto;
  aspect-ratio: 9 / 10;
  margin-inline: auto;
}

#xiangqiPanel .board-stage { min-width: 0; }
#xiangqiPanel .room-heading h1 { overflow-wrap: anywhere; }

#xiangqiCanvas { touch-action: manipulation; cursor: pointer; }
#xiangqiCanvas:focus-visible { outline: 2px solid #258074; outline-offset: 3px; }
#xiangqiStatus { text-align: center; min-height: 1.5em; font-weight: 600; margin: 0; }
.xiangqi-swatch { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #fff8e9; }
.xiangqi-swatch.red { color: #af2638; }
.xiangqi-swatch.black { color: #252a30; }
.xiangqi-history { min-width: 0; border-top: 1px solid #d6dbdd; padding-block: 10px; }
.xiangqi-history summary { cursor: pointer; }
.xiangqi-history ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 30px; padding-left: 30px; max-height: 180px; overflow-y: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.xiangqi-rules { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; color: #59636b; margin: 0; }
.xiangqi-rules a { color: #28675d; }