* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f0f1e; font-family: 'Segoe UI', sans-serif; overflow: hidden; color: white; }

#authScreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #1a1a2e, #16213e); display: flex; justify-content: center; align-items: center; z-index: 10000; }
.auth-container { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); text-align: center; max-width: 400px; width: 90%; }
.auth-container h1 { margin-bottom: 30px; font-size: 32px; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-input { width: 100%; padding: 12px 20px; margin: 10px 0; border: 2px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(255,255,255,0.05); color: white; font-size: 16px; }
.auth-btn { width: 100%; padding: 14px; margin: 10px 0; border: none; border-radius: 10px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 16px; font-weight: bold; cursor: pointer; }
.auth-btn.secondary { background: rgba(255,255,255,0.1); }

#lobbyScreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #1a1a2e, #16213e); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 20px; }
.lobby-container { max-width: 1200px; width: 100%; }
.lobby-container h2 { text-align: center; margin-bottom: 40px; font-size: 36px; }
.epochs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.epoch-card { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.3s; }
.epoch-card:hover { transform: translateY(-10px); border-color: #667eea; }
.epoch-card.locked { opacity: 0.5; cursor: not-allowed; }
.epoch-icon { font-size: 64px; margin-bottom: 20px; }
.epoch-card h3 { font-size: 24px; margin-bottom: 10px; }
.epoch-card p { color: rgba(255,255,255,0.6); margin-bottom: 20px; }

#gameContainer { display: none; position: relative; width: 100vw; height: 100vh; }
#gameCanvas { display: block; cursor: crosshair; }

#ui { position: absolute; top: 10px; left: 10px; z-index: 100; }
#ui .stat-box { background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 8px; margin-bottom: 6px; font-size: 14px; border: 1px solid rgba(255,255,255,0.1); }

#timeControls { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 10px; display: flex; gap: 10px; align-items: center; z-index: 100; }
.timeDisplay { font-size: 16px; font-weight: bold; min-width: 150px; text-align: center; }
.speedBtn { padding: 6px 12px; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: white; border-radius: 6px; cursor: pointer; font-size: 12px; }
.speedBtn.active { background: rgba(102, 126, 234, 0.4); border-color: #667eea; }

#toolbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 100; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); padding: 10px; border-radius: 12px; }
.tool-btn { padding: 10px 20px; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: white; border-radius: 8px; cursor: pointer; font-size: 14px; }
.tool-btn.active { background: rgba(102, 126, 234, 0.4); border-color: #667eea; }

#gameOver { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); backdrop-filter: blur(20px); padding: 40px 60px; border-radius: 20px; text-align: center; display: none; z-index: 200; }
#gameOver h2 { font-size: 36px; margin-bottom: 20px; color: #ff6b6b; }
#gameOver .stats { margin: 20px 0; font-size: 18px; }
#gameOver button { margin-top: 20px; padding: 12px 30px; font-size: 16px; background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 10px; color: white; cursor: pointer; font-weight: bold; }

#zoomIndicator { position: absolute; bottom: 80px; right: 20px; background: rgba(0,0,0,0.7); padding: 8px 16px; border-radius: 8px; font-size: 14px; z-index: 100; }
#userInfo { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 8px; z-index: 100; }
#logoutBtn { padding: 4px 12px; background: rgba(255,100,100,0.3); border: 1px solid rgba(255,100,100,0.5); color: white; border-radius: 6px; cursor: pointer; font-size: 12px; }
#epochIndicator { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); padding: 8px 20px; border-radius: 10px; font-size: 14px; z-index: 100; }
#miniMapContainer { position: absolute; top: 10px; right: 220px; width: 200px; height: 150px; background: rgba(0,0,0,0.7); border-radius: 10px; border: 2px solid rgba(255,255,255,0.2); overflow: hidden; z-index: 100; }
#miniMap { width: 100%; height: 100%; }

#buildingInfo {
  display: none;
  position: absolute;
  top: 100px;
  left: 10px;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  padding: 15px 20px;
  border-radius: 12px;
  border: 2px solid rgba(255,215,0,0.5);
  z-index: 100;
  min-width: 200px;
  color: white;
}

#buildingInfo h3 {
  margin: 0 0 10px 0;
  color: #FFD700;
  font-size: 18px;
}

#buildingInfo p {
  margin: 5px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

#buildingInfo strong {
  color: #FFD700;
}

#buildingInfo button {
  margin-top: 10px;
  padding: 5px 15px;
  background: rgba(255,100,100,0.3);
  border: 1px solid rgba(255,100,100,0.5);
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

#buildingInfo button:hover {
  background: rgba(255,100,100,0.5);
}