@charset "UTF-8";

:root {
    --sub-color: #ffccff;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #ffffee;
    background-image: url('./images/background_clear.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100svh;
    font-family: "M PLUS 1 Code", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

div.container {
    display: flex;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

div.hand-container {
    z-index: 100;
    flex: 2;
    width: 66.666%;
    background-color: transparent;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background-image: none;
    flex-wrap: wrap;
}

div.tool-palette {
    z-index: 100;
    flex: 1;
    width: 33.333%;
    padding: 8px 20px;
    margin: 40px;
    background-color: rgba(255, 242, 222, 0.391);
    overflow-y: auto;
    box-shadow: 0px 5px 25px 0px rgba(255, 195, 130, 0.364);
    color: #000077;
}

h3 {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 5px 0;
    color: deepskyblue;
    text-shadow: 1px 1px 0 var(--sub-color), -1px -1px 0 var(--sub-color),
                    -1px 1px 0 var(--sub-color), 1px -1px 0 var(--sub-color),
                    0px 1px 0 var(--sub-color), 0 -1px 0 var(--sub-color),
                    -1px 0 0 var(--sub-color), 1px 0 0 var(--sub-color);
}

button, select, option {
    border: 1px solid #000077;
    border-radius: 6px;
    background: #f8f8ff;
    box-shadow: inset 0 -6px 1px 0 #d7eeff;
    color: #000077;
    font-size: 0.87rem;
    font-family: "M PLUS 1 Code", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    padding: 1px 5px;
    margin: 4px;
}
    button:hover {
        box-shadow: inset 0 -6px 1px 0 #a4d5fa;
    }
select, option {
    width: 190px;
}


.hand-wrapper {
    width: 36.79vw;
    height: 37.77vw;
    position: relative;
    background-image: url('./images/image-hand.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 60% bottom;
}


.nail-unit {
    outline: 3px solid rgba(247, 213, 187, 0.383);
    width: 2.53vw;
    height: 6vw;
    border-radius: 46% 46% 52% 52% / 48% 48% 20% 20%;
    position: absolute;
    overflow: hidden;
}
    #thumb-nail { /* 親指 */
        width: 2vw;
        height: 5.3vw;
        top: 28.8vw;
        left: 34.4vw;
        transform: translate(-50%, -50%) rotate(22deg);
    }
    #index-nail { /* 人差し指 */
        width: 2.48vw;
        height: 5.38vw;
        top: 7.88vw;
        left: 21.7vw;
        transform: translate(-50%, -50%);
    }
    #middle-nail { /* 中指 */
        top: 3.55vw;
        left: 15.0vw;
        transform: translate(-50%, -50%);
    }
    #ring-nail { /* 薬指 */
        top: 5.3vw;
        left: 9.1vw;
        transform: translate(-50%, -50%);
    }
    #pinkey-nail { /* 小指 */
        width: 2vw;
        height: 5.3vw;
        top: 11.8vw;
        left: 4.0vw;
        transform: translate(-50%, -50%);
    }

.nail-base, .nail-pattern, .nail-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.nail-unit.nail-base {
    background-color: #ffffff1a;
    z-index: 2;
}

.nail-pattern {
    z-index: 50;
}

.nail-glitter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    pointer-events: none;
}

.nail-art {
    z-index: 100;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.nail-topcoat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 70%
    );
    border-radius: inherit;
    z-index: 99;
    transition: opacity 0.3s;
}
    .nail-unit:hover .nail-topcoat {
        opacity: 0.8;
    }


.gradation {
    background: linear-gradient(
        to bottom,
        var(--base) 0%,
        var(--accent) 80%
    );
}

.magnet {
    background:
        linear-gradient(
            120deg,
            transparent 15%,
            rgba(255, 255, 255, 0.2) 30%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.2) 70%,
            transparent 85%
        );
}

.two-tone-horizontal {
    background: linear-gradient(
        to bottom,
        var(--base) 50%,
        var(--accent) 50%
    );
}

.diagonal {
    background: linear-gradient(45deg, var(--base) 50%, var(--accent) 50%);
}

.clear {
    opacity: 0.4;
}

.nail-unit.matte .nail-topcoat {
    display: none !important;
}
.nail-unit.matte {
    filter: contrast(0.95);
}
.nail-unit.matte .nail-base {
    filter: brightness(0.9);
}

.mirror {
    background: conic-gradient(
        from 0deg at 50% 50%,
        #a0a0a0 0deg,
        #e0e0e0 90deg,
        #a0a0a0 180deg,
        #e0e0e0 270deg,
        #a0a0a0 360deg
    );
    border-radius: inherit;
    background-blend-mode: overlay;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.8), inset 0 0 20px rgba(0,0,0,0.2);
}


.french, .half-moon {
    position: relative;
    overflow: hidden;
}
.french::after {
    content: '';
    position: absolute;
    top: 80%;
    left: -10%;
    width: 120%;
    height: 50%;
    background-color: var(--french-color);
    border-radius: 50% / 40%;
    z-index: 1;
}
.half-moon::after {
    content: '';
    position: absolute;
    top: 80%;
    left: -10%;
    width: 120%;
    height: 50%;
    background-color: var(--moon-color);
    border-radius: 50% / 40%;
    z-index: 1;
}

.cheek {
    background: radial-gradient(circle, var(--accent-color) 20%, transparent 70%);
    opacity: 0.8;
}




.dots {
    background-color: var(--base);
    background-image: url('./images/patterns/dots-pattern.png');
    background-size: cover;
}

.hearts {
    background-image: url('./images/patterns/hearts-pattern.png');
    background-size: cover;
}

.stars {
    background-image: url('./images/patterns/stars-pattern.png');
    background-size: cover;
}

.plaid {
    background-image:
        linear-gradient(rgba(0,0,0,.3) 10%, transparent 10%),
        linear-gradient(90deg, rgba(0,0,0,.3) 10%, transparent 10%);
    background-size: 8px 8px;
}

.flower {
    background-image: url('./images/patterns/flower-pattern.png');
    background-size: cover;
    background-position: 50%;
}

.animal {
    background-image: url('./images/patterns/animal-pattern.png');
    background-size: cover;
}

.race {
    background-image: url('./images/patterns/race-pattern.png');
    background-size: cover;
}

.peacock {
    background-image: url('./images/patterns/peacock-pattern.png');
    background-size: cover;
    background-position: 50%;
}

.paisley {
    background-image: url('./images/patterns/paisley-pattern.png');
    background-size: cover;
    background-position: 50%;
}

.fireflower {
    background-image: url('./images/patterns/fireflower-pattern.png');
    background-size: cover;
}

.traditional {
    background-image: url('./images/patterns/traditional-pattern.png');
    background-size: cover;
}

.knit {
    background-image: url('./images/patterns/knit-pattern.png');
    background-size: cover;
}


.hologram-heart {
    background-image: url('./images/hologram-heart.png');
    background-size: cover;
    background-position: center;
}

.hologram-butterfly {
    background-image: url('./images/hologram-butterfly.png');
    background-size: cover;
    background-position: center;
}

.hologram-star {
    background-image: url('./images/hologram-star.png');
    background-size: cover;
    background-position: center;
}


.background {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
}

@media screen and (max-width: 1020px) {

    div.container {
        display: block;
        height: auto;
    }
        div.tool-palette {
            width: 85%;
            margin: 6.32px 40px 35px 40px;
        }

        div.hand-container {
            order: 1;
            flex: none;
            width: 100%;
            height: auto;
            min-height: auto;
            justify-content: center;
            align-items: flex-start;
            padding: 20px 0 0 0;
        }
            .hand-wrapper {
                width: 430.79px;
                height: 430.77px;
            }
                .nail-unit {
                    width: 26.5px;
                    height: 65px;
                }
                    #thumb-nail { /* 親指 */
                        top: 76%;
                        left: 92.9%;
                        width: 24px;
                        height: 56px;
                    }
                    #index-nail { /* 人差し指 */
                        top: 20.8%;
                        left: 59%;
                        width: 25.8px;
                        height: 62px;
                    }
                    #middle-nail { /* 中指 */
                        top: 9.9%;
                        left: 41.4%;
                    }
                    #ring-nail { /* 薬指 */
                        top: 14.4%;
                        left: 25.7%;
                    }
                    #pinkey-nail { /* 小指 */
                        top: 31%;
                        left: 12.0%;
                        width: 24.8px;
                        height: 58px;
                    }


}

@media screen and (max-width: 480px) {

    div.container {
        height: auto;
    }

    div.tool-palette {
        order: 2;
        flex: none;
        width: 90%;
        height: auto;
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    div.tool-palette select,
    div.tool-palette input[type="color"],
    div.tool-palette button {
        width: 100%;
        box-sizing: border-box;
    }

    .hand-wrapper {
        width: 400px;
        height: 360px;
        min-width: 400px;
        min-height: 360px;
    }
        .nail-unit {
            width: 23px;
            height: 52px;
        }
            #thumb-nail {
                top: 76%;
                left: 89%;
                width: 20px;
                height: 46px;
            }
            #index-nail {
                top: 21%;
                left: 59.4%;
                width: 22px;
                height: 50px;
            }
            #middle-nail {
                top: 9.9%;
                left: 43.4%;
            }
            #ring-nail {
                top: 14.5%;
                left: 29.1%;
            }
            #pinkey-nail {
                top: 30.6%;
                left: 16.7%;
                width: 21.8px;
                height: 49px;
            }
}