body {
    margin: 0;

    background:
        #090806;

    color:
        #d1c39b;

    font-family:
        Georgia,
        serif;

    overflow-x:
        hidden;
}


.container {
    max-width:
        950px;

    margin:
        35px auto;

    padding:
        20px;
}


header {
    text-align:
        center;
}


.temple-label {
    color:
        #776d50;

    font-size:
        12px;

    letter-spacing:
        3px;
}


h1 {
    margin-bottom:
        8px;

    color:
        #d6c793;

    font-size:
        42px;

    letter-spacing:
        6px;
}


.subtitle {
    color:
        #776d50;

    font-style:
        italic;
}


.chamber-scene {
    margin-top:
        30px;

    padding:
        28px;

    border:
        1px solid #5c4d2c;

    background:
        linear-gradient(
            #18140d,
            #0e0c08
        );

    text-align:
        center;
}


.stone-heading {
    margin-bottom:
        20px;

    color:
        #817657;

    font-size:
        12px;

    letter-spacing:
        3px;
}


.idol {
    margin:
        10px 0 -4px;

    font-size:
        82px;

    line-height:
        1;
}


.pedestal {
    width:
        230px;

    margin:
        0 auto;
}


.pedestal-top {
    height:
        25px;

    border:
        1px solid #756645;

    background:
        #66593d;
}


.pedestal-body {
    padding:
        26px 10px;

    border-left:
        1px solid #756645;

    border-right:
        1px solid #756645;

    border-bottom:
        1px solid #756645;

    background:
        #3d3525;

    color:
        #c2b58d;

    font-family:
        monospace;

    font-size:
        14px;
}


.pedestal-body span {
    display:
        block;

    margin-top:
        12px;

    color:
        #c68451;
}


.idol-button {
    margin-top:
        25px;

    padding:
        13px 25px;

    border:
        1px solid #7c673a;

    background:
        #6d582b;

    color:
        white;

    cursor:
        pointer;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.idol-button:hover {
    background:
        #927639;
}


.warning {
    margin-top:
        20px;

    color:
        #8a7254;

    font-size:
        13px;
}


.terminal {
    margin-top:
        25px;

    border:
        1px solid #3d4838;

    background:
        #050704;

    font-family:
        monospace;

    overflow:
        hidden;
}


.terminal-header {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        13px 18px;

    border-bottom:
        1px solid #3d4838;

    background:
        #11150f;

    color:
        #8d9c7c;

    letter-spacing:
        2px;
}


.online {
    color:
        #87b374;
}


.terminal-help {
    padding:
        18px;

    color:
        #707a67;

    line-height:
        1.6;
}


.inline-command {
    border:
        none;

    background:
        transparent;

    color:
        #9ab88b;

    cursor:
        pointer;

    font-family:
        monospace;

    text-decoration:
        underline;
}


.terminal label {
    display:
        block;

    padding:
        0 18px 7px;

    color:
        #67725e;

    font-size:
        11px;

    letter-spacing:
        2px;
}


.request-row {
    display:
        flex;

    gap:
        10px;

    padding:
        0 18px 18px;
}


.method {
    display:
        flex;

    align-items:
        center;

    padding:
        0 13px;

    border:
        1px solid #40523a;

    color:
        #8fae7f;
}


.request-row input {
    flex:
        1;

    min-width:
        0;

    padding:
        12px;

    border:
        1px solid #343d30;

    background:
        #0a0e08;

    color:
        #98bc87;

    font-family:
        monospace;

    font-size:
        15px;
}


#sendButton {
    padding:
        10px 18px;

    border:
        1px solid #53644c;

    background:
        #252e21;

    color:
        #c5d0bb;

    cursor:
        pointer;
}


.response-bar {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        10px 18px;

    border-top:
        1px solid #343d30;

    border-bottom:
        1px solid #343d30;

    color:
        #67725e;

    font-size:
        11px;

    letter-spacing:
        2px;
}


#responseOutput {
    min-height:
        230px;

    margin:
        0;

    padding:
        20px;

    color:
        #8fb17e;

    line-height:
        1.6;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


.victory {
    margin-top:
        25px;

    padding:
        25px;

    border:
        1px solid #7fa76d;

    background:
        #11170e;

    text-align:
        center;
}


.victory-heading {
    color:
        #8fbd79;

    font-size:
        24px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.flag {
    margin-top:
        20px;

    padding:
        15px;

    border:
        1px dashed #8fbd79;

    background:
        #070906;

    color:
        #9bcf83;

    font-family:
        monospace;

    overflow-wrap:
        anywhere;
}


.idol-recovered {
    transform:
        translateY(-20px);

    transition:
        transform 700ms ease;
}


footer {
    margin-top:
        30px;

    text-align:
        center;

    color:
        #4c493b;

    font-size:
        11px;

    letter-spacing:
        2px;
}


/* -----------------------------------------
   TRAP / BOULDER
----------------------------------------- */


.trap-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    overflow:
        hidden;

    background:
        rgba(
            22,
            4,
            2,
            0.94
        );
}


.trap-warning {
    position:
        absolute;

    top:
        12%;

    width:
        100%;

    text-align:
        center;

    color:
        #d46f55;

    font-family:
        monospace;

    font-size:
        clamp(
            20px,
            4vw,
            44px
        );

    font-weight:
        bold;

    letter-spacing:
        3px;

    animation:
        warningFlash
        350ms
        infinite
        alternate;
}


.boulder {
    position:
        absolute;

    top:
        22%;

    right:
        -35vw;

    font-size:
        min(
            58vw,
            620px
        );

    line-height:
        1;

    filter:
        drop-shadow(
            0 15px 25px
            rgba(
                0,
                0,
                0,
                0.8
            )
        );
}


.boulder.rolling {
    animation:
        boulderRoll
        1.5s
        cubic-bezier(
            0.3,
            0.1,
            0.7,
            1
        )
        forwards;
}


.failure-panel {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    z-index:
        2;

    width:
        min(
            520px,
            calc(
                100% - 50px
            )
        );

    box-sizing:
        border-box;

    padding:
        30px;

    border:
        1px solid #8a3326;

    background:
        rgba(
            10,
            6,
            4,
            0.96
        );

    text-align:
        center;
}


.failure-title {
    color:
        #d76f55;

    font-size:
        28px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.failure-panel p {
    color:
        #a99178;

    line-height:
        1.6;
}


.release-panel {
    max-width: 480px;

    margin: 25px auto 10px;
    padding: 20px;

    border: 1px solid #5e5338;

    background: #0d0b07;

    text-align: left;
}


.release-heading {
    margin-bottom: 15px;

    color: #bba568;

    text-align: center;

    font-family: monospace;

    font-weight: bold;

    letter-spacing: 2px;
}


.release-status {
    margin-bottom: 15px;

    padding: 9px;

    border: 1px solid #423b29;

    color: #9a8355;

    text-align: center;

    font-family: monospace;
}


.release-panel label {
    display: block;

    margin-bottom: 7px;

    color: #746a51;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 2px;
}


.release-panel input {
    box-sizing: border-box;

    width: 100%;

    padding: 12px;

    border: 1px solid #50472f;

    background: #080705;

    color: #d0c194;

    font-family: monospace;

    text-transform: uppercase;
}


.idol-button:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


.sandbag {
    margin: 10px 0 -4px;

    font-size: 72px;

    line-height: 1;
}


.sandbag-placed {
    animation:
        sandbagDrop
        650ms
        ease-out
        forwards;
}


@keyframes sandbagDrop {

    from {
        opacity: 0;

        transform:
            translateY(-70px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

#restartButton {
    margin-top:
        15px;

    padding:
        14px 22px;

    border:
        1px solid #8a4938;

    background:
        #58291f;

    color:
        white;

    cursor:
        pointer;

    font-weight:
        bold;
}


.trap-active #chamber {
    animation:
        chamberShake
        90ms
        infinite;
}


@keyframes boulderRoll {

    from {
        transform:
            translateX(0)
            rotate(0deg);
    }

    to {
        transform:
            translateX(-145vw)
            rotate(-900deg);
    }

}


@keyframes chamberShake {

    0% {
        transform:
            translate(0, 0);
    }

    25% {
        transform:
            translate(4px, -2px);
    }

    50% {
        transform:
            translate(-4px, 3px);
    }

    75% {
        transform:
            translate(3px, 2px);
    }

    100% {
        transform:
            translate(-2px, -3px);
    }

}


@keyframes warningFlash {

    from {
        opacity:
            0.45;
    }

    to {
        opacity:
            1;
    }

}


@media (
    max-width:
        650px
) {

    h1 {
        font-size:
            30px;
    }


    .request-row {
        flex-wrap:
            wrap;
    }


    #sendButton {
        width:
            100%;
    }


    .terminal-header {
        gap:
            15px;

        flex-wrap:
            wrap;
    }

}