body {
    margin: 0;

    background:
        #090806;

    color:
        #d1c39b;

    font-family:
        Georgia,
        serif;
}


.container {
    max-width:
        1450px;

    margin:
        30px auto;

    padding:
        20px;
}


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


header {
    margin-bottom:
        28px;

    text-align:
        center;
}


.temple-label {
    color:
        #786e52;

    font-size:
        12px;

    letter-spacing:
        3px;
}


h1 {
    margin:
        10px 0 7px;

    color:
        #d5c590;

    font-size:
        42px;

    letter-spacing:
        6px;
}


.subtitle {
    color:
        #756c52;

    letter-spacing:
        2px;
}


/* =========================================
   TWO COLUMN LAYOUT
========================================= */


.challenge-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(440px, 0.95fr);

    align-items:
        start;

    gap:
        24px;
}


.left-column,
.right-column {
    min-width:
        0;
}


/* =========================================
   COMMON PANELS
========================================= */


.chasm-scene,
.analysis-panel,
.calibration-panel {
    border:
        1px solid #4b4939;

    background:
        #10110d;
}


.analysis-panel,
.calibration-panel {
    padding:
        22px;
}


.calibration-panel {
    margin-top:
        24px;
}


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

    color:
        #a69363;

    font-family:
        monospace;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


/* =========================================
   CHASM
========================================= */


.chasm-scene {
    padding:
        25px;

    background:
        #13100b;
}


.scene-heading {
    margin-bottom:
        25px;

    color:
        #81775a;

    text-align:
        center;

    font-family:
        monospace;

    letter-spacing:
        3px;
}


.chasm {
    display:
        grid;

    grid-template-columns:
        95px
        minmax(180px, 1fr)
        105px;

    align-items:
        center;

    min-height:
        230px;

    padding:
        25px;

    border:
        1px solid #312b1e;

    background:
        linear-gradient(
            #17140e,
            #030302
        );

    overflow:
        hidden;
}


.explorer,
.anchor {
    text-align:
        center;
}


.explorer-icon {
    font-size:
        64px;
}


.anchor-icon {
    font-size:
        54px;
}


.explorer span,
.anchor span {
    display:
        block;

    margin-top:
        8px;

    color:
        #746c56;

    font-family:
        monospace;

    font-size:
        10px;

    letter-spacing:
        1px;
}


/* =========================================
   WHIP
========================================= */


.whip-track {
    position:
        relative;

    width:
        100%;

    height:
        70px;

    display:
        flex;

    align-items:
        center;
}


.whip-line {
    position:
        relative;

    width:
        calc(100% - 8px);

    height:
        5px;

    border-radius:
        50%;

    background:
        linear-gradient(
            90deg,
            #6a4b28,
            #b4874d
        );

    box-shadow:
        0 2px 0 #3a2816;

    transform:
        scaleX(0.25)
        rotate(-3deg);

    transform-origin:
        left center;
}


.whip-line::before {
    content:
        "";

    position:
        absolute;

    left:
        22%;

    top:
        -8px;

    width:
        55%;

    height:
        18px;

    border-top:
        3px solid #8d6738;

    border-radius:
        50%;
}


.whip-tip {
    position:
        absolute;

    right:
        -7px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #c79b5b;

    font-size:
        12px;
}


/* =========================================
   WHIP ANIMATIONS
========================================= */


.whip-miss {
    animation:
        whipMiss
        850ms
        ease-out
        forwards;
}


.whip-success {
    animation:
        whipSuccess
        1100ms
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        )
        forwards;
}


@keyframes whipMiss {

    0% {
        transform:
            scaleX(0.25)
            rotate(-3deg);
    }

    55% {
        transform:
            scaleX(0.72)
            rotate(2deg);
    }

    75% {
        transform:
            scaleX(0.66)
            rotate(-2deg);
    }

    100% {
        transform:
            scaleX(0.52)
            rotate(-1deg);
    }

}


@keyframes whipSuccess {

    0% {
        transform:
            scaleX(0.25)
            rotate(-3deg);
    }

    45% {
        transform:
            scaleX(1.04)
            rotate(2deg);
    }

    65% {
        transform:
            scaleX(0.96)
            rotate(-2deg);
    }

    100% {
        transform:
            scaleX(1)
            rotate(0deg);
    }

}


/* =========================================
   FIELD STATUS
========================================= */


.field-status {
    margin-top:
        20px;

    text-align:
        center;

    color:
        #7d755c;

    font-family:
        monospace;
}


.field-status strong {
    color:
        #c1954f;
}


.field-status.status-success strong {
    color:
        #91bb7e;
}


.field-status.status-failure strong {
    color:
        #ca7563;
}


/* =========================================
   CALIBRATION
========================================= */


.instructions {
    color:
        #777461;

    line-height:
        1.6;
}


.calibration-grid {
    display:
        grid;

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

    gap:
        15px;

    margin-top:
        20px;
}


.calibration-grid label {
    display:
        block;
}


.calibration-grid span {
    display:
        block;

    min-height:
        28px;

    margin-bottom:
        7px;

    color:
        #8a8062;

    font-family:
        monospace;

    font-size:
        11px;

    letter-spacing:
        2px;
}


.calibration-grid input {
    box-sizing:
        border-box;

    width:
        100%;

    padding:
        13px;

    border:
        1px solid #504a35;

    background:
        #070805;

    color:
        #d4c79d;

    font-family:
        monospace;

    font-size:
        18px;

    text-align:
        center;
}


.calibration-grid input:focus {
    outline:
        1px solid #9c8450;
}


.calibration-grid small {
    display:
        block;

    margin-top:
        5px;

    color:
        #5f5d4d;

    text-align:
        center;
}


.crack-button,
.analysis-button,
.reset-button {
    display:
        block;

    margin:
        20px auto;

    padding:
        13px 24px;

    border:
        1px solid #6a684c;

    background:
        #514528;

    color:
        white;

    cursor:
        pointer;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.crack-button:hover,
.analysis-button:hover,
.reset-button:hover {
    background:
        #6d5c32;
}


.crack-button:disabled,
.analysis-button:disabled {
    opacity:
        0.55;

    cursor:
        default;
}


.calibration-result {
    margin-top:
        20px;

    padding:
        15px;

    border:
        1px solid #574d35;

    font-family:
        monospace;

    text-align:
        center;

    line-height:
        1.5;
}


.calibration-result.failure {
    border-color:
        #7b4035;

    color:
        #c37665;
}


.calibration-result.success {
    border-color:
        #607a55;

    color:
        #91bb7e;
}


/* =========================================
   ARTIFACT INFORMATION
========================================= */


.artifact-card {
    display:
        grid;

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

    gap:
        15px;

    padding:
        15px;

    border:
        1px solid #3c4137;

    background:
        #090b08;

    font-family:
        monospace;
}


.artifact-label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #65705f;

    font-size:
        10px;

    letter-spacing:
        2px;
}


/* =========================================
   STRINGS TOOL
========================================= */


.tool-help {
    margin-top:
        20px;

    padding:
        16px;

    border-left:
        3px solid #6b795f;

    background:
        #0b0e09;

    color:
        #818a79;

    line-height:
        1.6;
}


.tool-help strong {
    color:
        #9bad8d;
}


.tool-help code {
    color:
        #9fc18d;
}


.command-preview {
    margin-top:
        12px;

    padding:
        10px;

    border:
        1px solid #303a2b;

    background:
        #040604;

    color:
        #8fb27d;

    font-family:
        monospace;
}


/* =========================================
   TERMINAL
========================================= */


.terminal {
    border:
        1px solid #35402f;

    background:
        #040604;
}


.terminal-bar {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        10px 15px;

    border-bottom:
        1px solid #35402f;

    color:
        #64755c;

    font-family:
        monospace;

    font-size:
        11px;

    letter-spacing:
        2px;
}


#stringsOutput {
    box-sizing:
        border-box;

    height:
        575px;

    margin:
        0;

    padding:
        18px;

    overflow:
        auto;

    color:
        #8fb27d;

    font-family:
        monospace;

    line-height:
        1.5;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


/* =========================================
   VICTORY
========================================= */


.victory {
    margin-top:
        24px;

    padding:
        25px;

    border:
        1px solid #789768;

    background:
        #10150d;

    text-align:
        center;
}


.victory-heading {
    color:
        #91bb7e;

    font-size:
        24px;

    font-weight:
        bold;

    letter-spacing:
        3px;
}


.crossing-authorized {
    color:
        #91bb7e;

    font-family:
        monospace;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.flag {
    margin-top:
        20px;

    padding:
        15px;

    border:
        1px dashed #91bb7e;

    background:
        #050704;

    color:
        #9cca87;

    font-family:
        monospace;

    overflow-wrap:
        anywhere;
}


.reset-button {
    border-color:
        #56644e;

    background:
        #31392c;
}


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


footer {
    margin-top:
        30px;

    color:
        #4c493b;

    text-align:
        center;

    font-size:
        11px;

    letter-spacing:
        2px;
}


/* =========================================
   RESPONSIVE
========================================= */


@media (
    max-width: 1050px
) {

    .challenge-layout {
        grid-template-columns:
            1fr;
    }


    .right-column {
        order:
            2;
    }


    #stringsOutput {
        height:
            400px;
    }

}


@media (
    max-width: 650px
) {

    .container {
        padding:
            14px;
    }


    h1 {
        font-size:
            29px;

        letter-spacing:
            3px;
    }


    .calibration-grid {
        grid-template-columns:
            1fr;
    }


    .artifact-card {
        grid-template-columns:
            1fr;
    }


    .chasm {
        grid-template-columns:
            70px
            minmax(100px, 1fr)
            75px;

        padding:
            14px;
    }


    .explorer-icon {
        font-size:
            42px;
    }


    .anchor-icon {
        font-size:
            39px;
    }


    .terminal-bar {
        flex-wrap:
            wrap;
    }

}