/* ==================================================
   CHIBI NETWORK
   SECRET ROOM CHARMS
   8-BIT / PIXEL STYLE
   ================================================== */


.room-charm-host {
    position:
        relative !important;
}



/* ==================================================
   HIDDEN CHARM BUTTON
   ================================================== */

.secret-room-charm {
    position:
        absolute;

    z-index:
        25;

    width:
        54px;

    height:
        54px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    cursor:
        pointer;

    image-rendering:
        pixelated;

    filter:
        drop-shadow(
            2px 2px 0
            rgba(0,0,0,0.28)
        );

    transition:
        none;
}


.secret-room-charm:hover {
    transform:
        translateY(-2px);
}


.secret-room-charm:active {
    transform:
        translateY(1px);
}



/* ==================================================
   RANDOMIZED HIDING POSITIONS
   ================================================== */

.secret-room-charm.charm-pos-top-left {
    top:
        8px;

    left:
        8px;
}


.secret-room-charm.charm-pos-top-right {
    top:
        8px;

    right:
        8px;
}


.secret-room-charm.charm-pos-bottom-left {
    bottom:
        8px;

    left:
        8px;
}


.secret-room-charm.charm-pos-bottom-right {
    right:
        8px;

    bottom:
        8px;
}



/* ==================================================
   PIXEL SPRITE
   ================================================== */

.room-charm-sprite {
    position:
        relative;

    flex-shrink:
        0;

    image-rendering:
        pixelated;

    transform:
        scale(0.72);

    transform-origin:
        center;
}


.room-charm-sprite span {
    position:
        absolute;

    display:
        block;

    image-rendering:
        pixelated;
}



/* ==================================================
   SECRET SPARKLE
   ================================================== */

.room-charm-sparkle {
    position:
        absolute;

    top:
        5px;

    right:
        5px;

    width:
        4px;

    height:
        4px;

    background:
        #fff4a2;

    box-shadow:

        4px 0
        #fff4a2,

        -4px 0
        #fff4a2,

        0 4px
        #fff4a2,

        0 -4px
        #fff4a2;

    pointer-events:
        none;

    animation:
        roomCharmSparkle
        1.15s
        steps(2, end)
        infinite;
}


@keyframes roomCharmSparkle {

    0%,
    49% {
        opacity:
            0.95;
    }

    50%,
    100% {
        opacity:
            0.15;
    }

}



/* ==================================================
   SUBTLE IDLE MOVEMENT
   ================================================== */

.secret-room-charm {
    animation:
        roomCharmIdle
        2.2s
        steps(2, end)
        infinite;
}


@keyframes roomCharmIdle {

    0%,
    100% {
        margin-top:
            0;
    }

    50% {
        margin-top:
            -2px;
    }

}



/* ==================================================
   OWNER VIEW

   Only the room owner will get this little hint.
   Visitors will NOT see the words.
   ================================================== */

.secret-room-charm.owner-view::after {
    content:
        "YOUR CHARM";

    position:
        absolute;

    top:
        47px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        max-content;

    padding:
        2px 4px;

    background:
        var(
            --room-panel-two,
            #eadde5
        );

    color:
        var(
            --room-accent,
            #825d8e
        );

    border:
        1px solid
        var(
            --room-border,
            #705b70
        );

    font-family:
        "Courier New",
        monospace;

    font-size:
        6px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    pointer-events:
        none;
}



/* ==================================================
   FOUND EFFECT
   ================================================== */

.secret-room-charm.charm-found {
    animation:
        roomCharmFound
        0.85s
        steps(5, end)
        1;
}


@keyframes roomCharmFound {

    0% {
        transform:
            scale(1);
    }

    20% {
        transform:
            scale(1.25)
            rotate(-8deg);

        filter:
            brightness(1.35);
    }

    40% {
        transform:
            scale(1)
            rotate(8deg);
    }

    60% {
        transform:
            scale(1.25)
            rotate(-5deg);

        filter:
            brightness(1.5);
    }

    80% {
        transform:
            scale(1)
            rotate(5deg);
    }

    100% {
        transform:
            scale(1);
    }

}



/* ==================================================
   CHARM BOOK / SETTINGS LINKS
   Injected into room navigation by JS.
   ================================================== */

.room-charm-nav-link {
    display:
        inline-block;
}


.room-charm-door-link {
    display:
        block;
}



/* ==================================================
   MODAL OVERLAY
   ================================================== */

.room-charm-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

    font-family:
        "Courier New",
        monospace;
}


.room-charm-modal.hidden {
    display:
        none !important;
}


.room-charm-modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(10,7,13,0.78);
}



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

.room-charm-modal-window {
    position:
        relative;

    z-index:
        1;

    width:
        min(430px, 94vw);

    overflow:
        hidden;

    background:
        #f0e2d5;

    color:
        #584658;

    border:
        3px solid
        #665066;

    box-shadow:
        7px 7px 0
        #130d17;

    image-rendering:
        pixelated;
}



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

.room-charm-modal-topbar {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    padding:
        7px 9px;

    background:
        #896995;

    color:
        #fff6e8;

    border-bottom:
        3px solid
        #665066;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.room-charm-modal-close {
    width:
        25px;

    height:
        23px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        0;

    background:
        #e5c4cf;

    color:
        #503d52;

    border:
        2px solid
        #5f495f;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        bold;
}


.room-charm-modal-close:hover {
    background:
        #fff0e8;
}



/* ==================================================
   MODAL BODY
   ================================================== */

.room-charm-modal-body {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        22px;

    text-align:
        center;

    background:

        linear-gradient(
            rgba(100,73,96,0.035)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(100,73,96,0.035)
            1px,
            transparent 1px
        ),

        #f0e2d5;

    background-size:
        14px 14px;
}



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

.room-charm-modal-art {
    position:
        relative;

    width:
        135px;

    height:
        135px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin-bottom:
        12px;

    background:
        #ddc8d2;

    border:
        3px solid
        #765e72;

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

    image-rendering:
        pixelated;
}


.room-charm-modal-art
.room-charm-sprite {
    transform:
        scale(1.2);
}



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

.room-charm-modal-status {
    margin:
        0 0 6px;

    color:
        #9d5f84;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.room-charm-modal-name {
    margin:
        0;

    color:
        #624965;

    font-size:
        21px;

    line-height:
        1.2;

    letter-spacing:
        2px;
}


.room-charm-modal-message {
    max-width:
        330px;

    margin:
        12px auto;

    color:
        #716170;

    font-size:
        10px;

    line-height:
        1.6;
}



/* ==================================================
   ROOM SOURCE
   ================================================== */

.room-charm-source {
    width:
        100%;

    margin-top:
        7px;

    padding:
        9px;

    background:
        #e3d0d6;

    color:
        #665466;

    border:
        2px solid
        #80687a;

    font-size:
        8px;

    line-height:
        1.6;
}


.room-charm-source strong {
    color:
        #855c79;
}



/* ==================================================
   MODAL BUTTONS
   ================================================== */

.room-charm-modal-actions {
    width:
        100%;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        13px;
}


.room-charm-modal-actions a,
.room-charm-modal-actions button {
    padding:
        8px 10px;

    background:
        #89698f;

    color:
        #fff5e7;

    border:
        2px solid
        #5f4b62;

    box-shadow:
        3px 3px 0
        #58405a;

    font-family:
        inherit;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    text-decoration:
        none;

    cursor:
        pointer;
}


.room-charm-modal-actions a:hover,
.room-charm-modal-actions button:hover {
    position:
        relative;

    top:
        1px;

    left:
        1px;

    box-shadow:
        2px 2px 0
        #58405a;

    text-decoration:
        none;
}



/* ==================================================
   COLLECTED POPUP STATE
   ================================================== */

.room-charm-modal-window.was-collected
.room-charm-modal-status {
    color:
        #a25d7c;
}


.room-charm-modal-window.was-collected
.room-charm-modal-art {
    animation:
        roomCharmModalFlash
        0.8s
        steps(4, end)
        1;
}


@keyframes roomCharmModalFlash {

    0% {
        background:
            #fff4be;
    }

    25% {
        background:
            #f3bfd5;
    }

    50% {
        background:
            #d4c1ec;
    }

    75% {
        background:
            #f3bfd5;
    }

    100% {
        background:
            #ddc8d2;
    }

}



/* ==================================================
   LOGIN REQUIRED STATE
   ================================================== */

.room-charm-modal-window.login-required
.room-charm-modal-status {
    color:
        #756b74;
}



/* ==================================================
   THEME-SPECIFIC TWEAKS
   ================================================== */

body.theme-wired
.secret-room-charm {
    filter:
        drop-shadow(
            2px 0
            rgba(110,210,255,0.45)
        );
}


body.theme-save-room
.room-charm-sparkle {
    background:
        #c4dda9;

    box-shadow:

        4px 0 #c4dda9,

        -4px 0 #c4dda9,

        0 4px #c4dda9,

        0 -4px #c4dda9;
}


body.theme-bee-puppycat
.room-charm-sparkle {
    background:
        #fff1a9;

    box-shadow:

        4px 0 #fff1a9,

        -4px 0 #fff1a9,

        0 4px #fff1a9,

        0 -4px #fff1a9;
}


body.theme-wisteria
.room-charm-sparkle {
    background:
        #d7b7f3;

    box-shadow:

        4px 0 #d7b7f3,

        -4px 0 #d7b7f3,

        0 4px #d7b7f3,

        0 -4px #d7b7f3;
}



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

@media (
    max-width: 650px
) {

    .secret-room-charm {
        width:
            47px;

        height:
            47px;
    }


    .secret-room-charm
    .room-charm-sprite {
        transform:
            scale(0.62);
    }


    .secret-room-charm.owner-view::after {
        top:
            42px;
    }


    .room-charm-modal-body {
        padding:
            18px 14px;
    }


    .room-charm-modal-actions {
        flex-direction:
            column;
    }


    .room-charm-modal-actions a,
    .room-charm-modal-actions button {
        width:
            100%;
    }

}