/* Reuse the existing ELIRA frame; the portrait stays inside the card. */
.portrait-picker { min-width: 0; margin: 0; border: 0; padding: 0; }
.portrait-picker legend { color: #d7f6ff; font-weight: 700; font-size: 1.1rem; }
.portrait-picker p { color: #abc1cc; font-size: 13px; }
.portrait-grid, .profile-form .avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.portrait-option, .profile-form .avatar-card { position: relative; display: grid; grid-template-columns: 1fr; min-width: 0; gap: 5px; padding: 5px; border: 2px solid transparent; border-radius: 8px; background: #091923; cursor: pointer; }
.portrait-option input, .profile-form .avatar-card input { position: absolute; top: 9px; left: 9px; width: 16px; height: 16px; accent-color: #3dedec; z-index: 1; }
.portrait-option img, .profile-form .avatar-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border: 0; border-radius: 0; }
.portrait-option span, .profile-form .avatar-card strong { text-align: center; color: #c6dce6; font-size: 12px; }
.portrait-option:has(input:checked), .profile-form .avatar-card:has(input:checked) { border-color: #39e5ec; background: #123540; box-shadow: 0 0 12px #2ddad52b; }
.portrait-option:focus-within, .profile-form .avatar-card:focus-within { outline: 2px solid white; outline-offset: 2px; }
.portrait-option:hover, .profile-form .avatar-card:hover { background: #17303e; }
@media(max-width: 600px) { .portrait-grid, .profile-form .avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
.sidebar-commander {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px;
  /* 80px portrait + 2 × (16px padding + 12px frame). */
  min-height: 136px; height: auto; padding: 16px; width: 100%; text-align: left;
  align-items: center; align-content: center; flex-shrink: 0;
  border: 12px solid transparent;
  border-image: url('./03_ASSETS/game_assets/ui/frame-metal-cyan-v01.png') 170 / 12px / 0 stretch;
  background: linear-gradient(145deg, #152734, #050d16);
}
.sidebar-commander .sidebar-avatar {
  position: static; display: block; width: 80px; height: 80px; aspect-ratio: 1; max-width: 100%; margin: 0;
  object-fit: contain; object-position: center; border-radius: 0;
  border: 0; background: transparent; box-shadow: none; transform: none;
}
.sidebar-commander strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.sidebar-commander small { display: block; margin-top: 5px; }
.profile-modal-card {
  width: min(620px, calc(100vw - 24px)); padding: 26px;
  border: 12px solid transparent;
  border-image: url('./03_ASSETS/game_assets/ui/frame-metal-cyan-v01.png') 170 / 12px / 0 stretch;
}
.profile-modal-avatar { flex: 0 0 96px; width: 96px; height: 96px; object-fit: contain; }
.profile-modal-header { padding-right: 24px; }
.profile-modal-identity { min-width: 0; overflow-wrap: anywhere; }
.profile-edit-field small { display: block; color: #abc1cc; font-size: 12px; line-height: 1.5; margin: 8px 0; }
.profile-edit-field input, .profile-edit-field textarea { box-sizing: border-box; max-width: 100%; }
.profile-edit-status { min-height: 1.5em; margin: 0; color: #b9eef7; }
.profile-access { margin: 20px 0; border-top: 1px solid #385360; padding-top: 14px; }
.profile-access summary { cursor: pointer; }
.profile-access p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-modal-card button { min-height: 40px; }
@media (max-width: 600px) {
  .sidebar-commander { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px; min-height: 112px; }
  .sidebar-commander .sidebar-avatar { width: 64px; height: 64px; }
  .profile-modal-card { padding: 16px; }
  .profile-modal-avatar { flex-basis: 64px; width: 64px; height: 64px; }
  .profile-modal-identity h2 { font-size: 20px; }
  .profile-modal-grid { gap: 8px; }
}