.qb-avatar { --qb-plum: #2f1d37; --qb-lilac: #e9d9f3; --qb-orange: #f58146; font-family: "Trebuchet MS", system-ui, sans-serif; color: var(--qb-plum); }
.qb-avatar *, .qb-avatar *::before, .qb-avatar *::after { box-sizing: border-box; }
.qb-avatar-launcher { position: fixed; z-index: 80; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 104px; min-height: 44px; border: 0; padding: 0; background: transparent; color: #2f1d37; box-shadow: none; display: flex; flex-direction: column; align-items: center; cursor: pointer; font: 700 12px/1.3 "Trebuchet MS", system-ui, sans-serif; }
.qb-avatar-launcher canvas { display: block; width: 100px; height: 150px; }
.qb-avatar-launcher:hover { background: transparent; }
.qb-avatar-launcher:active { cursor: grabbing; }
.qb-avatar-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.qb-avatar-launcher { touch-action: none; }
.qb-avatar-launcher:focus-visible, .qb-avatar button:focus-visible, .qb-avatar input:focus-visible { outline: 3px solid #8d4ca5; outline-offset: 3px; }
.qb-avatar-launcher[aria-busy="true"] canvas { opacity: .55; }
.qb-avatar-fallback { padding: 14px 8px; }
body[data-game-page] .qb-avatar-launcher { width: 100px; height: 144px; min-height: 44px; padding: 0; bottom: max(9px, env(safe-area-inset-bottom)); right: max(9px, env(safe-area-inset-right)); }
body[data-game-page] .qb-avatar-launcher canvas { width: 96px; height: 144px; }
body[data-game-page] .qb-avatar-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.qb-avatar-dialog-open { overflow: hidden; }
html.has-visitor-stats.qb-avatar-dialog-open, html.qb-avatar-dialog-open body.has-visitor-stats { overflow: hidden; }
.qb-avatar-dialog { position: fixed; width: min(850px, calc(100% - 28px)); max-height: min(92dvh, 880px); padding: 24px; border: 1px solid #e6d5ed; border-radius: 28px; background: #fffaf4; color: var(--qb-plum); box-shadow: 0 20px 80px #28182c4a; overflow: auto; overscroll-behavior: contain; }
.qb-avatar-dialog::backdrop { background: #2412299e; backdrop-filter: blur(3px); }
.qb-avatar-header { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 18px; }
.qb-avatar-header h2 { font-size: 28px; margin: 3px 0 0; line-height: 1.1; }
.qb-avatar-eyebrow { margin: 0; font-size: 12px; color: #805588; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.qb-avatar-close { flex: none; border: 0; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; color: var(--qb-plum); background: var(--qb-lilac); font-size: 20px; }
.qb-avatar-editor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
.qb-avatar-preview { align-self: start; position: sticky; top: 0; border: 0; padding: 10px; background: transparent; text-align: center; }
.qb-avatar-preview canvas { display: block; width: 100%; height: auto; }
.qb-avatar-preview p { margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: #78587e; }
.qb-avatar-options { min-width: 0; }
.qb-avatar-options fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.qb-avatar-options legend { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.qb-avatar-outfit-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qb-avatar-outfit-controls fieldset { margin-bottom: 8px; }
.qb-avatar-outfit-hint { margin-bottom: 18px; }
.qb-avatar-clothing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qb-clothing-option { min-width: 44px; min-height: 108px; border: 1px solid #e1cde8; border-radius: 13px; padding: 5px 4px 7px; background: #fff; color: var(--qb-plum); cursor: pointer; font: 700 11px/1.3 "Trebuchet MS", system-ui, sans-serif; overflow-wrap: anywhere; }
.qb-clothing-option canvas { display: block; width: 100%; height: 78px; object-fit: contain; margin-bottom: 4px; }
.qb-clothing-option[aria-pressed="true"] { border-color: #875095; background: var(--qb-lilac); box-shadow: inset 0 0 0 1px #875095; }
.qb-clothing-none { display: grid; place-items: center; }
.qb-avatar-hint { margin: -3px 0 9px; font-size: 12px; color: #78587e; }
.qb-avatar-segments { display: flex; gap: 8px; }
.qb-avatar-segments label { flex: 1; position: relative; cursor: pointer; }
.qb-avatar-segments input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qb-avatar-segments span { display: block; min-height: 44px; border: 1px solid #decbe6; border-radius: 13px; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 700; background: #fff; }
.qb-avatar-segments input:checked + span { border-color: #875095; background: var(--qb-lilac); box-shadow: inset 0 0 0 1px #875095; }
.qb-avatar-segments input:focus-visible + span { outline: 3px solid #8d4ca5; outline-offset: 3px; }
.qb-avatar-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.qb-face-option { min-width: 44px; border: 1px solid #e1cde8; border-radius: 13px; padding: 5px 4px 7px; background: #fff; color: var(--qb-plum); cursor: pointer; font: 700 11px/1.25 "Trebuchet MS", system-ui, sans-serif; }
.qb-face-option canvas { display: block; width: 100%; height: 73px; object-fit: contain; margin-bottom: 4px; }
.qb-face-option[aria-pressed="true"] { border-color: #875095; background: var(--qb-lilac); box-shadow: inset 0 0 0 1px #875095; }
.qb-avatar-hairstyles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.qb-hair-option { min-width: 44px; min-height: 44px; border: 1px solid #e1cde8; border-radius: 13px; padding: 5px 4px 7px; background: #fff; color: var(--qb-plum); cursor: pointer; font: 700 11px/1.3 "Trebuchet MS",system-ui,sans-serif; overflow-wrap: anywhere; }
.qb-hair-option canvas { display: block; width: 100%; height: 86px; object-fit: contain; margin-bottom: 4px; }
.qb-hair-option[aria-pressed="true"] { border-color: #875095; background: var(--qb-lilac); box-shadow: inset 0 0 0 1px #875095; }
.qb-avatar-mouths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.qb-mouth-option { min-width: 44px; min-height: 68px; border: 1px solid #e1cde8; border-radius: 13px; padding: 7px 5px; background: #fff; color: var(--qb-plum); cursor: pointer; font: 700 11px/1.3 "Trebuchet MS",system-ui,sans-serif; }
.qb-mouth-option img { display: block; width: 100%; height: 30px; object-fit: contain; margin-bottom: 5px; }
.qb-mouth-option[aria-pressed="true"] { border-color: #875095; background: var(--qb-lilac); box-shadow: inset 0 0 0 1px #875095; }
.qb-credits-summary { display: flex; flex-direction: column; gap: 3px; color: var(--qb-plum); }
.qb-credits-summary strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.qb-credits-summary span { font-size: 12px; }
.qb-credits-play { display: inline-block; color: #794488; font: 700 12px/1.5 "Trebuchet MS",system-ui,sans-serif; }
.qb-avatar-store-link { display: block; margin-top: 9px; color: #794488; font: 700 12px/1.5 "Trebuchet MS",system-ui,sans-serif; text-decoration: underline; }
.qb-avatar-clothing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qb-avatar-outfit-controls { grid-template-columns: minmax(0, 1fr); }
.qb-avatar-options fieldset[hidden] { display: none; }
.qb-clothing-price { display: block; margin-top: 4px; font-size: 10px; color: #794488; }
.qb-clothing-option[aria-busy="true"] { opacity: .6; }
.qb-nav-credits { margin-left: 8px; font-size: 11px; color: #794488; }
.qb-avatar-tones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.qb-skin-option { position: relative; width: 44px; height: 44px; border: 3px solid #fff; outline: 1px solid #dfcfe4; border-radius: 50%; background: var(--qb-skin-color); cursor: pointer; }
.qb-skin-option[aria-pressed="true"] { outline: 3px solid #875095; }
.qb-skin-option[aria-pressed="true"]::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; color: white; text-shadow: 0 1px 3px #000, 1px 0 3px #000; font-size: 21px; font-weight: 700; }
.qb-avatar-custom { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: #78587e; }
.qb-avatar-custom input { width: 56px; height: 44px; padding: 3px; border: 1px solid #dfcfe4; border-radius: 10px; background: #fff; cursor: pointer; }
.qb-avatar-status { min-height: 32px; margin: 0 0 10px; color: #78587e; font-size: 12px; line-height: 1.45; }
.qb-avatar-done { min-height: 46px; width: 100%; border: 0; border-radius: 14px; padding: 12px 20px; background: var(--qb-plum); color: #fffaf4; cursor: pointer; font: 700 14px/1.5 "Trebuchet MS", system-ui, sans-serif; }
.qb-avatar-download { min-height: 46px; width: 100%; margin-bottom: 10px; border: 1px solid #875095; border-radius: 14px; padding: 12px 16px; color: var(--qb-plum); background: var(--qb-lilac); cursor: pointer; font: 700 14px/1.5 "Trebuchet MS",system-ui,sans-serif; }
@media (max-width: 620px) {
  body[data-game-page] .qb-avatar-launcher { right: max(68px, calc(env(safe-area-inset-right, 0px) + 62px)); width: 80px; height: 114px; }
  body[data-game-page] .qb-avatar-launcher canvas { width: 76px; height: 114px; }
  .qb-avatar-dialog { width: calc(100% - 16px); padding: 18px 14px; border-radius: 22px; max-height: 94dvh; }
  .qb-avatar-header { margin-bottom: 12px; }
  .qb-avatar-header h2 { font-size: 24px; }
  .qb-avatar-editor { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .qb-avatar-preview { position: static; display: flex; justify-content: center; align-items: center; min-height: 190px; padding: 6px 14px; gap: 22px; }
  .qb-avatar-preview canvas { width: 120px; height: 180px; flex: none; }
  .qb-avatar-preview p { max-width: 110px; font-size: 14px; }
  .qb-avatar-faces { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .qb-face-option canvas { height: 64px; }
  .qb-avatar-launcher { width: 92px; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .qb-avatar-launcher canvas { width: 88px; height: 132px; }
  .qb-hair-option canvas { height: 70px; }
  .qb-avatar-hairstyles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-avatar-outfit-controls { gap: 8px; }
  .qb-avatar-clothing { gap: 6px; }
  .qb-clothing-option { min-height: 98px; }
  .qb-clothing-option canvas { height: 68px; }
}
@media (max-width: 340px) { .qb-avatar-outfit-controls { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .qb-avatar-launcher:hover { transform: none; } }