.pawn-visual-picker {
  color:#172321; background:#fffdf7; border:1px solid #d9c99e; border-radius:18px;
  padding:clamp(18px,3vw,30px); font-family:Arial,sans-serif; box-sizing:border-box;
}
#pawnVisualSection { max-width:1100px; margin:28px auto; scroll-margin-top:20px; }
.pawn-visual-picker h2 { margin:0 0 10px; font-size:clamp(22px,3vw,30px); color:#263e32; }
.pawn-visual-picker p { line-height:1.5; }
.pawn-visual-grid { border:0; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pawn-visual-card { position:relative; display:grid; gap:16px; padding:16px 10px 22px; border:2px solid #d8d4ca;
  border-radius:12px; cursor:pointer; background:#f2f0e9; transition:border-color .15s,background .15s; min-width:0; }
.pawn-visual-card:hover { border-color:#687d6b; }
.pawn-visual-card.is-selected { border-color:#216943; background:#e4efe5; box-shadow:0 0 0 1px #216943; }
.pawn-visual-card:focus-within { outline:3px solid #2769b5; outline-offset:3px; }
.pawn-visual-card input { position:absolute; top:17px; left:12px; accent-color:#216943; width:18px; height:18px; margin:0; }
.pawn-visual-name { text-align:center; padding-left:23px; font-size:16px; font-weight:bold; min-height:2.5em; }
.pawn-visual-pair { display:flex; gap:12px; justify-content:center; padding:5px 0 10px; }
.pawn-visual-tile { width:clamp(45px,6vw,76px); aspect-ratio:1; display:grid; place-items:center; border-radius:3px;
  transform:rotate(-7deg); box-shadow:0 5px 0 #c9c2b4,0 7px 0 #817e75,0 12px 12px #0002; border:1px solid #b5b0a5; }
.pawn-visual-tile.white { background:#f4f4f0; }
.pawn-visual-tile.black { background:#111; }
.pawn-visual-tile img { display:block; width:80%; height:80%; object-fit:contain; }
.pawn-visual-status { min-height:1.5em; margin:20px 0 0; font-size:14px; }
.pawn-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#pawnVisualDialog { width:min(850px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); overflow:auto; }
#pawnVisualDialog::backdrop { background:#08130dba; }
.pawn-visual-close { display:block; margin:18px 0 0 auto; padding:10px 24px; color:#fff; background:#245b3b; border:0; border-radius:8px; cursor:pointer; }
#gameControls #pawnVisualBtn { grid-column:2; grid-row:2; justify-self:start; width:52px; height:52px; min-width:52px; min-height:52px; padding:12px; box-sizing:border-box; }
#gameControls #pawnVisualBtn svg { display:block; width:24px; height:24px; margin:auto; pointer-events:none; }
@media(max-width:650px) {
  .pawn-visual-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #pawnVisualSection { margin:18px 12px; }
  .pawn-visual-tile { width:clamp(44px,12vw,68px); }
  .pawn-visual-name { font-size:15px; }
}

.pawn-visual-status:empty { display:none; }

/* Garder la langue et le choix des pions côte à côte, même quand la barre revient à la ligne. */
#pawnLanguageControls { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
#viewControls { flex-wrap:wrap; max-width:calc(100vw - 144px); }
#gameControls:has(#pawnLanguageControls) { grid-template-columns:52px 52px max-content; }
#gameControls:has(#pawnLanguageControls) #restartBtn { grid-column:3; grid-row:2; justify-self:end; }