/* V1.18. Personal identity follows the viewer, never checker color or turn. */
#gameView .player-rail { min-width:0; }
#gameView .player-identity { min-width:0; }
#gameView .player-identity > div { min-width:0; }
#gameView .player-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#gameView .player-rail[data-player-perspective="self"] { border-color:rgba(200,255,56,.28); }
#gameView .player-rail[data-player-perspective="opponent"] { border-color:rgba(171,143,255,.28); }
/* Checker diameter is measured from the real column, including its gap. */
body.match-focus #gameBoard .checker { width:var(--focus-checker-size); height:var(--focus-checker-size); min-width:0; max-width:none; max-height:none; aspect-ratio:1; }
body.match-focus #gameBoard .top-quadrant .checker { top:calc(3px + var(--stack-index) * var(--focus-stack-step)); }
body.match-focus #gameBoard .bottom-quadrant .checker { bottom:calc(3px + var(--stack-index) * var(--focus-stack-step)); }
body.match-focus #gameBoard .bar-checker { width:var(--focus-bar-size); height:var(--focus-bar-size); }
body.match-focus #gameBoard .black-bar-zone .bar-checker { top:calc(3px + var(--bar-index) * var(--focus-bar-step)); }
body.match-focus #gameBoard .white-bar-zone .bar-checker { bottom:calc(3px + var(--bar-index) * var(--focus-bar-step)); }
body.match-focus #gameBoard .checker-count { width:clamp(11px,calc(var(--focus-checker-size) * .38),26px); height:clamp(11px,calc(var(--focus-checker-size) * .38),26px); font-size:clamp(7px,calc(var(--focus-checker-size) * .19),12px); }
/* Keep pip/bar/off values visible alongside the identity, even on phones. */
@media (max-width:960px), (max-height:520px) {
  #gameView .player-rail { display:grid; min-height:36px; gap:7px; padding:4px 6px; }
  #gameView .player-rail-top { grid-template-columns:auto auto minmax(0,1fr); grid-template-areas:'status stats identity'; }
  #gameView .player-rail-bottom { grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:'identity stats status'; }
  #gameView .player-stats { display:flex; gap:7px; }
  #gameView .player-stats > span { min-width:0; padding:0; }
  #gameView .player-stats small { font-size:6px; letter-spacing:0; white-space:nowrap; }
  #gameView .player-stats strong { font-size:11px; font-variant-numeric:tabular-nums; }
  #gameView .player-identity { gap:5px; }
  #gameView .player-identity .avatar-ring { width:26px; height:26px; flex-shrink:0; padding:2px; }
  #gameView .player-identity strong { font-size:10px; }
  #gameView .player-identity small { display:none; }
  #gameView .player-rail .turn-chip { display:flex; min-width:0; padding:4px 6px; font-size:7px; gap:4px; }
  #gameView .player-rail .turn-chip > span { width:4px; height:4px; }
}
/* In phone focus the two rails are placed inside the board's flex column.
   Sidebar controls keep their existing grid positions and touch targets. */
body.match-focus-mobile.match-focus-landscape #gameView .board-stage { gap:4px; }
body.match-focus-mobile.match-focus-landscape #gameView .board-stage > .player-rail { display:grid; align-self:stretch; width:100%; box-sizing:border-box; flex:0 0 32px; min-height:32px; padding:3px 5px; border-radius:7px; }
body.match-focus-mobile.match-focus-landscape #gameView .board-stage > .board-frame { flex:1 1 0; height:0; min-height:0; }
body.match-focus-mobile.match-focus-landscape #gameView .player-identity strong { font-size:10px; }
body.match-focus-mobile.match-focus-landscape #gameView .player-stats { display:flex; }
/* Fast human paths use color plus a text route. No overlay captures input. */
#gameBoard .peer-move-overlay { --path-color:#8ce5d1; }
#gameBoard .peer-move-overlay[data-player="B"] { --path-color:#bbc8ff; }
#gameBoard .peer-move-overlay.combined-move-overlay { --path-color:#ff879a; }
#gameBoard .peer-move-overlay.group-move-overlay { --path-color:#ffdf73; }
#gameBoard .peer-move-overlay .ai-source-ring,
#gameBoard .peer-move-overlay .ai-target-ring { border-color:var(--path-color); box-shadow:0 0 12px color-mix(in srgb,var(--path-color) 65%,transparent); }
#gameBoard .peer-move-overlay .ai-route path { stroke:var(--path-color); }
#gameBoard .peer-move-overlay .ai-move-caption { color:#eef7f5; border-color:var(--path-color); background:#0b131eed; }
.peer-hit-ring { position:absolute; transform:translate(-50%,-50%); border:2px dashed #ff879a; border-radius:50%; box-shadow:0 0 12px #ff667a66; }