/* A saved crop has the same visible proportions on every profile card. */
.player-trading-card:not(.draft-trading-card) .player-card-photo {
  box-sizing: content-box;
  height: auto;
  aspect-ratio: 4 / 3;
}

.player-card-photo img {
  transform: none;
}

/* Compact draft cards retain their height while showing the full crop. */
.draft-trading-card .player-card-photo img {
  object-fit: contain;
}

.admin-photo-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 3;
  margin: 12px auto 20px;
  overflow: hidden;
  border-radius: 8px;
  background: #10251b;
  box-shadow: 0 0 0 2px var(--line);
}

.admin-photo-frame .admin-photo-preview,
#playerPhotoCropCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #10251b;
  filter: saturate(1.3) contrast(1.12) brightness(1.03);
  transform: none;
}

.admin-photo-frame .admin-photo-preview {
  object-fit: cover;
}

#playerPhotoCropCanvas {
  touch-action: none;
  cursor: grab;
}

#playerPhotoCropCanvas:active {
  cursor: grabbing;
}

.admin-photo-form .admin-photo-controls {
  min-width: 0;
  margin: 16px 0;
  padding: 12px;
}

.admin-photo-controls label {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.admin-photo-controls input[type="range"] {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}

.admin-photo-controls output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-photo-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-photo-presets button {
  flex: 1 1 110px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #122b20;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.admin-photo-controls input:focus-visible,
.admin-photo-presets button:focus-visible,
#playerPhotoCropCanvas:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.admin-photo-presets button:disabled,
.admin-photo-form .text-button:disabled {
  opacity: .5;
  cursor: default;
}

.admin-photo-frame[hidden],
.admin-photo-frame > [hidden],
.admin-photo-controls[hidden] {
  display: none;
}