@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Thai+Looped:wght@100..900&family=Playpen+Sans+Thai:wght@100..800&display=swap');

:root {
    --wkmz-primary: #e9576b;
    --wkmz-secondary: #bb4646;
    --wkmz-txt: #fff;

    --wkmz-pic: gray;
    --wkmz-pos: center;
    --wkmz-size: cover;
    
    --wkmz-deco: gray;
    --wkmz-dpos: center;
    --wkmz-dsize: cover;
}

#Wakamuzu { position: relative; }
#Wakamuzu * { box-sizing: border-box; }

#Wakamuzu a[href="https://discord.com/users/625292873914515456/"] {
    height: 12px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
}

#Wakamuzu a[href="https://discord.com/users/625292873914515456/"] ~ div:first-child { position: relative; }
  
#Wakamuzu::after {
    display: block;
    content: "💓";
    font-family: 'Kosugi Maru', sans-serif;
    font-size: x-small;
    color: gray !important;
    width: 100%;
    text-align: center;
}
  
#Wakamuzu:hover::after { content: "made by zzzcode"; }

#Wakamuzu {
    #wkmz-role.wkmz-box {
        width: 800px;
        max-width: 90%;
        margin: auto;
        font-family: 'Noto Sans Thai Looped', 'Noto Sans JP', sans-serif;
        font-size: clamp(13px, 1vw, 17px);
        margin-block-end: 0.5rem;

        .wkmz-head {
            position: relative;
            width: 75%;
            aspect-ratio: 600/450;
            margin: auto;

            .wkmz-logo {
                position: absolute;
                z-index: 2;
                top: 7.11%;
                left: -2.5%;
                
                width: 30%;
                aspect-ratio: 300/290;
                background: url(https://iili.io/KCTsGmx.png) center/68% no-repeat, #fff;
                mask: url(https://iili.io/KC5gikG.png) center/contain no-repeat;
                transform-style: preserve-3d;

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    aspect-ratio: 300/290;
                    background: var(--wkmz-primary);
                    mask: url(https://iili.io/KC11dvV.png) center/contain no-repeat;
                }

                &::after {
                    content: "";
                    position: absolute;
                    inset: -0.8px;
                    background: #333;
                    mask: url(https://iili.io/KC75AOl.png) center/contain no-repeat;
                    transform: translateZ(-1px);
                }

                .wkmz-img {
                    position: absolute;
                    inset: 10%;
                    aspect-ratio: 300 / 290;
                    background: var(--wkmz-pic) var(--wkmz-pos) / var(--wkmz-size) no-repeat;
                    mask: url(https://iili.io/KahvxkP.png) center / contain no-repeat;
                }
            }

            .wkmz-logo:has(.wkmz-img) {
                background: #fff;
            }

            .wkmz-pic {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(2.5deg);
                
                width: 66.67%;
                aspect-ratio: 1;
                border: 0.5vw solid #fff;
                border-inline-width: 1.5vw 2.5vw;
                background: var(--wkmz-pic) var(--wkmz-pos)/var(--wkmz-size) no-repeat;

                .wkmz-deco1, .wkmz-deco2 {
                    position: absolute;
                    transform: translateX(50%) rotate(-2.5deg);
                    
                    width: 35%;
                    aspect-ratio: 1;
                    background: var(--wkmz-deco) var(--wkmz-dpos)/var(--wkmz-dsize) no-repeat;

                    -webkit-filter: drop-shadow(0 0.25vw #fff)
                                    drop-shadow(0 -0.25vw #fff)
                                    drop-shadow(0.25vw 0 #fff)
                                    drop-shadow(-0.25vw 0 #fff)
                                    drop-shadow(2px 2px 0.25vw #000);
                            filter: drop-shadow(0 0.25vw #fff)
                                    drop-shadow(0 -0.25vw #fff)
                                    drop-shadow(0.25vw 0 #fff)
                                    drop-shadow(-0.25vw 0 #fff)
                                    drop-shadow(2px 2px 0.25vw #000);
                }

                .wkmz-deco1 { 
                    right: -2vw;
                    bottom: 62.5%;
                }

                .wkmz-deco2 {
                    right: -3vw;
                    bottom: 30%;
                }
                
                .wkmz-deco1[style*="--wkmz-pos"][style*="--wkmz-size"],
                .wkmz-deco2[style*="--wkmz-pos"][style*="--wkmz-size"] {
                    background: var(--wkmz-deco) var(--wkmz-pos)/var(--wkmz-size) no-repeat;
                }

                .wkmz-deco1[style*="--wkmz-pos"]:not([style*="--wkmz-size"]),
                .wkmz-deco2[style*="--wkmz-pos"]:not([style*="--wkmz-size"]) {
                    background: var(--wkmz-deco) var(--wkmz-pos)/var(--wkmz-dsize) no-repeat;
                }

                .wkmz-deco1[style*="--wkmz-size"]:not([style*="--wkmz-pos"]),
                .wkmz-deco2[style*="--wkmz-size"]:not([style*="--wkmz-pos"]) {
                    background: var(--wkmz-deco) var(--wkmz-dpos)/var(--wkmz-size) no-repeat;
                }
            }

            .wkmz-info-card {
                position: absolute;
                bottom: 3.5%;
                right: 1.33%;
                
                min-width: clamp(180px, 41.67%, 250px);
                background: #fff;
                color: #000;
                padding: 1%;
                border-radius: 10px;
                border: 1px solid #333;

                .wkmz-info-content {
                    border-radius: 4px;
                    border: 2px solid var(--wkmz-primary);
                    padding: 3%;
                    
                    display: flex;
                    flex-direction: column;
                    row-gap: 0.5vw;
                    
                    font-family: 'Kosugi Maru', sans-serif;
                    line-height: 1;

                    .wkmz-info {
                        display: flex;
                        column-gap: 0.25vw;

                        &::before { 
                            content: attr(data);
                            flex: 1;
                        }

                        div:last-child {
                            flex: 2;
                            border-bottom: 1px solid var(--wkmz-primary);
                            text-align: center;
                        }
                    }
                }
            }
        }

        .wkmz-body {
            display: flex;
            flex-direction: column;
            row-gap: 1rem;

            .wkmz-place {
                width: max-content;
                background: var(--wkmz-primary);
                color: var(--wkmz-txt);
                padding: 0.5rem 1.5rem;
            }

            .wkmz-content {
                background: #eee;
                color: #000;
                padding: 1.5rem;
            }

            .wkmz-ps {
                background: var(--wkmz-primary);
                color: var(--wkmz-txt);
                padding: 0.5rem 1.5rem;
            }
        }
    }

    #wkmz-reg.wkmz-box {
        width: 800px;
        max-width: 90%;
        margin: auto;
        font-family: 'Noto Sans Thai Looped', 'Noto Sans JP', sans-serif;
        font-size: clamp(13px, 1vw, 17px);
        background: var(--wkmz-primary);
        padding: 2vw;
        border-radius: 0.5rem;
        margin-block-end: 0.5rem;
        
        .wkmz-content {
            background: #eee;
            color: #000;
            padding: 2vw;
            border-radius: 0.25rem;

            .wkmz-head {
                display: flex;
                column-gap: 1.5vw;
                align-items: start;
                margin-bottom: 1.25vw;
                padding-bottom: 2vw;
                border-bottom: 1px solid var(--wkmz-primary);

                .wkmz-pic {
                    position: relative;
                    width: 30%;
                    aspect-ratio: 7/8;
                    border: 0.5vw solid #fff;
                    border-block-width: 0.75vw 1.5vw;
                    background: var(--wkmz-pic) var(--wkmz-pos)/var(--wkmz-size) no-repeat;
                    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.25));

                    &::before {
                        content: "";
                        position: absolute;
                        bottom: -2.5vw;
                        right: -1.25vw;
                        width: 40%;
                        aspect-ratio: 1;
                        background: url(https://iili.io/KCERcQf.png) center/contain no-repeat;
                        transform: rotate(15deg);
                    }
                }

                .wkmz-info-content {
                    flex: 1;

                    .wkmz-topic {
                        background: var(--wkmz-primary);
                        color: var(--wkmz-txt);
                        padding: 3% 5%;
                        font-family: 'Kosugi Maru', sans-serif;
                        line-height: 1;
                        font-size: clamp(16px, 1.1vw, 20px);
                        display: flex;
                        justify-content: space-between;
                        column-gap: 0.5vw;

                        hr {
                            flex: 1;
                            background: var(--wkmz-txt);
                        }
                    }

                    .wkmz-info { 
                        display: block;
                        padding: 0.5vw 5%;
                    }
                }
            }

            .wkmz-info {
                display: flex;
                flex-direction: column;
                margin-bottom: 1.25vw;
                padding-bottom: 1.25vw;
                border-bottom: 1px solid var(--wkmz-primary);
            }

            .wkmz-info:last-child { 
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: 0;
            }
        }
    }

    #wkmz-thread.wkmz-box {
        width: 1000px;
        max-width: 100%;
        margin: auto;
        font-family: 'Noto Sans Thai Looped', 'Noto Sans JP', sans-serif;
        font-size: clamp(13px, 1vw, 17px);
        background: var(--wkmz-primary);
        padding: 2vw;
        border-radius: 0.5rem;
        margin-block-end: 0.5rem;

        .wkmz-content {
            background: #eee;
            color: #000;
            padding: 2vw;
            border-radius: 0.25rem;
            
            display: flex;
            flex-direction: column;
            row-gap: 1rem;

            .wkmz-logo {
                width: 35%;
                aspect-ratio: 1;
                margin: auto;
                background: url(https://iili.io/KCTsGmx.png) center/contain no-repeat;
                margin-block-end: -0.75rem;
            }

            hr {
                border: 1px dashed var(--wkmz-primary);
                width: 100%;
                background: transparent;
            }

            .wkmz-topic {
                width: max-content;
                background: var(--wkmz-primary);
                color: var(--wkmz-txt);
                padding: 0 1.5rem;
                font-size: clamp(17px, 1.3vw, 21px);
            }

            section + br { display: none; }
        }
    }

    #wkmz-post.wkmz-box {
        width: 1000px;
        max-width: calc(100% - 2rem);
        margin: auto;
        font-family: 'Noto Sans Thai Looped', 'Noto Sans JP', sans-serif;
        font-size: clamp(13px, 1vw, 17px);
        padding-top: min(2vw, 2rem);
        margin-block-end: 0.5rem;

        .wkmz-head {
            position: relative;
            width: 100%;
            padding-top: min(2vw, 2rem);

            .wkmz-title-jp {
                position: absolute;
                top: 0;
                left: 0;
                transform: rotate(-10deg);
                transform-origin: right;
                width: fit-content;
                color: var(--wkmz-txt);
                line-height: 1;
                font-size: max(2.5vw, 28px);
                font-family: 'Mochiy Pop One', sans-serif;
                z-index: 2;

                &::before {
                    content: attr(title);
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    -webkit-text-stroke: 0.5vw var(--wkmz-primary);
                    -webkit-filter: drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary))
                                    drop-shadow(1px 1px var(--wkmz-secondary))
                                    drop-shadow(1px 1px var(--wkmz-secondary));
                            filter: drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary))
                                    drop-shadow(1px 1px var(--wkmz-secondary))
                                    drop-shadow(1px 1px var(--wkmz-secondary));
                }
            }

            .wkmz-title-th {
                position: absolute;
                top: 0;
                left: 0;
                transform: translateY(-180%);
                transform-origin: right;
                width: fit-content;
                color: var(--wkmz-txt);
                line-height: 1;
                font-size: max(1.25vw, 14px);
                font-family: 'Playpen Sans Thai', sans-serif;
                font-weight: 800;
                z-index: 2;

                &::before {
                    content: attr(title);
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    -webkit-text-stroke: 0.15vw var(--wkmz-primary);
                    -webkit-filter: drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary));
                            filter: drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary)) 
                                    drop-shadow(1px 1px var(--wkmz-secondary));
                }
            }

            .wkmz-pic {
                position: relative;
                width: 83.33%;
                aspect-ratio: 16/9;
                border: 8px solid #fff;
                background: var(--wkmz-pic) var(--wkmz-pos)/var(--wkmz-size) no-repeat;
                margin: auto;
            }

            .wkmz-place-card {
                position: absolute;
                bottom: 3.5%;
                right: 1.33%;
                background: #fff;
                color: #000;
                padding: max(5px, 0.25vw);
                border-radius: 10px;
                border: 1px solid #333;

                .wkmz-place {
                    border-radius: 4px;
                    border: 2px solid var(--wkmz-primary);
                    padding: max(3px, 0.25vw) max(8px, 0.75vw);
                    font-family: 'Kosugi Maru', 'Noto Sans Thai Looped', sans-serif;
                    text-align: end;
                }
            }
        }

        .wkmz-body {
            display: flex;
            flex-direction: column;
            row-gap: 1.5rem;
            margin-block-start: 3rem;

            .wkmz-content {
                background: #eee;
                color: #000;
                padding: 3rem;
            }

            .wkmz-ps {
                background: var(--wkmz-primary);
                color: var(--wkmz-txt);
                padding: 0.5rem;
                text-align: center;
            }
        }
    }
}