/* Avatar editor */
.avatar-editor {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}

.avatar-stage {
    align-items: center;
    background:
        radial-gradient(ellipse at 50% 85%, rgba(94, 145, 204, 0.18), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #eef5fd 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 86px;
}

.avatar-canvas {
    aspect-ratio: 3 / 4;
    cursor: grab;
    display: block;
    max-height: 62vh;
    width: 100%;
}

.avatar-canvas:active { cursor: grabbing; }
.stage-hint { color: var(--muted); font-size: 13px; margin: 0; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.avatar-panels { display: grid; gap: 22px; min-width: 0; }

.panel-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

.body-map-row {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 16px;
}

/* The body laid out like the character facing you (its right arm on your left). */
.body-map {
    display: grid;
    gap: 4px;
    grid-template-areas:
        ".    head  head  ."
        "rarm torso torso larm"
        "rarm torso torso larm"
        ".    rleg  lleg  .";
    grid-template-columns: 38px 38px 38px 38px;
    grid-template-rows: 46px 38px 38px 76px;
}

.body-part {
    background: var(--part, #ccc);
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12), inset 0 4px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.12s ease;
}

.body-part span {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.body-part:hover { transform: scale(1.04); }
.body-part[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--brand), inset 0 -6px 0 rgba(0, 0, 0, 0.12); z-index: 1; }
.body-part.head { border-radius: 14px; grid-area: head; justify-self: center; width: 60px; }
.body-part.torso { grid-area: torso; }
.body-part.right-arm { grid-area: rarm; }
.body-part.left-arm { grid-area: larm; }
.body-part.right-leg { grid-area: rleg; }
.body-part.left-leg { grid-area: lleg; }

.selected-part { color: var(--muted); margin: 0 0 10px; }
.selected-part strong { color: var(--ink); }

.palette {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    max-width: 420px;
}

.palette-swatch {
    aspect-ratio: 1;
    background: var(--swatch);
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 9px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease;
}

.palette-swatch:hover { transform: scale(1.1); }
.palette-swatch[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--brand); }

.custom-color {
    align-items: center;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-weight: bold;
    gap: 10px;
    margin-top: 12px;
}

.custom-color input { border: 0; cursor: pointer; height: 34px; padding: 0; width: 46px; }

.presets { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.preset-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.preset {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font: bold 14px Arial, sans-serif;
    gap: 8px;
    padding: 3px 14px 3px 3px;
}

.preset:hover { background: var(--wash); }

.face-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    margin-top: 14px;
}

.face-option {
    align-items: center;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: bold 14px var(--display);
    gap: 4px;
    padding: 8px;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.face-option:hover { transform: translateY(-2px); }
.face-option[aria-checked="true"] { background: var(--wash); border-color: var(--brand); }
.face-option canvas { max-width: 100%; }

.tshirt-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    margin-top: 14px;
}

.tshirt-option {
    align-items: center;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: bold 13px Arial, sans-serif;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.tshirt-option:hover { transform: translateY(-2px); }
.tshirt-option[aria-checked="true"] { background: var(--wash); border-color: var(--brand); }
.tshirt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The shirt on a square of the torso color, like on the character. */
.tshirt-swatch, .tshirt-none {
    aspect-ratio: 1;
    background: var(--torso, #0D69AC);
    border-radius: 8px;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12);
    display: block;
    width: 100%;
}

.tshirt-swatch img { display: block; height: 100%; object-fit: contain; width: 100%; }
.tshirt-none { background-image: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.75) 46% 54%, transparent 54%); }

.palette-swatch:focus-visible,
.tshirt-option:focus-visible,
.body-part:focus-visible,
.face-option:focus-visible,
.preset:focus-visible {
    outline: 3px solid #e7b500;
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .avatar-editor { grid-template-columns: minmax(0, 1fr); }
    .avatar-stage { position: static; }
    .avatar-canvas { max-height: 420px; width: auto; }
}

@media (max-width: 520px) {
    .body-map-row { grid-template-columns: minmax(0, 1fr); }
    .body-map { justify-self: center; }
}

/* Hats: a little head wearing it */
.hat-swatch { background: #eef3f9; }
.hat-swatch img { width: 100%; height: 100%; object-fit: contain; }
.hat-option .tshirt-none { background-color: #c9d3df; }