/* Original four-element identity, shared by menus, rooms and team portraits. */
.pr-element-badge { --element: #c54c36; display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 4px; box-sizing: border-box; color: var(--element); background: #fffdf4; border: 1px solid #17263b38; border-radius: 50%; box-shadow: 0 2px 5px #14223826; }
.pr-element-badge[data-element="ice"] { --element: #287fbd; }
.pr-element-badge[data-element="volt"] { --element: #967014; }
.pr-element-badge[data-element="plant"] { --element: #33785c; }
.pr-element-badge svg { display: block; width: 100%; height: 100%; }
.pr-avatar-element { position: absolute; top: -4px; left: -4px; z-index: 3; width: clamp(23px,2.2vw,32px); height: clamp(23px,2.2vw,32px); padding: 3px; }
.pr-sheet-portrait--head img { position: absolute; top: 0; left: -35%; width: 170%; max-width: none; height: auto; max-height: none; }
.pr-sheet-portrait--head[data-roster="kaze"] img { top: -12%; }

/* The portrait is the card's main visual; selection and element occupy separate corners. */
.pr-looks .pr-hero-card { height: clamp(144px,20vh,210px); min-height: 144px; padding: 0; overflow: hidden; border: 2px solid #17263b24; border-radius: 8px; background: #e6e9e8; isolation: isolate; }
.pr-looks .pr-hero-card__portrait { position: absolute; inset: 0 0 42px; width: 100%; height: calc(100% - 42px); max-width: none; max-height: none; object-fit: cover; object-position: center top; border-radius: 0; background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb,var(--look) 24%,#faf8f0),#eef0eb); }
.pr-looks .pr-hero-card__badge { position: absolute; top: 6px; left: 6px; z-index: 2; }
.pr-looks .pr-hero-card__check { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 23px; height: 23px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #17263b; color: #fff; visibility: hidden; }
.pr-hero-card__check svg { width: 100%; height: 100%; }
.pr-looks .pr-hero-card.is-selected .pr-hero-card__check { visibility: visible; }
.pr-looks .pr-hero-card.is-selected { border-color: #17263b; box-shadow: 0 0 0 2px #fffaf0,0 0 0 4px #17263b; }
.pr-looks .pr-hero-card__caption { position: absolute; bottom: 0; left: 0; right: 0; min-height: 42px; box-sizing: border-box; padding: 5px 9px; color: #17263b; background: #fffdf5; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.pr-hero-card__caption b { font-size: clamp(14px,1.45vw,20px); line-height: 1.2; letter-spacing: .025em; }
.pr-looks .pr-hero-card__element { margin: 0; font-size: 11px; letter-spacing: 0; }
.pr-looks .pr-hero-card.is-selected .pr-hero-card__caption { background: #17263b; color: #fffdf5; }
.pr-looks .pr-hero-card.is-focus, .pr-looks .pr-hero-card:focus-visible { outline: 3px solid #16869c; outline-offset: 4px; }
.pr-looks .iw-locker__body { bottom: 54px; overflow-y: auto; padding: 6px; margin-left: -6px; }
.pr-looks .pr-hero-grid, .pr-looks .pr-hero-detail, .pr-looks .pr-hero-status, .pr-looks .pr-hero-scope { flex-shrink: 0; }
.pr-looks .pr-hero-foot { position: sticky; bottom: 0; z-index: 3; background: #f7f4eaf5; padding-top: 6px; }
.pr-looks .pr-hero-foot .iw-btn { min-height: 44px; }
.pr-hero-detail__identity { display: inline-flex; align-items: center; gap: 8px; }
.pr-hero-detail__identity .pr-element-badge { width: 24px; height: 24px; }
.pr-hero-detail__identity b { font-size: 17px; }
.pr-hero-detail__kit { display: block; font-size: 12px; font-weight: 600; margin-top: 5px; }
.iw-ui[data-screen="locker"] .pr-dev-label { display: none; }
.pr-looks .iw-backbtn { min-width: 44px; min-height: 44px; }
.pr-looks .iw-name__input { min-height: 44px; font-size: 14px; }
/* The dedicated 3D studio already supplies the pale background. The old left
   scrim would wash out a preview placed below the roster on a portrait phone. */
.pr-looks:has(.pr-roster-art.is-3d) .iw-scrim-left { display:none; }
@media (max-height: 600px) and (orientation: landscape) {
  .pr-looks .iw-locker__body { display: grid; grid-template-rows: minmax(0,1fr) auto auto; overflow: visible; gap: 5px; }
  .pr-looks .pr-hero-grid { min-height: 0; grid-template-rows: repeat(2,minmax(74px,1fr)); overflow-y: auto; padding: 5px; gap: 7px; }
  .pr-looks .pr-hero-detail, .pr-looks .pr-hero-scope { display: none; }
  .pr-looks .pr-hero-foot { position: static; padding: 0; margin: 0; }
  .pr-looks .pr-hero-status { line-height: 14px; }
  .pr-looks .pr-hero-card { height: 100%; min-height: 74px; }
  .pr-looks .pr-hero-card__portrait { bottom: 34px; height: calc(100% - 34px); }
  .pr-looks .pr-hero-card[data-roster="kaze"] .pr-hero-card__portrait { object-position: center 18%; }
  .pr-looks .pr-hero-card__caption { min-height: 34px; padding: 3px 5px; flex-direction: column; align-items: flex-start; gap: 0; }
  .pr-hero-card__caption b { font-size: 13px; }
  .pr-looks .pr-hero-card__element { font-size: 10px; }
  .pr-looks .pr-hero-card__badge { top: 4px; left: 4px; width: 25px; height: 25px; padding: 3px; }
  .pr-looks .pr-hero-card__check { top: 4px; right: 4px; width: 20px; height: 20px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .pr-looks .iw-head { top: calc(10px + env(safe-area-inset-top,0px)); }
  .pr-looks .iw-locker__body { left: calc(12px + max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px))); right: calc(12px + max(env(safe-area-inset-right,0px),var(--safe-area-inset-right,0px))); top: 92px; width: auto; bottom: 46vh; gap: 6px; display: grid; grid-template-rows: minmax(0,1fr) auto auto; overflow: visible; }
  .pr-looks .pr-hero-grid { min-height: 0; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(100px,1fr)); gap: 7px; padding: 5px; overflow-y: auto; }
  .pr-looks .pr-hero-detail, .pr-looks .pr-hero-scope { display: none; }
  .pr-looks .pr-hero-foot { position: static; padding: 0; margin: 0; }
  .pr-looks .pr-hero-status { line-height: 14px; }
  .pr-looks .pr-hero-card { height: 100%; min-height: 100px; }
  .pr-looks .pr-hero-card__portrait { bottom: 38px; height: calc(100% - 38px); }
  .pr-looks .pr-hero-card__caption { min-height: 38px; flex-direction: column; gap: 1px; padding: 3px; }
  .pr-hero-card__caption b { font-size: 12px; }
  .pr-looks .pr-hero-card__element { font-size: 10px; }
  .pr-looks .pr-hero-card__badge { width: 23px; height: 23px; top: 3px; left: 3px; padding: 3px; }
  .pr-looks .pr-hero-card__check { width: 18px; height: 18px; top: 3px; right: 3px; }
  .pr-looks .pr-roster-art { top: calc(54vh + 64px); bottom: 40px; width: 82%; right: 9%; }
  .pr-looks .pr-hero-preview { top: calc(54vh + 8px); right: calc(12px + env(safe-area-inset-right,0px)); left: calc(12px + env(safe-area-inset-left,0px)); width: auto; }
  .pr-looks .iw-name { display: flex; align-items: center; gap: 8px; }
  .pr-looks .iw-name__label { font-size: 12px; margin: 0; }
  .pr-looks .iw-name__field { flex: 1; min-width: 0; }
}