/* Base accessory rules — positioned inside .robot-body
   px values are referenced to --doll-scale: 1.5 (original tuning).
   When --doll-scale changes (e.g. to 1.25), all accessories scale proportionally. */
.accessory {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.accessory.hidden-by-preview {
    display: none !important;
}

/* skin tones are applied to the doll-image src, not rendered as overlays */
.accessory-doll_male_ton_1,
.accessory-doll_male_ton_2,
.accessory-doll_female_ton_1,
.accessory-doll_female_ton_2 {
    display: none !important;
}

.accessory img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* clothing layer below hair */
.accessory-man_shit_1 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(64px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_shit_2 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_emo_jaket {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_jeans_1 {
    top: calc(111px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_jeans_2 {
    top: calc(105px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_jeans_3 {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_emo_pants {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(49px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-robo_part_1 {
    top: calc(75px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(84px * var(--doll-scale) / 1.5);
    z-index: 6;
}

/* cut a rectangular hole on doll-image where robo-part sits */
:is(.robot-body, .preview-robot):has(.accessory-robo_part_1) .doll-image {
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 44%, transparent 44%, transparent 100%);
    mask-image: linear-gradient(180deg, black 0%, black 44%, transparent 44%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.accessory-man_kedy_1 {
    top: calc(167px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_turtleneck_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_turtleneck_2 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_top_1 {
    top: calc(81px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(31px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_sweater_unarium_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-man_sweater_unarium_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_jeans_1 {
    top: calc(107px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(43px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_skirt_1 {
    top: calc(101px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_skirt_2 {
    top: calc(103px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_krossy_1 {
    top: calc(164px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_krossy_2 {
    top: calc(164px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_trousers_1 {
    top: calc(105px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 3;
}

/* trousers/skirt go above sweater/turtleneck when both worn */
.robot-body:has(.accessory-girl_sweater_1) .accessory-girl_trousers_1,
.preview-robot:has(.accessory-girl_sweater_1) .accessory-girl_trousers_1,
.robot-body:has(.accessory-girl_turtleneck_1) .accessory-girl_trousers_1,
.preview-robot:has(.accessory-girl_turtleneck_1) .accessory-girl_trousers_1,
.robot-body:has(.accessory-girl_turtleneck_1) .accessory-girl_skirt_1,
.preview-robot:has(.accessory-girl_turtleneck_1) .accessory-girl_skirt_1 {
    z-index: 5;
}

.robot-body:has(.accessory-girl_turtleneck_2) .accessory-girl_skirt_1,
.preview-robot:has(.accessory-girl_turtleneck_2) .accessory-girl_skirt_1 {
    top: calc(100px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.robot-body:has(.accessory-girl_sweater_unarium_1) .accessory-girl_skirt_2,
.preview-robot:has(.accessory-girl_sweater_unarium_1) .accessory-girl_skirt_2 {
    top: calc(112px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_sweater_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 54%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_2 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_bomber_1 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_sweater_2 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_boots_1 {
    top: calc(157px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_2 {
    top: calc(166px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(46px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_3 {
    top: calc(162px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(50px * var(--doll-scale) / 1.5);
    z-index: 5;
}

/* ===== Diamond-encrusted boots: continuous shimmer (sun-bunny sweep) ===== */
.accessory-girl_boots_4 {
    top: calc(144px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(40px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

/* boots go behind trousers when both worn */
.robot-body:has(.accessory-girl_trousers_1) .accessory-girl_boots_4,
.preview-robot:has(.accessory-girl_trousers_1) .accessory-girl_boots_4 {
    z-index: 3;
}

/* dress goes above diamond boots */
.robot-body:has(.accessory-girl_boots_4) .accessory-girl_dress_1,
.preview-robot:has(.accessory-girl_boots_4) .accessory-girl_dress_1 {
    z-index: 6;
}


/* Star-shaped sparkle particles — "+ cross" with glowing center */
.accessory-girl_boots_4 .diamond-sparkle,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle {
    position: absolute;
    width: var(--star-size, 4px);
    height: var(--star-size, 4px);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 1) 0%,
            rgba(220, 240, 255, 0.6) 35%,
            rgba(180, 220, 255, 0) 70%);
    border-radius: 50%;
    animation-name: diamondParticle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity, transform;
}

/* + cross arms through pseudo-elements on the sparkle */
.accessory-girl_boots_4 .diamond-sparkle::before,
.accessory-girl_boots_4 .diamond-sparkle::after,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::before,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.accessory-girl_boots_4 .diamond-sparkle::before,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::before {
    width: calc(var(--star-size, 4px) * 2.4);
    height: 1px;
}

.accessory-girl_boots_4 .diamond-sparkle::after,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::after {
    width: 1px;
    height: calc(var(--star-size, 4px) * 2.4);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 100%);
}

@keyframes diamondParticle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.4) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(45deg);
    }
}

.accessory-man_sport_pants_1 {
    top: calc(108px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 6;
}


.accessory-man_hoodie_1 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 7;
}


.accessory-man_denim_jacket_1 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 7;
}


:is(.robot-body, .preview-robot):has(.accessory-man_denim_jacket_1) .accessory-man_hair_2 {
    z-index: 8;
}

.accessory-man_sneakers_1 {
    top: calc(158px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-man_sneakers_2 {
    top: calc(160px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(55px * var(--doll-scale) / 1.5);
    z-index: 5;
}

:is(.robot-body, .preview-robot):has(.accessory-man_jeans_1) .accessory-man_sneakers_2 {
    z-index: 9;
}


.accessory-man_boots_1 {
    top: calc(157px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-man_boots_2 {
    top: calc(162px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(62px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}


/* beard sits on the face — z-index 2.5 so it overlays the chin but stays below hair */
.accessory-man_beard_1 {
    top: calc(49px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(61px * var(--doll-scale) / 1.5);
    z-index: 2;
}

.accessory-man_beard_2 {
    top: calc(49px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(61px * var(--doll-scale) / 1.5);
    z-index: 2;
}

.accessory-man_coat_1 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

/* ===== Jewelry: gold chain with sparkle animation ===== */
.accessory-gold_chain_1,
.accessory-gold_chain_2,
.accessory-silver_chain_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(24px * var(--doll-scale) / 1.5);
    z-index: 20;
    overflow: visible;
}

.accessory-gold_chain_3 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(24px * var(--doll-scale) / 1.5);
    z-index: 20;
    overflow: visible;
}

.accessory-gold_chain_1 img,
.accessory-gold_chain_2 img {
    filter: drop-shadow(0 0 1px rgba(255, 220, 100, 0.55))
            drop-shadow(0 0 3px rgba(255, 200, 60, 0.3))
            drop-shadow(0 0 0 rgba(255, 200, 60, 0))
            brightness(1) saturate(1);
    animation: chainGlow 4s ease-in-out infinite;
    animation-fill-mode: both;
}

@keyframes chainGlow {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(255, 220, 100, 0.55))
                drop-shadow(0 0 3px rgba(255, 200, 60, 0.3))
                drop-shadow(0 0 0 rgba(255, 200, 60, 0))
                brightness(1) saturate(1);
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(255, 230, 130, 0.55))
                drop-shadow(0 0 6px rgba(255, 200, 60, 0.35))
                drop-shadow(0 0 12px rgba(255, 200, 60, 0.18))
                brightness(1.06) saturate(1.1);
    }
}

/* sparkle particles overlay — smooth fade-in/out, no jumps */
.accessory-gold_chain_1::before,
.accessory-gold_chain_1::after,
.accessory-gold_chain_2::before,
.accessory-gold_chain_3::before,
.accessory-gold_chain_2::after,
.accessory-gold_chain_3::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 240, 180, 0.55) 35%,
            rgba(255, 220, 120, 0) 75%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    will-change: opacity, transform;
}

.accessory-gold_chain_1::before,
.accessory-gold_chain_2::before,
.accessory-gold_chain_3::before {
    top: 20%;
    left: 10%;
    animation: chainSparkle 5s ease-in-out infinite;
}

.accessory-gold_chain_1::after,
.accessory-gold_chain_2::after,
.accessory-gold_chain_3::after {
    top: 70%;
    left: 80%;
    width: 4px;
    height: 4px;
    animation: chainSparkle 6s ease-in-out infinite;
    animation-delay: 2.5s;
}

/* ===== Extras ===== */
.accessory-angel_wings {
    top: calc(47px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(167px * var(--doll-scale) / 1.5);
    z-index: -1;
}

.accessory-halo {
    top: calc(-24px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(60px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.robot-body:has(.accessory-girl_hair_7) .accessory-halo,
.preview-robot:has(.accessory-girl_hair_7) .accessory-halo {
    top: calc(-44px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_cat_hat) .accessory-halo,
.preview-robot:has(.accessory-girl_cat_hat) .accessory-halo {
    top: calc(-40px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-crown):has(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) .accessory-halo {
    top: calc(-46px * var(--doll-scale) / 1.5);
}

.accessory-shar_red {
    top: calc(-27px * var(--doll-scale) / 1.5);
    right: calc(-44px * var(--doll-scale) / 1.5);
    width: calc(53px * var(--doll-scale) / 1.5);
    z-index: -1;
    transform-origin: bottom center;
    animation: balloonSway 4s ease-in-out infinite;
    will-change: transform;
}

.accessory-shar_red_2,
.accessory-shar_violet_1 {
    top: calc(-27px * var(--doll-scale) / 1.5);
    right: calc(-68px * var(--doll-scale) / 1.5);
    width: calc(74px * var(--doll-scale) / 1.5);
    z-index: -1;
    transform-origin: bottom center;
    animation: balloonSway 4s ease-in-out infinite;
    will-change: transform;
}

.accessory-bottle_wine {
    top: calc(92px * var(--doll-scale) / 1.5);
    right: calc(-2px * var(--doll-scale) / 1.5);
    width: calc(14px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-cocktail_1 {
    top: calc(106px * var(--doll-scale) / 1.5);
    right: calc(-5px * var(--doll-scale) / 1.5);
    width: calc(19px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-guitar_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: calc(3px * var(--doll-scale) / 1.5);
    width: calc(87px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-lightsaber_red {
    top: calc(51px * var(--doll-scale) / 1.5);
    left: calc(-10px * var(--doll-scale) / 1.5);
    transform: rotate(-13deg);
    width: calc(16px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
}

@keyframes balloonSway {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

/* ===== Eyewear (glasses/masks) — above piercing, below hair ===== */
.accessory-sunglasses_1 {
    top: calc(26px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-sunglasses_3,
.accessory-sunglasses_4,
.accessory-sunglasses_5 {
    top: calc(26px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-sunglasses_2 {
    top: calc(26px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    z-index: 5;
}

/* ===== Piercing ===== */
.accessory-girl_earrings_1 {
    top: calc(53px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-brow_piercing_1 {
    top: calc(23px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

/* ===== Tattoo (below all clothing) ===== */
.accessory-tattoo_1 {
    top: calc(86px * var(--doll-scale) / 1.5);
    right: -4px;
    transform: translateX(-50%);
    width: calc(16px * var(--doll-scale) / 1.5);
    z-index: 1;
    filter: opacity(0.9);
}

.robot-body[data-gender="female"] .accessory-tattoo_1,
.preview-robot[data-gender="female"] .accessory-tattoo_1 {
    top: calc(85px * var(--doll-scale) / 1.5);
    right: 5px;
    width: calc(14px * var(--doll-scale) / 1.5);
    z-index: 1;
    filter: opacity(0.9);
    transform: rotate(-5deg);
}

.accessory-tattoo_2 {
    top: calc(78px * var(--doll-scale) / 1.5);
    right: -8px;
    transform: translateX(-50%) rotate(5deg);
    width: calc(21px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-tattoo_3 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 21px;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 1;
}

:is(.robot-body, .preview-robot):has(.accessory-doll_male_ton_2) .accessory-tattoo_3 {
    filter: brightness(0.3);
}

:is(.robot-body, .preview-robot):has(.accessory-doll_male_ton_1) .accessory-tattoo_3 {
    filter: brightness(0.5);
}

:is(.robot-body, .preview-robot):has(.accessory-doll_female_ton_2, .accessory-doll_female_ton_1) .accessory-tattoo_4 {
    filter: brightness(0.5);
}

:is(.robot-body, .preview-robot):has(.accessory-doll_male_ton_2, .accessory-doll_female_ton_2) .accessory-tattoo_2 {
    filter: brightness(0.4);
}

.accessory-tattoo_4 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 16px;
    transform: translateX(-50%);
    width: calc(68px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.robot-body[data-gender="female"] .accessory-tattoo_2,
.preview-robot[data-gender="female"] .accessory-tattoo_2 {
    top: calc(77px * var(--doll-scale) / 1.5);
    right: -8px;
    width: calc(22px * var(--doll-scale) / 1.5);
    z-index: 1;
}

@keyframes chainSparkle {
    0%, 70%, 100% {
        opacity: 0;
        transform: scale(0.4);
    }
    35% {
        opacity: 0.95;
        transform: scale(1);
    }
}

/* headwear (above hair) */
.accessory-man_hat_1 {
    top: calc(-17px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(77px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-robo_helmet_1 {
    top: calc(-13px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(87px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-birthday_hat_1 {
    top: calc(-37px * var(--doll-scale) / 1.5);
    left: 77%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-devil_horns {
    top: calc(-1px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(50px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) .accessory-birthday_hat_1 {
    top: calc(-44px * var(--doll-scale) / 1.5);
}

/* clip hair under beanie: keep front bangs, hide top and sides */
:is(.robot-body, .preview-robot):has(.accessory-man_hat_1) :is(.accessory-man_hair_1, .accessory-man_hair_2, .accessory-man_hair_3, .accessory-man_hair_4, .accessory-man_hair_5, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) {
    clip-path: ellipse(75% 46% at 40% 75%);
}

.accessory-girl_cat_hat {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(73px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-crown {
    top: calc(-23px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
    isolation: isolate;
}

:is(.robot-body, .preview-robot):has(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) .accessory-crown {
    top: calc(-40px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_1, .accessory-girl_hair_8) .accessory-crown {
    top: calc(-31px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_2) .accessory-crown {
    top: calc(-34px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_5) .accessory-crown {
    top: calc(-28px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_3, .accessory-girl_hair_6) .accessory-crown {
    top: calc(-27px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_4) .accessory-crown {
    top: calc(-24px * var(--doll-scale) / 1.5);
    left: 51%;
    width: calc(49px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_7) .accessory-crown {
    top: calc(-35px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_9) .accessory-crown {
    top: calc(-31px * var(--doll-scale) / 1.5);
}


.accessory-girl_bandana_1,
.accessory-girl_bandana_2,
.accessory-girl_bandana_3 {
    top: calc(6px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_5) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(0px * var(--doll-scale) / 1.5);
    width: calc(69px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_3, .accessory-girl_hair_6) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(2px * var(--doll-scale) / 1.5);
    width: calc(66px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_4) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(4px * var(--doll-scale) / 1.5);
    width: calc(65px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_7) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-2px * var(--doll-scale) / 1.5);
    width: calc(80px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_9) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-7px * var(--doll-scale) / 1.5);
    width: calc(72px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_1, .accessory-girl_hair_8) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-3px * var(--doll-scale) / 1.5);
    width: calc(75px * var(--doll-scale) / 1.5);
    left: 49%;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_2) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-4px * var(--doll-scale) / 1.5);
    width: calc(77px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_1,
.accessory-girl_hair_8) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_1,
.accessory-girl_hair_8) .accessory-girl_cat_hat {
    top: calc(-29px * var(--doll-scale) / 1.5);
    width: calc(82px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_2) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_2) .accessory-girl_cat_hat {
    top: calc(-29px * var(--doll-scale) / 1.5);
    width: calc(88px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_5) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_5) .accessory-girl_cat_hat {
    top: calc(-21px * var(--doll-scale) / 1.5);
    width: calc(77px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_4) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_4) .accessory-girl_cat_hat {
    top: calc(-18px * var(--doll-scale) / 1.5);
    width: calc(72px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_7) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_7) .accessory-girl_cat_hat {
    top: calc(-35px * var(--doll-scale) / 1.5);
    width: calc(76px * var(--doll-scale) / 1.5);
}

/* hair on top */
.accessory-man_hair_1 {
    top: calc(-19px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(76px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_6,
.accessory-man_hair_7,
.accessory-man_hair_8 {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(89px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_2 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(85px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_3 {
    top: calc(-19px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(76px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_4 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(85px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_5 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(85px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_1,
.accessory-girl_hair_8 {
    top: calc(-11px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(88px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_2 {
    top: calc(-13px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(83px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_3 {
    top: calc(-4px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_4 {
    top: calc(-5px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(75px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_5 {
    top: calc(-7px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(78px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_6 {
    top: calc(-4px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_7 {
    top: calc(-30px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(80px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_9 {
    top: calc(-15px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(91px * var(--doll-scale) / 1.5);
    z-index: 6;
    overflow: visible;
    isolation: isolate;
}