body {
    background-color: #121c2e; /* Outer monitor bezel frame color */
    color: #00e1ff;
    font-family: "Courier New", Courier, monospace;
    margin: 0;
    padding: 0; 
    overflow-x: hidden;
    transition: background-color 0.1s ease;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    min-height: 100vh;
    box-sizing: border-box;
}

/* MSX-Style Monitor Screen Frame */
#terminal {
    background-color: #040814; /* Inner CRT monitor screen color */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1380px; 
    margin: 40px auto; 
    padding: 20px 40px 80px 40px; 
    border: 8px solid #1a2942; 
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.6);
    white-space: pre-wrap;
    line-height: 1.3;
    font-size: 23px; 
    text-shadow: 0 0 10px rgba(0, 225, 255, 0.6);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden; 
}

#terminal > div:first-child:empty {
    margin: 0;
    padding: 0;
    display: none;
}

.header-stats {
    color: #0099bb;
    margin-bottom: 15px;
    font-size: 20px; 
}
.history-line {
    margin-top: 8px;
    margin-bottom: 0px;
}
.input-line {
    margin-top: 8px;
    margin-bottom: 0px;
}
.user-input {
    background: transparent;
    border: none;
    color: #00e1ff;
    font-family: "Courier New", Courier, monospace;
    font-size: 23px; 
    outline: none;
    text-shadow: 0 0 10px rgba(0, 225, 255, 0.6);
    caret-color: #00e1ff;
    caret-shape: block;
    width: 70%;
    padding: 0;
    margin: 0;
}
.cursor-block {
    display: inline-block;
    background-color: #00e1ff;
    width: 14px;
    height: 23px;
    vertical-align: baseline;
    margin-left: 3px;
    box-shadow: 0 0 10px rgba(0, 225, 255, 0.8);
}
.blinking {
    animation: blink 0.8s infinite;
}
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Game Subsystem Styles */
#game-subsystem {
    display: none;
    margin-top: 15px;
    text-align: left;
    width: 100%;
}
#menu {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    margin-bottom: 15px;
    font-size: 22px;
}
.mode-btn {
    background-color: #040814;
    color: #00e1ff;
    font-family: "Courier New", Courier, monospace;
    font-size: 20px;
    border: 2px solid #00e1ff;
    padding: 6px 14px;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 225, 255, 0.4);
}
.mode-btn:hover {
    background-color: #00e1ff;
    color: #040814;
}
.mode-btn.active-mode {
    background-color: #00e1ff;
    color: #040814;
    box-shadow: 0 0 16px #00e1ff;
    font-weight: bold;
}

#box {
    margin-top: 8px;
    display: none;
    width: max-content;
}

/* Universal Grid layout class activated via JavaScript */
#box.active-grid {
    display: grid;
    grid-template-columns: repeat(3, 145px);
    gap: 14px;
    width: 465px;
}

/* Enlarged and Scaled Decryption Box */
#decrypt-box {
    display: none;
    width: 520px;
    margin: 8px 0;
    padding: 15px;
    border: 2px solid #00e1ff;
    background-color: #040814;
    box-shadow: 0 0 14px rgba(0, 225, 255, 0.4);
    text-align: center;
}
.decrypt-grid {
    display: flex;
    justify-content: space-around;
    font-size: 36px; 
    font-weight: bold;
    letter-spacing: 4px;
}
.decrypt-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dec-rand {
    font-size: 36px; 
    font-weight: bold;
    color: #0099bb;
    height: 42px;
}
.dec-target {
    font-size: 36px; 
    font-weight: bold;
    color: #00e1ff;
    text-shadow: 0 0 8px rgba(0, 225, 255, 0.8);
    margin-top: 6px;
}
#game-log {
    margin-top: 15px;
    font-size: 22px;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 225, 255, 0.6);
    min-height: 25px;
    white-space: nowrap;
    line-height: normal;
    grid-column: span 3;
    text-align: center;
}

#box canvas {
    background-color: #040814;
    border: 2px solid #00e1ff !important;
    box-shadow: 0 0 10px rgba(0, 225, 255, 0.4);
    cursor: pointer;
    margin: 0;
    width: 145px;
    height: 145px;
}

/* 0-Player Simulation Layout Styles (Snaps strictly to top & centers horizontally) */
#game-subsystem.sim-mode {
    display: flex;
    flex-direction: column;
    align-items: center; 
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#game-subsystem.sim-mode #menu {
    display: none !important;
}
#game-subsystem.sim-mode > div:not(#decrypt-box):not(#box):not(#game-input-container) {
    display: none;
}
#game-subsystem.sim-mode #decrypt-box {
    margin-top: 0 !important;
    padding-top: 5px !important;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
}
#game-subsystem.sim-mode #box.active-grid {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

/* Vertical DEFCON-Style Progress Indicator Dock */
#progress-dock {
    position: fixed !important;
    top: 60px !important;
    left: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    z-index: 100 !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 26px !important; 
    color: #00e1ff !important;
    text-shadow: 0 0 10px rgba(0, 225, 255, 0.8) !important;
}

#progress-dock span {
    margin-bottom: 4px;
    letter-spacing: 2px;
}

#progress-dock .progress-box {
    width: 34px !important; 
    height: 34px !important;
    border: 3px solid #00e1ff !important;
    background-color: transparent !important;
    box-shadow: 0 0 10px rgba(0, 225, 255, 0.5) !important;
    transition: background-color 0.3s, box-shadow 0.3s !important;
}

#progress-dock .progress-box.lit {
    background-color: #00ff55 !important;
    border-color: #00ff55 !important;
    box-shadow: 0 0 18px #00ff55 !important;
}

/* Single Instantaneous 0.1s Blip Effect (Strictly Inner Viewport Content) */
.glitch-active {
    animation: none !important;
    filter: none !important;
}

#terminal.glitch-active {
    position: relative;
    overflow: hidden;
}

#terminal.glitch-active > * {
    animation: singleBlipTear 0.1s steps(1, start) 1 forwards;
}

#terminal.glitch-active::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 225, 255, 0.3) 0px,
        rgba(255, 0, 85, 0.25) 2px,
        transparent 4px,
        rgba(0, 0, 0, 0.8) 8px
    );
    z-index: 9999;
    pointer-events: none;
    animation: flashOverlay 0.1s steps(1, start) 1 forwards;
}

@keyframes singleBlipTear {
    0% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }
    50% {
        transform: translate(-140px, 0);
        clip-path: inset(10% 0 30% 0);
    }
    100% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes flashOverlay {
    0% { opacity: 1; }
    100% { opacity: 0; }
}