/* css/game.css */

/* --- MISSION CONTROL DASHBOARD --- */
.sim-dashboard {
  display: grid;
  /* Left Controls | Canvas | Right Telemetry */
  grid-template-columns: 220px 1fr 280px;
  gap: 0.75rem;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  font-family: 'Ubuntu Mono', monospace;
  color: #c7c8d9;
  height: 550px;
}

/* Panels (Glassmorphism look) */
.sim-panel {
  background: rgba(11, 16, 22, 0.95);
  border: 1px solid #333;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 4px;
  overflow-y: auto;
}

/* Left Panel Specifics */
.sim-panel.left { gap: 1.5rem; }

/* Right Panel Specifics (2 Column Data) */
.sim-panel.right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  gap: 1rem 1.5rem;
}

/* Full Width Row (Timer) */
.telemetry-row.full-width {
  grid-column: 1 / -1;
  border-bottom: 1px solid #333;
  margin-bottom: 0.5rem;
  padding-bottom: 0.75rem;
  text-align: center;
}

/* Control Groups */
.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.control-group label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #888888; /* Accent color */
  letter-spacing: 0.5px;
  font-weight: bold;
}

/* --- GAME CANVAS --- */
.sim-viewport {
  position: relative;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

canvas#sim-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(circle at center, #0d1b2a 0%, #000 100%);
  cursor: crosshair;
}

/* --- TELEMETRY DATA (Large Text) --- */
.telemetry-row {
  display: flex;
  flex-direction: column;
}

.telemetry-label {
  font-size: 0.85rem;
  color: #888;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.telemetry-value {
  font-size: 1.8rem; /* Large readable text */
  font-weight: bold;
  color: #fff;
  font-family: monospace;
  line-height: 1.2;
}

.telemetry-value.good { color: #00ffcc; }
.telemetry-value.warn { color: #ffcc00; }
.telemetry-value.danger { color: #ff3333; }

/* Game Buttons */
.sim-btn {
  width: 100%;
  padding: 12px 0;
  font-size: 0.9rem;
  background: rgba(0, 255, 204, 0.05);
  border: 1px solid #888888;
  color: #888888;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.2s;
}
.sim-btn:hover {
  background: #888888;
  color: #000;
  box-shadow: 0 0 10px #888888;
}

/* Sliders */
input[type=range] { width: 100%; accent-color: #888888; height: 6px; }

/* HUD (Warnings) */
.hud-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.hud-warning {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #ff3333;
  color: #ff3333;
  padding: 1.5rem 3rem;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: none;
  animation: pulse-warning 0.8s infinite alternate;
}

@keyframes pulse-warning {
  from { border-color: #ff3333; text-shadow: 0 0 10px #ff3333; }
  to { border-color: #550000; text-shadow: none; }
}

/* Responsive */
@media (max-width: 1024px) {
  .sim-dashboard { grid-template-columns: 1fr; height: auto; }
  .sim-viewport { height: 450px; }
  .sim-panel { overflow: visible; }
}