/* ==================================================
   CHIBI NETWORK
   SECRET CHARM SETTINGS
   8-BIT / PIXEL STYLE
   ================================================== */


* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;
}


body {
    min-height:
        100vh;

    margin:
        0;

    font-family:
        "Courier New",
        monospace;

    background:
        #17121d;

    color:
        #524355;

    image-rendering:
        pixelated;
}


a {
    color:
        #75557c;

    text-decoration:
        none;
}


a:hover {
    color:
        #a15b83;
}


button {
    font-family:
        inherit;
}


.hidden {
    display:
        none !important;
}



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

.secret-charm-page {
    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    padding:
        42px 18px 70px;

    background:

        radial-gradient(
            circle at 20% 15%,
            rgba(184,142,201,0.18),
            transparent 25%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(204,128,165,0.13),
            transparent 28%
        ),

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

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

        #17121d;

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



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

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

    overflow:
        hidden;

    background:
        #efe3d7;

    border:
        3px solid
        #655064;

    box-shadow:
        8px 0 0 #2d2130,
        0 8px 0 #2d2130,
        8px 8px 0 #100b13;
}



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

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

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        16px;

    padding:
        7px 10px;

    background:
        #896794;

    color:
        #fff5e8;

    border-bottom:
        3px solid
        #655064;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



/* ==================================================
   CHECKERS
   ================================================== */

.secret-checkers {
    height:
        12px;

    background:
        conic-gradient(
            from 90deg,
            #765c7e 25%,
            #d8c2d4 0 50%,
            #765c7e 0 75%,
            #d8c2d4 0
        );

    background-size:
        12px 12px;

    border-bottom:
        2px solid
        #6d586e;
}


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

    border-bottom:
        0;
}



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

.secret-navigation {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    padding:
        10px 13px;

    background:
        #d8c4cf;

    border-bottom:
        2px solid
        #765f72;
}


.secret-navigation a {
    padding:
        7px 9px;

    background:
        #f8eee5;

    color:
        #5d485f;

    border:
        2px solid
        #725b70;

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

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


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

    top:
        1px;

    left:
        1px;

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

    background:
        #fff8f0;

    text-decoration:
        none;
}



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

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap:
        13px;

    padding:
        40px;

    color:
        #83727f;

    text-align:
        center;

    letter-spacing:
        2px;
}


.secret-message h2 {
    margin:
        0;

    color:
        #715774;

    font-size:
        18px;
}


.secret-message p {
    margin:
        0;

    font-size:
        10px;

    line-height:
        1.6;
}


.secret-message a {
    margin-top:
        8px;

    padding:
        8px 11px;

    background:
        #d9bfd0;

    color:
        #5e4660;

    border:
        2px solid
        #71596d;

    box-shadow:
        3px 3px 0
        #b28da5;

    font-size:
        9px;

    font-weight:
        bold;
}


.secret-loading-star {
    color:
        #9f7aae;

    font-size:
        34px;

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


@keyframes secretBlink {

    0%,
    49% {
        opacity:
            1;
    }

    50%,
    100% {
        opacity:
            0.25;
    }

}



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

.secret-content {
    padding:
        22px;

    background:

        linear-gradient(
            rgba(105,80,100,0.035)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(105,80,100,0.035)
            1px,
            transparent 1px
        ),

        #efe3d7;

    background-size:
        16px 16px;
}



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

.secret-header {
    padding:
        19px;

    background:
        #e2cbd4;

    border:
        3px solid
        #745b70;

    box-shadow:
        5px 5px 0
        #b593a7;

    text-align:
        center;
}


.secret-small {
    margin:
        0 0 8px;

    color:
        #8b7287;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.secret-header h1 {
    margin:
        0;

    color:
        #684d6e;

    font-size:
        clamp(28px, 6vw, 48px);

    letter-spacing:
        4px;

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


.secret-header > p:last-child {
    max-width:
        580px;

    margin:
        12px auto 0;

    color:
        #6c5b69;

    font-size:
        10px;

    line-height:
        1.6;
}



/* ==================================================
   EQUIPPED PANEL
   ================================================== */

.equipped-panel {
    display:
        grid;

    grid-template-columns:
        1fr 150px;

    gap:
        20px;

    align-items:
        center;

    margin-top:
        20px;

    padding:
        17px;

    background:
        #cdb8d4;

    border:
        3px solid
        #705a74;

    box-shadow:
        5px 5px 0
        #987da3;
}


.equipped-label {
    margin:
        0 0 6px;

    color:
        #76617a;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.equipped-panel h2 {
    margin:
        0;

    color:
        #5f4667;

    font-size:
        21px;

    letter-spacing:
        2px;
}


.equipped-description {
    margin:
        9px 0 0;

    color:
        #655967;

    font-size:
        10px;

    line-height:
        1.6;
}



/* ==================================================
   EQUIPPED ART
   ================================================== */

.equipped-art {
    width:
        130px;

    height:
        130px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    justify-self:
        end;

    position:
        relative;

    background:
        #f8ece1;

    border:
        3px solid
        #745d73;

    box-shadow:
        4px 4px 0
        #9d8198;

    overflow:
        hidden;

    image-rendering:
        pixelated;
}


.empty-charm {
    width:
        46px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #695d67;

    color:
        #d9cdd5;

    border:
        3px solid
        #4b4249;

    box-shadow:
        4px 4px 0
        #9a8996;

    font-size:
        28px;

    font-weight:
        bold;
}



/* ==================================================
   SECRET NOTE
   ================================================== */

.secret-note {
    margin-top:
        20px;

    padding:
        13px 15px;

    background:
        #f4e7dc;

    border:
        2px dashed
        #8f7486;

    color:
        #776574;

    font-size:
        9px;

    line-height:
        1.6;
}


.secret-note p {
    margin:
        4px 0;
}



/* ==================================================
   DRAWER HEADING
   ================================================== */

.drawer-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        20px;

    margin-top:
        24px;

    padding:
        10px 3px;

    border-bottom:
        3px double
        #80677c;
}


.drawer-heading p {
    margin:
        0 0 4px;

    color:
        #90798b;

    font-size:
        8px;

    letter-spacing:
        2px;
}


.drawer-heading h2 {
    margin:
        0;

    color:
        #624d66;

    font-size:
        18px;

    letter-spacing:
        3px;
}


.drawer-heading > span {
    color:
        #8c7587;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



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

.secret-charm-grid {
    display:
        grid;

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

    gap:
        14px;

    margin-top:
        17px;
}


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

    padding:
        40px;

    color:
        #887582;

    border:
        2px dashed
        #9f8798;

    text-align:
        center;

    font-size:
        9px;

    letter-spacing:
        2px;
}



/* ==================================================
   CHARM OPTION CARD
   ================================================== */

.secret-charm-card {
    position:
        relative;

    min-height:
        185px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        12px 8px;

    background:
        #f7ebe0;

    color:
        #5a465b;

    border:
        3px solid
        #765e72;

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

    cursor:
        pointer;

    image-rendering:
        pixelated;
}


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

    left:
        -2px;

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


.secret-charm-card.selected {
    background:
        #fff0c9;

    border-color:
        #9c6583;

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


.secret-charm-card.selected::after {
    content:
        "SELECTED";

    position:
        absolute;

    top:
        7px;

    right:
        7px;

    padding:
        3px 4px;

    background:
        #9c6082;

    color:
        #fff4e6;

    border:
        1px solid
        #5b4054;

    font-size:
        6px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.secret-charm-card.equipped {
    outline:
        3px double
        #745387;

    outline-offset:
        3px;
}


.secret-charm-card.equipped::before {
    content:
        "HIDDEN";

    position:
        absolute;

    top:
        7px;

    left:
        7px;

    padding:
        3px 4px;

    background:
        #67537d;

    color:
        #fff6ed;

    border:
        1px solid
        #493c58;

    font-size:
        6px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



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

.secret-charm-art {
    width:
        105px;

    height:
        105px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    image-rendering:
        pixelated;
}


.pixel-art {
    position:
        relative;

    image-rendering:
        pixelated;
}


.secret-charm-name {
    margin:
        0;

    color:
        #614c64;

    text-align:
        center;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    line-height:
        1.3;
}


.secret-charm-number {
    margin:
        0;

    color:
        #9a8493;

    font-size:
        7px;

    letter-spacing:
        1px;
}



/* ==================================================
   SAVE PANEL
   ================================================== */

.secret-save-panel {
    margin-top:
        24px;

    padding:
        16px;

    background:
        #dcc7d1;

    border:
        3px solid
        #755f71;

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


.secret-status {
    min-height:
        16px;

    margin:
        0 0 11px;

    color:
        #775f72;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.secret-buttons {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.secret-buttons button {
    padding:
        9px 12px;

    background:
        #8c688c;

    color:
        #fff6e8;

    border:
        2px solid
        #5f495e;

    box-shadow:
        3px 3px 0
        #553f55;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.secret-buttons button:hover:not(:disabled) {
    position:
        relative;

    top:
        1px;

    left:
        1px;

    box-shadow:
        2px 2px 0
        #553f55;
}


.secret-buttons button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.45;
}


.secret-buttons .remove-button {
    background:
        #c9b4bd;

    color:
        #5c4854;

    border-color:
        #705b68;

    box-shadow:
        3px 3px 0
        #927b88;
}



/* ==================================================
   SAVED FLASH
   ================================================== */

@keyframes savedFlash {

    0% {
        background:
            #dcc7d1;
    }

    30% {
        background:
            #fff3bd;
    }

    60% {
        background:
            #d9c5ed;
    }

    100% {
        background:
            #dcc7d1;
    }

}


.secret-save-panel.saved {
    animation:
        savedFlash
        0.7s
        steps(3, end)
        1;
}



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

.secret-pixel-sparkle {
    position:
        absolute;

    width:
        5px;

    height:
        5px;

    background:
        #fff2a4;

    box-shadow:

        5px 0
        #fff2a4,

        -5px 0
        #fff2a4,

        0 5px
        #fff2a4,

        0 -5px
        #fff2a4;

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


@keyframes sparkleSteps {

    0%,
    49% {
        opacity:
            1;
    }

    50%,
    100% {
        opacity:
            0.25;
    }

}



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

@media (
    max-width: 820px
) {

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

}



@media (
    max-width: 650px
) {

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


    .secret-content {
        padding:
            12px;
    }


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

        text-align:
            center;
    }


    .equipped-art {
        justify-self:
            center;
    }


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

        flex-direction:
            column;
    }


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


    .secret-buttons {
        flex-direction:
            column;
    }


    .secret-buttons button {
        width:
            100%;
    }

}



@media (
    max-width: 420px
) {

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

        letter-spacing:
            0;
    }


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


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


    .secret-header h1 {
        font-size:
            28px;
    }


    .secret-charm-grid {
        gap:
            10px;
    }


    .secret-charm-card {
        min-height:
            170px;

        padding:
            10px 5px;
    }


    .secret-charm-art {
        width:
            90px;

        height:
            95px;
    }

}