/* avatar screen (Avatar board): the preview on the left, your options on the right */

.av-top { height: 36px; padding: 0 16px; }

/* the preview: you, in three poses */
.av-left { position: absolute; left: 48px; top: 60px; width: 262px; bottom: 21px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.av-stage { position: relative; flex: 1; min-height: 0; border-radius: 10px; border: 2px solid var(--ink); overflow: hidden; }
.av-stage .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: #EFE3CE; border-top: 2px solid var(--ink); }
.av-stage .pose { position: absolute; left: 50%; bottom: 6px; margin-left: -75px; width: 150px; display: flex; justify-content: center; }
.av-who {
  position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 2px; border-radius: 18px; background: var(--card); border: 2px solid var(--ink);
}
.av-who > span:last-child { min-width: 0; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-who.narrow { max-width: calc(100% - 100px); }
.av-saved {
  position: absolute; right: 8px; top: 12px; height: 26px; padding: 0 10px; display: flex; align-items: center; gap: 6px;
  border-radius: 13px; background: #E3EEE8; border: 2px solid var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.av-poses { display: flex; gap: 6px; }
.av-poses button {
  flex: 1; min-width: 0; height: 30px; padding: 0 4px; border-radius: 15px; border: 2px solid var(--ink); background: #FFFFFF; color: var(--ink);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.av-poses button.on { background: var(--honey); box-shadow: 0 2px 0 var(--ink); }

/* the options, in three tabs (hair · face · clothes), so every choice has room (owner, 4 Oct 2026) */
.av-right { position: absolute; left: 322px; right: 16px; top: 60px; bottom: 21px; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.av-right .label { line-height: 1.35; }
.av-tabs { display: flex; gap: 6px; flex: none; }
.av-tabs button {
  flex: 1; min-width: 0; height: 34px; padding: 0 6px; border-radius: 17px; border: 2px solid var(--ink); background: #FFFFFF; color: var(--ink);
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.av-tabs button.on { background: var(--honey); box-shadow: 0 2px 0 var(--ink); }
.av-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.av-grp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.av-row { display: flex; align-items: center; gap: 6px; }
.av-chip {
  position: relative; width: 50px; height: 50px; flex: none; padding: 0; border-radius: 25px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #D8CDBB;
}
.av-chip.on { border: 2.5px solid var(--ink); box-shadow: 0 0 0 3px var(--honey); }
.av-chip.sm { width: 44px; height: 44px; border-radius: 22px; } /* eyes and extras */
.av-lock {
  position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 9px; background: var(--card);
  border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.av-swatch {
  position: relative; width: 34px; height: 34px; flex: none; padding: 0; border-radius: 17px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #D8CDBB;
}
.av-swatch.on { border: 2.5px solid var(--ink); box-shadow: 0 0 0 3px var(--honey); }
.av-swatch i { width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--ink); display: block; }
/* any colour: a rainbow with a +, or the picked colour once chosen */
.av-any { cursor: pointer; }
.av-any b { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 8px; background: #FFFFFF; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* the wardrobe scrolls sideways once it holds more than fits */
.av-wardrobe { gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 3px; margin: -3px -3px 0; }
.av-shopchip {
  width: 50px; height: 50px; flex: none; padding: 0; border-radius: 25px; border: 2px dashed #B8AA95; background: transparent; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1;
}
.av-msg { min-height: 14px; margin-top: -2px; font-size: 11px; font-weight: 800; color: #B55A3C; line-height: 1.2; }
.av-any b[hidden] { display: none; }