/* Defuse viewer. Shared display: 1920x1080 and 960x540 landscape, 1080x1920 and 450x960 portrait.
   Sizing uses vmin so both orientations scale from the same numbers.
   Lean paint drops shadows and dashed seal hatching on weak signage devices. */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0a0c0f;
}

body {
    color: #e9eef4;
    font-family: "Barlow Condensed", "Arial Narrow", Impact, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.screen {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #0e1115;
}

/* ---------------- top rail ---------------- */

.rail {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 1.4vmin 2vmin;
    background-color: #171c22;
    border-bottom: 0.2vmin solid #323c48;
}

.brand {
    font-size: 3.4vmin;
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1;
    margin-right: 2vmin;
}

.brand span {
    color: #e24b3f;
}

.rail-tag {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.4vmin;
    letter-spacing: 0.12em;
    color: #7b8798;
    border: 0.15vmin solid #323c48;
    border-radius: 2px;
    padding: 0.4vmin 0.9vmin;
    margin-right: 1vmin;
    white-space: nowrap;
}

.rail-sp {
    -webkit-flex: 1;
    flex: 1;
}

.strikes {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.strikes-label {
    font-size: 1.6vmin;
    letter-spacing: 0.22em;
    color: #7b8798;
    margin-right: 1.2vmin;
}

.pip {
    display: inline-block;
    width: 2vmin;
    height: 2vmin;
    margin-left: 0.9vmin;
    border-radius: 50%;
    border: 0.25vmin solid #3a4550;
    background-color: #161b21;
}

.pip.lit {
    background-color: #e24b3f;
    border-color: #f2705f;
}

/* ---------------- body ---------------- */

.body {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    min-height: 0;
    padding: 1.8vmin 2vmin 2vmin 2vmin;
}

/* The stage holds the module grid and the standby overlay. Scoping the overlay here
   rather than to the whole screen keeps the clock, bomb data and QR panel readable
   while the room is still filling up. */
.stage {
    position: relative;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    min-width: 0;
}

.grid {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: stretch;
    align-content: stretch;
    min-width: 0;
    margin: -0.7vmin;
}

.slot {
    padding: 0.7vmin;
}

.grid.cols-2 .slot {
    width: 50%;
}

.grid.cols-3 .slot {
    width: 33.333%;
}

.grid.rows-1 .slot {
    height: 100%;
}

.grid.rows-2 .slot {
    height: 50%;
}

.mod {
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    padding: 1vmin 1.2vmin 1.1vmin 1.2vmin;
    background-color: #202730;
    border: 0.18vmin solid #323c48;
    border-radius: 2px;
}

.mod.safe {
    opacity: 0.55;
}

.mod-top {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.mod-no {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.3vmin;
    letter-spacing: 0.1em;
    color: #7b8798;
}

.led {
    width: 1.3vmin;
    height: 1.3vmin;
    margin-left: auto;
    border-radius: 50%;
    background-color: #e8a33d;
    border: 0.15vmin solid #f5c77e;
}

.led.ok {
    background-color: #3ecf8e;
    border-color: #7fe3b8;
}

.led.bad {
    background-color: #e24b3f;
    border-color: #f2705f;
}

.mod-type {
    font-size: 2.5vmin;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    margin-top: 0.5vmin;
}

.seal {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 1vmin 0;
    padding: 0.5vmin;
    text-align: center;
    border: 0.16vmin dashed #3b4653;
    border-radius: 2px;
    background-color: #1a2027;
    background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0.6vmin, rgba(120, 135, 152, 0.09) 0.6vmin, rgba(120, 135, 152, 0.09) 1.2vmin);
    background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0.6vmin, rgba(120, 135, 152, 0.09) 0.6vmin, rgba(120, 135, 152, 0.09) 1.2vmin);
}

.seal span {
    font-size: 1.3vmin;
    letter-spacing: 0.15em;
    line-height: 1.45;
    color: #6b7686;
}

.mod.safe .seal {
    border-style: solid;
    background-image: none;
}

/* simon is the one module whose stimulus is public */

.simon {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 1vmin 0;
}

.simon i {
    display: block;
    width: 50%;
    height: 50%;
    border: 0.5vmin solid #202730;
    border-radius: 2px;
    background-color: #202932;
    -webkit-box-shadow: inset 0 0 0 0.15vmin #313c48;
    box-shadow: inset 0 0 0 0.15vmin #313c48;
}

.simon i.on-red {
    background-color: #e24b3f;
}

.simon i.on-blue {
    background-color: #5b9bd5;
}

.simon i.on-green {
    background-color: #3ecf8e;
}

.simon i.on-yellow {
    background-color: #e8a33d;
}

.mod-foot {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    min-width: 0;
}

.dot {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 1.1vmin;
    height: 1.1vmin;
    margin-right: 0.7vmin;
    border-radius: 50%;
    background-color: #7b8798;
}

.who {
    font-size: 1.7vmin;
    letter-spacing: 0.08em;
    color: #afbac8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.state {
    margin-left: auto;
    padding-left: 0.6vmin;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.2vmin;
    letter-spacing: 0.1em;
    color: #e8a33d;
    white-space: nowrap;
}

.state.ok {
    color: #3ecf8e;
}

.state.bad {
    color: #e24b3f;
}

/* ---------------- right column ---------------- */

.side {
    -webkit-flex: 0 0 34vmin;
    flex: 0 0 34vmin;
    /* The QR panel is a fixed 150px, so the column must never squeeze below it. */
    min-width: 196px;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-left: 1.8vmin;
}

.timer-box,
.facts,
.join {
    background-color: #171c22;
    border: 0.18vmin solid #323c48;
    border-radius: 2px;
}

.timer-box {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 1.2vmin 1.3vmin 1.5vmin 1.3vmin;
    text-align: center;
}

.cap {
    font-size: 1.4vmin;
    letter-spacing: 0.26em;
    color: #7b8798;
}

.timer {
    font-family: Consolas, "Courier New", monospace;
    font-size: 10vmin;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #e24b3f;
    margin-top: 0.6vmin;
}

.timer.calm {
    color: #e8a33d;
}

.facts {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 1.2vmin 1.3vmin 1.5vmin 1.3vmin;
    margin-top: 1.3vmin;
}

.fact {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    margin-top: 1vmin;
}

.fact .k {
    -webkit-flex: 0 0 11vmin;
    flex: 0 0 11vmin;
    font-size: 1.4vmin;
    letter-spacing: 0.14em;
    color: #7b8798;
}

.fact .val {
    font-family: Consolas, "Courier New", monospace;
    font-size: 2vmin;
    letter-spacing: 0.06em;
    color: #c7d2de;
}

.fact-wide {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ind {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ind b {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.4vmin;
    font-weight: normal;
    letter-spacing: 0.1em;
    padding: 0.25vmin 0.6vmin;
    margin: 0 0.5vmin 0.5vmin 0;
    border: 0.15vmin solid #3b4653;
    border-radius: 2px;
    color: #6e7a8a;
}

.ind b.lit {
    background-color: #e8a33d;
    border-color: #e8a33d;
    color: #1a2027;
}

.join {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 1.2vmin 1.3vmin 1.5vmin 1.3vmin;
    margin-top: 1.3vmin;
    text-align: center;
}

/* The standard RCWeb QR panel, copied from app/v so it matches every other app.
   Sizes stay fixed in px: a QR code needs a real physical size to scan.

   content-box is mandatory here. This app sets border-box globally, which would make
   the 8px card border eat into the declared 150px and leave the QR overflowing by 16px
   with no white quiet zone on one side. app/reactor pins the same override. */

.rcRoomQrCodeLink,
.rcRoomQrCodeLink * {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.rcRoomQrCodeLinkWrapper {
    height: 235px;
    margin-top: 12px;
    margin-bottom: 0;
}

.rcRoomQrCodeLink {
    display: block;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    border: solid 8px #fff;
    border-radius: 8px;
    color: #fff;
    background-color: #fff;
    text-align: center;
    transition: opacity 1s ease;
    text-decoration: none;
    box-shadow: 0 0 32px #000;
    transform-origin: center;
    transform: scale(1);
    animation: pop-in 500ms ease-in-out forwards;
}

@keyframes pop-in {
    0% {
        transform: scale(0.5);
    }

    66% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.rcTechLabel {
    background-color: #000;
    color: #fff;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 8px 0;
    padding: 4px;
    letter-spacing: 0.2em;
    border-radius: 8px 8px 0 0;
}

.rcRoomQrCode {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background-color: #fff;
}

/* The generator emits both a canvas and an img; size them and clip the spare. */
.rcRoomQrCode img,
.rcRoomQrCode canvas {
    display: block;
    width: 150px;
    height: 150px;
    background-color: #fff;
}

.rcRoomId {
    background-color: #000;
    color: #fff;
    font-family: monospace;
    font-size: 16px;
    padding: 4px;
    margin: 8px 0 0 0;
    letter-spacing: 0.25em;
    border-radius: 0 0 8px 8px;
}

/* Short landscape displays cannot spare 235px of column for the panel. Scale the
   wrapper rather than the card: the card's pop-in animation owns its own transform
   and would win over anything set here. Height shrinks to match, since a transform
   does not reclaim layout space. */

@media (max-height: 520px) {
    .rcRoomQrCodeLinkWrapper {
        height: 178px;
        margin-top: 6px;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }
}

/* ---------------- overlay ---------------- */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: rgba(10, 12, 15, 0.88);
}

.overlay.show {
    display: -webkit-flex;
    display: flex;
}

.overlay-card {
    padding: 4vmin 6vmin;
    text-align: center;
    border: 0.25vmin solid #323c48;
    border-radius: 3px;
    background-color: #171c22;
}

.overlay-eyebrow {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.8vmin;
    letter-spacing: 0.26em;
    color: #7b8798;
}

.overlay-title {
    display: block;
    font-size: 7vmin;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.05;
    margin-top: 1.4vmin;
}

.overlay.boom .overlay-title {
    color: #e24b3f;
}

.overlay.defused .overlay-title {
    color: #3ecf8e;
}

.overlay-copy {
    font-size: 2.2vmin;
    letter-spacing: 0.06em;
    color: #afbac8;
    margin: 1.6vmin 0 0 0;
}

/* ---------------- portrait ---------------- */

@media (orientation: portrait) {
    .body {
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .grid.cols-2 .slot,
    .grid.cols-3 .slot {
        width: 50%;
    }

    .grid.rows-1 .slot,
    .grid.rows-2 .slot {
        height: 33.333%;
    }

    .side {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        flex-direction: row;
        margin: 1.8vmin 0 0 0;
    }

    .timer-box {
        -webkit-flex: 0 0 30%;
        flex: 0 0 30%;
    }

    .facts,
    .join {
        margin: 0 0 0 1.3vmin;
    }

    .facts {
        -webkit-flex: 1;
        flex: 1;
    }

    .join {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    .timer {
        font-size: 7vmin;
    }
}

/* ---------------- lean paint ---------------- */

.lean-paint .seal {
    background-image: none;
    border-style: solid;
}

.lean-paint .simon i {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.lean-paint .overlay {
    background-color: #0a0c0f;
}