/* ============================================================
   LAYOUT - page shell: header bar, sidebar, main display area.
   ============================================================ */
/* The main page container that wraps the whole game. */
.game-container {
width: 95%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* The top header bar (credits, fuel, cargo, etc.). */
.header {
background: rgba(0, 30, 20, 0.6);
border: 2px solid #00ff88;
border-radius: 8px;
padding: 12px 20px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}
.header h1 { font-size: 1.5em; color: #00ff88; text-shadow: 0 0 10px #00ff88; letter-spacing: 3px; }
.header-stats { display: flex; flex-wrap: wrap; gap: 18px; font-size: 1em; }
.stat { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.stat-label { color: #66aaff; font-size: 0.9em; }
.stat-value { color: #88ccaa; font-weight: 700; }
.stat-value.credits { color: #ffdd00; text-shadow: 0 0 6px rgba(255, 221, 0, 0.6); }
.stat.credits { background: rgba(255, 221, 0, 0.08); border: 1px solid rgba(255, 221, 0, 0.4); border-radius: 6px; padding: 4px 10px; font-size: 1.05em; }
.stat-value.fuel-low { color: #ffaa00; }
.stat-value.fuel-critical { color: #ff4444; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* Two-column layout: sidebar left, display right. */
.main-content { display: flex; gap: 16px; flex: 1; }

/* Left sidebar with the navigation buttons. */
.nav-sidebar {
background: rgba(0, 30, 20, 0.4);
border: 2.25px solid #00aa56;
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 9.5px;
min-width: 160px;
height: fit-content;
}
.nav-btn {
background: rgba(0, 50, 30, 0.5);
border: 1px solid #00aa56;
color: #00ff88;
padding: 10px 12px;
text-align: left;
cursor: pointer;
border-radius: 4.5px;
font-family: 'IBM Plex Mono', 'Courier New', monospace;
font-size: 1.05em;
transition: all 0.2s;
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.nav-btn:hover { background: rgba(0, 80, 50, 0.6); border-color: #00ff88; transform: translateX(4px); }
.nav-btn.active { background: rgba(0, 100, 60, 0.7); border-color: #00ff88; box-shadow: 0 0 12px rgba(0, 255, 136, 0.6); }
.nav-btn .badge {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: #ffaa00; color: #000; border-radius: 50%;
min-width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 0.75em; font-weight: bold;
}

/* Main display area (every screen is drawn here). */
.main-display {
flex: 1;
background: rgba(0, 20, 15, 0.5);
border: 2.3px solid #00aa56;
border-radius: 8px;
padding: 20px;
overflow-y: auto;
max-height: calc(100vh - 160px);
min-height: 500px;
}
.main-display h2 { color: #00ff88; margin-bottom: 16px; border-bottom: 1px solid #00aa66; padding-bottom: 8px; text-shadow: 0 0 8px #00ff88; font-weight: 700; letter-spacing: 2px; }
.main-display h3 { color: #66aaff; margin: 12px 0 8px; font-weight: 700; letter-spacing: 1.5px; }