/* A compact player rail. Portrait rings and HP plates share the shop's brass. */
.arena { --player-rail-width:176px; --player-rail-gap:18px; }
.player-perspectives {
  position:absolute; z-index:7; top:22px; right:var(--player-rail-gap);
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  width:var(--player-rail-width); max-height:calc(100% - 158px);
  margin:0; padding:3px 3px 7px; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:#8e8050 transparent;
}
.player-portrait {
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between;
  flex:0 0 60px; width:100%; height:60px; gap:0; padding:0;
  border:0; border-radius:0; background:transparent; color:#ced8ba;
  text-align:left; box-shadow:none; transition:filter .15s;
}
.player-portrait::before,.player-portrait::after {
  content:''; position:absolute; z-index:-1;
  clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);
}
.player-portrait::before { inset:8px 25px 8px 0; background:linear-gradient(120deg,#a5945d,#6a6741 65%,#a5945d); }
.player-portrait::after { inset:10px 25px 10px 2px; background:linear-gradient(110deg,#253b2c,#142b23); }
.player-info { display:flex; flex-direction:column; min-width:0; padding:0 3px 0 17px; gap:3px; }
.player-name { display:block; color:#b8c5a6; font-size:10px; line-height:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-health { display:flex; align-items:center; gap:5px; }
.player-health svg { width:10px; height:10px; fill:#acb58c; }
.player-portrait .player-hp { display:block; color:#ece0b3; font-size:19px; line-height:19px; font-weight:650; font-variant-numeric:tabular-nums; }
.player-avatar {
  position:relative; flex:0 0 54px; width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%; padding:3px; background:linear-gradient(135deg,#c3af70,#77623b 55%,#a8955c);
  box-shadow:0 2px 6px #081b1866,0 0 0 1px #15291c;
}
.player-portrait .player-avatar img {
  display:block; width:48px; height:48px; padding:3px; border:2px solid #1b2e22; border-radius:50%;
  object-fit:contain; background:radial-gradient(ellipse at 45% 30%,#627b48,#284934 65%,#152d24);
}
.player-portrait .player-connection {
  position:absolute; display:block; right:3px; bottom:5px; width:7px; height:7px; margin:0;
  border:1px solid #213621; border-radius:50%; background:#bc9164;
}
.player-portrait[data-connected=true] .player-connection { background:#b6d18c; }
.player-portrait[aria-pressed=true] { background:transparent; border:0; box-shadow:none; }
.player-portrait[aria-pressed=true]::before { background:linear-gradient(110deg,#e5d38b,#ba9c50); }
.player-portrait[aria-pressed=true]::after { background:linear-gradient(110deg,#445235,#223b2a); }
.player-portrait[aria-pressed=true] .player-avatar { background:linear-gradient(125deg,#f1df9b,#b3974b 55%,#e5c66e); box-shadow:0 0 0 2px #e6cb7b55,0 0 16px #cfb56424; }
.player-portrait[aria-pressed=true] .player-name { color:#e1dfb5; }
.player-portrait:hover:not(:disabled) { background:transparent; filter:brightness(1.15); }
.player-portrait:focus-visible { outline:1px solid #eddfa6; outline-offset:1px; border-radius:4px; }
.player-portrait:disabled { opacity:.65; cursor:wait; }
.player-portrait[data-eliminated=true] .player-avatar img { filter:grayscale(1); opacity:.65; }
.player-portrait[data-eliminated=true] .player-hp { color:#b69882; }

/* Keep the board and combat controls clear of the player list. */
.live-match .map-viewport { right:calc(var(--player-rail-width) + var(--player-rail-gap) + 12px); }
.live-match .current-turn,.live-match .loot-tray { right:calc(var(--player-rail-width) + var(--player-rail-gap) + 18px); }
.round-panel { left:50%; }
#leave-match { margin-left:auto; }
@media (max-width:1000px) {
  .arena { --player-rail-width:151px; --player-rail-gap:12px; }
  .player-perspectives { top:16px; gap:8px; }
  .player-portrait { flex-basis:54px; height:54px; }
  .player-portrait::before { inset:6px 22px 6px 0; }
  .player-portrait::after { inset:8px 22px 8px 2px; }
  .player-info { padding-left:14px; gap:2px; }
  .player-name { font-size:9px; }
  .player-portrait .player-hp { font-size:17px; line-height:18px; }
  .player-avatar { flex-basis:48px; width:48px; height:48px; }
  .player-portrait .player-avatar img { width:42px; height:42px; padding:2px; }
}
@media (max-width:650px) {
  .arena { --player-rail-width:123px; --player-rail-gap:8px; }
  .player-perspectives { top:9px; gap:6px; max-height:calc(100% - 122px); }
  .player-portrait { flex-basis:47px; height:47px; }
  .player-avatar { flex-basis:40px; width:40px; height:40px; padding:2px; }
  .player-portrait .player-avatar img { width:36px; height:36px; }
  .player-name { font-size:8px; }
  .player-portrait .player-hp { font-size:15px; line-height:16px; }
  .player-health { gap:3px; }
  .player-health svg { width:8px; height:8px; }
  .player-info { padding-left:12px; }
  .player-portrait .player-connection { width:6px; height:6px; right:2px; bottom:4px; }
  .live-match .map-viewport { right:6px; }
  .live-match .current-turn { width:142px; }
}