/* Nod-themed styles for WebCraft 3D - Nod Launcher, inspired by Command & Conquer's Brotherhood of Nod */
body {
    background: #000000; /* Black background, Nod's primary color */
    font-family: 'OCR-A', monospace; /* Militaristic, monospaced font */
    color: #FFFFFF; /* White text for contrast */
    margin: 0;
    padding: 0;
    background-image: url('https://i.imgur.com/5p5Z3qC.png'); /* Placeholder Nod texture */
    background-size: 256px 256px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Font import for Nod-like aesthetic */
@font-face {
    font-family: 'OCR-A';
    src: url('https://fonts.cdnfonts.com/css/ocr-a') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Header */
.launcher-header {
    background: #B22222; /* Nod red */
    padding: 10px 20px;
    text-align: center;
    border-bottom: 4px solid #666666; /* Gray border for metallic feel */
}

.launcher-header h1 {
    margin: 0;
    font-size: 24px;
    color: #FFFFFF; /* White text for title */
    text-shadow: 2px 2px #000000;
}

/* Main container */
.launcher-container {
    display: flex;
    max-width: 900px;
    margin: 20px auto;
}

/* Sidebar */
.launcher-sidebar {
    width: 250px;
    background: #333333; /* Dark gray for Nod tech aesthetic */
    padding: 15px;
    border: 4px solid #B22222; /* Nod red border */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red glow */
}

.sidebar-section {
    margin-bottom: 20px;
}

.sidebar-section label {
    font-size: 16px;
    color: #FFFFFF; /* White text */
    text-shadow: 1px 1px #000000;
    display: block;
    margin-bottom: 5px;
}

/* Main content */
.launcher-main {
    flex: 1;
    padding: 20px;
}

/* Console divs */
.console {
    background: #1C2526; /* Dark gray, Nod urban camo */
    border: 4px solid #B22222; /* Nod red border */
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Red glow */
    color: #FFFFFF;
}

.console h2 {
    font-size: 18px;
    color: #FF0000; /* Bright Nod red */
    text-shadow: 2px 2px #000000;
    margin: 0 0 10px;
}

/* Labels */
label {
    display: block;
    font-size: 16px;
    color: #FFFFFF;
    text-shadow: 1px 1px #000000;
    margin: 10px 0 5px;
}

/* Select dropdowns */
select {
    background: #B22222; /* Nod red */
    color: #FFFFFF;
    border: 2px solid #000000;
    padding: 8px;
    font-family: 'OCR-A', monospace;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    margin: 5px 0;
}

select:focus {
    outline: none;
    border-color: #FF0000; /* Brighter red on focus */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Input fields */
input[type="text"] {
    background: #333333; /* Dark gray */
    color: #FFFFFF;
    border: 2px solid #000000;
    padding: 8px;
    font-family: 'OCR-A', monospace;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0;
}

input[type="text"]:focus {
    outline: none;
    border-color: #FF0000;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Buttons */
.launcher-button {
    background: linear-gradient(to bottom, #B22222, #8B0000); /* Nod red gradient for metallic depth */
    color: #FFFFFF;
    border: 3px solid #666666; /* Metallic gray border */
    padding: 12px 24px;
    font-family: 'OCR Valeria', monospace;
    font-size: 18px;
    cursor: pointer;
    text-shadow: 2px 2px #000000;
    width: 100%;
    margin: 10px 0;
    box-shadow: 0 0 15px rgba(178, 34, 34, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.2); /* Stronger red glow with metallic sheen */
    border-radius: 5px; /* Slight rounding for tech look */
    transition: all 0.3s ease;
}

.launcher-button:hover {
    background: linear-gradient(to bottom, #FF3333, #B22222); /* Lighter red gradient on hover */
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.9), inset 0 0 8px rgba(255, 255, 255, 0.3); /* Enhanced glow */
    transform: scale(1.05); /* Slight scale for emphasis */
}

.launcher-button:active {
    background: linear-gradient(to bottom, #8B0000, #5C0000); /* Darker red gradient on click */
    box-shadow: 0 0 10px rgba(178, 34, 34, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.1); /* Reduced glow */
    transform: scale(0.95); /* Slight shrink on click */
}

/* Horizontal rules */
hr {
    border: 0;
    height: 2px;
    background: #FF0000; /* Bright Nod red */
    margin: 10px 0;
}

/* Instruction text */
span {
    display: block;
    font-size: 12px;
    color: #FFFFFF; /* White text */
    text-shadow: 1px 1px #000000;
    margin: 5px 0;
}

/* Temporary console */
#temporary_console {
    background: #000000; /* Black for console */
    color: #FFFFFF;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #FF0000; /* Nod red border */
    font-size: 14px;
}