/* ==================================================
   CHIBI NETWORK
   CHARM BOOK
   everything intentionally pixel / 8-bit
   ================================================== */


* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;
}


body {
    min-height:
        100vh;

    margin:
        0;

    overflow-x:
        hidden;

    font-family:
        "Courier New",
        monospace;

    background:
        #18131f;

    color:
        #4e3d57;

    image-rendering:
        pixelated;
}


button,
a {
    font-family:
        inherit;
}


button {
    image-rendering:
        pixelated;
}


a {
    color:
        #684f7e;

    text-decoration:
        none;
}


a:hover {
    color:
        #a55b83;
}


.hidden {
    display:
        none !important;
}



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

.charm-background {
    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    background:

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

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

        radial-gradient(
            circle at 50% 15%,
            #392945 0,
            #211827 34%,
            #120e17 75%
        );

    background-size:
        20px 20px,
        20px 20px,
        auto;
}


.background-star {
    position:
        absolute;

    color:
        #ceb4db;

    opacity:
        0.38;

    font-size:
        20px;

    animation:
        pixelTwinkle
        2.4s
        steps(2, end)
        infinite;
}


.star-one {
    top:
        9%;

    left:
        7%;
}


.star-two {
    top:
        24%;

    right:
        11%;

    animation-delay:
        -0.8s;
}


.star-three {
    bottom:
        17%;

    left:
        12%;

    animation-delay:
        -1.4s;
}


.star-four {
    right:
        7%;

    bottom:
        9%;

    animation-delay:
        -1.9s;
}


.star-five {
    top:
        57%;

    left:
        3%;

    animation-delay:
        -0.4s;
}


@keyframes pixelTwinkle {

    0%,
    100% {
        opacity:
            0.2;

        transform:
            scale(1);
    }

    50% {
        opacity:
            0.7;

        transform:
            scale(1.25);
    }

}



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

.charm-page {
    position:
        relative;

    z-index:
        1;

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    padding:
        42px 18px 70px;
}



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

.charm-window {
    width:
        min(1040px, 96vw);

    overflow:
        hidden;

    background:
        #efe2d2;

    border:
        3px solid
        #5d465f;

    box-shadow:
        8px 0 0 #2a1d30,
        0 8px 0 #2a1d30,
        8px 8px 0 #120d16;
}



/* ==================================================
   TOP BAR
   ================================================== */

.charm-topbar {
    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        7px 11px;

    background:
        #866596;

    color:
        #fff7e9;

    border-bottom:
        3px solid
        #5d465f;

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}



/* ==================================================
   CHECKER STRIPS
   ================================================== */

.charm-checkers {
    height:
        12px;

    border-bottom:
        2px solid
        #665064;

    background:
        conic-gradient(
            from 90deg,

            #6c5274 25%,

            #d2b7cd 0 50%,

            #6c5274 0 75%,

            #d2b7cd 0
        );

    background-size:
        12px 12px;
}


.bottom-checkers {
    border-top:
        2px solid
        #665064;

    border-bottom:
        0;
}



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

.charm-navigation {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    padding:
        10px 13px;

    background:
        #d8c1cf;

    border-bottom:
        2px solid
        #70566d;
}


.charm-navigation a {
    display:
        block;

    padding:
        7px 9px;

    background:
        #f4e8df;

    color:
        #59435d;

    border:
        2px solid
        #725a70;

    box-shadow:
        2px 2px 0
        #ac8ca4;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.charm-navigation a:hover {
    position:
        relative;

    top:
        1px;

    left:
        1px;

    box-shadow:
        1px 1px 0
        #ac8ca4;

    background:
        #fff6ec;

    text-decoration:
        none;
}



/* ==================================================
   LOADING / NOT FOUND
   ================================================== */

.book-message {
    min-height:
        360px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        40px;

    background:
        #efe2d2;

    color:
        #806d7e;

    text-align:
        center;

    letter-spacing:
        2px;
}


.book-message h2 {
    margin:
        0;

    color:
        #735676;

    font-size:
        19px;
}


.book-message p {
    margin:
        0;

    font-size:
        11px;
}


.loading-pixel {
    color:
        #9670a7;

    font-size:
        35px;

    animation:
        loadingBlink
        0.8s
        steps(2, end)
        infinite;
}


@keyframes loadingBlink {

    0%,
    49% {
        opacity:
            1;
    }

    50%,
    100% {
        opacity:
            0.25;
    }

}



/* ==================================================
   MAIN BOOK CONTENT
   ================================================== */

.book-content {
    padding:
        22px;

    background:

        linear-gradient(
            rgba(93,70,95,0.035)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(93,70,95,0.035)
            1px,
            transparent 1px
        ),

        #efe2d2;

    background-size:
        16px 16px;
}



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

.book-header {
    display:
        grid;

    grid-template-columns:
        150px 1fr;

    gap:
        23px;

    align-items:
        center;

    padding:
        18px;

    background:
        #e3cdd4;

    border:
        3px solid
        #70566d;

    box-shadow:
        5px 5px 0
        #b795aa;
}



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

.book-owner-avatar-frame {
    width:
        130px;

    height:
        130px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #f8eee2;

    border:
        3px solid
        #70566d;

    box-shadow:
        4px 4px 0
        #9f7e96;
}


.book-owner-avatar {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    image-rendering:
        auto;
}


.book-owner-avatar-placeholder {
    color:
        #9c6b93;

    font-size:
        47px;
}



/* ==================================================
   OWNER INFO
   ================================================== */

.book-owner-info {
    min-width:
        0;
}


.book-eyebrow {
    margin:
        0 0 8px;

    color:
        #876f83;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.book-owner-info h1 {
    margin:
        0;

    color:
        #684d70;

    font-size:
        clamp(30px, 6vw, 52px);

    line-height:
        0.95;

    letter-spacing:
        4px;

    text-shadow:
        3px 3px 0
        #c6a6ba;
}


.book-owner-name {
    margin:
        13px 0 3px;

    color:
        #5a445c;

    font-size:
        14px;

    font-weight:
        bold;
}


.book-owner-username {
    margin:
        0 0 15px;

    color:
        #927b8c;

    font-size:
        10px;
}


.book-counter {
    width:
        fit-content;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        8px 10px;

    background:
        #f6ebe2;

    border:
        2px solid
        #775e74;

    box-shadow:
        3px 3px 0
        #b18fa5;
}


.book-counter span {
    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.book-counter strong {
    color:
        #8d5378;

    font-size:
        13px;
}



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

.badge-panel {
    display:
        grid;

    grid-template-columns:
        100px 1fr;

    gap:
        20px;

    align-items:
        center;

    margin-top:
        20px;

    padding:
        16px;

    background:
        #cbb7d6;

    border:
        3px solid
        #6c5874;

    box-shadow:
        5px 5px 0
        #9a7da8;
}


.badge-icon {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}



/* ==================================================
   PIXEL BADGE
   ================================================== */

.pixel-badge {
    position:
        relative;

    width:
        64px;

    height:
        64px;

    background:
        transparent;

    image-rendering:
        pixelated;
}


.badge-pixel {
    position:
        absolute;

    display:
        block;

    width:
        8px;

    height:
        8px;
}


.pixel-a {
    top:
        8px;

    left:
        24px;

    background:
        #f4de78;

    box-shadow:

        8px 0 #f4de78,

        -8px 8px #f4de78,
        0 8px #fff2a2,
        8px 8px #fff2a2,
        16px 8px #f4de78,

        -16px 16px #d5a443,
        -8px 16px #fff2a2,
        0 16px #f6cd58,
        8px 16px #f6cd58,
        16px 16px #fff2a2,
        24px 16px #d5a443,

        -16px 24px #d5a443,
        -8px 24px #f6cd58,
        0 24px #fff4b1,
        8px 24px #fff4b1,
        16px 24px #f6cd58,
        24px 24px #d5a443,

        -8px 32px #d5a443,
        0 32px #f6cd58,
        8px 32px #f6cd58,
        16px 32px #d5a443,

        0 40px #b77a32,
        8px 40px #b77a32;
}


.pixel-b,
.pixel-c,
.pixel-d,
.pixel-e {
    display:
        none;
}



/* ==================================================
   BADGE INFO
   ================================================== */

.badge-info {
    min-width:
        0;
}


.badge-small {
    margin:
        0 0 4px;

    color:
        #75607e;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.badge-info h2 {
    margin:
        0;

    color:
        #5f476a;

    font-size:
        20px;

    letter-spacing:
        2px;
}


.badge-description {
    margin:
        7px 0 13px;

    color:
        #65586b;

    font-size:
        10px;

    line-height:
        1.5;
}


.badge-progress {
    width:
        min(390px, 100%);

    height:
        17px;

    padding:
        3px;

    overflow:
        hidden;

    background:
        #f6ecdf;

    border:
        2px solid
        #705b75;
}


.badge-progress-fill {
    width:
        0%;

    height:
        100%;

    background:
        repeating-linear-gradient(
            90deg,

            #b275a4
            0 8px,

            #d8a4c5
            8px 16px
        );

    transition:
        width 250ms
        steps(8, end);
}


.badge-progress-text {
    margin:
        6px 0 0;

    color:
        #77697b;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



/* ==================================================
   COLLECTION HEADER
   ================================================== */

.collection-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        20px;

    margin-top:
        25px;

    padding:
        12px 4px 9px;

    border-bottom:
        3px double
        #846a7d;
}


.collection-small {
    margin:
        0 0 4px;

    color:
        #8f7889;

    font-size:
        8px;

    letter-spacing:
        2px;
}


.collection-heading h2 {
    margin:
        0;

    color:
        #634d67;

    font-size:
        18px;

    letter-spacing:
        3px;
}


.collection-key {
    display:
        flex;

    gap:
        12px;

    color:
        #806d7b;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



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

.charm-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        15px;

    margin-top:
        18px;
}


.charm-loading-grid {
    grid-column:
        1 / -1;

    padding:
        45px;

    color:
        #8a7584;

    text-align:
        center;

    border:
        2px dashed
        #9e8598;

    font-size:
        10px;

    letter-spacing:
        2px;
}



/* ==================================================
   INDIVIDUAL CHARM CARD
   ================================================== */

.charm-card {
    position:
        relative;

    min-width:
        0;

    min-height:
        205px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        14px 10px 11px;

    background:
        #f6eadf;

    color:
        #554357;

    border:
        3px solid
        #745c70;

    box-shadow:
        4px 4px 0
        #b394a7;

    cursor:
        pointer;

    transition:
        none;
}


.charm-card:hover {
    top:
        -2px;

    left:
        -2px;

    box-shadow:
        6px 6px 0
        #b394a7;
}


.charm-card:active {
    top:
        2px;

    left:
        2px;

    box-shadow:
        2px 2px 0
        #b394a7;
}


.charm-card.is-found {
    background:
        #fff1dc;
}


.charm-card.is-found::before {
    content:
        "FOUND";

    position:
        absolute;

    top:
        7px;

    right:
        7px;

    padding:
        3px 4px;

    background:
        #8a6388;

    color:
        #fff5e7;

    border:
        1px solid
        #513d55;

    font-size:
        6px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.charm-card.is-locked {
    background:
        #c9bdc5;

    color:
        #766c75;

    border-color:
        #756b74;

    box-shadow:
        4px 4px 0
        #948a92;
}


.charm-card.is-locked:hover {
    top:
        0;

    left:
        0;

    box-shadow:
        4px 4px 0
        #948a92;
}



/* ==================================================
   CHARM ART AREA
   ================================================== */

.charm-art {
    position:
        relative;

    width:
        110px;

    height:
        110px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    image-rendering:
        pixelated;
}


.charm-card.is-locked
.charm-art {
    filter:
        grayscale(1)
        brightness(0.45);

    opacity:
        0.48;
}



/* ==================================================
   PIXEL ART CANVAS
   ================================================== */

.pixel-art {
    position:
        relative;

    width:
        8px;

    height:
        8px;

    transform:
        translate(-4px, -4px);

    image-rendering:
        pixelated;
}


.pixel-art::before,
.pixel-art::after {
    image-rendering:
        pixelated;
}



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

.charm-name {
    margin:
        0;

    color:
        #624963;

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    line-height:
        1.3;
}


.charm-card.is-locked
.charm-name {
    color:
        #655e64;
}


.charm-number {
    margin:
        0;

    color:
        #9d8798;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.charm-found-date {
    min-height:
        10px;

    margin:
        0;

    color:
        #a15e83;

    font-size:
        7px;

    font-weight:
        bold;

    text-align:
        center;
}


.charm-card.is-locked
.charm-found-date {
    color:
        #777076;
}



/* ==================================================
   LOCKED QUESTION MARK
   ================================================== */

.charm-locked-mark {
    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        34px;

    height:
        44px;

    background:
        #625963;

    color:
        #d3c9d0;

    border:
        3px solid
        #494148;

    box-shadow:
        3px 3px 0
        #877d85;

    font-size:
        22px;

    font-weight:
        bold;
}



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

.book-footer {
    margin-top:
        25px;

    padding:
        15px;

    background:
        #dac6cf;

    border:
        2px dashed
        #886e80;

    color:
        #675567;

    text-align:
        center;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    line-height:
        1.6;
}


.book-footer p {
    margin:
        0;
}


.book-footer-small {
    margin-top:
        5px !important;

    color:
        #8b7786;

    font-size:
        8px;
}



/* ==================================================
   CHARM MODAL
   ================================================== */

.charm-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;
}


.charm-modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(16,10,19,0.78);
}


.charm-modal-window {
    position:
        relative;

    z-index:
        1;

    width:
        min(430px, 92vw);

    background:
        #f1e3d5;

    border:
        3px solid
        #665068;

    box-shadow:
        7px 7px 0
        #140e18;
}


.charm-modal-topbar {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        7px 9px;

    background:
        #886697;

    color:
        #fff4e5;

    border-bottom:
        3px solid
        #665068;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.charm-modal-topbar button {
    width:
        24px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    background:
        #e3bdca;

    color:
        #503c52;

    border:
        2px solid
        #5f485f;

    cursor:
        pointer;

    font-size:
        15px;

    font-weight:
        bold;
}


.charm-modal-topbar button:hover {
    background:
        #fff0e8;
}


.charm-modal-body {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        23px;

    text-align:
        center;
}


.charm-modal-art {
    position:
        relative;

    width:
        135px;

    height:
        135px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin-bottom:
        8px;

    background:
        #e1ccd4;

    border:
        2px dashed
        #856b7d;

    image-rendering:
        pixelated;
}


.charm-modal-status {
    margin:
        9px 0 5px;

    color:
        #9b5d82;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.charm-modal-body h2 {
    margin:
        0;

    color:
        #634965;

    font-size:
        20px;

    letter-spacing:
        2px;
}


.charm-modal-description {
    max-width:
        320px;

    margin:
        11px auto;

    color:
        #706171;

    font-size:
        10px;

    line-height:
        1.6;
}


.charm-modal-found-info {
    width:
        100%;

    margin-top:
        10px;

    padding:
        10px;

    background:
        #e4d1d6;

    border:
        2px solid
        #80677a;

    color:
        #665466;

    font-size:
        8px;

    line-height:
        1.6;
}


.charm-modal-found-info p {
    margin:
        2px 0;
}



/* ==================================================
   SPECIAL STATE:
   LOCKED MODAL
   ================================================== */

.charm-modal-window.locked
.charm-modal-art {
    filter:
        grayscale(1);

    opacity:
        0.6;
}


.charm-modal-window.locked
.charm-modal-status {
    color:
        #746d73;
}



/* ==================================================
   TINY PIXEL SPARKLE
   ================================================== */

.pixel-sparkle {
    position:
        absolute;

    width:
        5px;

    height:
        5px;

    background:
        #fff1a7;

    box-shadow:

        5px 0
        #fff1a7,

        -5px 0
        #fff1a7,

        0 5px
        #fff1a7,

        0 -5px
        #fff1a7;

    animation:
        sparkleBlink
        1s
        steps(2, end)
        infinite;
}


@keyframes sparkleBlink {

    0%,
    49% {
        opacity:
            1;
    }

    50%,
    100% {
        opacity:
            0.25;
    }

}



/* ==================================================
   FOUND CHARM FLASH
   ================================================== */

@keyframes charmFoundFlash {

    0% {
        background:
            #fff8d0;
    }

    25% {
        background:
            #f7bdd5;
    }

    50% {
        background:
            #cdbbe9;
    }

    75% {
        background:
            #f7bdd5;
    }

    100% {
        background:
            #fff1dc;
    }

}


.charm-card.just-found {
    animation:
        charmFoundFlash
        0.8s
        steps(4, end)
        1;
}



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

@media (
    max-width: 850px
) {

    .charm-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}



@media (
    max-width: 650px
) {

    .charm-page {
        padding:
            15px 8px 45px;
    }


    .book-content {
        padding:
            12px;
    }


    .book-header {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;
    }


    .book-owner-info {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;
    }


    .badge-panel {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .badge-progress {
        margin:
            0 auto;
    }


    .collection-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .charm-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



@media (
    max-width: 400px
) {

    .charm-topbar {
        font-size:
            8px;

        letter-spacing:
            0;
    }


    .charm-navigation {
        flex-direction:
            column;
    }


    .charm-navigation a {
        text-align:
            center;
    }


    .book-owner-info h1 {
        font-size:
            31px;
    }


    .book-counter {
        flex-direction:
            column;

        gap:
            4px;
    }


    .charm-grid {
        gap:
            10px;
    }


    .charm-card {
        min-height:
            190px;

        padding:
            12px 6px 10px;
    }


    .charm-art {
        width:
            95px;

        height:
            100px;
    }


    .collection-key {
        flex-direction:
            column;

        gap:
            4px;
    }

}