.trainer-portrait {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #dae5c3;
  border: 3px solid #627b72;
  border-radius: 14px;
  padding: 5px;
}
.trainer-portrait[hidden] {
  display: none;
}
.trainer-portrait[data-kind='pixel'] {
  image-rendering: pixelated;
  background: #dceacb;
}
.portrait-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0;
}
.portrait-banner[hidden] {
  display: none;
}
.portrait-banner strong {
  font-size: 25px;
}
#gym-leader-portrait {
  width: 104px;
  height: 104px;
}
#atlas-leader-portrait {
  float: right;
  width: 68px;
  height: 68px;
  margin: 0 0 8px 8px;
}
#atlas-gym {
  display: flow-root;
}
#atlas-gym[hidden] {
  display: none;
}
#portrait-dialog {
  width: min(640px, calc(100vw - 24px));
  background: #f8f1d4;
}
#portrait-dialog h2 {
  padding-right: 26px;
}
#portrait-dialog p {
  line-height: 1.4;
}
#portrait-dialog button {
  min-height: 44px;
}
.portrait-upload {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
#portrait-file {
  width: 100%;
  max-width: 100%;
  font: inherit;
}
#portrait-canvas {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin: 12px auto;
  border: 3px solid #627b72;
}
#portrait-crop label {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
#portrait-crop input {
  width: 100%;
  min-height: 35px;
}
.portrait-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
#portrait-result {
  padding: 16px;
  border: 2px solid #879c75;
  background: #fffbea;
  margin: 12px 0;
}
#portrait-preview {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
#portrait-remove {
  margin-top: 12px;
}
@media (max-width: 700px) {
  .portrait-actions button {
    width: 100%;
  }
}