/* playermenu.css — the menu a click on another player's hero opens (js/playermenu.js), in the K look of the windows
   (css/kui.css: cream body, chunky navy outline, sky-blue main button). Sizes in --u like the HUD. */
#pmenu { position: fixed; z-index: 60; width: calc(270 * var(--u)); box-sizing: border-box; padding: calc(12 * var(--u)); color: var(--ink); font-family: 'Mitr', sans-serif;
  background: #f7efdc; border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(18 * var(--u)); box-shadow: 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, 0.28), 0 0 calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  animation: pmIn 0.12s ease-out; }
#pmenu[hidden] { display: none; }
#pmenu::before { content: ''; position: absolute; left: calc(-14 * var(--u)); top: calc(30 * var(--u)); border-top: calc(12 * var(--u)) solid transparent; border-bottom: calc(12 * var(--u)) solid transparent;
  border-right: calc(14 * var(--u)) solid var(--ink); }
#pmenu.left::before { left: auto; right: calc(-14 * var(--u)); border-right: 0; border-left: calc(14 * var(--u)) solid var(--ink); }
@keyframes pmIn { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-head { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); border-bottom: calc(2.5 * var(--u)) solid #e0d2b2; }
.pm-face { position: relative; flex: none; width: calc(68 * var(--u)); height: calc(68 * var(--u)); border-radius: 50%; overflow: hidden; box-sizing: border-box;
  border: calc(3 * var(--u)) solid var(--ink); background: radial-gradient(circle at 50% 38%, #e9f5ff, #a9d3f6 75%); }
.pm-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pm-who { min-width: 0; display: flex; flex-direction: column; }
.pm-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 calc(22 * var(--u)) / 1.25 'Mitr', sans-serif; }
.pm-fr { display: inline-block; margin-left: calc(4 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: 99px; background: #d6f3dc; color: #1e7a3a; font: 600 calc(13 * var(--u)) / 1.5 'Mitr', sans-serif;
  font-style: normal; vertical-align: middle; }
.pm-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 calc(16 * var(--u)) / 1.3 'Mitr', sans-serif; color: #4b4260; }
.pm-who .pm-gu { color: #6a55c8; font-weight: 600; }
.pm-main { width: 100%; height: calc(48 * var(--u)); border-width: calc(3.5 * var(--u)); font-size: calc(21 * var(--u)); }
.pm-main img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; margin-right: calc(2 * var(--u)); }
.pm-list { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.pm-row { display: flex; align-items: center; gap: calc(10 * var(--u)); width: 100%; height: calc(44 * var(--u)); padding: 0 calc(10 * var(--u)); box-sizing: border-box; cursor: pointer;
  border: calc(2.5 * var(--u)) solid #dccfb2; border-radius: calc(12 * var(--u)); background: #fbf3e2; color: var(--ink); font: 600 calc(18.5 * var(--u)) / 1 'Mitr', sans-serif; text-align: left; }
.pm-row img { flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.pm-row:not(:disabled):hover { background: #dff1ff; border-color: #7fcaf8; }
.pm-row:not(:disabled):active { transform: translateY(calc(1 * var(--u))); }
.pm-row:disabled { cursor: default; color: #8a8392; background: #eeeae2; }
.pm-row:disabled img { filter: grayscale(0.8); opacity: 0.6; }