/* Shared finishing details. Layout sizing and move motion stay in their owners. */
.xiangqi-piece { border-width: 1.2px; box-shadow: inset 0 0 0 1px #fff5dbb0, inset 0 0 0 2.5px #b68a4940, 0 2px 2px #51321f30; }
.xiangqi-piece .piece-letter { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.xiangqi-piece.red-side { color: #a53628; }
.xiangqi-piece.black-side { color: #24352e; }
.board.is-flipped .river-label { transform-box: fill-box; transform-origin: center; transform: rotate(180deg); }
.piece-swatch .piece-letter { display: none !important; }
.settings-dialog[data-game-kind='xiangqi'] .piece-swatch .piece-letter { display: block !important; width: 100%; height: 100%; }
.settings-dialog[data-game-kind='xiangqi'] .piece-swatch i:has(>.piece-letter)::after { content: none; }
.settings-dialog[data-game-kind='xiangqi'] .piece-swatch .sample-black { color: #a53628; }
.settings-dialog[data-game-kind='xiangqi'] .piece-swatch .sample-white { color: #24352e; }
#preview-board .xiangqi-piece, #skin-live-board .xiangqi-piece, .kind-snapshot .xiangqi-piece { border-width: .6px; box-shadow: inset 0 0 0 1px #fff5db8a, 0 1px 1px #51321f25; }
#game-view .game-board-wrap { border-color: #d9dfd2; background: #edf0e7; }
#game-view .player-card { border-color: transparent; background: var(--ui-surface); box-shadow: 0 1px 4px #173b3207; }
#game-view .player-card.active { border-color: #98b59c; background: var(--ui-surface-soft); box-shadow: inset 2px 0 0 var(--ui-accent); }
#game-view .seat-clock time { font-weight: 650; }
.dialog-heading .icon-button { display: grid; place-items: center; padding: 10px; }
.dialog-heading .icon-button .ui-icon { display: block; margin: 0; }
@media (max-width: 899px) {
  #game-view .seat-identity strong { font-size: 12px; }
  #game-view .seat-clock time { font-size: 22px; }
  .game-side-panel .dock-tool { border-color: transparent; background: var(--ui-surface); box-shadow: 0 1px 3px #173b3207; }
  .game-side-panel .dock-tool:disabled { box-shadow: none; }
  #game-view .game-hint { font-size: 11px; }
}
html[data-color-theme='dark'] #game-view .game-board-wrap { background: var(--ui-surface-soft); border-color: var(--ui-line); }
html[data-color-theme='dark'] #game-view .player-card.active { border-color: var(--ui-accent); }

/* On short phones both players share the first row; clocks never sit below the fold. */
@media (max-width: 899px) and (max-height: 700px) {
  #game-view .game-play-area { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-auto-rows: max-content; align-content: start; gap: 6px 8px; }
  #game-view .game-play-area > * { grid-column: 1 / -1; justify-self: center; }
  #game-view .game-play-area > .opponent-seat { grid-row: 1; grid-column: 1; width: 100%; }
  #game-view .game-play-area > .self-seat { grid-row: 1; grid-column: 2; width: 100%; }
  #game-view .game-play-area > .turn-bar { grid-row: 2; }
  #game-view .game-play-area .player-card { min-height: 46px; padding: 6px 7px; gap: 6px; border-radius: 11px; }
  #game-view .game-play-area .avatar-wrap, #game-view .game-play-area .player-avatar, #game-view .game-play-area .avatar-fallback { width: 24px; height: 24px; flex-basis: 24px; border-radius: 8px; }
  #game-view .game-play-area .avatar-wrap .player-stone { width: 9px; height: 9px; }
  #game-view .game-play-area .seat-identity strong { font-size: 10px; line-height: 1.4; }
  #game-view .game-play-area .seat-identity small { font-size: 8px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #game-view .game-play-area .seat-clock time { font-size: 16px; letter-spacing: 0; }
}