/* ==================================================
   RABBIT HOLE
   ================================================== */


:root {

    --rabbit-blue:
        #cbdfea;

    --rabbit-blue-dark:
        #899eac;

    --rabbit-pink:
        #d7a4b3;

    --rabbit-pink-light:
        #ead0d7;

    --rabbit-cream:
        #eee7da;

    --rabbit-paper:
        #e8e1d4;

    --rabbit-black:
        #111113;

    --rabbit-gray:
        #5c5c62;

}



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

html,
body {

    margin:
        0;

    width:
        100%;

    height:
        100%;

}



body.rabbit-hole-body {

    overflow:
        hidden;

    background:
        #111116;

}



.rabbit-page {

    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    overflow:
        hidden;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    color:
        var(--rabbit-black);

    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 center,

            #dce8ee 0%,

            #bdced8 42%,

            #78858d 70%,

            #26272c 100%
        );

    background-size:

        6px 6px,
        6px 6px,
        auto;

}



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

.rabbit-layout {

    width:
        min(
            1180px,
            94vw
        );

    max-height:
        92vh;

    display:
        grid;

    grid-template-columns:
        370px 620px;

    justify-content:
        center;

    align-items:
        center;

    gap:
        34px;

    position:
        relative;

    z-index:
        5;

}



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

.rabbit-vignette {

    position:
        absolute;

    inset:
        0;

    z-index:
        30;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at center,

            transparent 42%,

            rgba(
                15,
                15,
                20,
                0.20
            ) 65%,

            rgba(
                3,
                3,
                7,
                0.88
            ) 100%
        );

}



/* ==================================================
   SCANLINES
   ================================================== */

.rabbit-scanlines {

    position:
        absolute;

    inset:
        0;

    z-index:
        25;

    pointer-events:
        none;

    opacity:
        0.23;

    background:

        repeating-linear-gradient(
            0deg,

            transparent 0px,
            transparent 2px,

            rgba(
                0,
                0,
                0,
                0.18
            ) 3px,

            rgba(
                0,
                0,
                0,
                0.18
            ) 4px
        );

}



/* ==================================================
   ALICE GAME WINDOW
   ================================================== */

.rabbit-game-window {

    width:
        370px;

    height:
        610px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #eee8dd;

    border:
        2px solid
        #111116;

    box-shadow:

        7px 7px 0
        #111116,

        11px 11px 0
        #899eac;

}



/* ==================================================
   GAME BAR
   ================================================== */

.rabbit-game-bar {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        5px 8px;

    background:
        #a8cae1;

    border-bottom:
        2px solid
        #111116;

    font-size:
        16px;

    letter-spacing:
        1px;

}



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

.rabbit-game-checkers {

    height:
        18px;

    flex-shrink:
        0;

    background-color:
        #f3eee5;

    background-image:

        linear-gradient(
            45deg,
            #111116 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            #111116 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            #111116 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            #111116 75%
        );

    background-size:
        18px 18px;

    background-position:

        0 0,

        0 9px,

        9px -9px,

        -9px 0;

}



/* ==================================================
   GAME TITLE
   ================================================== */

.rabbit-game-title {

    padding:
        7px;

    color:
        #8f5267;

    text-align:
        center;

    font-size:
        19px;

    letter-spacing:
        2px;

}



/* ==================================================
   ALICE STAGE
   ================================================== */

.rabbit-alice-stage {

    position:
        relative;

    flex:
        1;

    min-height:
        0;

    margin:
        0 12px;

    overflow:
        hidden;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-end;

    background:

        linear-gradient(
            90deg,

            rgba(
                255,
                255,
                255,
                0.30
            ),

            rgba(
                185,
                217,
                238,
                0.26
            )
        );

    border:
        2px inset
        #aaa;

}



/* ==================================================
   ALICE IMAGE
   ================================================== */

.rabbit-alice-character {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    max-width:
        98%;

    max-height:
        100%;

    object-fit:
        contain;

    transition:
        opacity 100ms linear,
        transform 100ms linear;

}



.rabbit-alice-character.changing {

    opacity:
        0.20;

    transform:
        translateX(
            4px
        );

}



/* ==================================================
   GAME GLITCH
   ================================================== */

.alice-game-glitch {

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    pointer-events:
        none;

    opacity:
        0;

    background:

        repeating-linear-gradient(
            0deg,

            transparent 0px,
            transparent 5px,

            rgba(
                176,
                75,
                103,
                0.24
            ) 6px,

            transparent 8px
        );

}



.alice-game-glitch.active {

    opacity:
        1;

}



/* ==================================================
   GAME BUTTONS
   ================================================== */

.rabbit-outfits {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        5px;

    padding:
        8px 12px;

}



.rabbit-outfit-button {

    padding:
        6px 2px;

    background:
        #eee8dd;

    color:
        #111116;

    border:
        2px outset
        #ffffff;

    box-shadow:
        none;

    font-family:
        "VT323",
        monospace;

    font-size:
        14px;

    cursor:
        pointer;

}



.rabbit-outfit-button:hover {

    background:
        #efd3da;

    color:
        #111116;

    transform:
        none;

}



.rabbit-outfit-button.selected {

    background:
        #b9d9ee;

    border:
        2px inset
        white;

}



/* ==================================================
   GAME DIALOGUE
   ================================================== */

.rabbit-game-dialogue {

    position:
        relative;

    min-height:
        82px;

    margin:
        3px 12px 12px;

    padding:
        20px 12px 9px;

    background:
        #f4eee4;

    border:
        3px double
        #111116;

    text-align:
        left;

}



.rabbit-game-dialogue p {

    margin:
        0;

    font-size:
        18px;

    line-height:
        1.1;

}



.rabbit-game-name {

    position:
        absolute;

    top:
        -12px;

    left:
        9px;

    padding:
        1px 12px;

    background:
        #a8cae1;

    border:
        2px solid
        #111116;

    font-size:
        13px;

    letter-spacing:
        2px;

}



.rabbit-dialogue-arrow {

    position:
        absolute;

    right:
        8px;

    bottom:
        4px;

    color:
        #a75a72;

    animation:
        dialogue-arrow
        800ms
        steps(2)
        infinite;

}



@keyframes dialogue-arrow {

    50% {

        transform:
            translateY(
                3px
            );

    }

}



/* ==================================================
   WRONG ALICE
   ================================================== */

.rabbit-game-window.wrong-alice {

    box-shadow:

        7px 7px 0
        #111116,

        11px 11px 0
        #9f5067;

}



.rabbit-game-window.wrong-alice
.rabbit-game-bar {

    background:
        #b77788;

}



.rabbit-game-window.wrong-alice
.rabbit-game-name {

    background:
        #b77788;

}



/* ==================================================
   ORIGINAL RABBIT WINDOW
   ================================================== */

.rabbit-window {

    width:
        620px;

    max-width:
        100%;

    position:
        relative;

    background:
        var(--rabbit-paper);

    border:
        2px solid
        var(--rabbit-black);

    box-shadow:

        8px 8px 0
        rgba(
            0,
            0,
            0,
            0.88
        ),

        13px 13px 0
        rgba(
            124,
            145,
            157,
            0.65
        ),

        0 0 70px
        rgba(
            0,
            0,
            0,
            0.38
        );

}



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

.rabbit-checkers {

    height:
        24px;

    background-color:
        var(--rabbit-cream);

    background-image:

        linear-gradient(
            45deg,
            var(--rabbit-black) 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            var(--rabbit-black) 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            var(--rabbit-black) 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            var(--rabbit-black) 75%
        );

    background-size:
        24px 24px;

    background-position:

        0 0,

        0 12px,

        12px -12px,

        -12px 0;

}



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

.rabbit-bar {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    padding:
        6px 9px;

    background:
        var(--rabbit-blue-dark);

    color:
        #111116;

    border-top:
        2px solid
        var(--rabbit-black);

    border-bottom:
        2px solid
        var(--rabbit-black);

    font-size:
        18px;

    letter-spacing:
        1px;

}



.rabbit-bar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}



/* ==================================================
   MUSIC BUTTON
   ================================================== */

.rabbit-music-toggle {

    padding:
        2px 7px;

    background:
        var(--rabbit-paper);

    color:
        var(--rabbit-black);

    border:
        1px solid
        var(--rabbit-black);

    box-shadow:
        none;

    font-family:
        "VT323",
        monospace;

    font-size:
        13px;

    cursor:
        pointer;

}



.rabbit-music-toggle:hover {

    background:
        var(--rabbit-pink-light);

    color:
        var(--rabbit-black);

    transform:
        none;

}



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

.rabbit-content {

    position:
        relative;

    padding:
        35px;

    overflow:
        hidden;

    text-align:
        center;

}



/* ==================================================
   FILE
   ================================================== */

.rabbit-number {

    margin:
        0 0 14px;

    color:
        var(--rabbit-gray);

    font-size:
        14px;

    letter-spacing:
        4px;

}



/* ==================================================
   TITLE
   ================================================== */

.rabbit-title-wrap {

    position:
        relative;

}



.rabbit-title {

    position:
        relative;

    margin:
        0 auto 14px;

    color:
        #111113;

    font-size:
        clamp(
            31px,
            5vw,
            47px
        );

    line-height:
        0.93;

    letter-spacing:
        2px;

    text-shadow:

        2px 0
        rgba(
            177,
            91,
            115,
            0.30
        ),

        -2px 0
        rgba(
            80,
            131,
            160,
            0.30
        );

}



/* ==================================================
   GLITCH TITLE
   ================================================== */

.glitch-text::before,
.glitch-text::after {

    content:
        attr(
            data-text
        );

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0;

}



.glitch-text::before {

    color:
        #b75d77;

    transform:
        translateX(
            -3px
        );

}



.glitch-text::after {

    color:
        #5b8fa9;

    transform:
        translateX(
            3px
        );

}



.glitch-text.is-glitching::before {

    opacity:
        0.55;

    clip-path:
        inset(
            12%
            0
            58%
            0
        );

}



.glitch-text.is-glitching::after {

    opacity:
        0.45;

    clip-path:
        inset(
            58%
            0
            13%
            0
        );

}



/* ==================================================
   MESSAGE
   ================================================== */

.rabbit-message {

    margin:
        0 0 28px;

    color:
        #333239;

    font-size:
        20px;

    letter-spacing:
        1px;

}



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

.rabbit-note {

    width:
        65%;

    margin:
        22px auto;

    padding:
        10px 13px;

    background:

        linear-gradient(
            180deg,

            rgba(
                202,
                222,
                234,
                0.82
            ),

            rgba(
                228,
                214,
                214,
                0.72
            )
        );

    border:
        1px dashed
        var(--rabbit-black);

    text-align:
        left;

    font-size:
        17px;

}



.rabbit-note p {

    margin:
        3px;

}



/* ==================================================
   SPADE
   ================================================== */

.rabbit-spade {

    position:
        relative;

    margin:
        16px;

    color:
        #111113;

    font-size:
        68px;

    line-height:
        1;

    text-shadow:

        3px 0
        var(--rabbit-pink),

        -3px 0
        var(--rabbit-blue-dark);

}



/* ==================================================
   WARNING
   ================================================== */

.rabbit-warning {

    margin:
        0 0 26px;

    color:
        #1e1e24;

    font-size:
        19px;

    line-height:
        1.15;

    letter-spacing:
        2px;

}



/* ==================================================
   BACK
   ================================================== */

.rabbit-back {

    position:
        relative;

    z-index:
        50;

    color:
        #425d6d;

    font-size:
        18px;

    text-decoration:
        none;

    border-bottom:
        1px dashed
        #425d6d;

}



.rabbit-back:hover {

    color:
        #a4566e;

}



/* ==================================================
   SCREEN TEAR
   ================================================== */

.rabbit-screen-tear {

    position:
        absolute;

    left:
        -5%;

    width:
        110%;

    height:
        17px;

    z-index:
        35;

    opacity:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(
                219,
                237,
                246,
                0.42
            ),

            rgba(
                177,
                97,
                120,
                0.26
            ),

            transparent
        );

}



.rabbit-screen-tear.active {

    opacity:
        1;

}



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

.rabbit-window.corrupted {

    transform:
        translate(
            3px,
            -1px
        );

    filter:
        contrast(
            1.09
        );

}



/* ==================================================
   RANDOM VN BOX
   ================================================== */

.rabbit-dialogue {

    position:
        absolute;

    left:
        50%;

    bottom:
        3%;

    width:
        min(
            580px,
            82vw
        );

    z-index:
        15;

    transform:
        translateX(
            -50%
        );

    padding:
        10px 14px 13px;

    background:
        rgba(
            232,
            225,
            212,
            0.96
        );

    border:
        2px solid
        var(--rabbit-black);

    box-shadow:

        6px 6px 0
        rgba(
            0,
            0,
            0,
            0.78
        );

    color:
        var(--rabbit-black);

    text-align:
        left;

}



.rabbit-dialogue.hidden {

    display:
        none;

}



.rabbit-dialogue-name {

    color:
        #875064;

    font-size:
        15px;

    letter-spacing:
        3px;

}



.rabbit-dialogue-text {

    font-size:
        20px;

}



/* ==================================================
   MOBILE / SMALL SCREEN
   ================================================== */

@media (
    max-width: 1050px
) {

    .rabbit-page {

        overflow-y:
            auto;

        align-items:
            flex-start;

    }


    .rabbit-layout {

        display:
            flex;

        flex-direction:
            column;

        width:
            92%;

        max-height:
            none;

        padding:
            35px 0 80px;

    }


    .rabbit-game-window {

        width:
            min(
                370px,
                92vw
            );

    }


    .rabbit-window {

        width:
            min(
                620px,
                92vw
            );

    }

}