/* ============================================================
   DARK ORBIT
   Windows Memory Forensics CTF
   ORIGINAL STYLE + NEW VERIFICATION LOGIC
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% 0%,
            #10172a 0%,
            #080c17 42%,
            #05070d 100%
        );

    color: #d7e3f2;

    line-height: 1.6;
}


/* ============================================================
   MAIN PAGE
   ============================================================ */

.page-shell {
    width: 90%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 0 0 55px;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    text-align: center;

    padding-top: 5px;

    margin-bottom: 50px;
}


.status-line {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 5px 22px;

    border: 1px solid #27344d;

    border-radius: 4px;

    color: #8da8c8;

    font-size: 0.76rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #64e69b;
}


.site-header h1 {
    margin-top: 55px;

    color: #f3f6ff;

    font-size: clamp(
        4rem,
        8vw,
        7rem
    );

    font-weight: 800;

    line-height: 0.95;

    letter-spacing: 0.11em;

    /* IMPORTANT:
       No text-shadow / glow here.
    */
}


.subtitle {
    margin-top: 25px;

    color: #7895b8;

    font-size: 0.86rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;
}


/* ============================================================
   MISSION BRIEF
   ============================================================ */

.mission-card {
    padding: 44px 48px;

    border: 1px solid #243754;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 24, 40, 0.98),
            rgba(8, 13, 24, 0.98)
        );
}


.section-label {
    margin-bottom: 30px;

    color: #65c9f5;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.mission-card h2 {
    margin-bottom: 25px;

    color: #f1f4fa;

    font-size: 2rem;

    font-weight: 700;
}


.mission-card p {
    margin-bottom: 18px;

    color: #9db3cb;

    font-size: 1rem;

    line-height: 1.8;
}


.evidence-box {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 30px;

    padding: 17px 25px;

    border-left: 4px solid #5acff4;

    background: rgba(42, 101, 137, 0.12);
}


.evidence-label {
    color: #7189a6;

    font-size: 0.72rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.evidence-box strong {
    color: #dce8f5;

    font-family: Consolas, "Courier New", monospace;

    font-size: 0.95rem;
}


/* ============================================================
   QUESTIONS HEADER
   ============================================================ */

.questions-label {
    margin-top: 55px;

    margin-bottom: 22px;
}


/* ============================================================
   QUESTION CARDS
   ============================================================ */

.question-card {
    margin-bottom: 22px;

    padding: 32px 36px;

    border: 1px solid #263955;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 23, 39, 0.98),
            rgba(7, 12, 22, 0.98)
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.question-card:hover {
    border-color: #35516f;

    background:
        linear-gradient(
            145deg,
            rgba(16, 27, 45, 0.98),
            rgba(8, 14, 25, 0.98)
        );
}


/* ============================================================
   QUESTION HEADER
   ============================================================ */

.question-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}


.question-number {
    color: #63c9f5;

    font-family: Consolas, "Courier New", monospace;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.question-status {
    color: #607995;

    font-size: 0.68rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* ============================================================
   QUESTION TEXT
   ============================================================ */

.question-card h3 {
    margin-bottom: 20px;

    color: #dbe6f3;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.7;
}


/* ============================================================
   ANSWER BOXES
   ============================================================ */

textarea {
    display: block;

    width: 100%;

    min-height: 120px;

    padding: 16px 17px;

    border: 1px solid #293e5a;

    border-radius: 7px;

    outline: none;

    resize: vertical;

    background: #060b14;

    color: #d7e5f5;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 0.86rem;

    line-height: 1.65;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


textarea::placeholder {
    color: #50657d;
}


textarea:focus {
    border-color: #4d718f;

    background: #070d17;
}


/* ============================================================
   INDIVIDUAL VERIFY BUTTONS
   ============================================================ */

.verify-button {
    margin-top: 13px;

    padding: 9px 17px;

    border: 1px solid #304a66;

    border-radius: 5px;

    background: #0a1421;

    color: #82a8ca;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.verify-button:hover {
    border-color: #527492;

    background: #0d1a2a;

    color: #9dc5e8;
}


.verify-button:disabled {
    cursor: wait;

    opacity: 0.65;
}


.verify-button.verified {
    border-color: #3d7659;

    background: #0a1913;

    color: #72d69c;
}


/* ============================================================
   QUESTION VERIFICATION FEEDBACK
   ============================================================ */

.question-result {
    min-height: 22px;

    margin-top: 9px;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 0.72rem;

    letter-spacing: 0.07em;
}


.question-result.checking {
    color: #78a9ca;
}


.question-result.correct {
    color: #6ed49a;
}


.question-result.incorrect {
    color: #e8757d;
}


.question-result.invalid {
    color: #d8aa5f;
}


/* ============================================================
   VERIFIED QUESTION STATE
   ============================================================ */

.question-card:has(.verify-button.verified) {
    border-color: #315846;
}


/* ============================================================
   FINAL SUBMISSION
   ============================================================ */

.submit-section {
    margin-top: 38px;

    padding: 38px 40px;

    border: 1px solid #293d59;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 23, 39, 0.98),
            rgba(7, 12, 22, 0.98)
        );

    text-align: center;
}


.submit-section .section-label {
    margin-bottom: 15px;
}


.submit-section p {
    margin-bottom: 24px;

    color: #849bb5;

    font-size: 0.9rem;
}


.final-submit-button {
    width: 100%;

    padding: 15px 22px;

    border: 1px solid #4b708e;

    border-radius: 6px;

    background: #0b1725;

    color: #c4d9ed;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.final-submit-button:hover {
    border-color: #6286a3;

    background: #0e1d2e;

    color: #e1edf7;
}


.final-submit-button:disabled {
    cursor: wait;

    opacity: 0.6;
}


/* ============================================================
   RESULT CARD
   ============================================================ */

.result {
    margin-top: 35px;

    padding: 40px;

    border: 1px solid #2a3e59;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 23, 39, 0.98),
            rgba(7, 12, 22, 0.98)
        );

    text-align: center;
}


.result-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin: 0 auto 18px;

    border: 1px solid #40546d;

    border-radius: 50%;

    color: #b8c9db;

    font-size: 1.35rem;

    font-weight: 700;
}


.result h2 {
    margin-bottom: 12px;

    color: #e8eef6;

    font-size: 1.15rem;

    letter-spacing: 0.16em;
}


.result p {
    color: #849bb3;

    font-size: 0.88rem;
}


/* ============================================================
   SUCCESS RESULT
   ============================================================ */

.result.success {
    border-color: #315b47;
}


.success .result-icon {
    border-color: #3f7658;

    color: #6ed49a;
}


/* ============================================================
   FLAG BOX
   ============================================================ */

.flag-box {
    margin-top: 28px;

    padding: 23px;

    border: 1px solid #315b47;

    border-radius: 7px;

    background: #091610;
}


.flag-box span {
    display: block;

    margin-bottom: 11px;

    color: #6ed49a;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.flag-box strong {
    display: block;

    color: #d9f3e3;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 0.92rem;

    font-weight: 600;

    word-break: break-all;
}


/* ============================================================
   FAILURE RESULT
   ============================================================ */

.result.failure {
    border-color: #63383e;
}


.failure .result-icon {
    border-color: #704047;

    color: #e8757d;
}


/* ============================================================
   INCORRECT QUESTIONS
   ============================================================ */

.incorrect-list {
    max-width: 650px;

    margin: 28px auto 20px;

    padding: 18px;

    border: 1px solid #493037;

    border-radius: 7px;

    background: #0c0d15;

    text-align: left;
}


.incorrect-list-title {
    margin-bottom: 13px;

    color: #b66c75;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-align: center;
}


.incorrect-items {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;
}


.incorrect-item {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border: 1px solid #4b3036;

    border-radius: 5px;

    background: #100d13;

    color: #c9949a;
}


.incorrect-mark {
    color: #e8757d;

    font-weight: 700;
}


.incorrect-question {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 0.75rem;

    font-weight: 700;
}


.incorrect-question small {
    color: #a65e68;

    font-size: 0.57rem;

    letter-spacing: 0.08em;
}


.retry-message {
    margin-top: 18px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 45px;

    color: #455b72;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.15em;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .page-shell {
        width: 94%;
    }


    .site-header {
        margin-bottom: 35px;
    }


    .site-header h1 {
        margin-top: 40px;

        font-size: 3.2rem;

        letter-spacing: 0.07em;
    }


    .subtitle {
        font-size: 0.64rem;

        letter-spacing: 0.16em;

        line-height: 1.8;
    }


    .mission-card {
        padding: 28px 24px;
    }


    .mission-card h2 {
        font-size: 1.45rem;
    }


    .question-card {
        padding: 25px 22px;
    }


    .question-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }


    .question-status {
        text-align: left;
    }


    .verify-button {
        width: 100%;
    }


    .submit-section {
        padding: 28px 22px;
    }


    .result {
        padding: 30px 22px;
    }


    .incorrect-items {
        flex-direction: column;
    }


    .incorrect-item {
        justify-content: center;
    }


    .evidence-box {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }


    .site-footer {
        flex-wrap: wrap;

        text-align: center;
    }

}