.fairplay-board-card[hidden], .fairplay-board-card [hidden] { display: none !important; }
.fairplay-board-card { min-width: 0; align-self: start; position: sticky; top: 14px; }
.fairplay-board-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--ink); }
.fairplay-board-card button { border: 1px solid var(--border, #c7b990); border-radius: 7px; background: var(--card, #f7f2e7); color: var(--ink, #283a34); padding: 6px 10px; cursor: pointer; }
#fairplay-board { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; box-shadow: 0 4px 18px #0002; }
.fairplay-board-nav { display: flex; align-items: center; gap: 6px; margin-top: 12px; min-width: 0; }
.fairplay-board-nav input { flex: 1; min-width: 36px; accent-color: var(--gold, #a9803e); }
.fairplay-board-nav button { min-width: 30px; padding: 5px 8px; }
.fairplay-board-nav span { font-size: 12px; min-width: 58px; text-align: right; color: var(--ink); }
.fairplay-board-card p { font-size: 12px; color: var(--ink3); margin: 9px 0 0; }
.has-fairplay-game .fairplay-workspace-main { grid-template-columns: minmax(0, 1fr); }
.has-fairplay-game .fairplay-source-panel { display: flex; align-items: center; gap: 12px; }
.has-fairplay-game .fairplay-source-panel h2 { margin: 0; font-size: 14px; }
.has-fairplay-game .fairplay-source-panel > button { width: auto; }
.has-fairplay-game .fairplay-analysis-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.has-fairplay-game .fairplay-current-summary, .has-fairplay-game .imported-kifu-delete { grid-column: 1 / -1; }
.has-fairplay-game #rv-fairplay-content { min-width: 0; width: 100%; margin: 0; align-self: start; }
@media (max-width: 900px) {
  .has-fairplay-game .fairplay-analysis-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fairplay-board-card { position: static; width: 100%; max-width: 660px; justify-self: center; }
}

/* A loaded game keeps its board and playback controls inside the viewport. */
.has-fairplay-game.fairplay-workspace { padding:8px; }
.has-fairplay-game .fairplay-workspace-header { margin-bottom:8px; padding:8px 12px; }
.has-fairplay-game .fairplay-workspace-header small,
.has-fairplay-game .fairplay-workspace-header p { display:none; }
.has-fairplay-game .fairplay-workspace-header h1 { margin:0; font-size:21px; }
.has-fairplay-game .fairplay-workspace-main { gap:8px; }
.has-fairplay-game .fairplay-source-panel { padding:5px 10px; }
.has-fairplay-game .fairplay-source-panel h2 { display:none; }
.has-fairplay-game .fairplay-source-panel > button { width:auto!important; margin:0; padding:5px 12px; min-height:30px; }
.has-fairplay-game .fairplay-analysis-stage { position:relative; padding:10px; gap:10px; }
.has-fairplay-game .fairplay-current-summary { margin:0; padding:7px 120px 7px 10px; font-size:12px; min-height:34px; align-items:center; }
.has-fairplay-game .fairplay-analysis-stage > .imported-kifu-delete { position:absolute; right:17px; top:16px; width:auto; margin:0; padding:3px 6px; font-size:11px; }
.has-fairplay-game .fairplay-analysis-stage > .imported-kifu-delete[hidden] { display:none!important; }
.has-fairplay-game .fairplay-board-card { top:66px; max-width:100%; justify-self:center; }
.has-fairplay-game .fairplay-board-heading { font-size:13px; min-height:28px; margin-bottom:6px; }
.has-fairplay-game .fairplay-board-nav { margin-top:7px; }
.has-fairplay-game .fairplay-board-card p { font-size:11px; margin:5px 0 0; }
@media (min-width:901px) {
 .has-fairplay-game #rv-fairplay-content { overflow-y:auto; overscroll-behavior:contain; padding-right:5px; }
}
@media (max-width:600px) {
 .has-fairplay-game .fairplay-current-summary { gap:3px; flex-direction:column; align-items:flex-start; }
 .has-fairplay-game .fairplay-board-nav { gap:4px; }
 .has-fairplay-game .fairplay-board-nav button { min-width:27px; padding:5px 6px; }
 .has-fairplay-game .fairplay-board-nav span { min-width:52px; }
}