[data-name-colour]{color:var(--player-name-colour)!important} .name-colour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}.name-colour-card{border:1px solid var(--yap-border,#555775);background:var(--yap-surface,#24263d);border-radius:12px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.name-colour-sample{display:flex;flex-direction:column;gap:5px;min-width:0}.name-colour-sample strong{font-size:18px;overflow-wrap:anywhere}.name-colour-sample small{color:var(--yap-muted,#bcc6dc)}.name-colour-card .store-title-price{grid-column:1}.name-colour-card>button{grid-column:2;grid-row:1/3}.name-colour-card .banner-admin{grid-column:1/-1}.badge-unlock{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:100001;display:flex;align-items:center;gap:16px;padding:18px 22px;max-width:calc(100vw - 32px);width:max-content;box-sizing:border-box;border:1px solid #ffdc79;border-radius:18px;background:#202034;color:white;box-shadow:0 0 50px #ffce5c35;animation:badge-arrive .65s cubic-bezier(.2,1.5,.5,1)}.badge-unlock img{width:58px;height:58px;animation:badge-wiggle 1.8s ease-in-out infinite}.badge-unlock small{display:block;color:#ffdc79;text-transform:uppercase;font-weight:800;letter-spacing:.1em;margin-bottom:6px}.badge-unlock strong{font-size:21px}.badge-unlock button{background:transparent;border:0;color:white;font-size:26px;padding:5px;cursor:pointer}@keyframes badge-arrive{from{opacity:0;transform:translate(-50%,70px) scale(.85)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes badge-wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.08)}}@media(prefers-reduced-motion:reduce){.badge-unlock,.badge-unlock img{animation:none}}
.name-colour-card>button{min-height:36px;padding:8px 13px;border:0;border-radius:8px;background:var(--yap-primary,#2ecc98);color:#10151f;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.name-colour-card>button:disabled{opacity:.6;cursor:default}.name-colour-card button:focus-visible{outline:2px solid #fff;outline-offset:3px}.name-colour-card:has(>button:disabled){border-color:var(--yap-border,#555775)}

.profile-redesign .name-colour-card .store-title-price{text-align:left;font-size:12px}

.owned-name-colours{margin-top:18px}.owned-name-colours>span{display:block;font-size:12px;font-weight:700;color:var(--yap-muted,#bcc6dc);margin-bottom:10px}.name-colour-swatches{display:flex;flex-wrap:wrap;gap:10px}.profile-redesign .name-colour-swatch{width:38px;height:38px;min-height:38px;padding:0;border:2px solid transparent;border-radius:9px;background:var(--swatch-colour);color:#17182b;font-size:21px;font-weight:900;cursor:pointer;box-shadow:inset 0 0 0 1px #0002}.profile-redesign .name-colour-swatch[aria-pressed=true]{outline:2px solid var(--yap-text,#fff);outline-offset:3px}.profile-redesign .name-colour-swatch:focus-visible{outline:3px solid var(--yap-primary,#34d399);outline-offset:3px}.profile-redesign .name-colour-swatch:disabled{cursor:wait;opacity:.65}#profileNameColourMessage:empty{display:none}

[data-name-colour][data-name-effect=letters]{color:var(--yap-text,#fff)!important}[data-name-effect=letters]>span{display:inline;-webkit-text-fill-color:currentColor}
