/* $APE PFP creator — inherits tokens, fonts and .btn from styles.css */

.creator {
  /* the two columns are content-sized, so the wrapper is sized to match them
     exactly -- that keeps the header flush with the composition below it */
  --stage: 460px;
  --controls: 278px;   /* 4 swatches at 62px + 3 gaps at 10px */
  --colgap: 54px;
  --padx: 24px;

  /* box-sizing is border-box globally, so the padding has to be added back in
     or the columns have less room than they need and wrap */
  max-width: calc(var(--stage) + var(--colgap) + var(--controls) + var(--padx) * 2);
  margin: 0 auto;
  padding: 40px var(--padx) 100px;
}

.creator-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 44px;
}

.creator-head h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dim);
}

.back {
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.back:hover { color: var(--dim); }

/* equal 1fr columns left the controls ~211px of dead space, dragging the
   visible composition off-centre; size each column to its content instead
   and centre the pair. align-items:center squares the shorter left column
   against the taller controls. */
.creator-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--colgap);
  flex-wrap: wrap;
}

.stage { flex: 0 0 auto; width: var(--stage); max-width: 100%; }

#controls {
  flex: 0 0 auto;
  width: var(--controls);
  max-width: 100%;
}

/* last trait's margin would break the vertical centring */
#controls .trait:last-child { margin-bottom: 0; }

/* ---------- preview ---------- */

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--bg);
}

/* every layer is a pre-registered 1000x1000 plate, so they just stack */
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}

.frame img[hidden] { display: none; }

.stage-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.stage-actions .btn { flex: 1 1 auto; min-width: 0; }

/* ---------- trait controls ---------- */

.trait { margin-bottom: 30px; }

.trait > h2 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 400;
}

.opts { display: flex; gap: 10px; flex-wrap: wrap; }

.opt {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color .15s ease, color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.opt:hover { border-color: var(--dim); color: var(--fg); }

.opt[aria-pressed="true"] {
  border-color: var(--fg);
  color: var(--fg);
}

/* thumbnails are the full plate scaled down, so crop to the interesting part */
.opt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.opt.none span { line-height: 60px; }

@media (max-width: 820px) {
  .creator-grid { gap: 40px; }
  .stage { width: min(var(--stage), 100%); }
  #controls { display: flex; flex-direction: column; align-items: center; }
  .opts { justify-content: center; }
  .trait { width: 100%; text-align: center; }
}