/* ============================================================
   SYSOP FLASH: ROOM RUSH
   A NATTERFLY ORIGINAL
============================================================ */

.sysop-flash-wrapper {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 18px;
    color: #ffffff;
}

.sysop-flash-intro {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #35515c;
    border-radius: 4px;
    background: #10242c;
}

.sysop-flash-intro.is-hidden {
    display: none;
}

.sysop-flash-intro-image {
    overflow: hidden;
    border: 1px solid #3b5965;
    border-radius: 4px;
    background: #07171d;
}

.sysop-flash-intro-image img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center 18%;
}

.sysop-flash-original {
    display: inline-block;
    margin-bottom: 5px;
    color: #77c8e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sysop-flash-intro-copy h2 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 23px;
}

.sysop-flash-intro-copy p {
    margin: 0;
    color: #b5c8cf;
    font-size: 12px;
    line-height: 1.65;
}

.sysop-flash-action-key {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
}

.sysop-flash-action-key span {
    padding: 4px 7px;
    border: 1px solid #466573;
    border-radius: 3px;
    background: #17343f;
    color: #dcebf0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.sysop-flash-topbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.sysop-flash-stat {
    padding: 9px 10px;
    border: 1px solid #35515c;
    border-radius: 4px;
    background: #10242c;
    text-align: center;
}

.sysop-flash-stat span {
    display: block;
    margin-bottom: 3px;
    color: #9fb5be;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sysop-flash-stat strong {
    color: #ffffff;
    font-size: 17px;
}

.sysop-flash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
    gap: 10px;
}

.sysop-flash-rooms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sysop-flash-room {
    min-height: 164px;
    padding: 11px;
    border: 1px solid #35515c;
    border-radius: 4px;
    background: #0d2028;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.sysop-flash-room.is-active {
    border-color: #e5c451;
    box-shadow: 0 0 0 1px rgba(229, 196, 81, .18);
}

.sysop-flash-room.is-urgent {
    border-color: #ef6666;
    animation: sysopFlashPulse .75s infinite;
}

@keyframes sysopFlashPulse {
    50% {
        box-shadow: 0 0 18px rgba(239, 102, 102, .32);
        transform: translateY(-1px);
    }
}

.sysop-flash-room-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sysop-flash-room-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.sysop-flash-room-state {
    padding: 3px 5px;
    border-radius: 3px;
    background: #17343f;
    color: #9fb5be;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
}

.sysop-flash-room.is-active .sysop-flash-room-state {
    background: #4b411d;
    color: #ffe58a;
}

.sysop-flash-room.is-urgent .sysop-flash-room-state {
    background: #4a1d1d;
    color: #ffabab;
}

.sysop-flash-chatlog {
    min-height: 82px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #223c47;
    border-radius: 3px;
    background: #07171d;
    color: #c6d7dd;
    font-size: 10px;
    line-height: 1.45;
}

.sysop-flash-chatline {
    margin: 3px 0;
}

.sysop-flash-chatline.is-system {
    color: #829da8;
    font-style: italic;
}

.sysop-flash-meter-label {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 3px;
    color: #91aab4;
    font-size: 8px;
}

.sysop-flash-meter {
    overflow: hidden;
    height: 7px;
    border: 1px solid #29444f;
    border-radius: 999px;
    background: #07171d;
}

.sysop-flash-meter-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        #55ca8b 0%,
        #e1c455 58%,
        #e25f5f 100%
    );
    transition: width .28s linear;
}

.sysop-flash-console {
    padding: 13px;
    border: 1px solid #35515c;
    border-radius: 4px;
    background: #10242c;
}

.sysop-flash-alert-title {
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
}

.sysop-flash-alert-room {
    margin-top: 3px;
    color: #75c8e8;
    font-size: 12px;
    font-weight: 800;
}

.sysop-flash-incident {
    min-height: 92px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #2b4652;
    border-radius: 3px;
    background: #07171d;
    color: #d7e4e9;
    font-size: 11px;
    line-height: 1.6;
}

.sysop-flash-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.sysop-flash-actions button {
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid #4b6874;
    border-radius: 3px;
    background: #17343f;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.sysop-flash-actions button:hover:not(:disabled) {
    background: #20505f;
}

.sysop-flash-actions button:disabled {
    opacity: .42;
    cursor: default;
}

.sysop-flash-feedback {
    min-height: 51px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #2b4652;
    color: #aec2ca;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
}

.sysop-flash-feedback.is-good {
    color: #67df9d;
}

.sysop-flash-feedback.is-bad {
    color: #ff8585;
}

.sysop-flash-status {
    min-height: 21px;
    margin-top: 11px;
    color: #afc3cb;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.sysop-flash-start {
    display: block;
    margin: 10px auto 0;
}

.sysop-flash-wrapper.is-game-over .sysop-flash-intro {
    display: grid;
}

.sysop-flash-wrapper.is-game-over .sysop-flash-intro-copy h2::after {
    content: " - Shift Over";
}

@media (max-width: 860px) {
    .sysop-flash-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .sysop-flash-wrapper {
        padding: 10px;
    }

    .sysop-flash-intro {
        grid-template-columns: 1fr;
    }

    .sysop-flash-intro-image img {
        height: 210px;
    }

    .sysop-flash-rooms {
        grid-template-columns: 1fr;
    }

    .sysop-flash-topbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .sysop-flash-actions {
        grid-template-columns: 1fr 1fr;
    }

    .sysop-flash-intro-image img {
        height: 170px;
    }
}