/* ==================================================
   CHIBI NETWORK
   CHARM BOOK // DOLLHOUSE DREAM SKIN

   purple nighttime y2k
   haunted dollhouse
   tiny fireflies
   dusty pink + lavender
   ================================================== */


/* ==================================================
   VARIABLES
   ================================================== */

:root {

    --night-one:
        #13091e;

    --night-two:
        #29113f;

    --night-three:
        #4c236f;

    --night-four:
        #7351a0;


    --doll-purple-dark:
        #4c3566;

    --doll-purple:
        #755696;

    --doll-lilac:
        #cdb6e2;

    --doll-lilac-light:
        #eadcf3;


    --doll-pink:
        #d8a9bf;

    --doll-pink-light:
        #efd0dd;

    --doll-dusty-pink:
        #b9829b;


    --doll-cream:
        #f6eee8;

    --doll-cream-two:
        #eadfd8;

    --doll-brown:
        #735b62;


    --text-dark:
        #513e59;

    --text-purple:
        #654875;

    --text-soft:
        #846f89;


    --firefly:
        #f3ff9b;

    --firefly-glow:
        rgba(
            236,
            255,
            142,
            0.75
        );

}


/* ==================================================
   GLOBAL
   ================================================== */

body {

    position:
        relative;

    overflow-x:
        hidden;

    background:

        radial-gradient(
            circle at 14% 16%,
            rgba(
                201,
                160,
                255,
                0.16
            )
            0,
            transparent
            25%
        ),

        radial-gradient(
            circle at 84% 20%,
            rgba(
                244,
                177,
                218,
                0.13
            )
            0,
            transparent
            24%
        ),

        radial-gradient(
            circle at 54% 78%,
            rgba(
                187,
                255,
                178,
                0.06
            )
            0,
            transparent
            22%
        ),

        linear-gradient(
            180deg,
            var(--night-one)
            0%,

            var(--night-two)
            32%,

            var(--night-three)
            69%,

            var(--night-four)
            100%
        );

}


/* ==================================================
   OLD WEB GRID
   ================================================== */

body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent
            1px
        );

    background-size:
        24px 24px;

}


/* ==================================================
   VIGNETTE
   ================================================== */

body::after {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at center,
            transparent
            38%,
            rgba(
                11,
                4,
                17,
                0.42
            )
            100%
        );

}


/* ==================================================
   BACKGROUND
   ================================================== */

.charm-background {

    background:

        radial-gradient(
            circle at 52% 8%,
            rgba(
                255,
                255,
                255,
                0.09
            ),
            transparent
            24%
        ),

        linear-gradient(
            180deg,
            rgba(
                15,
                5,
                25,
                0.08
            ),
            rgba(
                15,
                5,
                25,
                0.13
            )
        );

}


/* ==================================================
   FIREFLIES
   ================================================== */

.background-star {

    position:
        absolute;

    color:
        var(--firefly);

    font-size:
        17px;

    opacity:
        0.88;

    text-shadow:

        0
        0
        4px
        var(--firefly-glow),

        0
        0
        10px
        rgba(
            236,
            255,
            142,
            0.55
        ),

        0
        0
        18px
        rgba(
            200,
            255,
            133,
            0.28
        );

    animation:

        fireflyBlink
        2.6s
        steps(
            2,
            end
        )
        infinite,

        fireflyDrift
        8s
        ease-in-out
        infinite;

}


.star-one {

    top:
        8%;

    left:
        8%;

    animation-delay:
        -0.3s,
        -1.5s;

}


.star-two {

    top:
        24%;

    right:
        10%;

    animation-delay:
        -1.2s,
        -3s;

}


.star-three {

    bottom:
        16%;

    left:
        11%;

    animation-delay:
        -2s,
        -1.7s;

}


.star-four {

    right:
        6%;

    bottom:
        9%;

    animation-delay:
        -0.8s,
        -4.6s;

}


.star-five {

    top:
        56%;

    left:
        3%;

    animation-delay:
        -1.5s,
        -2.5s;

}


.star-six {

    top:
        12%;

    left:
        56%;

    animation-delay:
        -2.2s,
        -5s;

}


.star-seven {

    top:
        38%;

    right:
        22%;

    animation-delay:
        -0.5s,
        -1.8s;

}


.star-eight {

    bottom:
        28%;

    right:
        34%;

    animation-delay:
        -1.8s,
        -3.6s;

}


.star-nine {

    top:
        72%;

    left:
        28%;

    animation-delay:
        -0.4s,
        -2.2s;

}


.star-ten {

    top:
        45%;

    left:
        76%;

    animation-delay:
        -1.4s,
        -4.7s;

}


@keyframes fireflyBlink {

    0%,
    100% {

        opacity:
            0.25;

    }

    50% {

        opacity:
            1;

    }

}


@keyframes fireflyDrift {

    0% {

        translate:
            0
            0;

    }

    25% {

        translate:
            5px
            -8px;

    }

    50% {

        translate:
            -3px
            -15px;

    }

    75% {

        translate:
            4px
            -7px;

    }

    100% {

        translate:
            0
            0;

    }

}


/* ==================================================
   PAGE
   ================================================== */

.charm-page {

    padding:
        36px
        18px
        70px;

}


/* ==================================================
   MAIN DOLLHOUSE WINDOW
   ================================================== */

.charm-window {

    position:
        relative;

    width:
        min(
            1080px,
            96vw
        );

    overflow:
        hidden;

    background:

        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.18
            ),
            rgba(
                255,
                255,
                255,
                0.04
            )
        ),

        rgba(
            154,
            114,
            187,
            0.22
        );

    border:
        3px solid
        #483355;

    box-shadow:

        0
        0
        0
        3px
        rgba(
            235,
            215,
            244,
            0.2
        ),

        9px
        9px
        0
        rgba(
            13,
            5,
            20,
            0.7
        ),

        0
        0
        28px
        rgba(
            190,
            139,
            237,
            0.13
        );

    backdrop-filter:
        blur(
            5px
        );

}


/* tiny dollhouse edge dots */

.charm-window::before {

    content:
        "♡  ×  ♡  ×  ♡  ×  ♡  ×  ♡  ×  ♡  ×  ♡";

    position:
        absolute;

    z-index:
        20;

    left:
        20px;

    right:
        20px;

    top:
        49px;

    overflow:
        hidden;

    pointer-events:
        none;

    white-space:
        nowrap;

    color:
        rgba(
            255,
            240,
            250,
            0.7
        );

    font-size:
        8px;

    letter-spacing:
        10px;

}


/* ==================================================
   WINDOW BAR
   ================================================== */

.charm-topbar {

    background:

        linear-gradient(
            180deg,
            #e7cfe9
            0%,

            #cba8d5
            46%,

            #9a739f
            100%
        );

    color:
        #fff9f5;

    border-bottom:
        3px solid
        #57415e;

    text-shadow:
        1px
        1px
        0
        rgba(
            74,
            50,
            80,
            0.8
        );

}


/* ==================================================
   CHECKER STRIP
   ================================================== */

.charm-checkers {

    border-bottom:
        2px solid
        #654b6c;

    background:

        conic-gradient(
            from 90deg,

            #ead0df
            25%,

            #8f6c9d
            0 50%,

            #d6b9dc
            0 75%,

            #684d72
            0
        );

    background-size:
        12px
        12px;

}


.bottom-checkers {

    border-top:
        2px solid
        #654b6c;

    border-bottom:
        0;

}


/* ==================================================
   NAVIGATION
   ================================================== */

.charm-navigation {

    gap:
        9px;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.12
            )
            0
            12px,

            rgba(
                255,
                255,
                255,
                0
            )
            12px
            24px
        ),

        linear-gradient(
            180deg,
            #e1cbdc,
            #c9acc8
        );

    border-bottom:
        2px solid
        #755a74;

}


.charm-navigation a {

    background:

        linear-gradient(
            180deg,
            #fff8f3,
            #eadbd8
        );

    color:
        #634c65;

    border:
        2px solid
        #72596c;

    border-radius:
        4px;

    box-shadow:

        2px
        2px
        0
        #ae8f9f,

        inset
        1px
        1px
        0
        rgba(
            255,
            255,
            255,
            0.8
        );

}


.charm-navigation a::before {

    content:
        "♡";

    margin-right:
        5px;

    color:
        #b97698;

}


.charm-navigation a:hover {

    background:

        linear-gradient(
            180deg,
            #fffdf8,
            #f2e4e0
        );

    color:
        #8f526f;

}


/* ==================================================
   LOADING
   ================================================== */

.book-message {

    background:

        repeating-linear-gradient(
            90deg,
            rgba(
                177,
                124,
                152,
                0.05
            )
            0
            16px,

            rgba(
                255,
                255,
                255,
                0.13
            )
            16px
            32px
        ),

        var(--doll-cream);

    color:
        var(--text-soft);

}


.book-message h2 {

    color:
        var(--text-purple);

}


.book-message a {

    color:
        #935c82;

}


.loading-pixel {

    color:
        var(--firefly);

    text-shadow:

        0
        0
        6px
        var(--firefly-glow),

        0
        0
        13px
        rgba(
            218,
            255,
            130,
            0.55
        );

}


/* ==================================================
   MAIN BOOK CONTENT
   dollhouse wallpaper
   ================================================== */

.book-content {

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                183,
                125,
                154,
                0.05
            )
            0
            16px,

            rgba(
                255,
                255,
                255,
                0.08
            )
            16px
            32px
        ),

        linear-gradient(
            rgba(
                112,
                80,
                116,
                0.025
            )
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(
                112,
                80,
                116,
                0.025
            )
            1px,
            transparent
            1px
        ),

        #eee3df;

    background-size:

        auto,

        18px
        18px,

        18px
        18px,

        auto;

}


/* ==================================================
   BOOK HEADER
   ================================================== */

.book-header {

    position:
        relative;

    overflow:
        hidden;

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                150,
                91,
                126,
                0.05
            )
            0
            18px,

            rgba(
                255,
                255,
                255,
                0.12
            )
            18px
            36px
        ),

        linear-gradient(
            180deg,
            #ead6df,
            #ddc5d2
        );

    border:
        3px solid
        #735b70;

    border-radius:
        3px;

    box-shadow:

        5px
        5px
        0
        #b899aa,

        inset
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            0.55
        );

}


/* stitched top seam */

.book-header::before {

    content:
        "×  ×  ×  ×  ×  ×  ×  ×  ×  ×  ×";

    position:
        absolute;

    left:
        12px;

    right:
        12px;

    top:
        6px;

    overflow:
        hidden;

    color:
        rgba(
            167,
            103,
            134,
            0.58
        );

    font-size:
        8px;

    letter-spacing:
        9px;

    white-space:
        nowrap;

}


/* little hanging bow */

.book-header::after {

    content:
        "୨୧";

    position:
        absolute;

    right:
        16px;

    top:
        12px;

    color:
        #a56887;

    font-size:
        18px;

    opacity:
        0.75;

}


/* ==================================================
   OWNER AVATAR
   ================================================== */

.book-owner-avatar-frame {

    position:
        relative;

    background:

        linear-gradient(
            180deg,
            #fff9f5,
            #eadbd9
        );

    border:
        3px solid
        #755d70;

    border-radius:
        2px;

    box-shadow:

        4px
        4px
        0
        #ab8d9e,

        inset
        0
        0
        0
        3px
        rgba(
            255,
            255,
            255,
            0.45
        );

}


.book-owner-avatar-frame::before {

    content:
        "♡";

    position:
        absolute;

    z-index:
        3;

    right:
        4px;

    bottom:
        2px;

    color:
        rgba(
            169,
            100,
            135,
            0.8
        );

    font-size:
        17px;

}


.book-owner-avatar-placeholder {

    color:
        #ad7796;

}


/* ==================================================
   HEADER TEXT
   ================================================== */

.book-eyebrow {

    color:
        #8d7488;

}


.book-owner-info h1 {

    color:
        #624b69;

    letter-spacing:
        5px;

    text-shadow:

        3px
        3px
        0
        #d9b9cb;

}


.book-owner-name {

    color:
        #584550;

}


.book-owner-username {

    color:
        #927b8b;

}


/* ==================================================
   COUNTER
   ================================================== */

.book-counter {

    position:
        relative;

    background:

        linear-gradient(
            180deg,
            #fff9f4,
            #eddfd9
        );

    border:
        2px solid
        #775e70;

    border-radius:
        2px;

    box-shadow:

        3px
        3px
        0
        #b18fa5;

}


.book-counter::before {

    content:
        "♡";

    color:
        #b77997;

    font-size:
        11px;

}


.book-counter strong {

    color:
        #955976;

}


/* ==================================================
   BADGE PANEL
   ================================================== */

.badge-panel {

    position:
        relative;

    overflow:
        hidden;

    background:

        repeating-linear-gradient(
            0deg,

            rgba(
                255,
                255,
                255,
                0.08
            )
            0
            15px,

            rgba(
                130,
                86,
                153,
                0.03
            )
            15px
            30px
        ),

        linear-gradient(
            180deg,
            #d6c3df,
            #c5aed0
        );

    border:
        3px solid
        #705a79;

    border-radius:
        3px;

    box-shadow:

        5px
        5px
        0
        #977ea3;

}


.badge-panel::after {

    content:
        "♡ stitched treasure keeper ♡";

    position:
        absolute;

    right:
        11px;

    bottom:
        7px;

    color:
        rgba(
            102,
            72,
            118,
            0.5
        );

    font-size:
        7px;

    letter-spacing:
        1px;

}


.badge-small {

    color:
        #75627e;

}


.badge-info h2 {

    color:
        #5e4969;

}


.badge-description {

    color:
        #695c70;

}


/* ==================================================
   PROGRESS
   ================================================== */

.badge-progress {

    background:
        #f7ece7;

    border:
        2px solid
        #705b75;

    border-radius:
        1px;

}


.badge-progress-fill {

    background:

        repeating-linear-gradient(
            90deg,

            #a672ad
            0
            8px,

            #d49ab8
            8px
            16px
        );

}


/* ==================================================
   COLLECTION HEADING
   ================================================== */

.collection-heading {

    position:
        relative;

    border-bottom:
        3px double
        #80697c;

}


.collection-heading::after {

    content:
        "୨୧";

    position:
        absolute;

    bottom:
        5px;

    left:
        50%;

    color:
        #b17a98;

    font-size:
        13px;

}


.collection-small {

    color:
        #907988;

}


.collection-heading h2 {

    color:
        #5c4b60;

}


/* ==================================================
   CHARM GRID
   ================================================== */

.charm-loading-grid {

    background:
        rgba(
            255,
            249,
            245,
            0.5
        );

    border:
        2px dashed
        #9e8598;

    border-radius:
        2px;

}


/* ==================================================
   CHARM CARDS
   little doll display boxes
   ================================================== */

.charm-card {

    position:
        relative;

    overflow:
        hidden;

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                184,
                121,
                150,
                0.035
            )
            0
            12px,

            transparent
            12px
            24px
        ),

        linear-gradient(
            180deg,
            #f8eee8,
            #eee0dc
        );

    color:
        #554357;

    border:
        3px solid
        #765d70;

    border-radius:
        3px;

    box-shadow:

        4px
        4px
        0
        #b394a7,

        inset
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            0.6
        );

}


/* stitched upper edge */

.charm-card::after {

    content:
        "×  ×  ×  ×  ×";

    position:
        absolute;

    top:
        5px;

    left:
        8px;

    color:
        rgba(
            173,
            113,
            142,
            0.42
        );

    font-size:
        6px;

    letter-spacing:
        5px;

}


.charm-card:hover {

    top:
        -2px;

    left:
        -2px;

    box-shadow:

        6px
        6px
        0
        #b394a7,

        0
        0
        13px
        rgba(
            210,
            159,
            218,
            0.22
        );

}


.charm-card.is-found {

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                205,
                131,
                168,
                0.04
            )
            0
            12px,

            transparent
            12px
            24px
        ),

        linear-gradient(
            180deg,
            #fff5ec,
            #f4e3df
        );

}


/* found label */

.charm-card.is-found::before {

    background:
        #93627f;

    color:
        #fff8f1;

    border:
        1px solid
        #594353;

    border-radius:
        0;

}


/* ==================================================
   LOCKED CHARM
   ================================================== */

.charm-card.is-locked {

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                255,
                255,
                255,
                0.035
            )
            0
            12px,

            transparent
            12px
            24px
        ),

        linear-gradient(
            180deg,
            #cbc0c8,
            #b9afb7
        );

    color:
        #766c75;

    border-color:
        #756b74;

    box-shadow:

        4px
        4px
        0
        #948a92;

}


/* ==================================================
   CHARM ART FRAME
   ================================================== */

.charm-art {

    position:
        relative;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(
                255,
                255,
                255,
                0.6
            ),
            transparent
            55%
        ),

        repeating-linear-gradient(
            90deg,

            #e5d0db
            0
            12px,

            #efdee4
            12px
            24px
        );

    border:
        2px dashed
        #95778d;

    border-radius:
        2px;

    box-shadow:

        inset
        0
        0
        16px
        rgba(
            123,
            84,
            111,
            0.08
        );

}


.charm-art::before {

    content:
        "♡";

    position:
        absolute;

    left:
        5px;

    bottom:
        3px;

    color:
        rgba(
            171,
            107,
            139,
            0.38
        );

    font-size:
        11px;

}


/* ==================================================
   CHARM TEXT
   ================================================== */

.charm-name {

    color:
        #614d61;

}


.charm-number {

    color:
        #9c8797;

}


.charm-found-date {

    color:
        #a26082;

}


/* ==================================================
   LOCK MARK
   ================================================== */

.charm-locked-mark {

    background:

        linear-gradient(
            180deg,
            #756d76,
            #5f5961
        );

    color:
        #ded4dc;

    border:
        3px solid
        #494148;

    border-radius:
        2px;

    box-shadow:

        3px
        3px
        0
        #877d85;

}


/* ==================================================
   FOOTER
   ================================================== */

.book-footer {

    position:
        relative;

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                169,
                107,
                137,
                0.045
            )
            0
            14px,

            transparent
            14px
            28px
        ),

        linear-gradient(
            180deg,
            #dfccd6,
            #d3bdca
        );

    border:
        2px dashed
        #806878;

    border-radius:
        2px;

    color:
        #675567;

}


.book-footer::before {

    content:
        "୨୧";

    position:
        absolute;

    left:
        12px;

    top:
        7px;

    color:
        #a66b89;

}


.book-footer::after {

    content:
        "୨୧";

    position:
        absolute;

    right:
        12px;

    top:
        7px;

    color:
        #a66b89;

}


/* ==================================================
   MODAL BACKDROP
   ================================================== */

.charm-modal-backdrop {

    background:

        rgba(
            13,
            6,
            20,
            0.8
        );

    backdrop-filter:
        blur(
            3px
        );

}


/* ==================================================
   MODAL WINDOW
   ================================================== */

.charm-modal-window {

    overflow:
        hidden;

    background:

        repeating-linear-gradient(
            90deg,

            rgba(
                178,
                112,
                147,
                0.04
            )
            0
            15px,

            transparent
            15px
            30px
        ),

        #f1e5df;

    border:
        3px solid
        #675166;

    border-radius:
        3px;

    box-shadow:

        7px
        7px
        0
        #150d18,

        0
        0
        22px
        rgba(
            195,
            142,
            218,
            0.16
        );

}


/* ==================================================
   MODAL BAR
   ================================================== */

.charm-modal-topbar {

    background:

        linear-gradient(
            180deg,
            #e7cfe3,
            #bd92b5,
            #866681
        );

    color:
        #fff7ee;

    border-bottom:
        3px solid
        #665068;

}


.charm-modal-topbar button {

    background:

        linear-gradient(
            180deg,
            #fff8f4,
            #e7d4d4
        );

    color:
        #503c52;

    border:
        2px solid
        #5f485f;

    border-radius:
        0;

}


/* ==================================================
   MODAL ART
   ================================================== */

.charm-modal-art {

    background:

        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.6
            ),
            transparent
            60%
        ),

        repeating-linear-gradient(
            90deg,

            #e0ccd7
            0
            15px,

            #ebd9e1
            15px
            30px
        );

    border:
        2px dashed
        #856b7d;

    border-radius:
        2px;

}


/* ==================================================
   MODAL TEXT
   ================================================== */

.charm-modal-status {

    color:
        #995979;

}


.charm-modal-body h2 {

    color:
        #634965;

}


.charm-modal-description {

    color:
        #706171;

}


/* ==================================================
   MODAL FOUND INFO
   ================================================== */

.charm-modal-found-info {

    background:

        linear-gradient(
            180deg,
            #e5d2d9,
            #d8c2cc
        );

    border:
        2px solid
        #80677a;

    border-radius:
        2px;

    color:
        #665466;

}


.charm-modal-found-info a {

    color:
        #8d5274;

    font-weight:
        bold;

}


/* ==================================================
   PIXEL SPARKLES
   ================================================== */

.pixel-sparkle {

    background:
        #fff4a9;

    box-shadow:

        5px
        0
        #fff4a9,

        -5px
        0
        #fff4a9,

        0
        5px
        #fff4a9,

        0
        -5px
        #fff4a9,

        0
        0
        10px
        rgba(
            255,
            244,
            169,
            0.55
        );

}


/* ==================================================
   MOBILE
   ================================================== */

@media (
    max-width:
    850px
) {

    .charm-window {

        width:
            min(
                100%,
                98vw
            );

    }

}


@media (
    max-width:
    650px
) {

    .charm-page {

        padding:
            14px
            8px
            42px;

    }


    .book-header::after {

        display:
            none;

    }


    .collection-heading::after {

        display:
            none;

    }


    .book-counter {

        width:
            100%;

        justify-content:
            center;

    }

}


@media (
    max-width:
    400px
) {

    .background-star {

        font-size:
            14px;

    }


    .book-owner-info h1 {

        letter-spacing:
            2px;

    }


    .charm-window::before {

        display:
            none;

    }

}


/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .background-star {

        animation:
            none;

    }

}