#game-screen { flex-direction: column; }
#game-container { display: flex; flex: 1; padding: 10px; gap: 10px; }
#corridor-panel { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#corridor-display {
  flex: 1;
  background: linear-gradient(180deg, #0a0a1a 0%, #0f1525 100%);
  border: 1px solid #1a3a4a;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
#corridor-canvas { width: 100%; height: 100%; }
#event-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,50,80,0.9);
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  display: none;
  animation: eventPulse 0.5s infinite;
}
@keyframes eventPulse { 50% { transform: translate(-50%, -50%) scale(1.05); } }
#warp-display {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(0,20,40,0.85);
  border: 1px solid #1a3a4a;
  border-radius: 8px;
  padding: 12px 18px;
}
.warp-factor { font-size: 32px; font-weight: bold; color: #00ffcc; }
.warp-label { font-size: 10px; color: #5a8a9a; }
.warp-max { font-size: 11px; color: #ffcc00; margin-top: 4px; }
#status-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 8px 12px;
  background: #0d1520;
  border: 1px solid #1a3a4a;
  border-radius: 8px;
}
.status-item { display: flex; flex-direction: column; }
.status-label { font-size: 8px; color: #5a8a9a; text-transform: uppercase; }
.status-value { font-size: 14px; font-weight: bold; }
.critical { color: #ff4466 !important; animation: pulse 0.5s infinite; }
.warning { color: #ffaa22 !important; }
.good { color: #00ff88; }
@keyframes pulse { 50% { opacity: 0.5; } }
.stress-bar-container { height: 5px; background: #1a2a3a; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.stress-bar { height: 100%; transition: width 0.2s; }
.stress-structural { background: linear-gradient(90deg, #ffaa22, #ff4466); }
#controls-panel { width: 320px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
#mission-header {
  background: linear-gradient(135deg, #1a2a3a 0%, #0d1520 100%);
  border: 1px solid #1a3a4a;
  border-radius: 8px;
  padding: 10px;
}
.mission-title { font-size: 11px; color: #ffcc00; margin-bottom: 6px; }
.mission-progress-bar { height: 10px; background: #1a2a3a; border-radius: 5px; overflow: hidden; margin-top: 4px; }
.mission-progress-fill { height: 100%; background: linear-gradient(90deg, #00ccff, #00ffcc); transition: width 0.3s; }
.mission-stats { display: flex; gap: 12px; margin-top: 6px; font-size: 9px; flex-wrap: wrap; }
#coherence-display {
  background: #0d1520;
  border: 1px solid #1a3a4a;
  border-radius: 8px;
  padding: 10px;
}
#coherence-bar-bg { height: 14px; background: #1a2a3a; border-radius: 7px; overflow: hidden; margin-top: 6px; }
#coherence-bar { height: 100%; background: linear-gradient(90deg, #ff4466, #ffaa22, #00ff88); transition: width 0.1s; border-radius: 7px; }
#message-display { text-align: center; padding: 6px; font-size: 10px; color: #7ab; min-height: 26px; }
.generator-card {
  background: linear-gradient(135deg, #0d1520 0%, #1a2530 100%);
  border: 1px solid #1a3a4a;
  border-radius: 8px;
  padding: 8px;
}
.generator-card.desynced { border-color: #ff4466; box-shadow: 0 0 10px rgba(255,68,102,0.3); }
.gen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #1a3a4a;
}
.gen-title { font-size: 10px; font-weight: bold; }
.gen-desc { font-size: 8px; color: #5a7a8a; margin-top: 2px; }
.gen-status { font-size: 8px; padding: 2px 5px; border-radius: 8px; }
.gen-status.locked { background: #00aa66; color: #000; }
.gen-status.drifting { background: #ff4466; color: #fff; }
.gen-status.unstable { background: #ffaa22; color: #000; }
.control-row { display: flex; align-items: center; margin: 4px 0; gap: 6px; flex-wrap: wrap; }
.control-label { width: 50px; font-size: 9px; color: #7ab; }
.control-slider {
  flex: 1;
  min-width: 100px;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #1a2a3a;
  outline: none;
}
.control-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00ccff;
  cursor: pointer;
  box-shadow: 0 0 6px #00ccff;
}
.control-value { width: 40px; text-align: right; font-size: 10px; color: #0ff; }
.target-indicator { font-size: 8px; color: #ffcc00; }
.drift-indicator { font-size: 8px; color: #ff6699; }
.control-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  width: 100%;
}
.control-input {
  width: 70px;
  padding: 4px 6px;
  background: #0d1520;
  border: 1px solid #1a3a4a;
  border-radius: 4px;
  color: #00ffcc;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  text-align: center;
}
.control-input:focus {
  outline: none;
  border-color: #00ccff;
  box-shadow: 0 0 4px rgba(0,204,255,0.3);
}
.control-btn-group {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.control-btn {
  padding: 4px 8px;
  background: #1a2a3a;
  border: 1px solid #3a5a6a;
  border-radius: 4px;
  color: #00ccff;
  font-size: 8px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 32px;
}
.control-btn:hover {
  background: #00ccff;
  color: #000;
  box-shadow: 0 0 6px #00ccff;
}
.control-btn:active {
  transform: scale(0.95);
}
.control-btn.fine {
  font-size: 7px;
  padding: 4px 6px;
  min-width: 28px;
}
.shake { animation: shake 0.1s infinite; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) translateY(2px); }
  75% { transform: translateX(3px) translateY(-2px); }
}