/* The avatar creator (Pixi/Spine preview + generated category pills and option tiles). Dark, like the rest of
   the app: used by the player / night-player editor page (gtf/27_player_lobby.css lays the page out) and the
   account edit page. The pills and tiles are generated by app/javascript/avatar_creator/avatar_creator_ui.js. */

.avatar-editor-shell { background: var(--gtf-surface-1, #241F1A); border-radius: .75rem; box-sizing: border-box; color: var(--gtf-cream, #F6EFE2); max-width: 100%; min-width: 0; overflow: hidden; padding: 1rem; position: relative; width: 100%; }
turbo-frame#avatar-editor { display: block; max-width: 100%; min-width: 0; overflow-x: hidden; scroll-margin-top: .75rem; }
.avatar-editor-launcher { align-items: center; display: inline-flex; gap: .5rem; justify-content: center; }
.avatar-editor-launcher.is-loading { cursor: wait; opacity: .8; pointer-events: none; }
.avatar-editor-launcher__spinner { display: none; }
.avatar-editor-launcher.is-loading .avatar-editor-launcher__spinner,
.avatar-loading-spinner { animation: avatar-spin .75s linear infinite; border: 3px solid currentColor; border-radius: 999px; border-right-color: transparent; box-sizing: border-box; display: inline-block; height: 1.1rem; width: 1.1rem; }
.avatar-editor-loading { align-items: center; background: rgba(28, 24, 20, .92); color: var(--gtf-yellow, #F2C94C); display: flex; font-weight: 600; gap: .65rem; inset: 0; justify-content: center; position: absolute; z-index: 2; }
.avatar-editor-loading[hidden] { display: none; }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar-loading-spinner { animation-duration: 3s; } }
.avatar-editor-layout { display: grid; gap: 1rem; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); max-width: 100%; min-width: 0; width: 100%; }
.avatar-editor-layout > * { max-width: 100%; min-width: 0; }
.avatar-preview { align-items: center; background: var(--avatar-colour, #2A241E); border-radius: 30%; box-sizing: border-box; display: flex; height: 300px; justify-content: center; overflow: hidden; width: 100%; }
.avatar-preview canvas { display: block; height: auto; max-width: 100%; }
.avatar-creator-ui { color: var(--gtf-cream, #F6EFE2); min-width: 0; width: 100%; }

/* Category pills */
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; max-width: 100%; min-width: 0; width: 100%; }
.category-tab { background: #2A241E; border: 0; border-radius: 10px; color: #F6EFE2; cursor: pointer; flex: none; font-size: 16px; font-weight: 800; line-height: 1.25; min-height: 44px; padding: 10px 16px; white-space: nowrap; }
.category-tab:hover { background: #3A332B; }
.category-tab.active, .category-tab.active:hover { background: oklch(0.72 0.19 40); color: #1C1814; }
.category-lock { font-size: .75em; margin-left: .35rem; }

/* Option tiles */
.options-panel { min-width: 0; width: 100%; }
.options-list { align-content: start; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: min(50vh, 380px); max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-color: #3A332B transparent; scrollbar-width: thin; touch-action: pan-y; width: 100%; }
.option-item { align-items: center; background: #2A241E; border: 0; border-radius: 10px; box-sizing: border-box; color: #F6EFE2; cursor: pointer; display: flex; flex-direction: column; font: inherit; gap: 6px; justify-content: center; min-height: 92px; min-width: 0; padding: 12px 6px 10px; position: relative; text-align: center; }
.option-item:hover { background: #3A332B; }
.option-item.selected { box-shadow: inset 0 0 0 3px oklch(0.72 0.19 40); }
.option-item.locked { cursor: not-allowed; }
.option-item.locked:hover { background: #2A241E; }
.option-item.locked .option-thumb, .option-item.locked .option-label { opacity: .55; }
.option-thumb { align-items: center; background: #E9E0D2; border-radius: 8px; display: flex; flex: none; height: 56px; justify-content: center; overflow: hidden; position: relative; width: 56px; }
.option-thumb--none { background: #1C1814; color: #B8AC9C; font-size: 24px; }
.option-preview { height: 100%; object-fit: contain; width: 100%; }
.option-lock { align-items: center; background: rgba(28, 24, 20, .82); border-radius: 999px; color: #F6EFE2; display: flex; font-size: .8rem; height: 1.5rem; justify-content: center; position: absolute; right: 2px; top: 2px; width: 1.5rem; }
.option-label { font-size: 16px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.option-status { color: #B8AC9C; font-family: var(--gtf-mono, "DM Mono", monospace); font-size: 13px; }
.options-loading, .avatar-editor-status { color: #B8AC9C; padding: 1rem; text-align: center; }
.avatar-editor-status:empty { padding: 0; }
.avatar-editor-error { color: oklch(0.72 0.19 20); }
@media (max-width: 800px) {
  .avatar-editor-shell { padding: .75rem; }
  .avatar-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .avatar-preview { height: 230px; }
  /* Keep canvas inside the preview — max-width:none was stretching phone layouts after save */
  .avatar-preview canvas { flex: 0 0 auto; max-width: 100%; height: auto; }
}