/* Editor de avatar (D62): três abas, pré-visualização redonda, recorte. Cores só por token (tokens.css, --draw-N e os do
   cartão `.paper`); alvos de toque >= --touch-min. Serve o lobby do celular (tema de jogo) e o perfil (tema claro). */
.avatar-editor { padding: var(--space-4); border-radius: var(--radius-panel, var(--radius-md)); background: var(--color-surface); border: 1px solid var(--color-border); text-align: left; }
.lobby-phone .avatar-editor { width: 100%; padding: 0; border: 0; background: none; }
.avatar-editor-trigger { width: 100%; }
.avatar-editor-body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.avatar-editor-body[hidden] { display: none; }

.avatar-editor-preview { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.avatar-editor-preview .avatar { position: relative; }
.avatar-editor .avatar img.placed { position: absolute; max-width: none; object-fit: fill; }

.avatar-tabs { display: flex; gap: var(--space-2); }
.avatar-tabs [role=tab] { flex: 1; min-height: var(--touch-min); }
.avatar-tabs [role=tab][aria-selected=true] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.avatar-editor :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.draw-canvas { display: block; width: 100%; max-width: 24rem; aspect-ratio: 1; margin: 0 auto; touch-action: none; cursor: crosshair; background: var(--draw-1); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md); }

.avatar-editor fieldset { border: 0; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.avatar-editor legend { font-weight: 700; margin-bottom: var(--space-1); padding: 0; }
.swatch, .size-pick { position: relative; display: inline-flex; margin: 0; width: var(--touch-min); height: var(--touch-min); align-items: center; justify-content: center; cursor: pointer; }
.swatch input, .size-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch-dot { width: 2rem; height: 2rem; border-radius: var(--radius-round); background: var(--swatch); border: 2px solid var(--color-border-strong); }
.swatch input:checked + .swatch-dot { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.swatch input:focus-visible + .swatch-dot, .size-pick input:focus-visible + .size-dot { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.size-dot { width: var(--dot); height: var(--dot); border-radius: var(--radius-round); background: var(--color-text); }
.size-pick input:checked + .size-dot { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.avatar-tools, .avatar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.avatar-tools button[aria-pressed=true] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.avatar-actions button { flex: 1 1 10rem; }

/* Recorte: moldura quadrada com a imagem posicionada em porcentagem e uma máscara redonda (o que sobra fora do círculo é cortado só no ranking). */
.crop { margin-top: var(--space-3); }
.crop-stage { position: relative; width: 100%; max-width: 24rem; aspect-ratio: 1; margin: 0 auto; overflow: hidden; touch-action: none; cursor: grab; background: var(--color-surface-2); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md); }
.crop-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; border-radius: var(--radius-round); box-shadow: 0 0 0 100vmax var(--scrim); pointer-events: none; }
.crop input[type=range] { width: 100%; max-width: 24rem; min-height: var(--touch-min); display: block; margin: 0 auto; }

.avatar-message { min-height: 1.5em; margin: var(--space-2) 0 0; font-weight: 600; }
.avatar-message.is-error { color: var(--color-error); }

/* No perfil (backoffice, D69) valem o botão "gordo" e as variantes de backoffice.css; no jogo vale o `.go` de components.css. */
.office .avatar-editor, .office section.avatar-editor.paper { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.office .avatar-editor-body { margin-top: var(--space-2); }
.office .avatar-editor-preview .avatar { --avatar-ring: var(--hilite); box-shadow: 0 var(--lift-button) 0 var(--hilite-shade); }
.office .avatar-tabs [role=tab] { --btn-bg: var(--chip); --btn-fg: var(--game-text); --btn-shade: var(--chip-shade); padding-inline: var(--space-2); }
.office .avatar-tabs [role=tab][aria-selected=true] { --btn-bg: var(--hilite); --btn-fg: var(--on-hilite); --btn-shade: var(--hilite-shade); background: var(--btn-bg); color: var(--btn-fg); border: 0; }
.office .avatar-tools button { --btn-bg: var(--chip); --btn-fg: var(--game-text); --btn-shade: var(--chip-shade); }
.office .avatar-tools button[aria-pressed=true] { --btn-bg: var(--secondary); --btn-shade: var(--secondary-shade); background: var(--btn-bg); color: var(--btn-fg); border: 0; }
.avatar-actions { gap: var(--space-4); padding-bottom: var(--space-2); }
.live.game .avatar-editor button.go { width: 100%; margin: 0; }
.live.game .avatar-actions button.go { flex: 1 1 100%; }